/* =============================================================
   TRUST Foundation — shared design system
   t-r-u-s-t.org · pure static HTML/CSS/JS · no build step
   Palette: "Oxford Blue + Brass" — deep warm blues, warm paper
   neutrals, brass as a sparse accent. Deliberately distinct from
   the SCI:FI Lab site (cobalt/cyan): deeper, warmer, institutional.
   Type:    Libre Baskerville (headings) · Inter (body)
   ============================================================= */

/* ---------- 1. Design tokens ---------- */
:root{
  /* Blues */
  --blue-900: #112A42;  /* footer background, deepest                 */
  --blue-800: #16324F;  /* H1, header wordmark, primary brand blue    */
  --blue-700: #1F456B;  /* BUTTONS + LINKS (the action color)         */
  --blue-600: #2C4A66;  /* H2, section dividers, button hover-target  */
  --blue-500: #3C5C7C;  /* stronger borders, muted headings           */

  /* Accent — sparse only */
  --brass:    #B0894A;  /* accent rules, framework accent, active mark */
  --brass-dk: #8F6E38;  /* brass hover (rare)                          */

  /* Neutrals (warm) */
  --slate:    #4A5965;  /* body text                                   */
  --slate-lt: #7A8893;  /* captions, muted text                        */
  --paper:    #F7F5F0;  /* warm off-white — alternating section bg     */
  --grey-lt:  #EDEBE6;  /* secondary light surface                     */
  --hairline: #E0DDD4;  /* warm hairline rules / card borders          */
  --white:    #FFFFFF;

  --serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans:  "Inter", "Open Sans", -apple-system, "Segoe UI", Arial, sans-serif;

  --container: 72rem;          /* 1152px */
  --container-narrow: 46rem;   /* ~62ch prose measure at body size */
  --header-h: 4.5rem;

  --shadow-lift: 0 16px 32px rgba(17,42,66,.09);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset / base ---------- */
*,
*::before,
*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 1rem);
}

body{
  margin:0;
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--slate);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

img,video{ max-width:100%; height:auto; display:block; }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:700;
  line-height:1.25;
  margin:0 0 1rem;
  color:var(--blue-800);
}
h1{ font-size:clamp(2.25rem, 5vw, 3.5rem); letter-spacing:-.01em; }
h2{ font-size:1.9375rem; color:var(--blue-600); }
h3{ font-size:1.3125rem; }

p{ margin:0 0 1.25rem; }
p:last-child{ margin-bottom:0; }

a{
  color:var(--blue-700);
  text-decoration:none;
  transition:color .18s var(--ease);
}
a:hover{
  color:var(--blue-800);
  text-decoration:underline;
  text-underline-offset:.2em;
}

ul,ol{ margin:0 0 1.25rem; padding-left:1.25rem; }

strong{ color:var(--blue-600); }

::selection{ background:var(--blue-700); color:var(--white); }

/* Visible keyboard focus everywhere */
:focus-visible{
  outline:2px solid var(--blue-700);
  outline-offset:3px;
  border-radius:2px;
}

.hidden{ display:none !important; }

/* ---------- 3. Utilities ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:1.5rem;
}
.container--narrow{ max-width:var(--container-narrow); }

.lead{
  font-size:1.1875rem;
  line-height:1.65;
  color:var(--blue-600);
}

/* Small uppercase kicker above section headings, with a brass tick */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  margin:0 0 1rem;
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--blue-500);
}
.eyebrow::before{
  content:"";
  width:2rem;
  height:1px;
  background:var(--brass);
}

.skip-link{
  position:absolute;
  left:-999px;
  top:0;
  z-index:200;
  padding:.75rem 1.25rem;
  background:var(--blue-900);
  color:var(--white);
  text-decoration:none;
}
.skip-link:focus{ left:0; }

/* ---------- 4. Sections (alternate white / warm paper) ---------- */
.section{ padding:5rem 0; }
.section--grey{ background:var(--paper); }

.section-head{ max-width:46rem; margin-bottom:3rem; }

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-block;
  padding:.8125rem 1.75rem;
  border:1px solid var(--blue-700);
  border-radius:6px;
  background:var(--blue-700);
  color:var(--white);
  font-family:var(--sans);
  font-size:1rem;
  font-weight:600;
  line-height:1.4;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .2s var(--ease), border-color .2s var(--ease),
             color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover{
  background:var(--blue-800);
  border-color:var(--blue-800);
  color:var(--white);
  text-decoration:none;
  transform:translateY(-1px);
}
.btn:active{ transform:translateY(0); }

.btn--ghost{
  background:transparent;
  color:var(--blue-700);
}
.btn--ghost:hover{
  background:var(--blue-700);
  color:var(--white);
}

.btn[aria-disabled="true"],
.btn:disabled{
  background:var(--grey-lt);
  border-color:var(--hairline);
  color:var(--slate-lt);
  cursor:not-allowed;
  transform:none;
}

.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:2rem;
}

