:root {
  --cream: #FBF7EC;
  --cream-deep: #F4EFD9;
  --aqua: #7AD4E8;
  --aqua-pale: #DCF2F8;
  --coral: #F0765C;
  --coral-dark: #B84326; /* 5.07:1 on cream, clears WCAG AA for body text */
  --peach: #F2A98E;
  --peach-pale: #FBE7DC;
  --magenta: #A24E97;
  --magenta-deep: #7E3A76;
  --indigo: #2A3060;
  --indigo-soft: #4A5185;
  --ink: #20264C;
  --olive: #7C8C3F;
  --olive-deep: #5E6B2C; /* 5.4:1 under cream/white text, for surfaces carrying light type */
  --olive-pale: #EEF1DB;
  --teal-deep: #1F6E82;
  --white: #FFFFFF;
  --radius: 14px;
  /* The display face, as a token. It was being referenced as var(--serif)
     without ever being defined, so anything asking for it quietly fell back
     to the body font. */
  --serif: 'Fraunces', Georgia, serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Nunito Sans', system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  font-size: 17px;
  overflow-x: hidden;
  /* A long email address or URL in body copy has no break point, so on a
     narrow screen it pushes the whole page sideways. Let anything that
     cannot fit break rather than overflow. */
  overflow-wrap: break-word;
}
h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 640; line-height: 1.06; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.2rem; line-height: 1.25; }
h1 em, h2 em { font-style: normal; color: var(--coral); }
a { color: var(--coral-dark); }
img { max-width: 100%; display: block; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 28px; }

/* Keyboard focus. The browser default is a thin ring in its own colour, which
   on this palette can sit on cream, indigo or coral and is easy to lose. One
   branded ring, used everywhere, stays visible on all of them. */
:focus-visible {
  outline: 3px solid var(--teal-deep);
  outline-offset: 2px;
  border-radius: 4px;
}
.hero-inst :focus-visible, .quickbar :focus-visible,
.banner :focus-visible, .utility-bar :focus-visible,
footer.site :focus-visible { outline-color: var(--aqua); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: var(--white); padding: 8px 16px; z-index: 99; }
::selection { background: var(--aqua); color: var(--ink); }

/* Utility bar */
.utility-bar { background: var(--ink); color: var(--cream); font-size: .82rem; font-weight: 700; }
.utility-bar .wrap { display: flex; justify-content: space-between; align-items: center; padding: 9px 28px; gap: 16px; flex-wrap: wrap; }
.utility-bar a { color: var(--cream); text-decoration: none; }
.utility-bar a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 620px) { .utility-bar .wrap > span:last-child { display: none; } }

/* Header / brand lockup */
header.site {
  background: var(--cream); position: sticky; top: 0; z-index: 50;
  border-bottom: 3px solid var(--ink);
}
.nav { display: flex; align-items: center; gap: 22px; padding: 13px 0; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
/* The logo carries the name and the tagline, so the header no longer sets
   them as text beside it. Sized by height: it is the one dimension the
   header cares about, and the width follows the artwork. */
.brand-logo { height: 58px; width: auto; display: block; }
@media (max-width: 900px) { .brand-logo { height: 50px; } }
@media (max-width: 480px) { .brand-logo { height: 42px; } }

.footer-logo { height: 62px; width: auto; display: block; margin-bottom: 14px; }

.nav ul { display: flex; gap: 2px; list-style: none; margin-left: auto; flex-wrap: wrap; }
.nav ul a {
  color: var(--ink); text-decoration: none; font-weight: 800; font-size: .85rem;
  padding: 8px 9px; border-radius: 999px; transition: background .15s, color .15s;
  white-space: nowrap;
}
.nav ul a:hover { background: var(--ink); color: var(--cream); }

/* You are here. One colour throughout, never two.
   The selected tab is highlighted, and so is the tab it lives under, so a
   visitor on Tech for Teens can see they are inside Programs. Both use the
   same indigo: the earlier version used a second, lighter blue for the parent
   and that read as a glitch rather than as hierarchy.
   Events carries both classes on the News page, because its dropdown points at
   anchors on that same page, so both rules must resolve to the same colour. */
.nav .current-menu-item > a,
.nav .current_page_item > a,
.nav .current-menu-ancestor > a,
.nav .current-menu-parent > a,
.nav .current-page-ancestor > a,
.nav .current_page_parent > a { background: var(--indigo); color: var(--cream); }
.nav .current-menu-item > a:hover,
.nav .current_page_item > a:hover,
.nav .current-menu-ancestor > a:hover,
.nav .current-menu-parent > a:hover,
.nav .current-page-ancestor > a:hover,
.nav .current_page_parent > a:hover { background: var(--ink); color: var(--cream); }

/* Dropdowns */
.nav li { position: relative; }
.nav .menu-item-has-children > a::after {
  content: ""; display: inline-block; vertical-align: middle;
  margin-left: 7px; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .7;
}
.nav .sub-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 232px; list-style: none; margin: 0; padding: 7px;
  background: var(--cream); border: 2px solid var(--ink);
  border-radius: 14px; box-shadow: 5px 5px 0 var(--ink);
  display: none; flex-direction: column; gap: 1px;
}
/* focus-within keeps the menu usable from the keyboard without script */
.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu { display: flex; }
.nav .sub-menu a { display: block; white-space: nowrap; border-radius: 9px; font-size: .9rem; padding: 9px 13px; }

