/* =============================================================================
   CENTER FOR DIGITAL YOUTH — DEMO STYLESHEET
   =============================================================================

   WCAG CONTRAST VERIFICATION
   --------------------------
   Every foreground token was checked against every background field it is
   allowed to appear on (--bg, --surface, --surface-2, and the footer field)
   using the WCAG 2.1 relative-luminance formula. Body text targets >= 4.5:1;
   large text targets >= 3:1. NO PAIR IN ANY THEME FALLS BELOW 4.5:1, so every
   theme clears AA for normal text as well as for large text.

   Ratios below are foreground-on-background, rounded to 2dp.

   -- 1. HUSKY INK -- bg #ffffff / surface #f5f2f8 / surface-2 #efeaf6 ---------
      ink      #241a33  16.53 / 14.91 / 13.99   AA
      muted    #55506b   7.65 /  6.90 /  6.47   AA
      head     #32006e  15.43 / 13.92 / 13.06   AA
      accent   #6b5c33   6.55 /  5.91 /  5.55   AA   (Heritage Gold, darkened
                                                      from #85754d so gold TEXT
                                                      clears 4.5:1 on all three
                                                      fields; undarkened
                                                      #b7a57a is used for
                                                      hairlines only, which
                                                      never carry text.)
      accent-2 #4b2e83  10.41 /  9.39 /  8.81   AA
      footer   #ece7f5 on #32006e 12.72 | #c9bce0 on #32006e 8.64   AA
      WORST PAIR IN THEME: 5.55:1  PASS

   -- 2. THRIVING -- bg #171043 / surface #221a56 / surface-2 #2b2166 ----------
      ink      #e7e2f7  13.95 / 12.31 / 10.99   AA
      muted    #b9b0dd   8.66 /  7.64 /  6.82   AA
      head     #f7f2a1  15.25 / 13.46 / 12.02   AA   (pale butter)
      accent   #ff9d6c   8.64 /  7.62 /  6.81   AA   (peach)
      accent-2 #c5b4e3   9.24 /  8.16 /  7.28   AA   (lavender)
      footer   #e7e2f7 on #100c30 14.87 | #b9b0dd on #100c30 9.23   AA
      WORST PAIR IN THEME: 6.81:1  PASS

   -- 3. DAYLIGHT -- bg #ffffff / surface #faf8f3 / surface-2 #f4f1e8 ----------
      ink      #2b2b33  14.04 / 13.23 / 12.43   AA
      muted    #5d5c66   6.59 /  6.21 /  5.83   AA
      head     #4b2e83  10.41 /  9.81 /  9.22   AA   (Spirit Purple)
      accent   #6b5c33   6.55 /  6.18 /  5.80   AA   (darkened Heritage Gold)
      accent-2 #4b2e83  10.41 /  9.81 /  9.22   AA
      footer   #f0eee9 on #2b2b33 12.11 | #b3b0a8 on #2b2b33 6.48   AA
      WORST PAIR IN THEME: 5.80:1  PASS

   -- 4. SIGNAL -- bg #2a0060 / surface #3a1080 / surface-2 #451b96 ------------
      ink      #f2eefb  14.52 / 11.75 /  9.94   AA
      muted    #c4b3e8   8.65 /  7.00 /  5.92   AA
      head     #ffc700  10.59 /  8.57 /  7.25   AA   (Spirit Gold)
      accent   #2ad2c9   8.81 /  7.13 /  6.03   AA   (accent teal)
      accent-2 #ffc700  10.59 /  8.57 /  7.25   AA
      footer   #f2eefb on #1c0040 16.38 | #c4b3e8 on #1c0040 9.76   AA
      WORST PAIR IN THEME: 5.92:1  PASS

   -- 5. DUSK -- bg #151d29 / surface #1e2735 / surface-2 #263141 --------------
      ink      #e3e7f0  13.68 / 12.14 / 10.61   AA
      muted    #a3adc0   7.50 /  6.66 /  5.82   AA
      head     #c5b4e3   8.88 /  7.88 /  6.89   AA   (lavender)
      accent   #ffc700  10.83 /  9.61 /  8.40   AA   (Spirit Gold)
      accent-2 #c5b4e3   8.88 /  7.88 /  6.89   AA
      footer   #e3e7f0 on #0f1620 14.67 | #a3adc0 on #0f1620 8.04   AA
      WORST PAIR IN THEME: 5.82:1  PASS

   REVERSED FIELDS (buttons / active chips), all >= 4.5:1:
      Husky Ink  #ffffff on #32006e 15.43 | #3d3417 on #ffc700 7.89
      Thriving   #171043 on #f7f2a1 15.25 | #3a1400 on #ff9d6c 8.04
      Daylight   #ffffff on #4b2e83 10.41
      Signal     #2a0060 on #ffc700 10.59 | #04322f on #2ad2c9 7.43
      Dusk       #151d29 on #c5b4e3  8.88

   NOTE: --line and --hairline are decorative rules and borders only. No text is
   ever set in them, so they are exempt from the 4.5:1 text requirement.
   ========================================================================== */