/* ---------- 6. Header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--white);
  border-bottom:1px solid var(--hairline);
}
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  min-height:var(--header-h);
}

.brand{
  display:block;
  text-decoration:none;
  color:var(--blue-800);
  line-height:1.2;
}
.brand:hover{ text-decoration:none; }
.brand__wordmark{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.75rem;
  letter-spacing:.07em;
  color:var(--blue-800);
}
.brand__wordmark .dot{ color:var(--brass); }
.brand__sub{
  display:block;
  font-size:.5625rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--slate-lt);
  margin-top:.1875rem;
  white-space:nowrap;
}
@media (max-width:560px){
  .brand__sub{ display:none; }
  .brand__wordmark{ font-size:1.5rem; }
}

/* Nav */
.site-nav ul{
  display:flex;
  align-items:center;
  gap:1.75rem;
  margin:0;
  padding:0;
  list-style:none;
}
.site-nav a{
  display:inline-block;
  padding:.375rem 0;
  font-size:1.05rem;
  font-weight:500;
  white-space:nowrap;
  color:var(--blue-800);
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.site-nav a:hover{ color:var(--blue-700); text-decoration:none; }
.site-nav a[aria-current="page"]{
  color:var(--blue-800);
  border-bottom-color:var(--brass);
}

/* Hamburger (hidden on desktop) */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:2.75rem;
  height:2.75rem;
  padding:.625rem;
  background:none;
  border:1px solid var(--hairline);
  border-radius:6px;
  cursor:pointer;
}
.nav-toggle__bar{
  display:block;
  width:100%;
  height:2px;
  background:var(--blue-800);
  transition:transform .25s var(--ease), opacity .25s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

@media (max-width:1080px){
  .nav-toggle{ display:flex; }

  .site-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--white);
    border-bottom:1px solid var(--hairline);
    box-shadow:var(--shadow-lift);
    display:none;
  }
  .site-nav.is-open{ display:block; }

  .site-nav ul{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:.5rem 1.5rem 1rem;
  }
  .site-nav li{ border-bottom:1px solid var(--hairline); }
  .site-nav li:last-child{ border-bottom:none; }
  .site-nav a{
    display:block;
    padding:.875rem 0;
    border-bottom:none;
  }
  .site-nav a[aria-current="page"]{
    color:var(--blue-700);
    box-shadow:inset 3px 0 0 var(--brass);
    padding-left:.75rem;
  }
}

/* ---------- 7. Hero bands ----------
   Every page opens with a solid deep Oxford navy band sitting
   directly under the white header. Home gets the tall version
   (.hero); subpages the short one (.page-hero, §14). */
.hero,
.page-hero{
  position:relative;
  background:var(--blue-800);
  color:rgba(255,255,255,.82);
}
.hero > .container,
.page-hero > .container{ position:relative; }

/* Type on the dark band */
.hero h1,
.page-hero h1{ color:var(--white); }
.hero .lead,
.page-hero .lead{ color:#C6D2DE; }
.hero p{ color:rgba(255,255,255,.78); }
.hero .eyebrow,
.page-hero .eyebrow{ color:rgba(255,255,255,.66); }
.hero strong{ color:rgba(255,255,255,.95); }

/* Buttons on the dark band: light primary + light ghost */
.hero .btn{
  background:var(--white);
  border-color:var(--white);
  color:var(--blue-800);
}
.hero .btn:hover{
  background:var(--paper);
  border-color:var(--paper);
  color:var(--blue-900);
}
.hero .btn--ghost{
  background:transparent;
  border-color:rgba(255,255,255,.55);
  color:var(--white);
}
.hero .btn--ghost:hover{
  background:var(--white);
  border-color:var(--white);
  color:var(--blue-800);
}

/* Focus must stay visible on navy */
.hero :focus-visible,
.page-hero :focus-visible{ outline-color:var(--white); }

.hero{ padding:6rem 0 5.5rem; }
.hero h1{ margin-bottom:1.25rem; }
.hero .lead{ margin-bottom:1.5rem; }

.pullquote{
  margin:0;
  padding:1.5rem 0 1.5rem 1.75rem;
  border-left:2px solid var(--brass);
  font-family:var(--serif);
  font-style:italic;
  font-size:1.375rem;
  line-height:1.5;
  color:var(--blue-800);
}
.pullquote cite{ font-style:normal; font-size:.875rem; color:var(--slate-lt); }
.hero .pullquote{ color:var(--white); }
.hero .pullquote p{ color:var(--white); }

/* Quiet hero sidebar: the five letters, stacked on navy */
.hero__letters{
  border-top:1px solid rgba(255,255,255,.18);
  padding-top:.5rem;
  margin:0;
  padding-left:0;
}
.hero__letters li{
  display:flex;
  align-items:baseline;
  gap:1.25rem;
  padding:.875rem 0;
  border-bottom:1px solid rgba(255,255,255,.18);
  list-style:none;
}
.hero__letters .letter{
  font-family:var(--serif);
  font-weight:700;
  font-size:2rem;
  line-height:1;
  color:var(--brass);
  width:2.25rem;
  flex:none;
  text-align:center;
}
.hero__letters .label{
  font-size:.9375rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#C6D2DE;
}

@media (max-width:860px){
  .hero{ padding:4rem 0 3.5rem; }
}

/* ---------- 8. (removed) T·R·U·S·T letter-card signature ----------
   The large five-letter framework cards were replaced by the compact
   Five Elements glossary on framework.html — see §33 (.elements-list). */

/* ---------- 9. Cards ---------- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
  gap:1.5rem;
}

.card{
  position:relative;
  background:var(--white);
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:1.875rem 1.625rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             border-color .25s var(--ease);
}
.section--grey .card{ box-shadow:0 1px 3px rgba(17,42,66,.04); }
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lift);
  border-color:var(--blue-500);
}
.card h3{ margin-bottom:.625rem; }
.card p{ font-size:.9375rem; }

.card__num{
  display:block;
  font-family:var(--serif);
  font-size:.875rem;
  color:var(--brass);
  margin-bottom:.875rem;
}

/* Whole-card click target: an anchor inside a .card--link is
   stretched over the full card surface. */
.card--link .card__link::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:8px;
}
.card--link .card__link{
  color:inherit;
  text-decoration:none;
}
.card--link .card__link:hover{ text-decoration:none; color:inherit; }
.card--link:focus-within{
  outline:2px solid var(--blue-700);
  outline-offset:3px;
}
.card--link .card__link:focus-visible{ outline:none; }

.flag{
  position:absolute;
  top:1.25rem;
  right:1.25rem;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--brass);
  border:1px solid var(--brass);
  border-radius:99px;
  padding:.2rem .7rem;
}
.card--flagship{ border-color:var(--brass); }
.card--flagship:hover{ border-color:var(--brass-dk); }

/* Publication card */
.pub-card{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:2rem;
  background:var(--white);
  border:1px solid var(--hairline);
  border-left:3px solid var(--brass);
  border-radius:8px;
  padding:2.25rem 2.5rem;
  align-items:center;
}
.pub-card__year{
  font-family:var(--serif);
  font-weight:700;
  font-size:2.75rem;
  line-height:1;
  color:var(--blue-500);
}
.pub-card h3{ margin-bottom:.5rem; }
.pub-card .journal{ font-style:italic; }
@media (max-width:680px){
  .pub-card{ grid-template-columns:1fr; gap:1.25rem; padding:1.75rem 1.5rem; }
}