/* Below the breakpoint the bar already wraps to its own row; a hover dropdown
   has no meaning on touch, and nine extra items would bury the page. Parents
   still link to a page that lists their children. */
@media (max-width: 860px) {
  .nav .sub-menu { display: none !important; }
  .nav .menu-item-has-children > a::after { display: none; }
}

@media (max-width: 860px) {
  .nav { flex-wrap: wrap; row-gap: 10px; }
  .brand { order: 1; }
  .btn.small { order: 2; margin-left: auto; }
  nav[aria-label="Main"] { order: 3; width: 100%; }
  .nav ul { margin-left: 0; gap: 2px; }
  .nav ul a { font-size: .84rem; padding: 6px 11px; }
}

.btn {
  display: inline-block; background: var(--coral); color: var(--ink);
  font-weight: 900; text-decoration: none; padding: 15px 30px;
  border-radius: 999px; border: 2px solid var(--ink); font-size: 1.02rem; cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .15s, box-shadow .15s;
  font-family: inherit;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.ghost { background: var(--white); }
.btn.on-dark { background: var(--coral); border-color: var(--cream); box-shadow: 4px 4px 0 var(--cream); }
.btn.on-dark:hover { box-shadow: 6px 6px 0 var(--cream); }
.btn.ghost.on-dark { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn.small { padding: 10px 20px; font-size: .9rem; box-shadow: 3px 3px 0 var(--ink); }

/* Institutional diagonal hero */
.hero-inst { background: var(--indigo); position: relative; }
.hero-inst-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: stretch; min-height: 560px; }
.hero-inst .panel { color: var(--cream); display: flex; flex-direction: column; justify-content: center; padding: 68px 48px 68px 0; }
.hero-inst .panel h1 { color: var(--cream); max-width: 9.5em; font-size: clamp(2.1rem, 3.6vw, 3.15rem); }
.hero-inst .panel .lede { max-width: 34em; font-size: 1.14rem; font-weight: 600; margin: 22px 0 30px; color: var(--cream); opacity: .94; }
.hero-inst .actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-photo { position: relative; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
/* Direct child only. The stamp nested inside carries an img too, and this
   rule's min-height would blow it up to fill the whole photo. */
.hero-photo > img { width: 100%; height: 100%; object-fit: cover; min-height: 560px; display: block; }
/* The stamp on the hero photo: the client's logo on a cream card, in the
   same border-and-hard-shadow language as every other raised thing on the
   site. It replaced a drawn circular seal, which a wide lockup cannot fit. */
.hero-stamp {
  position: absolute; left: -6px; bottom: 34px; z-index: 3;
  background: var(--cream); border: 2.5px solid var(--ink);
  border-radius: var(--radius); box-shadow: 5px 5px 0 var(--ink);
  padding: 15px 20px 11px;
  display: grid; justify-items: center; gap: 8px;
}
.hero-stamp img { height: 52px; width: auto; min-height: 0; display: block; }
.hero-stamp span {
  width: 100%; text-align: center;
  border-top: 1.5px solid rgba(32, 38, 76, .22); padding-top: 7px;
  font-size: .64rem; font-weight: 900; letter-spacing: .16em;
  text-transform: uppercase; color: var(--indigo-soft);
}
@media (max-width: 900px) {
  .hero-inst-grid { grid-template-columns: 1fr; min-height: auto; }
  .hero-inst .panel { padding: 52px 0 40px; }
  .hero-photo { clip-path: none; }
  .hero-photo > img { min-height: 260px; }
  .hero-stamp { left: 16px; bottom: -34px; padding: 11px 15px 8px; gap: 6px; }
  .hero-stamp img { height: 40px; }
  .hero-stamp span { font-size: .58rem; padding-top: 5px; }
  .hero-inst .panel h1 { font-size: clamp(2rem, 8vw, 2.8rem); max-width: none; }
}

.angle-strip { height: 60px; background: var(--indigo); transform: skewY(-2.4deg); margin: -30px 0; position: relative; z-index: 3; }

/* Kicker */
.kicker {
  text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; font-weight: 900;
  color: var(--coral-dark); margin-bottom: 14px; display: flex; align-items: center; gap: 12px;
}
.kicker::before { content: ""; width: 30px; height: 3px; background: var(--coral); border-radius: 2px; }
.kicker.on-dark { color: var(--aqua); }
.kicker.on-dark::before { background: var(--aqua); }
/* Coral on the aqua and peach hero grounds only reaches 3.2:1. Ink clears 8.6:1
   there and the coral rule before it keeps the accent. */
.page-hero .kicker, .faq-hero .kicker { color: var(--ink); }

.quickbar { background: var(--indigo); color: var(--cream); }
.quickbar .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0; }
.quickbar a {
  /* The angle strip below pulls up 30px over this bar. Both are indigo, so an
     overlapping last line reads as text cut off rather than as a divider. */
  color: var(--cream); text-decoration: none; padding: 28px 24px 62px;
  display: block; border-left: 1px solid rgba(251,247,236,.18); position: relative;
  transition: background .2s;
}
.quickbar a:first-child { border-left: none; }
.quickbar a:hover { background: rgba(251,247,236,.08); }
.quickbar strong { display: block; font-size: 1.15rem; color: var(--aqua); font-family: 'Fraunces', serif; }
.quickbar span { font-size: .92rem; opacity: .85; }

section { padding: 84px 0; position: relative; }
.section-tint { background: var(--aqua-pale); }
.section-warm { background: var(--peach-pale); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 26px; margin-top: 36px; }
.card {
  background: var(--white); border-radius: var(--radius); padding: 30px;
  border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
  transition: transform .2s, box-shadow .2s;
}
.card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.card h3 { margin-bottom: 10px; }
.card p { font-size: .98rem; color: var(--indigo-soft); }
.card .btn { margin-top: 18px; }
.card.campaign { border-top: 7px solid var(--olive); }
.card.campaign.urgent { border-top-color: var(--coral); }

/* Program tile grid — YMCA/B&GC style bold color blocks */
.tile-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  margin-top: 36px; border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden;
}
@media (max-width: 760px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .tile-grid { grid-template-columns: 1fr; } }
.tile {
  padding: 34px 26px; min-height: 210px; text-decoration: none;
  display: flex; flex-direction: column; gap: 10px; position: relative;
  transition: filter .15s, transform .15s;
}
.tile:hover { filter: brightness(1.1); }
.tile:focus-visible { outline: 3px solid var(--cream); outline-offset: -6px; }
.tile .ico2 { width: 40px; height: 40px; stroke: var(--cream); flex-shrink: 0; }
.tile h3 { color: var(--cream); }
.tile p { color: rgba(251,247,236,.85); font-size: .95rem; }
.tile .more { color: var(--cream); font-weight: 900; font-size: .9rem; margin-top: auto; padding-top: 8px; }
.t-indigo { background: var(--indigo); }
.t-coral { background: var(--coral-dark); }
.t-teal { background: var(--teal-deep); }
.t-olive { background: var(--olive-deep); }
.t-magenta { background: var(--magenta-deep); }
.t-slate { background: var(--indigo-soft); }

