:root {
  --hh-ink: #152a44;
  --hh-blue: #21489f;
  --hh-sky: #e4edf5;
  --hh-paper: #fffcf4;
  --hh-sun: #ffda72;
  --hh-green: #35604a;
}
body { color: var(--hh-ink); }
.notice { background: #e5ecd9; color: #253b35; }
.notice a { color: #214a36; }
.header { border-bottom: 1px solid #dce2df; }
.header .brand span { color: var(--hh-ink); font-size: .9rem; font-weight: 700; letter-spacing: .02em; }
.header .brand img { width: 157px; height: auto; }
.hh-home { background: var(--hh-blue); color: white; padding-block: clamp(45px, 7vw, 98px) 66px; }
.hh-home-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px, 4vw, 58px); align-items: center; }
.hh-home h1 { font-size: clamp(3.4rem, 6.05vw, 6.25rem); line-height: .94; letter-spacing: -.055em; color: white; margin: 10px 0 25px; }
.hh-home h1 em { color: var(--hh-sun); }
.hh-home .eyebrow, .hh-home .hh-local-link { color: #fff0c9; }
.hh-home .lead { color: white; max-width: 32ch; line-height: 1.42; margin-bottom: 24px; }
.hh-home .primary { background: var(--hh-sun); border-color: var(--hh-sun); color: var(--hh-ink); }
.hh-home .secondary { border-color: #fff; color: #fff; }
.hh-home a:focus-visible { outline-color: var(--hh-sun); }
.hh-local-link { display: inline-block; margin-top: 22px; font-size: 16px; }
.hh-home-art { position: relative; margin: 0; isolation: isolate; aspect-ratio: 1.12; }
.hh-art-paper { position: absolute; inset: 2% 1% 10% 8%; overflow: hidden; border-radius: 47% 48% 13% 18% / 42% 43% 13% 16%; transform: rotate(-4deg); background: #efe6c8; }
.hh-art-paper img, .hh-documentary img { width: 100%; height: 100%; object-fit: cover; }
.hh-documentary { position: absolute; inset: 10% 6% 21% 13%; overflow: hidden; background: #ede8e0; border-radius: 44% 47% 9% 14% / 38% 39% 10% 14%; transform: rotate(4deg); border: 7px solid #fff6e7; }
.hh-documentary img { filter: grayscale(1); object-position: 54% 50%; }
.hh-senior-sticker, .hh-child-sticker { position: absolute; height: 54%; width: auto; object-fit: contain; bottom: 9%; filter: drop-shadow(3px 0 #fff5de) drop-shadow(-3px 0 #fff5de) drop-shadow(0 4px #fff5de) drop-shadow(0 11px 9px #10284d66); }
.hh-senior-sticker { right: 0; transform: rotate(4deg); }
.hh-child-sticker { left: 3%; bottom: 9%; height: 45%; transform: rotate(-6deg); }
.hh-home-art .hh-caption { position: absolute; color: #fff4d6; bottom: -4%; left: 7%; }
.hh-caption { font-size: .88rem; line-height: 1.45; margin-top: 14px; color: #425565; }
.hh-hero-photo { min-width: 0; margin: 0; }
.hh-hero-photo > img:first-child { display: block; width: 100%; aspect-ratio: 1.4; object-fit: cover; border-radius: 47% 46% 9% 11% / 24% 24% 12% 14%; }
.hh-person-hero { padding: 20px 11% 0; background: #e6eddb; border-radius: 42% 41% 13% 14%; }
.hh-person-hero > img:first-child { width: min(100%, 290px); margin-inline: auto; aspect-ratio: 1; border-radius: 45% 46% 9% 11%; }
.hh-person-hero figcaption { text-align: center; padding-bottom: 15px; }
.hh-funding-art { position: relative; background: #ffeab4; border-radius: 42% 45% 11% 16%; padding: 25px 24px 12px; }
.hh-funding-art > img:first-child { height: 330px; object-fit: contain; border-radius: 0; }
.hh-grant-mark { position: absolute; width: 105px; height: 105px; object-fit: contain; right: 8px; bottom: 56px; border-radius: 14px; background: white; transform: rotate(5deg); }
.hh-local { background: #eef0e8; }
.hh-local img { width: 100%; border-radius: 12px 44px 12px 30px; }
.hh-board { background: #e9efdf; }
.hh-board-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; margin-block: 30px 16px; }
.hh-board-card { background: #fffdf6; border-radius: 16px 44px 16px 16px; padding: 22px; }
.hh-board-card:first-child { grid-row: span 2; color: white; background: var(--hh-blue); }
.hh-board-card:first-child h3, .hh-board-card:first-child a { color: #fff; }
.hh-board-card img { width: 100%; max-width: 203px; height: auto; aspect-ratio: 1; border-radius: 17px 38px 17px 18px; object-fit: cover; }
.hh-board-card h3 { font-size: 1.4rem; margin: .6rem 0 .1rem; }
.hh-board-card p { margin: .25rem 0 .65rem; }
.hh-board-card:first-child img { max-width: 100%; }
.hh-legal-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 27px; margin-top: 26px; }
.hh-legal-grid article { border-top: 4px solid #76977d; padding-top: 14px; }
.hh-legal-grid h3 { font-size: 1.4rem; line-height: 1.15; }
.hh-funders { background: #e4edf5; }
.hh-logo-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-top: 26px; }
.hh-logo-grid a { min-height: 140px; display: grid; place-items: center; padding: 15px; border-radius: 18px; background: white; font-weight: 700; text-align: center; }
.hh-logo-grid img { width: 100%; height: 100px; object-fit: contain; }
.hh-map-frame { background: #dbe8eb; border-radius: 22px 62px 22px 22px; overflow: hidden; margin-top: 27px; }
.hh-map { display: block; width: 100%; height: auto; max-height: 670px; }
.hh-pin circle { fill: #21489f; stroke: white; stroke-width: 3; }
.hh-pin text { fill: white; font-size: 14px; font-weight: 700; pointer-events: none; }
.hh-pin:hover circle, .hh-pin:focus-visible circle { fill: #365b3c; stroke: #ffda72; stroke-width: 5; }
.hh-school-filter { margin-top: 24px; }
.hh-school-filter label { display: block; font-weight: 700; }
.hh-school-filter input { font: inherit; width: min(100%,410px); background: #fff; border: 1px solid #758b98; border-radius: 9px; padding: 10px 13px; }
.hh-school-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; margin-top: 20px; }
.hh-school { display: flex; gap: 14px; align-items: start; padding: 17px; border-radius: 12px 27px 12px 12px; background: #eff2ee; scroll-margin-top: 145px; }
.hh-school[hidden], .hh-pin[hidden] { display: none; }
.hh-school:target { outline: 3px solid var(--hh-blue); background: #e3edf8; }
.hh-school h2 { margin: 1px 0 5px; font-size: 1.35rem; line-height: 1.12; }
.hh-school p { margin: 0 0 5px; }
.hh-school img { width: 65px; max-height: 67px; object-fit: contain; margin-left: auto; }
.hh-marker-number { display: grid; place-items: center; background: #21489f; color: white; width: 32px; height: 32px; border-radius: 50%; flex: none; font-weight: 700; }
.hh-people { background: #f4f0e4; }
.hh-mosaic { display: grid; grid-template-columns: 1fr .85fr 1.15fr; gap: clamp(10px, 2vw, 24px); margin: 45px 0 27px; }
.hh-mosaic figure { margin: 0; overflow: hidden; aspect-ratio: 1; border-radius: 19% 27% 13% 21%; transform: rotate(-3deg); }
.hh-mosaic figure:nth-child(3n+2) { transform: rotate(6deg) translateY(8px); border-radius: 29% 16% 29% 16%; }
.hh-mosaic figure:nth-child(3n) { transform: rotate(-2deg) translateY(-8px); border-radius: 17% 24% 31% 18%; }
.hh-mosaic img { width: 100%; height: 100%; object-fit: cover; }
.hh-mosaic-link { background: #fff0c8; }
.hh-preview-portraits { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.hh-preview-portraits img { border-radius: 20% 25% 18% 24%; transform: rotate(-3deg); }
.hh-preview-portraits img:nth-child(2) { transform: rotate(5deg) translateY(12px); }
.peace-scene { background: #f6f2e4; border-radius: 26px 42px 25px 25px; }
@media (max-width: 800px) {
  .hh-home-grid { grid-template-columns: 1fr; }
  .hh-home-art { margin-inline: auto; width: min(100%,540px); }
  .hh-board-grid, .hh-legal-grid { grid-template-columns: 1fr 1fr; }
  .hh-board-card:first-child { grid-row: auto; }
}
@media (max-width: 530px) {
  .hh-home { padding-top: 36px; padding-bottom: 46px; }
  .hh-home h1 { font-size: clamp(2.65rem, 10vw, 3.5rem); }
  .hh-home-art .hh-caption { bottom: -7%; left: 3%; }
  .hh-home .lead { font-size: 21px; }
  .hh-board-grid, .hh-legal-grid, .hh-school-grid { grid-template-columns: 1fr; }
  .hh-board-card { display: grid; grid-template-columns: 86px 1fr; gap: 14px; }
  .hh-board-card:first-child { grid-template-columns: 103px 1fr; }
  .hh-board-card h3 { margin-top: 0; }
  .hh-logo-grid { grid-template-columns: 1fr 1fr; }
  .hh-logo-grid a { min-height: 93px; padding: 10px; }
  .hh-logo-grid img { height: 68px; }
  .hh-mosaic { grid-template-columns: 1fr 1fr; }
  .hh-mosaic figure:nth-child(n) { aspect-ratio: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hh-pin, .hh-mosaic figure { transition: none; }
}

.hh-school > div { min-width: 0; overflow-wrap: anywhere; }
.hh-school-filter input { box-sizing: border-box; max-width: 100%; }
.hh-network, .hh-people { overflow: clip; }
.hh-network h1, .hh-people h1 { overflow-wrap: anywhere; }
.hh-entrances { background: #e4ecd9; }
.hh-entrances .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 20px; padding-block: 13px; }
.hh-entrances a { display: inline-flex; gap: 9px; align-items: center; min-height: 40px; font-weight: 700; text-decoration: none; color: #203e34; }
.hh-entrances a:hover { text-decoration: underline; }
.hh-entrances a span { color: #245ba2; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hh-home-art .hh-child-sticker, .hh-home-art .hh-senior-sticker { transition: transform 300ms ease-out; }
  .hh-home-art:hover .hh-child-sticker { transform: rotate(-9deg) translateY(-7px); }
  .hh-home-art:hover .hh-senior-sticker { transform: rotate(2deg) translateY(-3px); }
}