/* ---------- THEME 1: HUSKY INK (default) ---------------------------------- */
/* Husky Purple as the near-black ink. Conservative, most UW-official.        */
:root,
:root[data-theme="husky-ink"]{
  --bg:#ffffff; --surface:#f5f2f8; --surface-2:#efeaf6;
  --line:#ded6ea; --hairline:#b7a57a;
  --ink:#241a33; --muted:#55506b; --head:#32006e;
  --accent:#6b5c33; --accent-2:#4b2e83;
  --cta-bg:#32006e; --cta-fg:#ffffff;
  --chip-on-bg:#32006e; --chip-on-fg:#ffffff;
  --foot-bg:#32006e; --foot-fg:#ece7f5; --foot-muted:#c9bce0; --foot-line:#5b3a94;
  --figure-a:#32006e; --figure-b:#6b5c33;
  --shadow:0 1px 2px rgba(36,26,51,.05), 0 8px 28px -12px rgba(36,26,51,.18);
}
/* ---------- THEME 2: THRIVING --------------------------------------------- */
/* Purple-tinted deep ground; warm multi-accent. Purple demoted to an accent. */
:root[data-theme="thriving"]{
  --bg:#171043; --surface:#221a56; --surface-2:#2b2166;
  --line:#3d3480; --hairline:#ff9d6c;
  --ink:#e7e2f7; --muted:#b9b0dd; --head:#f7f2a1;
  --accent:#ff9d6c; --accent-2:#c5b4e3;
  --cta-bg:#f7f2a1; --cta-fg:#171043;
  --chip-on-bg:#ff9d6c; --chip-on-fg:#3a1400;
  --foot-bg:#100c30; --foot-fg:#e7e2f7; --foot-muted:#b9b0dd; --foot-line:#2f2670;
  --figure-a:#ff9d6c; --figure-b:#c5b4e3;
  --shadow:0 1px 2px rgba(0,0,0,.28), 0 10px 34px -14px rgba(0,0,0,.6);
}
/* ---------- THEME 3: DAYLIGHT --------------------------------------------- */
/* Light and airy. Purple only for type and rules; gold hairlines.            */
:root[data-theme="daylight"]{
  --bg:#ffffff; --surface:#faf8f3; --surface-2:#f4f1e8;
  --line:#e2ddcd; --hairline:#85754d;
  --ink:#2b2b33; --muted:#5d5c66; --head:#4b2e83;
  --accent:#6b5c33; --accent-2:#4b2e83;
  --cta-bg:#4b2e83; --cta-fg:#ffffff;
  --chip-on-bg:#4b2e83; --chip-on-fg:#ffffff;
  --foot-bg:#2b2b33; --foot-fg:#f0eee9; --foot-muted:#b3b0a8; --foot-line:#4a4a53;
  --figure-a:#4b2e83; --figure-b:#6b5c33;
  --shadow:0 1px 2px rgba(43,43,51,.04), 0 8px 26px -14px rgba(43,43,51,.16);
}
/* ---------- THEME 4: SIGNAL ----------------------------------------------- */
/* High contrast: purple + Spirit Gold + teal. Punchy / campaign register.    */
:root[data-theme="signal"]{
  --bg:#2a0060; --surface:#3a1080; --surface-2:#451b96;
  --line:#5b30ad; --hairline:#ffc700;
  --ink:#f2eefb; --muted:#c4b3e8; --head:#ffc700;
  --accent:#2ad2c9; --accent-2:#ffc700;
  --cta-bg:#ffc700; --cta-fg:#2a0060;
  --chip-on-bg:#2ad2c9; --chip-on-fg:#04322f;
  --foot-bg:#1c0040; --foot-fg:#f2eefb; --foot-muted:#c4b3e8; --foot-line:#48208f;
  --figure-a:#ffc700; --figure-b:#2ad2c9;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 34px -14px rgba(0,0,0,.62);
}
/* ---------- THEME 5: DUSK ------------------------------------------------- */
/* True dark. Near-black ground, purple/lavender glow, gold accents.          */
:root[data-theme="dusk"]{
  --bg:#151d29; --surface:#1e2735; --surface-2:#263141;
  --line:#36435a; --hairline:#ffc700;
  --ink:#e3e7f0; --muted:#a3adc0; --head:#c5b4e3;
  --accent:#ffc700; --accent-2:#c5b4e3;
  --cta-bg:#c5b4e3; --cta-fg:#151d29;
  --chip-on-bg:#c5b4e3; --chip-on-fg:#151d29;
  --foot-bg:#0f1620; --foot-fg:#e3e7f0; --foot-muted:#a3adc0; --foot-line:#2b3648;
  --figure-a:#c5b4e3; --figure-b:#ffc700;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 34px -14px rgba(0,0,0,.7);
}

