/* YouthBy — the town guides wear the site's type and header.
 *
 * Every town page carries its own long inline stylesheet, written when each
 * town had a palette of its own. That palette stays: it is the town's, and it
 * is what makes the guide feel local. This file is loaded after the page's
 * own sheet and changes only the things that should be the same everywhere —
 * the two typefaces and the shape of the header, cards and buttons — and it
 * does so through the page's own --brand-* variables, so each town keeps its
 * colors.
 */

/* The town sheets set Inter on the body and Playfair on every heading. Both
   are re-pointed here rather than edited 94 times, and !important is what
   beats the per-class font rules already in those sheets. */
body,
body * {
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}
h1, h2, h3, h4, h5, h6,
h1 *, h2 *, h3 *, h4 *,
.hero-title, .section-title, .dl-title, .kids-panel h2 {
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  letter-spacing: -0.02em;
}

/* ---------- the header ---------- */
.nav-logo { flex: none; }
.nav-links { gap: 2px; min-width: 0; flex: 1; }
.nav-links a { padding: 8px 6px; border-radius: 8px; font-weight: 600; font-size: clamp(12px, 0.4vw + 6.4px, 14.5px); white-space: nowrap; flex: none; }
.nav-kids-btn { white-space: nowrap; }
.nav-links .nav-cta { padding: 8px 11px; margin-left: 4px; }

/* The banner is the first row of the fixed header, so the page keeps the same
   distance from the top as it did when the banner sat below the bar. */
body { padding-top: 104px; }

/* Two groups, the way the main header reads: the guide's own links on the
   left, the site's utility links against the account control on the right. */
.nav-links .nav-providers { margin-left: auto; }
@media (min-width: 1440px) {
  .nav-inner { padding: 0 clamp(22px, 5vw, 74px); }
}

/* ---------- cards ---------- */
.program-card { border-radius: 16px; }
.card-save { border-color: rgba(0, 0, 0, 0.1); }
.saved-toggle.is-on { background: var(--brand-main); border-color: var(--brand-main); }

/* ---------- buttons ---------- */
/* The guide's primary button was orange with dark-blue text. In towns whose
   accent is close to the button text, the pair goes unreadable; white text
   holds on every palette. */
.btn-primary,
.btn-solid { background: var(--brand-main); color: #fff; }
.btn-primary:hover,
.btn-solid:hover { background: var(--brand-deep); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .program-card:hover { transform: none; }
}

/* ---------- the site's utility controls, inside a town's header ---------- */
.nav-links .nav-providers,
.nav-links .nav-calendar { font-weight: 600; }
.nav-links .nav-providers {
  margin-left: auto;
}
.nav-links .nav-account-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; margin-left: 4px;
  border: 1px solid rgba(15, 10, 26, 0.14); border-radius: 50%;
  color: var(--brand-main);
}
.nav-links .nav-account-link:hover { background: var(--brand-pale); color: var(--brand-deep); }
@media (max-width: 1120px) {
  .nav-links .nav-providers { margin-left: 0; padding-left: 11px; border-left: 0; }
  .nav-links .nav-account-link { width: 40px; height: 40px; margin: 10px 0 0; }
}

.nav-links .nav-saved { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.nav-links .nav-saved::before{content:"";width:15px;height:15px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1.1L12 21l7.8-7.6 1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1.1L12 21l7.8-7.6 1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E") center/contain no-repeat}
.nav-links .nav-saved[hidden] { display: none; }
.nav-links .nav-saved-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--brand-pale); color: var(--brand-deep);
  font-size: 11.5px; font-weight: 800;
}

/* ---------- the account control, inside a town -----------------------------
   The same sign-in sheet and account menu as the main site, in the town's
   palette. account.js builds both; these rules only dress them, so a parent
   never leaves the guide to log in or check what they saved. */