.impact { background: var(--indigo); color: var(--cream); text-align: center; }
.impact h2 { color: var(--cream); }
.impact .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 28px; margin-top: 44px; }
.impact .num { font-family: 'Fraunces', serif; font-size: clamp(2.8rem, 5vw, 4.2rem); font-weight: 700; color: var(--aqua); line-height: 1; }
.impact .lbl { font-size: .95rem; opacity: .9; margin-top: 10px; }

.flames { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 860px) { .flames { grid-template-columns: 1fr; } }
.flame-badge {
  background: var(--white); border-radius: 50%; aspect-ratio: 1; max-width: 300px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); padding: 30px;
}
.flame-badge .big { font-family: 'Fraunces', serif; font-size: 4.4rem; color: var(--magenta-deep); font-weight: 700; line-height: 1; }

.banner { background: var(--olive-deep); color: var(--white); }
.banner .wrap { display: flex; gap: 34px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: 58px; padding-bottom: 58px; }
.banner h2 { color: var(--white); max-width: 14em; }
.banner p { max-width: 32em; margin-top: 12px; }
.banner .btn { background: var(--cream); }

.newsletter { text-align: center; }
.newsletter form { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.newsletter input {
  padding: 14px 20px; border-radius: 999px; border: 2px solid var(--ink);
  font-size: 1rem; min-width: 290px; font-family: inherit; background: var(--white);
  box-shadow: 4px 4px 0 var(--ink);
}
.newsletter input:focus { outline: 3px solid var(--aqua); }

/* The bottom padding clears the floating "How can we help?" button, which is
   fixed 12px off the bottom and used to sit on top of the copyright line once
   the footer started appearing on every page. */
footer.site { background: var(--indigo); color: var(--cream); padding: 60px 0 32px; padding-bottom: calc(32px + 70px); }
footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 32px; }
footer h3 { color: var(--aqua); font-size: 1.02rem; margin-bottom: 14px; }
footer a { color: var(--cream); text-decoration: none; }
footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
footer ul { list-style: none; }
footer li { margin-bottom: 9px; font-size: .95rem; }
footer .fine { margin-top: 42px; padding-top: 22px; border-top: 1px solid rgba(251,247,236,.25); font-size: .85rem; opacity: .85; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* Inner-page hero band */
.faq-hero, .page-hero { background: var(--aqua); padding: 66px 0; border-bottom: 3px solid var(--ink); }
.page-hero.ph-peach { background: var(--peach); }
.page-hero.ph-olive { background: var(--olive-pale); }
.page-hero.ph-aqua-pale { background: var(--aqua-pale); }
.page-hero.ph-cream { background: var(--cream-deep); }
.page-hero p.lede, .faq-hero p.lede { max-width: 40em; margin-top: 18px; font-size: 1.1rem; font-weight: 600; }
.hero-split-2 { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center; }
.page-hero-photo { border-radius: var(--radius); overflow: hidden; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); aspect-ratio: 4 / 3; }
.page-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 800px) {
  .hero-split-2 { grid-template-columns: 1fr; }
  .page-hero-photo { order: -1; aspect-ratio: 16 / 9; }
}
.prose { max-width: 720px; }
.prose p, .prose ul, .prose ol { margin-bottom: 16px; }
.prose ul, .prose ol { padding-left: 22px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 26px; margin-top: 32px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 18px; margin: 30px 0; }
.fact { background: var(--white); border-radius: var(--radius); padding: 20px 22px; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.fact .k { font-size: .76rem; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; color: var(--magenta-deep); }
.fact .v { font-weight: 700; margin-top: 5px; }
.yes-no { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 24px; margin-top: 28px; }
.steps { list-style: none; counter-reset: step; margin-top: 28px; }
.steps li { counter-increment: step; position: relative; padding: 0 0 26px 62px; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -6px;
  width: 44px; height: 44px; border-radius: 50%; background: var(--coral);
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  color: var(--ink); font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
}
table.contacts { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 26px; background: var(--white); border-radius: var(--radius); overflow: hidden; border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
table.contacts th, table.contacts td { text-align: left; padding: 15px 20px; border-bottom: 1px solid rgba(32,38,76,.14); font-size: .97rem; }
table.contacts tr:last-child td { border-bottom: none; }
table.contacts th { background: var(--indigo); color: var(--cream); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
.timeline { list-style: none; margin-top: 30px; border-left: 3px solid var(--ink); padding-left: 30px; }
.timeline li { margin-bottom: 22px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -39px; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--coral); border: 2px solid var(--ink); }
.timeline .yr { font-family: 'Fraunces', serif; font-weight: 700; color: var(--magenta-deep); font-size: 1.15rem; }
.callout { background: var(--aqua-pale); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); border-radius: var(--radius); padding: 26px 30px; margin: 32px 0; }
.callout.warm { background: var(--peach-pale); }
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 22px; margin-top: 30px; }
.person { background: var(--white); border-radius: var(--radius); padding: 24px; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transition: transform .2s, box-shadow .2s; }
.person:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--ink); }
/* The staff disc holds a headshot once there is one, and the person's initials
   until then. Both are the same size, so a card does not jump when a photo
   lands, and a row of cards reads evenly while only some have photos. */