/* ---------- TOKENS -------------------------------------------------------- */
:root{
  --fs-hero:clamp(2.6rem,7.2vw,5.25rem);
  --fs-h2:clamp(1.7rem,3.7vw,2.7rem);
  --fs-h3:clamp(1.05rem,1.6vw,1.3rem);
  --fs-lead:clamp(1.06rem,1.9vw,1.4rem);
  --fs-body:1.0625rem;
  --fs-sm:.875rem;
  --fs-xs:.6875rem;
  --wrap:1180px;
  --gutter:clamp(1.15rem,5vw,3.5rem);
  --sec:clamp(4rem,9vw,7.5rem);
  --r:14px;
}

/* ---------- RESET / BASE -------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
/* Offset anchor targets so the numbered jump links do not land underneath the
   sticky header. The header is taller on small screens, where nav wraps. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem;}
@media(max-width:880px){html{scroll-padding-top:12rem;}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--fs-body);
  line-height:1.6;
  overflow-x:hidden; /* belt and braces: the body must never scroll sideways */
  -webkit-font-smoothing:antialiased;
  transition:background-color .28s ease, color .28s ease;
}
img,svg{max-width:100%;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:"Encode Sans","Open Sans",Helvetica,Arial,sans-serif;
  font-weight:600; line-height:1.08; letter-spacing:-.018em;
  margin:0; text-wrap:balance;
}
p{margin:0;}

/* ---------- LAYOUT UTILITIES ---------------------------------------------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:var(--sec);}
.eyebrow{
  font-family:"Encode Sans",sans-serif; font-size:var(--fs-xs); font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:var(--accent);
  display:flex; align-items:center; gap:.7rem; margin:0 0 1.35rem;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line);}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--muted);max-width:56ch;}
.sec-head{max-width:62ch;}
.sec-head h2{font-size:var(--fs-h2);color:var(--head);}
.sec-head p{margin-top:1.1rem;}

/* ---------- BUTTONS ------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:"Encode Sans",sans-serif;font-size:.875rem;font-weight:600;
  letter-spacing:.02em;text-decoration:none;
  padding:.95rem 1.6rem;border-radius:999px;border:1px solid transparent;
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--cta-bg);color:var(--cta-fg);}
.btn-ghost{background:transparent;color:var(--head);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--head);}
.btn .arw{transition:transform .18s ease;}
.btn:hover .arw{transform:translateX(3px);}

/* ---------- TAGS (who / what / how long) ---------------------------------- */
.tags{
  display:flex;flex-wrap:wrap;gap:.4rem .55rem;align-items:center;
  font-family:"Encode Sans",sans-serif;font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  margin:0;padding:0;list-style:none;
}
.tags li{display:flex;align-items:center;gap:.55rem;}
.tags li + li::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--line);}
.tags .t-who{color:var(--accent-2);}
.tags .t-what{color:var(--accent);}

/* ---------- HEADER -------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
@supports (backdrop-filter:blur(1px)){
  .site-header{
    background:color-mix(in srgb,var(--bg) 88%,transparent);
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
  }
}
.header-in{
  max-width:var(--wrap);margin-inline:auto;padding:.85rem var(--gutter);
  display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
}
/* UW brand policy: no marks or symbols may replace the official UW signature.
   This header therefore uses a TYPE-ONLY signature treatment. */