.nav-signin{padding:9px 16px;font-size:14px;font-weight:700;line-height:1;color:#fff;background:var(--brand-main);border:1px solid transparent;border-radius:9px;cursor:pointer;white-space:nowrap}
.nav-signin:hover{background:var(--brand-deep)}
.nav-account{position:relative;display:inline-flex;justify-content:flex-end;min-width:44px}
.nav-account-button{display:inline-flex;align-items:center;justify-content:center;padding:4px;background:none;border:1px solid rgba(0,0,0,.12);border-radius:999px;cursor:pointer}
.nav-account-button:hover{border-color:var(--brand-main);background:var(--brand-pale)}
.nav-account-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--brand-main);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.nav-account-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:1200;width:250px;padding:8px;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:14px;box-shadow:0 20px 50px -20px rgba(25,18,40,.45);display:grid;gap:2px}
.nav-account-menu[hidden]{display:none}
.nav-account-head{padding:10px 10px 12px;border-bottom:1px solid rgba(0,0,0,.07);margin-bottom:6px}
.nav-account-head strong{display:block;font-size:14px}
.nav-account-head span{display:block;font-size:12px;color:#6e6977;overflow-wrap:anywhere}
.nav-account-stats{display:flex;gap:14px;margin-top:10px}
.nav-account-stat{display:grid;gap:1px}
.nav-account-stat b{font-size:15px;color:var(--brand-main)}
.nav-account-stat small{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#6e6977}
.nav-account-menu a,.nav-account-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border:0;border-radius:9px;background:none;font:inherit;font-size:13.5px;font-weight:600;color:#231B34;text-align:left;text-decoration:none;cursor:pointer}
.nav-account-menu a:hover,.nav-account-menu button:hover{background:var(--brand-pale);color:var(--brand-deep)}
.nav-account-menu .icon{width:15px;height:15px;flex:none}
.nav-account-count{margin-left:auto;font-size:11px;font-weight:700;color:var(--brand-main)}
.nav-account-sep{height:1px;background:rgba(0,0,0,.07);margin:5px 2px}
.nav-account-signout{color:#8a2c2c}
.signin{position:fixed;inset:0;margin:auto;height:max-content;width:min(420px,calc(100vw - 28px));max-height:calc(100vh - 28px);overflow:auto;padding:28px 26px 22px;border:0;border-radius:18px;background:#fff;color:#231B34;box-shadow:0 30px 80px rgba(25,18,40,.4)}
.signin::backdrop{background:rgba(25,18,40,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.signin-close{position:absolute;top:10px;right:12px;width:34px;height:34px;display:grid;place-items:center;font-size:22px;line-height:1;color:#6e6977;background:none;border:0;border-radius:8px;cursor:pointer}
.signin-close:hover{background:var(--brand-pale);color:var(--brand-deep)}
.signin-brand{display:inline-flex;align-items:flex-start;margin:0 34px 0 0;font-family:"Manrope","DM Sans",system-ui,sans-serif;font-size:19px;font-weight:800;letter-spacing:-.035em;line-height:1;color:#231B34}
.signin-brand span{color:var(--brand-main)}
.signin-brand i{display:inline-block;width:7px;height:7px;margin:11px 0 0 2px;border-radius:50%;background:var(--brand-main)}
.signin-title{margin-top:16px;font-size:clamp(22px,3vw,27px);line-height:1.12;letter-spacing:-.03em}
.signin-text{margin-top:8px;font-size:13.5px;line-height:1.55;color:#6e6977}
.signin-email{display:grid;gap:9px;margin-top:18px}
.signin-label{font-size:11.5px;font-weight:700;color:#231B34}
.signin-email input{height:46px;padding:0 13px;font:inherit;font-size:14.5px;border:1px solid #d9d2e3;border-radius:10px;background:#fff;color:#231B34}
.signin-email input:focus{outline:2px solid var(--brand-pale);border-color:var(--brand-main)}
.signin-continue{height:46px;border:0;border-radius:10px;background:var(--brand-main);color:#fff;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer}
.signin-continue:hover{background:var(--brand-deep)}
.signin-continue:disabled{opacity:.6;cursor:default}
.signin-switch{margin-top:4px;padding:0;border:0;background:none;color:var(--brand-main);font:inherit;font-size:12.5px;font-weight:700;text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.signin-error{margin:2px 0 0;font-size:12px;color:#9B2C2C}
.signin-or{display:flex;align-items:center;gap:10px;margin:16px 0;font-size:11px;color:#8a8394}
.signin-or:before,.signin-or:after{content:'';flex:1;height:1px;background:rgba(0,0,0,.1)}
.signin-provider{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:44px;margin-bottom:8px;border:1px solid #d9d2e3;border-radius:10px;background:#fff;color:#231B34;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.signin-provider:hover{border-color:var(--brand-main);background:var(--brand-pale)}
.signin-apple-mark{margin-right:2px}
.signin-legal{margin-top:14px;font-size:10.5px;line-height:1.5;color:#8a8394}
.signin-legal a{color:var(--brand-main);text-decoration:underline}
.signin-account{margin-top:18px;padding-top:14px;border-top:1px solid rgba(0,0,0,.08)}
.signin-account-name{font-size:14px;font-weight:700}
.signin-account-email{font-size:12px;color:#6e6977}
.signin-note{margin-top:10px;font-size:12.5px;color:#6e6977}
.signin-confirm{padding:2px 0 0}
.signin-confirm-title{margin:0 0 8px;font-size:17px;letter-spacing:-.01em}
.signin-confirm-text{margin:0 0 16px;font-size:13.5px;line-height:1.6;color:#6e6977}
.signin-confirm-text strong{color:#231b34}
.signin-confirm .signin-continue{width:100%}
.signin-confirm .signin-switch{display:block;margin-top:10px}
.signin-confirm[hidden]{display:none}
.signin-email[hidden], .signin-or[hidden], .signin-provider[hidden], .signin-legal[hidden], .signin-google-slot[hidden] { display: none; }
@media(max-width:720px){.nav-account-menu{position:fixed;left:12px;right:12px;top:auto;bottom:16px;width:auto}}

/* The coverage strap from the main pages: a dark band at the top of the
   document, clearing the fixed nav. It scrolls away with the page. */
.coverage-strip{display:block;margin-top:0;background:var(--ink-deep,#1a1a2e);color:#fff;font-size:13px;line-height:1;letter-spacing:.1px;font-weight:500;text-decoration:none}
.coverage-strip-inner{display:flex;align-items:center;justify-content:center;gap:2px;min-height:34px;padding:0 24px;text-align:center}
.coverage-strip-arrow{transition:transform .18s ease}
.coverage-strip:hover .coverage-strip-inner,.coverage-strip:focus-visible .coverage-strip-inner{text-decoration:underline;text-underline-offset:3px}
.coverage-strip:hover .coverage-strip-arrow{transform:translateX(3px)}
.coverage-strip:focus-visible{outline:2px solid #fff;outline-offset:-3px}
@media(max-width:768px){.coverage-strip{margin-top:0}.coverage-strip-inner{min-height:48px;padding:7px 16px;line-height:1.32}}

/* Tokens the feed sheet reads. The calendar page defines them from the town's
   palette; every other town page needs the same names. */
body{--purple-tint:var(--brand-pale);--surface:#fff;--radius-panel:16px;--header-h:70px;--deep:var(--brand-deep)}
@media(max-width:768px){body{--header-h:56px}}

/* Town sub-pages: same stable gutter as the guide, so the fixed header does not
   jump sideways between a long page and a short one. */
html{scrollbar-gutter:stable}

/* ---------- Suggest an edit, opened over the card ---------- */
/* The same dialog the programs list uses, so correcting a card on a town page
   no longer sends the reader to the program page and loses their place. Every
   color comes from the town's palette, so it belongs on the page it opens on. */
.suggest-dialog{position:fixed;inset:0;margin:auto;height:max-content;padding:0;border:0;border-radius:16px;width:min(440px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;background:#fff;color:var(--ink-deep,#231b34);box-shadow:0 28px 70px rgba(31,20,45,.32)}
.suggest-dialog:not([open]){display:none}
.suggest-dialog::backdrop{background:rgba(31,20,45,.3);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.suggest-dialog h2{font-size:20px;letter-spacing:-.03em;padding:20px 22px 0;color:var(--ink-deep,#231b34)}
.suggest-lede{margin:6px 22px 0;font-size:13px;color:var(--slate,#6a6478)}
.suggest-close{position:absolute;top:8px;right:10px;width:36px;height:36px;border:0;border-radius:50%;background:none;color:var(--slate,#6a6478);font-size:24px;line-height:1;cursor:pointer}
.suggest-close:hover{background:var(--brand-pale);color:var(--ink-deep,#231b34)}
.suggest-dialog .suggest-form{display:grid;gap:12px;padding:16px 22px 20px}
.suggest-dialog .suggest-form[hidden]{display:none}
.suggest-dialog label{display:block;font-size:12px;font-weight:700}
.suggest-dialog select,.suggest-dialog input,.suggest-dialog textarea{display:block;width:100%;margin-top:5px;font:inherit;font-size:14px;padding:9px 11px;border:1px solid rgba(15,10,26,.14);border-radius:9px;background:#fff;color:var(--ink-deep,#231b34)}
.suggest-dialog textarea{resize:vertical}
.suggest-dialog .btn{justify-self:center;margin-top:2px;padding:11px 22px;border:0;border-radius:10px;background:var(--brand-main);color:#fff;font-size:14px;font-weight:700;cursor:pointer}
.suggest-dialog .btn:hover{background:var(--brand-deep);color:#fff}
.suggest-dialog .btn.light{background:var(--brand-pale);color:var(--brand-deep)}
.suggest-status{margin:0;font-size:12.5px;font-weight:600;color:var(--brand-main);min-height:1em}
.suggest-status:empty{display:none}
.suggest-thanks{padding:6px 22px 22px}
.suggest-thanks p{margin:0 0 14px;font-size:14px;line-height:1.5}
.suggest-thanks .btn{justify-self:start}
.suggest-thanks[hidden]{display:none}
.suggest-photo{display:grid;gap:6px;padding:11px 12px;border:1px dashed var(--brand-pale);border-radius:11px;background:var(--brand-pale)}
.suggest-photo-pick{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--brand-deep);cursor:pointer}
.suggest-photo-pick span{font-weight:600;color:var(--slate,#6a6478)}
.suggest-photo-pick input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.suggest-photo-pick::before{content:'+';display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;background:#fff;border:1px solid var(--brand-pale);font-size:14px;line-height:1}
.suggest-photo-pick:focus-within{outline:2px solid var(--brand-main);outline-offset:3px;border-radius:6px}
.suggest-photo-note{margin:0;font-size:11px;line-height:1.45;color:var(--slate,#6a6478)}
.suggest-photo-preview{display:flex;align-items:center;gap:10px;margin-top:2px}
.suggest-photo-preview[hidden]{display:none}
.suggest-photo-preview img{width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid rgba(15,10,26,.14)}
.suggest-photo-remove{font:inherit;font-size:11.5px;font-weight:700;color:#8a3b3b;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}

/* My Calendar is a personal page and lives in the account menu now, so the
   bar does not carry it whether or not anyone is signed in. */
.nav-links .nav-calendar{display:none}

/* One program per row on a phone, the same as the programs pages: two
   174px columns left no room for the card's own details. */
@media (max-width:768px){ .programs-grid{grid-template-columns:minmax(0,1fr)} }

/* A phone page never pans sideways. `clip` where it is supported, hidden
   where it is not. */
html{overflow-x:hidden}
@supports (overflow-x:clip){html{overflow-x:clip}}

/* Google's own button sits where our styled one was; the custom button stays
   as the fallback for when GIS cannot load, and is hidden when it can. */
.signin-google-slot,
.signin-google-slot:empty {
  /* The placeholder and Google's drawn button share this box, so the swap
     costs no height and the centred dialog does not jump when it arrives. */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  overflow: hidden;
  margin-bottom: 12px;
}
.signin-google-slot + .signin-provider { margin-top: 0; }
.signin-google-slot > .signin-provider { margin: 0; }
.signin-provider[hidden]{display:none}

/* The correction pill on a town card carries the same pencil seal as the
   rest of the site: a tinted disc holding the pencil, quiet at rest and in
   the town's own color on hover. */
.card-suggest{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:600;color:var(--slate,#6E6977);text-decoration:none;white-space:nowrap;margin-right:auto;padding:3px 12px 3px 3px;border:1px solid rgba(0,0,0,.1);border-radius:999px;background:#fff;transition:color .18s,border-color .18s}
.card-suggest .suggest-mark{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;background:rgba(89,41,167,.09);background:color-mix(in srgb,var(--brand-main,#5929A7) 11%,#fff);color:var(--brand-main,#5929A7);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);transition:background .18s,color .18s}
.card-suggest svg{width:12px;height:12px;flex:none}
.card-suggest:hover{color:var(--brand-main,#5929A7);border-color:currentColor;text-decoration:none}
.card-suggest:hover .suggest-mark{background:var(--brand-main,#5929A7);color:#fff}


/* ---------- the site footer, carried by the town guides too ---------- */
/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: #292139;
  color: #fff;
  padding: clamp(30px, 3.2vw, 44px) 0 26px;
}
/* Brand on the left, four link groups on the right, then a full-width caution
   and the utility row. Two columns with the groups as a nested four-column
   grid, rather than five areas on one grid: it lets the groups reflow 4 → 2 → 1
   on their own while the brand block stays one thing. */
.footer-inner {
  display: grid;
  grid-template-columns: minmax(230px, 1.15fr) minmax(0, 2.6fr);
  gap: clamp(30px, 3.4vw, 52px) clamp(24px, 3vw, 56px);
  align-items: start;
}
.footer-brand { min-width: 0; }
.footer-groups {
  display: grid;
  /* Five groups, five columns: four put the providers column under the town
     resources and left a column of empty footer beside it. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 26px clamp(14px, 1.8vw, 26px);
}

/* A group heading is a label, not a sentence. The providers group's own
   heading is the only one that links anywhere — the landing it points at
   exists so that group is not three orphaned forms. */
.footer-group-title {
  font-family: "DM Sans", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px;
}
.footer-group-title a {
  color: inherit; text-decoration: none;
  /* The heading is a label; the link inside it must not borrow the list's
     size, or one group's heading reads as a sentence beside the others. */
  font-size: inherit; font-weight: inherit; line-height: inherit;
  letter-spacing: inherit; text-transform: inherit;
}
.footer-group-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-group ul { display: grid; gap: 11px; }
/* 15px rather than the 14 the three old links used: these are the only route to
   most of the site, and the brief asks for a directory, not fine print.
   .8 white on the footer ink is about 10:1, well past the 4.5 the brief sets. */
.footer-group a {
  color: rgba(255, 255, 255, .8);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.45;
  transition: color .2s cubic-bezier(.22,.68,.28,1);
}
.footer-group a:hover,
.footer-group a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.footer-mark { width: 150px; height: auto; }
.footer-line {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: normal;
  color: rgba(255,255,255,.72);
  max-width: 38ch;
}
.footer-contact {
  margin-top: 10px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: normal;
  color: rgba(255,255,255,.55);
}
.footer-contact a {
  color: rgba(255,255,255,.8);
  text-decoration: none;
  text-underline-offset: 3px;
}
.footer-contact a:hover { color: var(--brand-light, #c9a9ea); }
.footer-provenance {
  margin-top: 10px;
  font-size: 13.5px;
  letter-spacing: normal;
  color: rgba(255,255,255,.5);
}
.footer-provenance a { color: rgba(255,255,255,.72); text-decoration: none; text-underline-offset: 3px; }
.footer-provenance a:hover { color: #fff; }

/* The drawing, under the brand block.
   It is composed for paper — a light-lavender medallion, white streets, ink
   type, a #FCFAF7 page showing through its cards — and this is the darkest
   ground on the site, so it keeps its own background: a plate of the same
   paper the page above is printed on. A tinted rectangle would have been the
   other way to make it read, and it would have repainted a composition that
   was drawn once and should not be redrawn by CSS.
   The width is stated rather than left to the drawing: an inline SVG answers
   `width: 100%` against whatever box it is handed, and at footer scale the
   plate has to be what decides how big that is. Below about 150px the small
   card lettering stops resolving and the drawing is just a mark, which is the
   floor here. */
.footer-atlas {
  width: clamp(118px, 12vw, 165px);
  margin-top: clamp(18px, 2vw, 26px);
  padding: clamp(9px, 1.1vw, 15px);
  background: #FCFAF7;
  border-radius: 15px;
  box-shadow: 0 24px 54px -34px rgba(0, 0, 0, .9);
}
.footer-atlas .hero-atlas { max-width: 100%; margin-inline: 0; }

/* Above the utility row rather than below it: it is the one line a parent
   should read before acting, and under a copyright line it reads as an
   afterthought. The brief lists the two the other way round. */
.footer-note {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255,255,255,.45);
}
.footer-utility {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 28px;
  font-size: 12.5px;
}
.footer-utility-links { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.footer-utility-links a {
  color: rgba(255,255,255,.62);
  text-decoration: none;
}
.footer-utility-links a:hover,
.footer-utility-links a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-copyright { color: rgba(255,255,255,.45); }

@media (max-width: 1080px) {
  .footer-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px clamp(20px, 4vw, 44px); }
}
@media (max-width: 820px) {
  .footer-inner { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .footer-groups { grid-template-columns: 1fr; gap: 28px; }
  .footer-utility { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   MOTION — one orchestrated entrance, then stillness
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* The copy only. The illustration left the hero for the footer, so it no
     longer arrives with the headline — and a drawing that fades in well below
     the fold was animating where nobody could see it. */
  .hero-copy > * {
    opacity: 0;
    transform: translateY(14px);
    animation: rise .68s cubic-bezier(.22,.68,.28,1) forwards;
  }
  .hero-copy > *:nth-child(1) { animation-delay: .05s; }
  .hero-copy > *:nth-child(2) { animation-delay: .12s; }
  .hero-copy > *:nth-child(3) { animation-delay: .19s; }
  .hero-copy > *:nth-child(4) { animation-delay: .26s; }
  .hero-copy > *:nth-child(5) { animation-delay: .33s; }
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* Scroll reveal — classes applied by app.js */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.22,.68,.28,1), transform .6s cubic-bezier(.22,.68,.28,1);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* The footer on the town guides is the site footer, so it brings its own
   shell: the guide's stylesheet has no general .shell rule. */
.site-footer .shell { max-width: 1320px; margin: auto; width: calc(100% - 80px); }
@media (max-width: 720px) { .site-footer .shell { width: calc(100% - 40px); } }

/* The site footer's lists are links, not bullet points. The homepage's reset
   does this globally; the town guides carry their own list styles. */
.site-footer ul { list-style: none; margin: 0; padding: 0; }

/* ==========================================================================
   The guide's own top: one banner, the site's header, the search, the four
   photographs and the town's three pages. The guide is a page of YouthBy, so
   the parts that are the site's are identical everywhere; the parts that are
   the town's — its photographs, its pages, its listings — sit under the
   search, where a parent can see what they are before choosing one.
   ========================================================================== */

/* One banner color on every guide, the same as the rest of the site. The
   town palette still paints the cards and buttons; it no longer paints the
   strip that tells a reader they are on YouthBy. */
.coverage-strip { background: #231B34; }

/* The desktop row, and only the desktop row. On a phone or a tablet the
   header is a drawer, and these measurements — the 22px gap, the 44px
   pills, the 15px labels — must not follow it there. */
@media (min-width: 1280px) {
  /* The main site's header, to the pixel: 13px bold labels, 25px apart, the
     utility row against the account button. */
  /* Measured against the main header rather than approximated: 22px between
     the wordmark and the first label, 2px between labels, 10px inside each,
     44px tall, ink rather than the town's slate. */
  .nav-links { gap: 2px; margin-left: 22px; margin-right: -6px; }
  .nav-links a {
    display: inline-flex; align-items: center; height: 44px; padding: 10px;
    border-radius: 8px; font-size: 15px; font-weight: 600; color: #231B34;
  }
  .nav-links a:hover { background: none; color: #5929A7; }
  .nav-links .nav-providers { margin-left: auto; font-size: 15px; font-weight: 600; padding: 0 6px; }
  .nav-links .nav-saved { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; padding: 10px; }
  .nav-links .nav-signin {
    display: inline-flex; align-items: center; justify-content: center;
    height: 44px; padding: 0 20px; border-radius: 10px;
    background: var(--purple, #5929A7); color: #fff; font-size: 15px; font-weight: 700;
  }
  .nav-links .nav-signin:hover { background: #4a1f8c; color: #fff; }
  .nav-links .nav-saved-count { background: #f2eafa; color: #5929A7; }
}

/* The drawer, the same one the main site opens: full width under the
   header, one left-aligned 18px row per destination with a hairline
   between them, Log in as the only button. A parent who opened the menu
   on /programs meets the same menu on a town guide. */
@media (max-width: 1279px) {
  /* A backdrop-filter makes the header the containing block for fixed
     descendants, so the drawer would be measured from the header's top and
     stop a row below its first link. */
  .nav { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    width: auto; height: auto; margin: 0; background: #FCFAF7;
    padding: 14px clamp(22px,5vw,74px) 48px; overflow-y: auto;
    box-shadow: none; z-index: 1001;
    transform: translateX(100%); visibility: hidden;
    transition: transform .3s ease, visibility .3s;
  }
  .nav-links.open { transform: none; visibility: visible; }
  .nav-links a {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; height: auto; padding: 16px 2px; border-radius: 0;
    border-bottom: 1px solid rgba(15,10,26,.12);
    font-size: 18px; font-weight: 600; color: #231B34;
    white-space: normal; text-align: left;
  }
  .nav-links a:hover { background: none; color: #5929A7; }
  .nav-links .nav-providers { margin-left: 0; padding: 16px 2px; font-size: 18px; }
  .nav-links .nav-saved { display: flex; width: 100%; gap: 10px; padding: 16px 2px; font-size: 18px; }
  .nav-links .nav-saved::before { width: 18px; height: 18px; }
  .nav-links .nav-saved-count { margin-left: auto; }
  .nav-links .nav-account { margin-left: 0; align-self: flex-start; }
  .nav-links .nav-signin {
    display: inline-flex; align-self: flex-start; justify-content: center;
    width: auto; height: auto; margin: 18px 0 0; padding: 15px 20px;
    border-radius: 10px; font-size: 18px;
    /* The drawer is the main site's, so its button is the main site's purple
       even though the guide's own accents take the town's color. */
    background: #5929A7; color: #fff;
  }
  .nav-links .nav-signin:hover { background: #4a1f8c; color: #fff; }
}

body { padding-top: 115px; }

/* ---------- the search, the photographs, the pages ----------
   One compact block: the search and the submit door on one line, then the
   four photographs with the two explanation cards beside them, so the first
   row of programs is on screen when the guide opens. */
.tw-top { background: var(--paper, #FCFAF7); border-bottom: 1px solid rgba(15,10,26,.08); padding: 10px 0 0; }
.tw-top-inner { max-width: var(--max-w, 1240px); margin: 0 auto; padding: 0 32px; }
.tw-hero { display: flex; align-items: center; gap: 16px; margin: 0 0 10px; }
/* The same search pill as /programs: white inside a lilac ring, the button
   sitting in the bar rather than floating over its edge. Only the button's
   color changes here, and it is the town's. */
.tw-search {
  position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0;
  max-width: none; padding: 5px; background: #fff;
  border: 1px solid #CBB0E6; border-radius: 999px;
  transition: border-color .18s, box-shadow .18s;
}
.tw-search:focus-within { border-color: var(--brand-main, #5929A7); box-shadow: 0 0 0 4px var(--brand-pale, #f2eafa); }
.tw-submit-short { display: none; }
.tw-search-input {
  width: 100%; min-width: 0; min-height: 40px; padding: 0 14px;
  border: 0; border-radius: 999px; background: none;
  font-size: 15px; color: var(--ink-deep, #231B34);
}
.tw-search-input::placeholder { color: var(--slate, #6b6478); }
.tw-search-input:focus { outline: none; }
.tw-search-go {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--brand-main, #5929A7); color: #fff;
  cursor: pointer;
}
.tw-search-go svg { width: 18px; height: 18px; }
/* Submit is a door, not a filter: a quiet text link behind a rule, so it is
   findable at the end of the search line without competing with it. */
.tw-submit {
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px;
  padding: 0 2px 0 17px; margin-left: 2px; border: 0; border-left: 1px solid rgba(15,10,26,.14);
  background: none; color: var(--slate, #6b6478); font-size: 13px; font-weight: 700;
  white-space: nowrap; text-decoration: none;
}
.tw-submit-plus {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand-pale, #f2eafa); color: var(--brand-main, #5929A7);
  font-size: 14px; font-weight: 700; line-height: 1;
}
.tw-submit:hover { color: var(--brand-main, #5929A7); }

.tw-strip { display: grid; grid-template-columns: 1fr; gap: 10px; padding-bottom: 12px; align-items: stretch; }
.tw-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.tw-photos .hero-photo { border-radius: 10px; overflow: hidden; aspect-ratio: 16/9; }
.tw-photos .hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tw-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0; }
.tw-tab {
  position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center;
  gap: 14px; padding: 8px 16px 8px 8px; overflow: hidden; min-height: 92px; border: 1px solid rgba(15,10,26,.12); border-radius: 10px;
  background: #fff; color: var(--ink-deep, #231B34); text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.tw-tab-art { width: 190px; height: 100%; min-height: 80px; object-fit: cover; object-position: center; display: block; border-radius: 6px; background: var(--brand-pale, #f2eafa); }
.tw-tab-text { display: grid; gap: 1px; min-width: 0; padding-right: 66px; }
.tw-tab-go {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 12px; font-weight: 700; color: var(--brand-main, #5929A7); white-space: nowrap;
}
.tw-tab-title { font-family: Manrope, system-ui, sans-serif; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.tw-tab-note { font-size: 12.5px; color: var(--slate, #6b6478); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-tab:hover, .tw-tab:focus-visible { border-color: var(--brand-main, #5929A7); box-shadow: 0 10px 24px -18px rgba(35,27,52,.5); }
/* The hover list is a panel, not an expansion: opening it must not push the
   listings down the page. */
.tw-tab-menu {
  position: absolute; z-index: 50; top: calc(100% + 6px); right: 0;
  display: grid; gap: 6px; width: min(360px, calc(100vw - 32px));
  padding: 11px 13px; border: 1px solid rgba(15,10,26,.12); border-radius: 12px;
  background: #fff; box-shadow: 0 18px 40px -18px rgba(35,27,52,.45);
  font-size: 12px; line-height: 1.45; color: var(--slate, #6b6478);
  max-height: 0; opacity: 0; overflow: hidden; pointer-events: none;
  transition: max-height .18s ease, opacity .15s ease, padding .18s ease;
}
.tw-tab:hover .tw-tab-menu, .tw-tab:focus-visible .tw-tab-menu {
  max-height: 200px; opacity: 1; padding: 11px 13px; pointer-events: auto;
}
.tw-tab-menu span::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-main, #C660B4); margin: 0 7px 2px 1px; }

/* ---------- the filters stay at the top ---------- */
.filter-section { position: relative; z-index: 40; background: var(--paper, #FCFAF7); border-bottom: 1px solid rgba(15,10,26,.08); }

/* ---------- three listings a row ---------- */
.tw-results { display: block; max-width: var(--max-w, 1240px); margin: 0 auto; padding: 18px 32px 0; }
.programs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .programs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  body { padding-top: 112px; }
  .tw-top-inner { padding: 0 16px; }
  .tw-strip { grid-template-columns: minmax(0, 1fr); }
  .tw-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .tw-photos .hero-photo { aspect-ratio: 4/3; }
  /* One card a row on a phone: two columns left each title three lines tall
     and cut the note to "The town at…". Full width fits both in one line. */
  .tw-tabs { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tw-tab { grid-template-columns: 64px minmax(0, 1fr); gap: 11px; padding: 6px 12px 6px 6px; min-height: 68px; }
  .tw-tab-art { width: 64px; min-height: 58px; }
  .tw-tab-title { font-size: 14.5px; }
  .tw-tab-text { padding-right: 0; }
  .tw-tab-go { display: none; }
  .tw-tab-menu { display: none; }
  /* The search takes the whole row and Submit a program sits under it. A
     phone zooms in when the field is tapped, and a pill that shared the line
     with a link pushed the page sideways to keep the caret in view; a
     full-width pill has nowhere to push. */
  .tw-hero { gap: 8px; flex-wrap: wrap; }
  .tw-search { flex: 1 1 100%; }
  .tw-search-input { font-size: 14px; padding: 0 10px; }
  .tw-search-go { width: 36px; height: 36px; }
  /* On a phone the search is the whole job of this row. Submit a program is
     still in the menu and on the page below; a second line here only pushed
     the first result further down. */
  .tw-submit { display: none; }
  .tw-submit-plus { display: none; }
  .tw-results { padding: 14px 16px 0; }
  .programs-grid { grid-template-columns: minmax(0, 1fr); }
  .nav-links { gap: 2px; }
  .nav-links a { font-size: 18px; font-weight: 600; padding: 16px 2px; }
}

/* The same way back the main site's drawer carries, in the same place. */
.nav-back {
  display: none;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  margin: 0 0 8px;
  padding: 8px 12px 8px 6px;
  border: 0;
  border-radius: 9px;
  background: none;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #5929A7;
  cursor: pointer;
}
.nav-back svg { width: 18px; height: 18px; flex: none; }
.nav-back:hover,
.nav-back:focus-visible { background: #F2EAFA; }
@media (max-width: 1279px) { .nav-back { display: inline-flex; } }