/* ---------- 10. Three-system architecture ---------- */
.systems{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.5rem;
}
.systems .card{ padding-top:2.25rem; }
@media (max-width:860px){
  .systems{ grid-template-columns:1fr; }
}

/* ---------- 11. Placeholder boxes (labeled, never broken images) ---------- */
.placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:14rem;
  padding:2rem;
  border:2px dashed var(--hairline);
  border-radius:8px;
  background:repeating-linear-gradient(
    -45deg,
    var(--white) 0 .75rem,
    var(--paper) .75rem 1.5rem
  );
  text-align:center;
}
.placeholder__label{
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue-600);
  background:var(--white);
  border:1px solid var(--hairline);
  border-radius:99px;
  padding:.375rem 1rem;
}
.placeholder__note{ font-size:.875rem; margin:0; color:var(--slate-lt); }

/* ---------- 12. Footer ---------- */
.site-footer{
  background:var(--blue-900);
  color:rgba(255,255,255,.78);
  font-size:.9375rem;
}
.site-footer__grid{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,3fr);
  gap:3rem;
  padding:4rem 0 3rem;
}
.site-footer h4{
  color:var(--white);
  font-family:var(--sans);
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:1.25rem;
}
.site-footer .brand__wordmark{ color:var(--white); }
.site-footer .brand__sub{ color:rgba(255,255,255,.6); }
.site-footer p{ margin-bottom:.5rem; }
.site-footer a{ color:rgba(255,255,255,.85); }
.site-footer a:hover{ color:var(--brass); }

.footer-nav ul{ list-style:none; margin:0; padding:0; }
.footer-nav li{ margin-bottom:.5rem; }
.footer-nav a{ text-decoration:none; }
.footer-nav a:hover{ text-decoration:underline; }

.footer-identity .org-name{
  margin:1.25rem 0 .25rem;
  color:var(--white);
}
.footer-identity .org-meta{ margin-bottom:.25rem; }
.footer-identity .org-email{ margin-top:.75rem; }

/* Social icons: circular outline, brass border on hover */
.social{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  list-style:none;
  margin:0;
  padding:0;
}
.social a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.625rem;
  height:2.625rem;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  color:rgba(255,255,255,.85);
  transition:border-color .2s var(--ease), color .2s var(--ease),
             transform .2s var(--ease);
}
.social a:hover{
  border-color:var(--brass);
  color:var(--brass);
  transform:translateY(-2px);
}
.social svg{ width:1.125rem; height:1.125rem; fill:currentColor; }

.site-footer__bottom{
  border-top:1px solid rgba(255,255,255,.14);
  padding:1.5rem 0;
  font-size:.875rem;
  color:rgba(255,255,255,.55);
}

@media (max-width:860px){
  .site-footer__grid{ grid-template-columns:1fr; gap:2.5rem; padding:3rem 0 2.5rem; }
}

/* ---------- 13. Scroll reveal ----------
   Hidden state applies ONLY when js/main.js has tagged <html class="js">,
   so content is always visible with JS disabled. */
html.js .reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
html.js .reveal.is-visible{
  opacity:1;
  transform:none;
}
html.js .reveal:nth-child(2){ transition-delay:.08s; }
html.js .reveal:nth-child(3){ transition-delay:.16s; }
html.js .reveal:nth-child(4){ transition-delay:.24s; }
html.js .reveal:nth-child(5){ transition-delay:.32s; }

/* ---------- 14. Page hero (subpage band — short variant) ----------
   Shares the navy band treatment defined in §7; kept under ~40vh
   so subpages don't feel heavy. */
.page-hero{
  padding:4rem 0 3.75rem;
}
.page-hero h1{
  margin-bottom:.75rem;
  font-size:clamp(2rem, 4vw, 2.875rem);
}
.page-hero .lead{ max-width:46rem; }
@media (max-width:540px){
  .page-hero{ padding:3rem 0 2.75rem; }
}

/* ---------- 15. People (board + participants) ---------- */
.person-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(16rem, 1fr));
  gap:1.5rem;
}
.person-card{
  background:var(--white);
  border:1px solid var(--hairline);
  border-radius:8px;
  overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             border-color .25s var(--ease);
}
.person-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lift);
  border-color:var(--blue-500);
}
.person-card__photo{
  aspect-ratio:1 / 1;
  width:100%;
  object-fit:cover;
  border-bottom:1px solid var(--hairline);
}
.person-card__photo--placeholder{
  aspect-ratio:1 / 1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-bottom:2px dashed var(--hairline);
  background:repeating-linear-gradient(
    -45deg,
    var(--white) 0 .75rem,
    var(--paper) .75rem 1.5rem
  );
  text-align:center;
  padding:1rem;
}
.person-card__body{ padding:1.375rem 1.375rem 1.5rem; }
.person-card__name{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.125rem;
  color:var(--blue-800);
  margin:0 0 .25rem;
}
.person-card__role{
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--blue-700);
  margin:0 0 .375rem;
}
.person-card__meta{
  font-size:.875rem;
  color:var(--slate-lt);
  margin:0 0 .75rem;
}
.person-card details{ font-size:.9063rem; }
.person-card summary{
  cursor:pointer;
  color:var(--blue-700);
  font-weight:600;
  font-size:.875rem;
}
.person-card summary:hover{ color:var(--blue-800); }
.person-card details[open] summary{ margin-bottom:.5rem; }
.person-card details p{ font-size:.875rem; line-height:1.65; }

/* ---------- 16. Document list + status badges ---------- */
.doc-list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--hairline);
}
.doc-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
  padding:1.125rem .25rem;
  border-bottom:1px solid var(--hairline);
  transition:background-color .2s var(--ease);
}
.doc-list li:hover{ background:var(--paper); }
.doc-list .doc-title{
  font-family:var(--serif);
  font-weight:700;
  color:var(--blue-800);
}
.badge{
  display:inline-block;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  border-radius:99px;
  padding:.25rem .75rem;
  border:1px solid var(--hairline);
  color:var(--slate-lt);
}
.badge--available{ border-color:var(--blue-700); color:var(--blue-700); }
.badge--pending{ border-color:var(--hairline); color:var(--slate-lt); }
.badge--coming-soon{ border-color:var(--brass); color:var(--brass); }