.sig{display:flex;align-items:center;gap:.95rem;text-decoration:none;flex:0 0 auto;}
.sig-uw{
  font-family:"Encode Sans",sans-serif;font-size:.5625rem;font-weight:600;
  letter-spacing:.13em;line-height:1.32;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}
.sig-uw em{font-style:italic;text-transform:lowercase;letter-spacing:.04em;font-weight:400;}
.sig-rule{width:1px;height:30px;background:var(--hairline);flex:0 0 auto;}
.sig-name{
  font-family:"Encode Sans",sans-serif;font-size:.94rem;font-weight:600;
  letter-spacing:-.012em;color:var(--head);line-height:1.15;
}
.nav{display:flex;gap:1.35rem;flex-wrap:wrap;margin-left:auto;}
.nav a{
  font-family:"Encode Sans",sans-serif;font-size:.8125rem;font-weight:500;
  text-decoration:none;color:var(--ink);
  padding-block:.3rem;border-bottom:1.5px solid transparent;transition:border-color .18s ease;
}
.nav a:hover{border-bottom-color:var(--hairline);}

/* theme switcher */
.themes{display:flex;align-items:center;gap:.4rem;flex:0 0 auto;}
.themes .lbl{
  font-family:"Encode Sans",sans-serif;font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:.15rem;
}
.sw{
  width:26px;height:26px;border-radius:50%;padding:0;cursor:pointer;
  border:1px solid var(--line);position:relative;background:transparent;
  transition:transform .16s ease,box-shadow .16s ease;
}
.sw:hover{transform:scale(1.12);}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--head);}
.sw:focus-visible{outline:2px solid var(--head);outline-offset:3px;}
.sw i{position:absolute;inset:3px 50% 3px 3px;border-radius:999px 0 0 999px;}
.sw u{position:absolute;inset:3px 3px 3px 50%;border-radius:0 999px 999px 0;}

/* ---------- HERO ---------------------------------------------------------- */
.hero{padding-block:clamp(3.5rem,9vw,7rem) clamp(3rem,7vw,5.5rem);}
.hero h1{
  font-size:var(--fs-hero);font-weight:700;letter-spacing:-.035em;
  color:var(--head);max-width:15ch;
}
.hero h1 .l2{display:block;color:var(--ink);}
.hero-mission{margin-top:2rem;max-width:52ch;font-size:var(--fs-lead);line-height:1.45;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.5rem;}

/* ---------- FLAGSHIP BAND ------------------------------------------------- */
/* Editorial, single column. One statement at display size, then the argument
   as numbered rows on hairlines. No jump-pills, no sidebar — the density comes
   from the sequence and the figures, not from chrome. */
.flagship{background:var(--surface);border-block:1px solid var(--line);}
.flag-title{
  font-family:"Encode Sans",sans-serif;font-weight:800;
  font-size:clamp(2.125rem,5.2vw,3.75rem);line-height:1.05;letter-spacing:-.035em;
  color:var(--head);
  /* ch resolves against THIS element's font-size, so the measure must live
     here. On the parent it resolves against body text and collapses the
     headline into a one-word-per-line column. */
  max-width:17ch;
}
.flag-dek{
  margin-top:clamp(1.5rem,3vw,2.25rem);max-width:56ch;color:var(--ink);
  font-size:clamp(1.0625rem,1.7vw,1.3125rem);line-height:1.5;
}
.flag-body{margin-top:clamp(3rem,7vw,5.5rem);border-top:1px solid var(--line);}
/* Grid items default to min-width:auto, so a wide child would inflate the
   column and scroll the whole page. Pinning min-width:0 forces wide elements
   to scroll inside their own container instead. */