.person .avatar {
  width: 84px; height: 84px; border-radius: 50%; overflow: hidden;
  background: var(--aqua); border: 2px solid var(--ink); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.6rem;
  margin-bottom: 14px; flex: none;
}
.person .avatar.has-photo { background: var(--cream); }
.person .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person .role { color: var(--magenta-deep); font-weight: 800; font-size: .9rem; }
.person p { font-size: .93rem; color: var(--indigo-soft); margin-top: 8px; }
.impact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 20px; margin-top: 30px; }
.impact-card { background: var(--white); border-radius: var(--radius); padding: 26px; border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--coral); transition: transform .2s; }
.impact-card:hover { transform: translateY(-3px); }
.impact-card .amt { font-family: 'Fraunces', serif; font-size: 2.3rem; font-weight: 700; color: var(--coral-dark); }
form.mock { display: grid; gap: 16px; max-width: 560px; margin-top: 28px; }
form.mock input, form.mock select, form.mock textarea {
  padding: 13px 18px; border-radius: 12px; border: 2px solid var(--ink);
  font-family: inherit; font-size: 1rem; background: var(--white); width: 100%;
  box-shadow: 3px 3px 0 var(--ink);
}
form.mock textarea { min-height: 130px; resize: vertical; }
form.mock input:focus, form.mock select:focus, form.mock textarea:focus { outline: 3px solid var(--aqua); }