/* ---------- 17. Events ---------- */
.event-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 2rem;
  margin:0 0 1.5rem;
  padding:0;
  list-style:none;
  font-size:.9375rem;
  color:var(--blue-600);
}
.event-meta strong{
  display:block;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slate-lt);
}
.video-frame{
  border:1px solid var(--hairline);
  border-radius:8px;
  overflow:hidden;
  background:var(--blue-900);
}
.video-frame video{ width:100%; display:block; }
.logo-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2.5rem;
  padding:1.5rem 0;
}
.logo-row img{ max-height:4.5rem; width:auto; }

/* ---------- 18. TRUST Atlas ---------- */
.atlas-card{
  background:var(--white);
  border:1px solid var(--hairline);
  border-top:3px solid var(--brass);
  border-radius:8px;
  padding:2.5rem;
}
.atlas-facts{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr));
  gap:1.25rem;
  margin:1.75rem 0;
  padding:0;
  list-style:none;
}
.atlas-facts strong{
  display:block;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slate-lt);
  margin-bottom:.25rem;
}
.atlas-facts span{ color:var(--blue-600); font-size:.9375rem; }
.timeline{
  list-style:none;
  margin:1rem 0 0;
  padding:0;
  border-top:1px solid var(--hairline);
}
.timeline li{
  display:grid;
  grid-template-columns:8rem 1fr;
  gap:1.5rem;
  padding:.75rem .25rem;
  border-bottom:1px solid var(--hairline);
  font-size:.9375rem;
}
.timeline .time{
  font-family:var(--serif);
  color:var(--brass);
  white-space:nowrap;
}
@media (max-width:540px){
  .timeline li{ grid-template-columns:5.5rem 1fr; gap:1rem; }
  .atlas-card{ padding:1.75rem 1.5rem; }
}

/* ---------- 18b. Nav dropdown (Events ▾) ---------- */
.site-nav li{ position:relative; }
.nav-item--dropdown{ display:flex; align-items:center; gap:.125rem; }
.nav-drop-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.625rem;
  height:1.625rem;
  background:none;
  border:none;
  border-radius:4px;
  cursor:pointer;
  color:var(--blue-800);
  font-size:.7rem;
  line-height:1;
  transition:transform .2s var(--ease);
}
.nav-drop-toggle:hover{ color:var(--blue-700); }
.nav-item--dropdown.is-open > .nav-drop-toggle{ transform:rotate(180deg); }
/* Scoped under .site-nav so these beat `.site-nav ul{display:flex}`
   (which otherwise forces the submenu into an always-on horizontal bar). */
.site-nav .nav-dropdown{
  position:absolute;
  top:100%;
  left:0;
  z-index:120;
  min-width:12.5rem;
  margin:0;
  padding:.375rem 0;
  list-style:none;
  background:var(--white);
  border:1px solid var(--hairline);
  border-radius:6px;
  box-shadow:var(--shadow-lift);
  display:none;
}
.site-nav .nav-item--dropdown.is-open .nav-dropdown{ display:block; }
.site-nav .nav-dropdown li{ border-bottom:none; }
.site-nav .nav-dropdown a{
  display:block;
  padding:.5rem 1.125rem;
  font-size:.95rem;
  border-bottom:none;
}
.site-nav .nav-dropdown a:hover{ background:var(--paper); color:var(--blue-700); }
.site-nav .nav-dropdown a[aria-current="page"]{
  box-shadow:inset 3px 0 0 var(--brass);
  color:var(--blue-700);
  border-bottom:none;
}
@media (min-width:1081px){
  /* No-JS fallback only: open on hover / keyboard focus via pure CSS.
     With JS present (html.js) the open state is driven entirely by the
     .is-open class so the close behaviours below stay authoritative. */
  html:not(.js) .site-nav .nav-item--dropdown:hover .nav-dropdown,
  html:not(.js) .site-nav .nav-item--dropdown:focus-within .nav-dropdown{ display:block; }
}
@media (max-width:1080px){
  /* Mobile: expandable group inside the hamburger panel */
  .nav-item--dropdown{ flex-wrap:wrap; }
  .nav-item--dropdown > a{ flex:1; }
  .nav-drop-toggle{ width:2.75rem; height:2.75rem; font-size:.85rem; }
  .site-nav .nav-dropdown{
    position:static;
    flex-basis:100%;
    border:none;
    border-radius:0;
    box-shadow:none;
    background:transparent;
    padding:0 0 .625rem 1.25rem;
  }
  .site-nav .nav-dropdown a{ padding:.625rem 0; }
  .site-nav .nav-dropdown a[aria-current="page"]{ padding-left:.75rem; }
}

/* ---------- 18c. Notice card + Atlas episodes ---------- */
.notice-card{
  background:var(--paper);
  border:1px solid var(--hairline);
  border-left:3px solid var(--brass);
  border-radius:8px;
  padding:1.5rem 1.75rem;
}
.notice-card h3{ margin-bottom:.375rem; }
.notice-card p{ font-size:.9375rem; }

.atlas-episodes{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr));
  gap:1.5rem;
}
.episode-card .video-embed{
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  border:0;
  border-radius:6px;
  background:var(--blue-900);
  margin:1rem 0;
}
.episode-card__meta{ font-size:.875rem; color:var(--slate-lt); margin-bottom:.25rem; }
.episode-card__links{
  display:flex;
  flex-wrap:wrap;
  gap:.375rem 1.25rem;
  font-size:.875rem;
  margin-top:.75rem;
  padding-top:.75rem;
  border-top:1px solid var(--hairline);
}

/* ---------- 19. Read More / Read Less ----------
   Collapsible region animated with the grid-rows trick.
   Without JS: content fully visible, toggle button hidden. */