.flag-item{
  display:grid;gap:.5rem 2.5rem;grid-template-columns:minmax(0,1fr);
  padding:clamp(1.9rem,4vw,3rem) 0;border-bottom:1px solid var(--line);
}
.flag-item > *{min-width:0;}
@media(min-width:820px){.flag-item{grid-template-columns:5.5rem minmax(0,1fr);align-items:start;}}
.flag-n{
  font-family:"Encode Sans",sans-serif;font-weight:800;line-height:1;
  font-size:clamp(1.5rem,2.8vw,2.375rem);letter-spacing:-.02em;color:var(--accent);
}
.flag-item h3{font-size:clamp(1.1875rem,2.2vw,1.625rem);letter-spacing:-.02em;color:var(--head);}
.flag-item p{margin-top:.8rem;color:var(--muted);font-size:1.03rem;line-height:1.6;max-width:58ch;}
.flag-cta{margin-top:clamp(2.25rem,5vw,3.5rem);}
.figs{display:grid;gap:clamp(1.5rem,3vw,2.5rem);min-width:0;margin-top:clamp(3rem,7vw,5rem);}
.figs > *{min-width:0;}
@media(min-width:900px){.figs{grid-template-columns:repeat(2,minmax(0,1fr));}}
.fig{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  padding:1.35rem 1.25rem 1.1rem;margin:0;min-width:0;
}
.fig h4{font-size:.9375rem;color:var(--head);font-weight:600;letter-spacing:-.005em;}
.fig-scroll{overflow-x:auto;margin-top:.9rem;}
.fig-scroll svg{display:block;min-width:320px;width:100%;height:auto;}
.fig figcaption{
  margin-top:.8rem;padding-top:.7rem;border-top:1px solid var(--line);
  font-size:.75rem;line-height:1.45;color:var(--muted);
}
.fig figcaption b{
  color:var(--accent);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;font-size:.6875rem;
}
.fig-txt{font-family:"Encode Sans",sans-serif;font-size:11px;fill:var(--muted);}
.fig-val{font-family:"Encode Sans",sans-serif;font-size:11px;font-weight:600;fill:var(--ink);}
.fig-lab{font-family:"Encode Sans",sans-serif;font-size:10.5px;font-weight:600;}

/* ---------- PILLARS ------------------------------------------------------- */
.pillars{
  display:grid;gap:1px;background:var(--line);
  border-block:1px solid var(--line);margin-top:3.25rem;
}
@media(min-width:640px){.pillars{grid-template-columns:1fr 1fr;}}
@media(min-width:1000px){.pillars{grid-template-columns:repeat(4,1fr);}}
.pillar{background:var(--bg);padding:2.1rem 1.75rem 2.4rem;}
.pillar .n{
  font-family:"Encode Sans",sans-serif;font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.16em;color:var(--accent);display:block;margin-bottom:1rem;
}
.pillar h3{font-size:var(--fs-h3);color:var(--head);}
.pillar p{margin-top:.75rem;color:var(--muted);font-size:.94rem;}

/* ---------- CARD GRIDS ---------------------------------------------------- */
.grid{display:grid;gap:1.15rem;margin-top:3rem;}
@media(min-width:640px){.grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1000px){.grid-3{grid-template-columns:repeat(3,1fr);}}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.6rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.85rem;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.card:hover{transform:translateY(-3px);border-color:var(--hairline);box-shadow:var(--shadow);}
.card h3{font-size:var(--fs-h3);color:var(--head);}
.card p{color:var(--muted);font-size:.94rem;line-height:1.55;flex:1;}
.card .more{
  font-family:"Encode Sans",sans-serif;font-size:.8125rem;font-weight:600;
  color:var(--accent-2);text-decoration:none;display:inline-flex;gap:.4rem;align-items:center;
}
.card .more:hover{text-decoration:underline;text-underline-offset:3px;}

/* ---------- FILTER -------------------------------------------------------- */
.filter{
  margin-top:2.5rem;padding:1.4rem 1.5rem;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);
}
.fgroup + .fgroup{margin-top:1.15rem;padding-top:1.15rem;border-top:1px solid var(--line);}
.flabel{
  font-family:"Encode Sans",sans-serif;font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
  display:block;margin-bottom:.75rem;
}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;}
.chip{
  font-family:"Encode Sans",sans-serif;font-size:.8125rem;font-weight:500;
  padding:.45rem .9rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--ink);
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.chip:hover{border-color:var(--head);}
.chip[aria-pressed="true"]{background:var(--chip-on-bg);color:var(--chip-on-fg);border-color:var(--chip-on-bg);}
.chip:focus-visible{outline:2px solid var(--head);outline-offset:2px;}
.fstatus{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  margin-top:1.15rem;padding-top:1.15rem;border-top:1px solid var(--line);
  font-size:.8125rem;color:var(--muted);
}
.fstatus b{color:var(--ink);font-weight:600;}
.freset{
  background:none;border:none;padding:0;cursor:pointer;font:inherit;
  color:var(--accent-2);text-decoration:underline;text-underline-offset:3px;
}
.empty{
  display:none;margin-top:2rem;padding:2.5rem 1.5rem;text-align:center;
  border:1px dashed var(--line);border-radius:var(--r);color:var(--muted);
}
.is-empty .empty{display:block;}
.res-card[hidden]{display:none;}