.faq-groups { max-width: 800px; }
.faq-groups h2 { margin: 48px 0 8px; color: var(--magenta-deep); font-size: 1.5rem; }
details {
  background: var(--white); border-radius: var(--radius); margin-top: 16px;
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); overflow: hidden;
  transition: box-shadow .2s;
}
details:hover { box-shadow: 5px 5px 0 var(--ink); }
details summary {
  cursor: pointer; padding: 20px 24px; font-weight: 800; font-size: 1.06rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; font-family: 'Fraunces', serif; font-size: 1.6rem; color: var(--coral-dark); flex-shrink: 0; }
details[open] summary::after { content: "–"; }
details .a { padding: 0 24px 22px; color: var(--indigo-soft); }
details .a a { font-weight: 700; }

/* Mid-page media row: text + photo side by side */
.media-row { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.media-row.rev .media-photo { order: -1; }
.media-photo { border-radius: var(--radius); overflow: hidden; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); aspect-ratio: 4 / 3; }
.media-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-row h2, .media-row h3 { margin-bottom: 8px; }
.media-row p { color: var(--indigo-soft); }
@media (max-width: 760px) {
  .media-row, .media-row.rev { grid-template-columns: 1fr; }
  .media-row.rev .media-photo { order: 0; }
  .media-photo { aspect-ratio: 16 / 9; }
}

/* Wide single photo band */
.photo-wide { border-radius: var(--radius); overflow: hidden; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); max-height: 340px; }
.photo-wide img { width: 100%; height: 340px; object-fit: cover; display: block; }