.readmore__extra{
  display:grid;
  grid-template-rows:1fr;
  transition:grid-template-rows .4s var(--ease);
}
html.js .readmore:not(.is-open) .readmore__extra{ grid-template-rows:0fr; }
.readmore__extra-inner{ overflow:hidden; }
html.js .readmore:not(.is-open) .readmore__extra-inner{
  visibility:hidden;
  transition:visibility 0s .4s;
}
.readmore.is-open .readmore__extra-inner{ visibility:visible; }
.readmore-toggle{ margin-top:1rem; }
html:not(.js) .readmore-toggle{ display:none; }
.readmore-toggle .when-open{ display:none; }
.readmore.is-open .readmore-toggle .when-open{ display:inline; }
.readmore.is-open .readmore-toggle .when-closed{ display:none; }

/* ---------- 20. Forms (Contact) ---------- */
.form-grid{
  display:grid;
  gap:1.25rem;
  max-width:38rem;
}
.form-field label{
  display:block;
  font-size:.875rem;
  font-weight:600;
  color:var(--blue-600);
  margin-bottom:.375rem;
}
.form-field .req{ color:var(--brass-dk); }
.form-field input,
.form-field textarea,
.form-field select{
  width:100%;
  padding:.75rem .875rem;
  font-family:var(--sans);
  font-size:1rem;
  color:var(--blue-900);
  background:var(--white);
  border:1px solid var(--hairline);
  border-radius:6px;
  transition:border-color .2s var(--ease);
}
/* Brass focus accent on the active field */
.form-field input:focus-visible,
.form-field textarea:focus-visible,
.form-field select:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:1px;
  border-color:var(--brass);
}
.form-field input.is-invalid,
.form-field textarea.is-invalid,
.form-field select.is-invalid{ border-color:var(--brass-dk); }
.form-error{
  display:none;
  font-size:.8125rem;
  color:var(--brass-dk);
  font-weight:600;
  margin:.375rem 0 0;
}
.form-field.has-error .form-error{ display:block; }

.form-status{
  display:none;
  margin-top:1.25rem;
  padding:1rem 1.25rem;
  border-radius:6px;
  font-size:.9375rem;
}
.form-status.is-success{
  display:block;
  background:var(--paper);
  border:1px solid var(--blue-700);
  color:var(--blue-800);
}
.form-status.is-error{
  display:block;
  background:var(--paper);
  border:1px solid var(--brass-dk);
  color:var(--slate);
}

.form-privacy{
  font-size:.8125rem;
  color:var(--slate-lt);
  margin-top:1rem;
}

.form-note{
  font-size:.875rem;
  color:var(--slate);
  border-left:2px solid var(--brass);
  padding-left:1rem;
}
fieldset{ border:none; margin:0; padding:0; }

/* ---------- 21. Reduced motion: no-op all movement ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
  }
  html.js .reveal{ opacity:1; transform:none; }
  .card:hover,
  .person-card:hover,
  .btn:hover,
  .social a:hover{ transform:none; }
}

/* ---------- 22. Small-screen typography ---------- */
@media (max-width:540px){
  .section{ padding:3.5rem 0; }
  h2{ font-size:1.625rem; }
  .pub-card__year{ font-size:2rem; }
}

/* ---------- 23. Event story (Vienna 2023 — five-part arc) ----------
   The inaugural meeting told as a story: Setting → Meeting → Outcome
   (this file) then People (§15) and Supported by + The Place. */
.event-story > * + *{ margin-top:3rem; }

/* 1. The Setting — full-width photo with the title overlaid */
.story-setting{
  position:relative;
  margin:0;
  border:1px solid var(--hairline);
  border-radius:8px;
  overflow:hidden;
  background:var(--blue-900);
}
.story-setting img{
  width:100%;
  aspect-ratio:16 / 7;
  object-fit:cover;
}
.story-setting__caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:3rem 2rem 1.75rem;
  background:linear-gradient(180deg,
    rgba(17,42,66,0) 0%, rgba(17,42,66,.5) 45%, rgba(17,42,66,.9) 100%);
  color:var(--white);
}
.story-setting__caption .eyebrow{ margin-bottom:.5rem; color:rgba(255,255,255,.82); }
.story-setting__title{
  color:var(--white);
  margin:0 0 .5rem;
  font-size:clamp(1.4rem, 3.2vw, 2.125rem);
}
.story-setting__place{ margin:0; font-size:.9375rem; color:rgba(255,255,255,.88); }
.story-rule{
  width:3rem; height:2px;
  background:var(--brass);
  border:none;
  margin:.5rem 0 .875rem;
}
@media (max-width:600px){
  .story-setting img{ aspect-ratio:4 / 3; }
  .story-setting__caption{ padding:2rem 1.25rem 1.25rem; }
}

/* 2. The Meeting — description (left) + video (right) */
.story-meeting{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.5rem;
  align-items:start;
}
@media (max-width:860px){
  .story-meeting{ grid-template-columns:1fr; gap:2rem; }
}

/* 3. The Outcome — paper band + citation card */
.story-outcome .notice-card .eyebrow{ margin-bottom:.5rem; }
.citation{ font-size:.9375rem; line-height:1.6; margin:0; }
.citation .journal{ font-style:italic; }

/* 5. Supported by + The Place */
.story-place{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  align-items:start;
}
.venue-card address{
  font-style:normal;
  color:var(--slate);
  font-size:.9375rem;
  line-height:1.6;
  margin:0 0 1rem;
}
.supporters .logo-row a{ display:inline-flex; }
.supporters .logo-row img{
  filter:grayscale(1);
  opacity:.78;
  transition:filter .25s var(--ease), opacity .25s var(--ease);
}
.supporters .logo-row a:hover img{ filter:none; opacity:1; }
@media (max-width:860px){
  .story-place{ grid-template-columns:1fr; gap:1.5rem; }
}

/* ---------- 24. Footer secondary links + breadcrumb ---------- */
/* Thin hairline separating secondary (Governance/Privacy) from primary links */
.footer-nav__sep{
  list-style:none;
  height:0;
  margin:.625rem 0;
  border-top:1px solid rgba(255,255,255,.16);
}
.footer-nav a[aria-current="page"]{ color:var(--brass); }