/* ---------- PEOPLE -------------------------------------------------------- */
.people{display:grid;gap:1.5rem 1.1rem;margin-top:3rem;grid-template-columns:repeat(2,1fr);}
@media(min-width:640px){.people{grid-template-columns:repeat(4,1fr);}}
@media(min-width:1000px){.people{grid-template-columns:repeat(8,1fr);}}
.person{text-align:center;}
.av{
  width:100%;aspect-ratio:1;max-width:96px;margin:0 auto .8rem;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:"Encode Sans",sans-serif;font-size:1.05rem;font-weight:600;
  color:var(--accent-2);letter-spacing:.06em;
}
.person .rname{
  font-family:"Encode Sans",sans-serif;font-size:.8125rem;font-weight:600;
  color:var(--ink);display:block;line-height:1.3;
}
.person .role{font-size:.75rem;color:var(--muted);display:block;margin-top:.2rem;line-height:1.35;}

/* ---------- NEWS ---------------------------------------------------------- */
.news{margin-top:1rem;padding:0;border-top:1px solid var(--line);}
.news li{list-style:none;}
.news a{
  display:grid;gap:.3rem 1.5rem;padding:1.35rem 0;border-bottom:1px solid var(--line);
  text-decoration:none;transition:padding-left .2s ease;
}
@media(min-width:760px){.news a{grid-template-columns:150px 1fr auto;align-items:baseline;}}
.news a:hover{padding-left:.6rem;}
.news .date{
  font-family:"Encode Sans",sans-serif;font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
}
.news .hl{
  font-family:"Encode Sans",sans-serif;font-size:1.02rem;font-weight:500;
  color:var(--ink);line-height:1.35;
}
.news .kind{font-size:.75rem;color:var(--muted);}

/* ---------- FOOTER -------------------------------------------------------- */
.site-footer{
  background:var(--foot-bg);color:var(--foot-fg);
  padding-block:clamp(3rem,6vw,5rem) 2.5rem;
}
.fgrid{display:grid;gap:2.5rem;}
@media(min-width:820px){.fgrid{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));}}
.site-footer h4{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--foot-muted);margin-bottom:1rem;
}
.site-footer .fname{
  font-family:"Encode Sans",sans-serif;font-size:1.3rem;font-weight:600;
  letter-spacing:-.015em;line-height:1.2;
}
.site-footer p{color:var(--foot-muted);font-size:.9rem;margin-top:.9rem;max-width:42ch;}
.flinks{list-style:none;padding:0;margin:0;display:grid;gap:.6rem;}
.flinks a{font-size:.875rem;color:var(--foot-fg);text-decoration:none;}
.flinks a:hover{text-decoration:underline;text-underline-offset:3px;}
.fbase{
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--foot-line);
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  font-size:.75rem;color:var(--foot-muted);
}
.fsig{font-family:"Encode Sans",sans-serif;letter-spacing:.13em;text-transform:uppercase;font-size:.6875rem;}
.fsig em{font-style:italic;text-transform:lowercase;letter-spacing:.04em;}

/* ---------- DEMO NOTICE --------------------------------------------------- */
.notice{
  background:var(--surface-2);border-bottom:1px solid var(--line);
  font-family:"Encode Sans",sans-serif;font-size:.75rem;color:var(--muted);
  text-align:center;padding:.6rem var(--gutter);
}
.notice b{color:var(--accent);letter-spacing:.12em;text-transform:uppercase;font-size:.6875rem;}

/* ---------- MOTION (restrained) ------------------------------------------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;}
.rv.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
  .rv{opacity:1;transform:none;}
}

/* ---------- SMALL SCREENS (down to 390px, no horizontal body scroll) ------ */
@media(max-width:880px){
  .nav{order:3;width:100%;margin-left:0;gap:1rem;overflow-x:auto;padding-bottom:.2rem;flex-wrap:nowrap;}
  .nav a{white-space:nowrap;}
  .themes{margin-left:auto;}
}
@media(max-width:520px){
  .themes .lbl{display:none;}
  .sw{width:24px;height:24px;}
  .hero h1{max-width:none;}
}
/* Visually-hidden skip link that never contributes to the scroll area. */
.skip{
  position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.skip:focus{
  position:fixed;left:1rem;top:1rem;z-index:99;
  width:auto;height:auto;clip-path:none;
  background:var(--cta-bg);color:var(--cta-fg);padding:.7rem 1.1rem;border-radius:8px;
}