/* Banner with photo */
.banner.has-photo .wrap { align-items: stretch; }
.banner-photo { border-radius: var(--radius); overflow: hidden; border: 2px solid var(--cream); flex: 0 0 300px; max-width: 300px; }
.banner-photo img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 200px; }
@media (max-width: 760px) { .banner-photo { flex-basis: auto; max-width: none; width: 100%; } }

/* Gallery grid */
.gallery-note { max-width: 60ch; color: var(--indigo-soft); font-size: .95rem; margin-top: 12px; }
.gallery-grid { columns: 3 260px; column-gap: 16px; margin-top: 32px; }
.gallery-item {
  break-inside: avoid; margin-bottom: 16px; border-radius: var(--radius); overflow: hidden;
  border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); position: relative;
  transition: transform .18s, box-shadow .18s;
}
.gallery-item:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.gallery-item img { width: 100%; display: block; }
.gallery-item .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 14px 10px;
  background: linear-gradient(rgba(32,38,76,0), rgba(32,38,76,.95)); color: var(--cream);
  font-size: .82rem; font-weight: 700; opacity: 0; transition: opacity .2s;
}
.gallery-item:hover .cap { opacity: 1; }
@media (max-width: 560px) { .gallery-grid { columns: 2 150px; } }

/* Mobile: stack the contact "who to call" table into readable blocks */
@media (max-width: 560px) {
  table.contacts, table.contacts tbody, table.contacts tr, table.contacts td, table.contacts th { display: block; }
  table.contacts tr:first-child { display: none; }
  table.contacts tr { border-bottom: 2px solid rgba(32,38,76,.14); padding: 12px 4px; }
  table.contacts tr:last-child { border-bottom: none; }
  table.contacts td { border: none; padding: 2px 18px; word-break: break-word; }
  table.contacts td:first-child { font-weight: 800; color: var(--ink); padding-top: 4px; }
  table.contacts td:last-child { color: var(--indigo-soft); font-size: .93rem; padding-bottom: 6px; }
}

/* ── News and events ───────────────────────────────────────────── */

/* Event row: a tear-off date block beside the details */
.evt {
  display: grid; grid-template-columns: 96px 1fr; gap: 22px; align-items: start;
  background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--ink); padding: 22px 26px; margin-top: 18px;
  transition: transform .18s, box-shadow .18s;
}
.evt:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.evt .date {
  background: var(--coral); border: 2px solid var(--ink); border-radius: 10px;
  text-align: center; padding: 10px 6px; color: var(--ink);
}
.evt .date .mo { display: block; font-size: .74rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.evt .date .dy { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 2rem; font-weight: 700; line-height: 1; }
.evt .date .yr { display: block; font-size: .7rem; font-weight: 700; opacity: .75; }
.evt h3 { margin-bottom: 4px; }
.evt .when { font-size: .92rem; font-weight: 800; color: var(--teal-deep); }
.evt p { margin-top: 8px; color: var(--indigo-soft); }
.evt .actions { margin-top: 14px; }

/* Recurring weekly things get a calmer, flatter treatment */
.evt.recurring { box-shadow: 5px 5px 0 var(--aqua); }
.evt.recurring .date { background: var(--aqua); }

@media (max-width: 560px) {
  .evt { grid-template-columns: 1fr; gap: 14px; padding: 20px; }
  .evt .date { display: flex; align-items: baseline; gap: 8px; justify-content: center; padding: 8px 12px; }
  .evt .date .dy { font-size: 1.4rem; }
}

/* Dated news post */
.post { border-left: 4px solid var(--aqua); padding: 4px 0 4px 22px; margin-top: 30px; }
.post .stamp { font-size: .8rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--indigo-soft); }
.post h3 { margin: 6px 0 8px; }
.post p { color: var(--indigo-soft); }

/* Placeholder for a section with nothing in it yet */
.emptybox {
  background: var(--aqua-pale); border: 2px dashed var(--ink); border-radius: var(--radius);
  padding: 26px 30px; margin-top: 20px; color: var(--indigo-soft);
}
.emptybox strong { color: var(--ink); }

/* ── Next event spotlight, homepage ────────────────────────────────
   The flyer leads because it is the thing people photograph and share. */