/* Breadcrumb on a navy page-hero (e.g. Governance) */
.breadcrumb{
  font-size:.8125rem;
  letter-spacing:.04em;
  margin:0 0 .75rem;
  color:rgba(255,255,255,.7);
}
.breadcrumb a{ color:rgba(255,255,255,.85); }
.breadcrumb a:hover{ color:var(--brass); text-decoration:none; }
.breadcrumb .sep{ color:var(--brass); margin:0 .45rem; }

/* ---------- 25. Network signup form ---------- */
/* Form sits in a paper card with a brass left rule (highlight-band pattern) */
.signup-card{
  background:var(--paper);
  border:1px solid var(--hairline);
  border-left:3px solid var(--brass);
  border-radius:8px;
  padding:2rem 2.25rem 2.25rem;
}
@media (max-width:540px){ .signup-card{ padding:1.5rem 1.25rem; } }

/* Two-column field layout on desktop, single column on mobile */
.form-grid--2col{
  grid-template-columns:1fr 1fr;
  max-width:none;
}
.form-grid--2col .form-field--full{ grid-column:1 / -1; }
@media (max-width:640px){
  .form-grid--2col{ grid-template-columns:1fr; }
}

/* Checkbox / consent groups */
.check-group{ margin:0; padding:0; border:none; }
.check-group legend{
  font-size:.875rem;
  font-weight:600;
  color:var(--blue-600);
  margin-bottom:.625rem;
  padding:0;
}
.check-group legend .req{ color:var(--brass-dk); }
.check-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem .75rem; }
@media (max-width:540px){ .check-grid{ grid-template-columns:1fr; } }
.check-row{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  font-size:.9375rem;
  line-height:1.5;
}
.check-row input{
  margin:.2rem 0 0;
  flex:none;
  width:1.05rem;
  height:1.05rem;
  accent-color:var(--blue-700);
}
.check-row label{ margin:0; font-weight:400; color:var(--slate); }
.consent-row{ margin-top:.25rem; }

/* Success confirmation card (replaces the form on success) */
.signup-success{
  display:flex;
  gap:1.125rem;
  align-items:flex-start;
  background:var(--paper);
  border:1px solid var(--hairline);
  border-left:3px solid var(--brass);
  border-radius:8px;
  padding:1.75rem 2rem;
}
.signup-success__check{
  flex:none;
  width:2.25rem;
  height:2.25rem;
  border-radius:50%;
  background:var(--brass);
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
}
.signup-success__check svg{
  width:1.2rem;
  height:1.2rem;
  fill:none;
  stroke:currentColor;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.signup-success h3{ margin:0 0 .375rem; }
.signup-success p{ margin:0; }

/* ---------- 26. In-page anchor offset (sticky header) ----------
   Complements html{scroll-padding-top}; ensures #upcoming / #past and any
   other linked section/article clears the sticky header when jumped to. */
:where(section[id], article[id], [id].section){
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* ---------- 27. Vienna participants — refined circular portraits ----------
   Scoped to #participants so the Board grids (Home + Governance) that reuse
   .person-card keep their original rectangular card styling. */
#participants .person-grid{
  grid-template-columns:repeat(5, 1fr);
  gap:1.75rem 1rem;
}
#participants .person-card{
  background:transparent;
  border:none;
  border-radius:0;
  overflow:visible;
  padding:0;
  text-align:center;
}
#participants .person-card:hover{
  transform:none;
  box-shadow:none;
  border-color:transparent;
}
#participants .person-card__photo{
  width:130px;
  height:130px;
  aspect-ratio:1 / 1;
  margin:0 auto .875rem;
  border:2px solid var(--hairline);
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 6px 16px rgba(17,42,66,.10);
  transition:box-shadow .25s var(--ease);
}
#participants .person-card:hover .person-card__photo{
  box-shadow:0 6px 16px rgba(17,42,66,.10), 0 0 0 3px rgba(176,137,74,.35);
}
#participants .person-card:hover .person-card__name{ color:var(--blue-800); }
#participants .person-card__body{ padding:0; }
#participants .person-card__name{
  font-size:1rem;
  margin:0 0 .15rem;
  transition:color .2s var(--ease);
}
#participants .person-card__meta{
  font-size:.8125rem;
  color:var(--slate-lt);
  margin:0 0 .5rem;
}
#participants .person-card summary{
  color:var(--brass-dk);
  font-size:.8125rem;
}
#participants .person-card summary:hover{ color:var(--brass); }
/* Open bio: left-aligned and width-limited for readability, centered as a block */
#participants .person-card details[open]{
  text-align:left;
  max-width:24rem;
  margin:.35rem auto 0;
}
#participants .person-card details[open] summary{ text-align:center; }

/* Circular gold-on-paper monogram, used only if a portrait is missing */
#participants .person-card__photo--placeholder{
  width:130px;
  height:130px;
  aspect-ratio:1 / 1;
  margin:0 auto .875rem;
  border:2px solid var(--hairline);
  border-radius:50%;
  background:var(--paper);
  color:var(--brass);
  font-family:var(--serif);
  font-weight:700;
  font-size:2rem;
  letter-spacing:.02em;
}

@media (max-width:1080px){ #participants .person-grid{ grid-template-columns:repeat(4, 1fr); } }
@media (max-width:820px){  #participants .person-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:540px){  #participants .person-grid{ grid-template-columns:repeat(2, 1fr); gap:1.5rem .75rem; } }

/* ---------- 28. Support page ---------- */
/* Credibility strip — thin paper band under the hero */
.cred-strip{
  background:var(--paper);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.cred-strip__row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:.25rem .85rem;
  margin:0;
  padding:.875rem 0;
  font-size:.8125rem;
  letter-spacing:.02em;
  color:var(--slate);
  text-align:center;
}
.cred-strip__dot{ color:var(--brass); }

/* "What your support enables" — brass-outlined numerals */
.enable-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.5rem;
  height:2.5rem;
  margin-bottom:1rem;
  border:1.5px solid var(--brass);
  border-radius:50%;
  font-family:var(--serif);
  font-weight:700;
  font-size:1rem;
  color:var(--brass);
}

/* Four involvement cards — brass top rule + button pinned to the bottom */
.card--support{
  border-top:2px solid var(--brass);
  display:flex;
  flex-direction:column;
}
.card--support .card__action{ margin:1.5rem 0 0; padding-top:0; }
.card--support .card__action--bottom{ margin-top:auto; }

/* Donations "Notify me" mini-form */
.notify-row{
  display:flex;
  gap:1rem;
  align-items:flex-end;
}
.notify-row .form-field{ flex:1; margin:0; }
.notify-row .btn{ flex:none; }
@media (max-width:540px){
  .notify-row{ flex-direction:column; align-items:stretch; }
  .notify-row .btn{ width:100%; }
}

/* ---------- 29. Contact page ---------- */
/* Two-column band: form (≈2/3) + details sidebar (≈1/3) */
.contact-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:3rem;
  align-items:start;
}
@media (max-width:860px){
  .contact-grid{ grid-template-columns:1fr; gap:2.5rem; }
}

/* Details sidebar */
.contact-aside{ font-size:.9375rem; }
.contact-aside .eyebrow{ margin-bottom:1.25rem; }
.contact-aside__block{ margin:0 0 1.5rem; }
.contact-aside__label{
  display:block;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slate-lt);
  margin-bottom:.25rem;
}
.contact-aside address{
  font-style:normal;
  color:var(--slate);
  line-height:1.65;
  margin:0;
}
/* Social icons on a light background (the footer styles them for navy) */
.contact-aside .social{ margin-top:.625rem; }
.contact-aside .social a{
  border-color:var(--hairline);
  color:var(--slate);
}
.contact-aside .social a:hover{
  border-color:var(--brass);
  color:var(--brass);
}

/* Map band */
.map-frame{
  width:100%;
  height:400px;
  border:1px solid var(--hairline);
  border-radius:8px;
  display:block;
}
@media (max-width:540px){ .map-frame{ height:260px; } }
.map-link{ margin:1rem 0 0; font-size:.9375rem; }

/* ---------- 30. Home & Framework restructure (2026) ----------
   New homepage (Moment / What TRUST Does / Vision / Values / Boundaries)
   and Framework page, plus the two inline SVG diagrams. Diagram colours
   come from the design tokens (referenced as var() inside the SVG); the
   serif label font is set here so the markup stays clean. */

/* Italic serif subtitle under a hero/page-hero H1, on the navy band */
.hero__subtitle{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.25rem;
  line-height:1.4;
  color:#C6D2DE;
  margin:-.25rem 0 1.25rem;
}

/* All inline diagrams use the site serif for their labels */
.trust-diagram text{ font-family:var(--serif); }

/* Home hero — typographic only; lead paragraphs keep a readable measure
   (~60ch) while the eyebrow, H1, subtitle, and buttons span the column. */
.hero--solo .lead,
.hero--solo .lead + p{ max-width:60ch; }

/* "Our Values" — four columns, each with a brass top rule */
.value-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.75rem;
}
.value{
  border-top:2px solid var(--brass);
  padding-top:1rem;
}
.value h3{ font-size:1.0625rem; margin:0 0 .375rem; }
.value p{ font-size:.9375rem; margin:0; color:var(--slate); }
@media (max-width:860px){ .value-grid{ grid-template-columns:1fr 1fr; gap:1.5rem; } }
@media (max-width:540px){ .value-grid{ grid-template-columns:1fr; } }

/* "What TRUST Is Not" — em-dash lines, no bullets */
.boundaries{
  list-style:none;
  margin:1.5rem 0 0;
  padding:0;
  border-top:1px solid var(--hairline);
}
.boundaries li{
  padding:1.125rem 0;
  border-bottom:1px solid var(--hairline);
  font-size:1rem;
}
.boundaries strong{ color:var(--blue-700); }

/* Framework — Transdisciplinary Cycle figure (wide + mobile-stack) */
.cycle-figure{ margin:0; }
.cycle-figure svg{
  width:100%;
  height:auto;
  display:block;
  max-width:46rem;
  margin-inline:auto;
}
/* Responsive toggle. The selectors are scoped to `.cycle-figure svg…` so
   they outrank the `.cycle-figure svg{ display:block }` rule above — a bare
   `.cycle-figure__stack{display:none}` loses to it on specificity and the
   mobile SVG would render on desktop too (a visible duplicate figure). */
.cycle-figure svg.cycle-figure__stack{ display:none; max-width:20rem; }
@media (max-width:640px){
  .cycle-figure svg.cycle-figure__wide{ display:none; }
  .cycle-figure svg.cycle-figure__stack{ display:block; }
}

/* ---------- 31. Board of Directors — circular portraits ----------
   Reuses .person-card markup (Home + Governance) but renders the board
   like the Vienna participants (§27): circular face-cropped photo,
   transparent card, centered text, brass hover ring, click-to-open bio.
   Scoped to .board-grid so it never touches the rectangular .person-card
   usage elsewhere. */