.next-up { background: var(--cream-deep); padding: 64px 0; }
.next-up-grid { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 44px; align-items: center; }
/* An event with no flyer yet gets the full width rather than an empty column */
.next-up-grid.no-flyer { grid-template-columns: 1fr; max-width: 70ch; }
.next-up .flyer {
  display: block; border: 2px solid var(--ink); border-radius: var(--radius);
  overflow: hidden; box-shadow: 7px 7px 0 var(--ink);
  transition: transform .18s, box-shadow .18s;
}
.next-up .flyer:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--ink); }
.next-up .flyer img { width: 100%; height: auto; display: block; }
.next-up h2 { margin-top: 4px; }
.next-up .when-big {
  font-family: 'Fraunces', Georgia, serif; font-size: 1.35rem; font-weight: 700;
  color: var(--teal-deep); margin-top: 12px;
}
.next-up .where { font-weight: 800; color: var(--indigo-soft); margin-top: 2px; }
.next-up .actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .next-up-grid { grid-template-columns: 1fr; gap: 26px; }
  .next-up .flyer { max-width: 320px; margin: 0 auto; }
}

/* Flyer archive, gallery page */
.flyer-group { margin-top: 34px; }
.flyer-group > h3 {
  font-family: 'Nunito Sans', sans-serif; font-size: .82rem; font-weight: 900;
  letter-spacing: .14em; text-transform: uppercase; color: var(--indigo-soft);
  padding-bottom: 8px; border-bottom: 2px solid rgba(32,38,76,.14);
}
.flyer-group > h3 + .flyer-archive { margin-top: 18px; }
.flyer-archive { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 20px; margin-top: 26px; }
.flyer-archive figure {
  margin: 0; border: 2px solid var(--ink); border-radius: var(--radius);
  overflow: hidden; box-shadow: 4px 4px 0 var(--ink); background: var(--white);
  transition: transform .18s, box-shadow .18s;
}
.flyer-archive figure:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.flyer-archive img { width: 100%; height: auto; display: block; }
.flyer-archive figcaption { padding: 10px 12px; font-size: .82rem; font-weight: 700; color: var(--ink); }
.flyer-archive figcaption span { display: block; font-weight: 600; color: var(--indigo-soft); font-size: .78rem; }

/* A single flyer dropped into a page by [taum_flyer], next to the programme
   it belongs to. Narrow on purpose: it is an illustration of the page, not
   the page itself, and anyone who wants it properly uses the download. */
.page-flyer {
  margin: 24px 0 0; max-width: 300px;
  border: 2px solid var(--ink); border-radius: var(--radius);
  overflow: hidden; box-shadow: 4px 4px 0 var(--ink); background: var(--white);
  transition: transform .18s, box-shadow .18s;
}
.page-flyer:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.page-flyer img { width: 100%; height: auto; display: block; }
.page-flyer figcaption { padding: 10px 12px; font-size: .82rem; font-weight: 700; color: var(--ink); }

/* In a callout there is room beside the words, so the flyer sits in the margin
   rather than leaving half the box empty. Narrow screens keep it stacked. */
@media (min-width: 860px) {
  .callout .page-flyer { float: right; max-width: 240px; margin: 4px 0 14px 30px; }
  .callout::after { content: ""; display: block; clear: both; }
}

/* ── Partners and sponsors ─────────────────────────────────────── */
.partners { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; padding: 0; list-style: none; }
.partners li {
  background: var(--white); border: 2px solid var(--ink); border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink); padding: 9px 20px; font-weight: 700; font-size: .95rem;
}
.partners li a { color: var(--ink); text-decoration: none; }
.partners li a:hover { color: var(--coral-dark); text-decoration: underline; }

/* Sponsor tiers */
.tier { margin-top: 30px; }
.tier > h3 {
  font-family: 'Nunito Sans', sans-serif; font-size: .82rem; font-weight: 900;
  letter-spacing: .14em; text-transform: uppercase; color: var(--indigo-soft);
  padding-bottom: 8px; border-bottom: 2px solid rgba(32,38,76,.14);
}

/* ── Programs page cards ───────────────────────────────────────── */
/* Photo-led cards built from the program pages themselves. Two across on a
   desktop, each card laid out sideways so the contact block has room to sit
   under the description without squeezing it into a column. */
.pcards { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: 36px; }
@media (min-width: 1000px) { .pcards { grid-template-columns: 1fr 1fr; } }

.pcard {
  display: grid; grid-template-columns: 210px 1fr;
  background: var(--white); border: 2px solid var(--ink);
  border-radius: var(--radius); box-shadow: 5px 5px 0 var(--ink);
  overflow: hidden; transition: transform .18s, box-shadow .18s;
}
.pcard:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--ink); }
.pcard:focus-within { box-shadow: 8px 8px 0 var(--ink); }

.pcard-media { position: relative; display: block; background: var(--pc-accent, var(--indigo)); }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The badge marks the program at a glance and keeps the card readable if a
   featured image is ever missing, since the panel behind it is the tone. */
.pcard-ico {
  position: absolute; left: 12px; bottom: 12px;
  width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--pc-accent, var(--indigo)); color: var(--cream);
  border: 2px solid var(--ink); border-radius: 999px;
}
.pcard-ico svg { width: 22px; height: 22px; }

.pcard-body { padding: 22px 24px 20px; display: flex; flex-direction: column; }
.pcard-body h3 { font-size: 1.3rem; margin: 0; }
.pcard-body h3 a { color: var(--ink); text-decoration: none; }
.pcard-body h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pcard-line {
  font-family: var(--serif); font-size: 1.02rem; font-weight: 600;
  color: var(--pc-accent, var(--indigo)); margin-top: 4px; line-height: 1.3;
}
.pcard-desc { font-size: .93rem; color: var(--indigo-soft); margin-top: 10px; }

.pcard-who {
  margin-top: 14px; padding: 12px 14px;
  background: var(--cream); border: 2px solid var(--ink); border-radius: 12px;
  font-size: .88rem;
}
.pcard-who .lbl {
  font-size: .7rem; font-weight: 900; letter-spacing: .09em;
  text-transform: uppercase; color: var(--indigo-soft); margin-bottom: 5px;
}
.pcard-who .nm { font-weight: 800; color: var(--ink); }
.pcard-who a { color: var(--ink); font-weight: 700; }

.pcard-more {
  margin-top: auto; padding-top: 16px;
  font-weight: 900; font-size: .92rem; color: var(--ink);
  text-decoration: none; align-self: start;
}
.pcard-more:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Below this the sideways layout starves the photo, so stack it. */
@media (max-width: 620px) {
  .pcard { grid-template-columns: 1fr; }
  .pcard-media { height: 190px; }
  .pcard-body { padding: 18px 18px 16px; }
}

/* ── Partner logos ─────────────────────────────────────────────── */
/* Logos arrive at whatever size and proportion each organization has, so
   every tile is the same box and the logo is fitted inside it rather than
   filling it. A partner with no logo yet gets the same tile with its name
   set large, so a half-filled grid still looks deliberate. */
.logo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
  gap: 20px; margin-top: 26px; padding: 0; list-style: none;
}
.logo-grid li {
  background: var(--white); border: 2px solid var(--ink);
  border-radius: var(--radius); box-shadow: 4px 4px 0 var(--ink);
  transition: transform .18s, box-shadow .18s;
}
.logo-grid li:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.logo-grid li > a,
.logo-grid li > span.nm {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; height: 100%; padding: 20px 18px; text-decoration: none; color: var(--ink);
}
.logo-grid img {
  max-width: 100%; max-height: 72px; width: auto; height: auto;
  object-fit: contain; display: block;
}
.logo-grid .nm { font-weight: 800; font-size: .9rem; text-align: center; line-height: 1.3; }
.logo-grid li.no-logo .nm { font-size: 1rem; }
.logo-grid li > a:hover .nm { text-decoration: underline; text-underline-offset: 4px; }

/* Buttons sitting together directly under a page hero. The class was in the
   page content from the start but had no rule, so the buttons had no gap. */
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

/* Download link under each flyer. Separate from the image, which opens the
   lightbox, so viewing and saving are two different clicks. */
.flyer-dl {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  font-size: .78rem; font-weight: 800; color: var(--coral-dark);
  text-decoration: none;
}
.flyer-dl svg { width: 14px; height: 14px; }
.flyer-dl:hover { text-decoration: underline; text-underline-offset: 3px; }