.board-grid{
  grid-template-columns:repeat(3, 1fr);
  gap:2.25rem 1.5rem;
  max-width:46rem;
  margin-inline:auto;
}
.board-grid .person-card{
  background:transparent;
  border:none;
  border-radius:0;
  overflow:visible;
  padding:0;
  text-align:center;
}
.board-grid .person-card:hover{
  transform:none;
  box-shadow:none;
  border-color:transparent;
}
.board-grid .person-card__photo{
  width:170px;
  height:170px;
  aspect-ratio:1 / 1;
  margin:0 auto 1rem;
  border:2px solid var(--hairline);
  border-radius:12px;   /* rounded square (was 50% circle) */
  object-fit:cover;
  object-position:center;   /* faces are pre-centered in the square source images */
  box-shadow:0 6px 16px rgba(17,42,66,.10);
  transition:box-shadow .25s var(--ease);
}
.board-grid .person-card:hover .person-card__photo{
  box-shadow:0 6px 16px rgba(17,42,66,.10), 0 0 0 3px rgba(176,137,74,.35);
}
.board-grid .person-card:hover .person-card__name{ color:var(--blue-800); }
.board-grid .person-card__body{ padding:0; }
.board-grid .person-card__name{
  font-size:1.0625rem;
  margin:0 0 .2rem;
  /* Reserve two lines so a name that wraps (e.g. William's full title) does
     not push the role + "Read bio" link below the other cards. */
  min-height:2.6em;
  transition:color .2s var(--ease);
}
.board-grid .person-card__role{ margin:0 0 .5rem; }
.board-grid .person-card summary{
  color:var(--brass-dk);
  font-size:.8125rem;
  text-align:center;
}
.board-grid .person-card summary:hover{ color:var(--brass); }
/* Open bio: left-aligned and width-limited for readability, centered as a block */
.board-grid .person-card details[open]{
  text-align:left;
  max-width:22rem;
  margin:.35rem auto 0;
}
.board-grid .person-card details[open] summary{ text-align:center; }
.board-grid .person-card details p{
  font-size:.875rem;
  line-height:1.65;
  margin:.5rem 0 0;
  color:var(--slate);
}

@media (max-width:720px){
  .board-grid{ grid-template-columns:repeat(2, 1fr); max-width:34rem; }
  .board-grid .person-card__photo{ width:150px; height:150px; }
}
@media (max-width:460px){
  .board-grid{ grid-template-columns:1fr; max-width:20rem; }
  .board-grid .person-card__photo{ width:160px; height:160px; }
  .board-grid .person-card__name{ min-height:0; }
}

/* ---------- 32. Reference/content pages (privacy, governance) ----------
   Opt-in via <body class="doc-page">. These are reference pages, not
   hero/marketing: calmer section headings, a tighter reading measure
   centered under the hero, and a shorter hero band over short content.
   The hero H1 is intentionally left at its normal size. */
/* Hero band ~60% of its normal 4rem/3.75rem so it anchors, not dominates */
.doc-page .page-hero{ padding:2.4rem 0 2.25rem; }
.doc-page h2{ font-size:1.15rem; color:var(--blue-800); }
.doc-page h3{ font-size:1.1rem; }
/* ~70ch reading measure (the column is already centered via .container) */
.doc-page .container--narrow{ max-width:70ch; }

/* Reference body: smaller, denser prose and lists than the marketing
   pages; line-height stays generous (~1.65) for readability. */
.doc-page .container--narrow p,
.doc-page .container--narrow li{
  font-size:.95rem;
  line-height:1.65;
}
/* In-page signpost headings: modest space above (~1.5rem), hugging their
   own content below. The first heading and any eyebrow-led heading skip
   the top margin so they stay tight to the column top / their eyebrow. */
.doc-page .container--narrow h2{ margin:1.5rem 0 .5rem; }
.doc-page .container--narrow h2:first-child,
.doc-page .container--narrow .eyebrow + h2{ margin-top:0; }

/* Quieter status pills in the governance documents table, so the document
   names stay the primary text. */
.doc-list .badge{
  font-size:.65rem;
  padding:.1rem .45rem;
  letter-spacing:.1em;
}
.doc-list .badge--available{ border-color:var(--hairline); color:var(--blue-600); }

/* ---------- 33. Framework page restructure (2026) ----------
   Compact Five Elements glossary (replacing the large letter cards) and
   the Grand Challenges 3×2 grid. */

/* Five Elements — compact, expandable glossary rows.
   Each row is a hairline-separated line: serif term · question, with an
   accessible toggle button revealing the longer definition. Multiple rows
   may be open at once. Collapsed, the whole list is ~250px tall. */
.elements-list{
  border-top:1px solid var(--hairline);
}
.element-row{
  border-bottom:1px solid var(--hairline);
}
.element-row__head{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.5rem;
  width:100%;
  padding:1rem .25rem;
  background:none;
  border:none;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.element-row__head:focus-visible{
  outline:2px solid var(--blue-700);
  outline-offset:-2px;
}
.element-row__term{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.0625rem;
  color:var(--blue-800);
  flex:0 0 auto;
  min-width:8.5rem;
}
.element-row__sep{
  color:var(--brass);
  flex:0 0 auto;
}
.element-row__question{
  font-size:.9375rem;
  line-height:1.5;
  color:var(--slate);
  flex:1 1 14rem;
}
/* Chevron, rotates down when the row is open */
.element-row__icon{
  flex:0 0 auto;
  margin-left:auto;
  width:.55rem;
  height:.55rem;
  border-right:2px solid var(--slate-lt);
  border-bottom:2px solid var(--slate-lt);
  transform:rotate(-45deg);
  transform-origin:center;
  transition:transform .3s var(--ease), border-color .2s var(--ease);
  align-self:center;
}
.element-row__head:hover .element-row__icon{ border-color:var(--brass); }
.element-row.is-open .element-row__icon{ transform:rotate(45deg); }
.element-row.is-open .element-row__term{ color:var(--blue-800); }

/* Expandable detail: grid-rows trick (no fixed height needed).
   Without JS the detail stays visible. */
.element-row__detail{
  display:grid;
  grid-template-rows:1fr;
  transition:grid-template-rows .35s var(--ease);
}
html.js .element-row__detail{ grid-template-rows:0fr; }
html.js .element-row.is-open .element-row__detail{ grid-template-rows:1fr; }
.element-row__detail-inner{ overflow:hidden; }
.element-row__detail p{
  font-size:.875rem;
  line-height:1.65;
  color:var(--slate);
  margin:0;
  padding:0 .25rem 1.125rem;
  max-width:54ch;
}
@media (max-width:540px){
  .element-row__term{ min-width:0; flex:1 1 100%; }
  .element-row__question{ flex:1 1 100%; }
  .element-row__sep{ display:none; }
}

/* Grand Challenges — fixed 3×2 grid (overrides .card-grid auto-fit) */
.challenge-grid{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:900px){ .challenge-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .challenge-grid{ grid-template-columns:1fr; } }

/* Footnote-style source line under the grid */
.challenge-note{
  margin:1.5rem 0 0;
  font-size:.8125rem;
  color:var(--slate-lt);
}