/* The webfonts are linked from the page head, the same request the rest of
   the site makes. An @import here was discovered only after this sheet
   arrived, so the header painted in the fallback face and reflowed when DM
   Sans landed — and it asked for a 600 weight the other pages never load, so
   the same nav item was heavier here than on the homepage. */
:root{--paper:#fcfaf7;--white:#fff;--ink:#292139;--purple:#5929a7;--deep:#422080;--muted:#6e6977;--line:#e5e0e8;--tint:#f2eafa;--pink:#c660b4;--logo-period:#c660b4;--mint:#d7e8dc;--peach:#f5d8c2;--gold:#f5dfaa;--radius:18px;--accent:#5929a7;--wash:#f2eafa;--shell:1200px;font-family:'DM Sans',Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:145px}body{margin:0;font-size:15px;line-height:1.55}body.locked{overflow:hidden}button,input,select,textarea{font:inherit;color:inherit}button,a,input,select,summary{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button{border:0}img{max-width:100%;display:block}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #9c71d5;outline-offset:4px}button:hover,a:hover{transition:background .18s,color .18s,transform .18s}h1,h2,h3,h4{font-family:Manrope,'DM Sans',Arial,sans-serif;letter-spacing:-.045em;line-height:1.12;margin:0}p{margin:0}h2{font-size:34px}h3{font-size:22px}strong{font-weight:700}.shell{max-width:var(--shell);margin:auto;width:calc(100% - 80px)}.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip{position:absolute;z-index:50;top:-80px;padding:12px 20px;background:var(--purple);color:white}.skip:focus{top:0}.muted{color:var(--muted)}.eyebrow{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--purple);margin-bottom:18px}.eyebrow:before{content:'';width:7px;height:7px;background:var(--pink)}.btn{min-height:45px;display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:10px;padding:11px 18px;background:var(--purple);color:white;font-weight:700;font-size:14px;border:1px solid var(--purple)}.btn:hover{background:var(--deep)}.btn.light{color:var(--purple);background:white;border-color:var(--line)}.btn.light:hover{background:var(--tint);border-color:#b99edb}.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)}.btn.ghost:hover{background:var(--tint)}.text-link{color:var(--purple);font-weight:700;text-decoration:underline;text-underline-offset:4px}.arrow{font-size:21px;line-height:1}.icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.preview-note{background:#eee8f3;color:#554765;text-align:center;font-size:11px;padding:5px 15px;letter-spacing:.02em}.site-header{height:79px;background:var(--paper);border-bottom:1px solid var(--line);position:relative;z-index:25}.header-inner{height:100%;display:flex;align-items:center;gap:35px}.brand{width:155px;flex-shrink:0}.brand img{width:155px;height:auto}.desktop-nav{display:flex;align-items:center;gap:25px;font-weight:700;font-size:13px}.desktop-nav a:hover,.utility a:hover{color:var(--purple)}.desktop-nav a[aria-current]{color:var(--purple)}.utility{margin-left:auto;display:flex;align-items:center;gap:24px;font-size:13px;font-weight:700}.saved-trigger{display:flex;align-items:center;gap:7px;background:transparent;padding:10px 0}.saved-count{min-width:20px;height:20px;border-radius:50%;background:var(--tint);color:var(--purple);display:grid;place-items:center;font-size:11px}.menu-toggle{display:none;background:none;padding:10px}.mobile-menu{display:none}.hero{position:relative;padding:33px 0 26px;overflow:hidden}.hero-inner{display:grid;grid-template-columns:1.06fr 1fr;align-items:center;gap:40px;min-height:292px}.hero h1{font-size:57px;font-weight:800;line-height:1.07;letter-spacing:-.06em;max-width:650px}.hero h1 em{font-style:normal;color:var(--purple);display:block}.hero-lede{font-size:16px;line-height:1.65;max-width:510px;color:#625b6c;margin-top:18px}.hero-art{height:292px;position:relative;isolation:isolate}.hero-art:before{content:'';position:absolute;inset:11px 0 0 20px;z-index:-2;background:var(--wash);border-radius:55% 45% 30% 50% / 45% 38% 55% 50%;transform:rotate(-4deg)}.hero-photo{position:absolute;object-fit:cover;box-shadow:0 7px 22px #2b1b3c0a}.hero-photo.big{width:66%;height:240px;right:8px;top:6px;border-radius:45% 12% 18% 14% / 40% 15% 17% 15%;transform:rotate(3deg);border:6px solid var(--paper)}.hero-photo.small{width:47%;height:156px;left:0;bottom:0;transform:rotate(-5deg);border-radius:15px;border:6px solid var(--paper)}.photo-label{position:absolute;right:4px;bottom:5px;font-size:10px;color:#706775;max-width:170px;line-height:1.4}.hero-stamp{position:absolute;left:13px;top:5px;width:104px;height:104px;border:1px solid #b69ace;border-radius:50%;background:var(--paper);display:grid;place-content:center;text-align:center;transform:rotate(-12deg);font-size:10px;line-height:1.5;letter-spacing:.06em;color:var(--purple);font-weight:700}.hero-stamp span{font:700 24px Manrope,sans-serif;letter-spacing:-.06em}.scribble{position:absolute;width:110px;height:58px;right:18px;bottom:10px;stroke:#ae7bc2;fill:none;stroke-width:1.6;z-index:-1}.hero-art.programs .big{object-position:45% 40%;width:58%;right:5px}.hero-art.programs .small{width:49%;object-position:50% 40%}.hero-art.programs .third{width:38%;height:100px;object-fit:cover;position:absolute;border:5px solid var(--paper);border-radius:12px;right:14px;bottom:-4px;transform:rotate(5deg)}.hero-art.stem .big{object-position:45% 50%;width:72%}.hero-art.stem .small{object-position:35% 50%}.hero-art.camps .small{object-position:40% 50%}.hero-art.arts .big{object-position:48% 40%}.hero-art.aid .big{object-position:55% 50%}/* Above the results header, which is sticky at z-index 30: the town and
   age panels open downwards over it, and a rule drawn across the panel is
   not a divider, it is a bug. */
.finder-section{position:relative;z-index:50}.finder{padding:10px 10px 10px 7px;background:white;border:1px solid #d7c8e6;border-radius:17px;box-shadow:0 8px 30px #42208009;display:grid;grid-template-columns:1.1fr .9fr .8fr auto;gap:0;align-items:center}.field{padding:4px 18px;border-right:1px solid var(--line);min-width:0}.field label{display:block;font-size:10px;letter-spacing:.08em;font-weight:800;text-transform:uppercase;color:#756783;margin-bottom:3px}.field input,.field select{border:0;background:none;width:100%;min-height:29px;font-size:15px;outline:none!important;padding:0}.field input::placeholder{color:#8a818e}.finder .btn{height:52px;padding:0 23px;margin-left:12px;white-space:nowrap}.browse-nav{margin-top:23px;border-bottom:1px solid var(--line);display:flex;gap:24px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}.browse-nav a{display:flex;align-items:center;gap:7px;padding:10px 0 13px;font-weight:700;font-size:13px;border-bottom:3px solid transparent}.browse-nav a[aria-current]{color:var(--purple);border-color:var(--purple)}.browse-nav a:hover{color:var(--purple)}.browse-nav .icon{height:17px;width:17px}.browse-nav .aid-link{margin-left:auto}.browser-body{padding:23px 0 65px}.intent-row{display:flex;align-items:center;gap:9px;overflow:auto;scrollbar-width:none;padding:0 1px 8px;white-space:nowrap}.intent-label{font-size:11px;color:var(--muted);font-weight:700;margin-right:5px}.chip{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;min-height:37px;border:1px solid var(--line);border-radius:999px;background:var(--white);font-weight:600;font-size:12px;white-space:nowrap}.chip:hover{border-color:#b79aca;background:#faf6fc}.chip[aria-pressed=true]{color:var(--purple);background:var(--tint);border-color:#b99cdb}.workspace{display:grid;grid-template-columns:210px 1fr;gap:30px;margin-top:21px;align-items:start}.filter-panel{padding-right:24px;border-right:1px solid var(--line);position:sticky;top:20px}.filter-heading{font-size:15px;letter-spacing:-.02em;margin-bottom:20px;display:flex;justify-content:space-between;align-items:center}.filter-heading button,.reset-link{background:none;padding:0;color:var(--purple);text-decoration:underline;font-size:11px;font-weight:600}.filter-group{border-top:1px solid var(--line);padding:17px 0}.filter-group h3{font-family:inherit;font-size:12px;letter-spacing:0;margin-bottom:11px}.filter-select{width:100%;background:white;border:1px solid var(--line);border-radius:8px;padding:8px;font-size:12px;min-height:40px}.check{display:flex;align-items:flex-start;gap:8px;margin-bottom:9px;font-size:12px;color:#5e5669}.check input{accent-color:var(--purple);width:15px;height:15px;margin:2px 0}.filter-foot{font-size:11px;color:var(--muted);line-height:1.6;margin-top:16px}.filter-foot a{color:var(--purple);text-decoration:underline}.results-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:16px}.results-top h2{font-size:24px;letter-spacing:-.04em}.result-count{font-size:11px;color:var(--muted);margin-top:5px}.result-controls{display:flex;align-items:center;gap:10px}.sort-label{font-size:10px;color:var(--muted)}.sort{font-size:12px;background:none;border:1px solid var(--line);border-radius:8px;min-height:37px;padding:7px;max-width:150px}.mobile-filters{display:none}.active-filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}.active-filters:empty{display:none}.active-filter{border:1px solid #c3addd;background:var(--tint);color:var(--purple);font-size:11px;min-height:32px;border-radius:7px;padding:5px 9px}.active-filter:after{content:' ×';margin-left:6px}.collection-note{padding:11px 14px;background:#f2eee7;border-radius:9px;font-size:11px;color:#685e70;margin:0 0 15px}.program-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.program-card{border:1px solid var(--line);border-radius:14px;background:white;position:relative;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,border-color .2s}.program-card:hover{border-color:#c7afd9;box-shadow:0 8px 20px #3f255307}.card-image{height:154px;width:100%;object-fit:cover}.card-content{padding:19px 19px 15px;display:flex;flex-direction:column;flex:1}.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:10px}.card-category{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--purple);padding-top:5px}.save-button{border:1px solid var(--line);border-radius:50%;width:33px;height:33px;display:grid;place-items:center;background:white;color:var(--purple);flex-shrink:0;margin-top:-4px}.save-button .icon{width:17px;height:17px}.save-button[aria-pressed=true]{background:var(--tint);border-color:#c2a3df}.save-button[aria-pressed=true] .icon{fill:var(--purple);stroke:var(--purple)}.program-card h3{font-size:19px;font-weight:800;line-height:1.3;letter-spacing:-.025em}.program-card h3 button{font:inherit;text-align:left;background:none;padding:0}.program-card h3 button:hover{color:var(--purple)}.provider{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.5}.badges{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:12px}.badge{display:inline-flex;align-items:center;font-size:10px;padding:3px 7px;border-radius:5px;background:#f3f0f6;color:#63546e;line-height:1.5}.badge.aid{background:#e7f0e9;color:#3c6449}.badge.free{background:#e7f0e9;color:#3c6449}.facts{margin:14px 0 15px;display:grid;gap:9px}.facts>div{display:grid;grid-template-columns:18px 1fr;gap:8px;font-size:12px;line-height:1.5;align-items:start}.facts .icon{width:15px;height:15px;color:#9b88ab;margin-top:2px}.facts dt{display:none}.facts dd{margin:0}.price{font-weight:700;font-size:13px}.cost-unknown{color:#7b6b87;font-weight:500}.venue{color:#7b7184;font-size:11px}.card-bottom{margin-top:auto;padding-top:13px;border-top:1px solid #eee9f1;display:flex;align-items:center;justify-content:space-between;gap:10px}.detail-button{background:none;padding:0;color:var(--purple);font-size:12px;font-weight:700;min-height:32px}.compare-check{display:flex;align-items:center;gap:5px;color:#796d83;font-size:10px}.compare-check input{accent-color:var(--purple);width:13px;height:13px}.aid-summary{background:#f0f5ef;border-radius:8px;padding:11px;font-size:11px;color:#42644c;margin:0 0 14px;line-height:1.65}.aid-summary strong{display:block;font-size:10px;letter-spacing:.04em;margin-bottom:3px;text-transform:uppercase}.aid-summary .next-step{display:block;margin-top:6px;color:#647668;font-size:10px}.load-more{display:flex;justify-content:center;margin-top:25px}.empty{padding:40px 24px;border:1px dashed #c7b8d3;border-radius:15px;text-align:center;grid-column:1/-1}.empty h3{font-size:22px;margin-bottom:10px}.empty p{font-size:13px;color:var(--muted);max-width:390px;margin:auto auto 18px}.empty-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.utility-story{margin-top:28px;background:var(--wash);border-radius:15px;display:grid;grid-template-columns:1fr 200px;overflow:hidden;min-height:160px}.utility-story .copy{padding:24px}.utility-story h3{font-size:22px;max-width:380px;margin-bottom:9px}.utility-story p{font-size:12px;max-width:390px;color:#6a6072;line-height:1.7}.utility-story .text-link{font-size:12px;display:inline-block;margin-top:13px}.utility-story img{height:100%;width:100%;object-fit:cover}.principle-row{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:40px 0 43px;border-top:1px solid var(--line)}.principle-row .number{font-size:11px;font-weight:800;color:#a782bc;margin-bottom:10px}.principle-row h3{font-size:19px;margin-bottom:9px}.principle-row p{font-size:12px;color:var(--muted);line-height:1.7;max-width:300px}.aid-guide{background:#edf2eb;border:1px solid #d9e5d7;border-radius:15px;padding:22px;margin-bottom:22px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px}.aid-guide h3{font-size:15px;margin-bottom:7px;letter-spacing:-.02em}.aid-guide p{font-size:11px;color:#63715f;line-height:1.7}.aid-guide span{color:#7d967b;font-size:10px;letter-spacing:.08em;display:block;margin-bottom:6px}.faq-section{padding:38px 0 55px;border-top:1px solid var(--line);display:grid;grid-template-columns:.8fr 1.4fr;gap:80px}.faq-section h2{font-size:29px}.faqs details{border-bottom:1px solid var(--line);padding:15px 0}.faqs details:first-child{padding-top:0}.faqs summary{cursor:pointer;display:flex;justify-content:space-between;font-size:14px;font-weight:700;gap:18px;list-style:none}.faqs summary:after{content:'+';color:var(--purple);font-size:19px}.faqs details[open] summary:after{content:'−'}.faqs details p{font-size:13px;line-height:1.8;color:var(--muted);padding-top:12px;max-width:580px}.mission-hero{padding:60px 0 45px;position:relative}.mission-hero .hero-inner{grid-template-columns:1.2fr 1fr;gap:65px}.mission-hero h1{font-size:63px;letter-spacing:-.055em}.mission-hero h1 span{display:block;color:var(--purple)}.mission-hero .hero-lede{font-size:17px;line-height:1.75}.mission-hero .hero-art{height:330px}.mission-hero .big{width:88%;height:290px;right:0;object-position:50% 45%}.mission-hero .small{height:160px;width:50%;left:-25px;bottom:-8px}.mission-line{padding:35px 0 43px;font-family:Manrope,sans-serif;letter-spacing:-.04em;font-weight:700;font-size:31px;max-width:920px;line-height:1.45}.mission-line span{color:var(--purple)}.origin{display:grid;grid-template-columns:1fr 1fr;gap:65px;padding:45px 0;border-top:1px solid var(--line);align-items:center}.origin-image{position:relative}.origin-image img{border-radius:18px;width:100%;height:310px;object-fit:cover;object-position:50% 48%}.photo-caption{font-size:10px;color:var(--muted);margin-top:10px;display:block}.origin h2{font-size:39px;margin-bottom:20px}.origin p{color:#6c6275;font-size:14px;line-height:1.9;margin-bottom:17px}.quote{background:var(--tint);padding:40px;border-radius:18px;margin:25px 0 15px;font-size:30px;font-family:Manrope,sans-serif;font-weight:700;line-height:1.45;letter-spacing:-.04em;text-align:center}.quote footer{font:500 12px 'DM Sans',sans-serif;letter-spacing:0;margin-top:13px;color:var(--muted)}.founders{padding:58px 0 52px}.section-heading{max-width:600px;margin-bottom:29px}.section-heading p{font-size:14px;line-height:1.8;color:var(--muted);margin-top:13px}.founder-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.founder{display:flex;align-items:center;gap:25px;border:1px solid var(--line);border-radius:17px;background:white;padding:28px}.portrait{width:124px;height:124px;border-radius:50%;overflow:hidden;background:var(--tint);flex-shrink:0}.portrait img{width:100%;height:100%;object-fit:cover}.founder h3{font-size:23px;margin-bottom:8px}.founder .role{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--purple);font-weight:700}.founder p{color:var(--muted);font-size:12px;margin-top:5px}.promise-section{padding:35px 0 60px}.promise-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:25px;margin-top:27px}.promise{padding:23px 0;border-top:1px solid var(--line)}.promise h3{font-size:20px;margin-bottom:11px}.promise p{font-size:13px;color:var(--muted);line-height:1.85;max-width:480px}.mission-end{margin:0 0 60px;background:var(--purple);color:white;border-radius:20px;padding:45px 50px;display:flex;align-items:center;gap:40px;justify-content:space-between}.mission-end h2{color:white;font-size:33px;max-width:500px}.mission-end p{font-size:13px;color:#e0d2f0;max-width:500px;margin-top:13px}.mission-end .btn{background:white;color:var(--purple);white-space:nowrap}.site-footer{background:#292139;color:#ede5f4;padding:45px 0 25px}.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:45px}.footer-brand{font-family:Manrope,sans-serif;font-size:35px;font-weight:800;letter-spacing:-.065em;color:white}.footer-brand span{color:#be89dc}.footer-intro p{font-size:12px;color:#c2b7ce;line-height:1.8;max-width:260px;margin-top:13px}.footer-grid h3{font:700 10px 'DM Sans',sans-serif;color:#cdb3e4;text-transform:uppercase;letter-spacing:.1em;margin:10px 0 17px}.footer-grid a{display:block;font-size:12px;color:#e1d7ec;margin-bottom:10px}.footer-grid a:hover{text-decoration:underline}.footer-bottom{border-top:1px solid #ffffff1c;margin-top:30px;padding-top:18px;font-size:10px;color:#b7aac5;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.compare-tray{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:40;background:var(--ink);color:white;border:1px solid #594368;box-shadow:0 8px 25px #24143135;border-radius:14px;display:flex;align-items:center;gap:24px;padding:11px 15px 11px 22px;min-width:430px}.compare-tray p{font-size:12px;font-weight:700}.compare-tray .btn{background:#f2eafa;color:var(--purple);border:0;min-height:39px;padding:8px 15px}.compare-tray .clear-compare{background:none;color:#ded1eb;font-size:11px}.compare-tray[hidden]{display:none}.dialog{border:1px solid var(--line);border-radius:19px;padding:0;background:var(--paper);color:var(--ink);width:min(900px,calc(100vw - 36px));max-height:90vh;box-shadow:0 20px 100px #22132e50}.dialog::backdrop{background:#2415337d;backdrop-filter:blur(3px)}.dialog[open]{display:flex;flex-direction:column}.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;padding:25px 28px 19px;border-bottom:1px solid var(--line);gap:20px;flex-shrink:0}.dialog-head h2{font-size:27px}.dialog-head p{font-size:12px;color:var(--muted);margin-top:8px}.close-dialog{border:1px solid var(--line);background:white;width:34px;height:34px;border-radius:50%;font-size:24px;line-height:1;flex-shrink:0}.dialog-body{padding:25px 28px;overflow:auto}.dialog .facts{font-size:15px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:23px}.detail-section{background:white;padding:20px;border:1px solid var(--line);border-radius:12px}.detail-section h3{font-size:16px;margin-bottom:13px}.detail-section p{font-size:13px;line-height:1.85;color:var(--muted)}.detail-actions{display:flex;gap:10px;flex-wrap:wrap;margin:23px 0 0}.detail-note{font-size:11px;color:var(--muted);margin-top:17px;line-height:1.8}.comparison-scroll{overflow-x:auto}.comparison-table{border-collapse:collapse;width:100%;font-size:12px;min-width:540px}.comparison-table th,.comparison-table td{padding:16px 15px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;min-width:170px;line-height:1.7}.comparison-table th{font-weight:700;font-size:14px}.comparison-table th:first-child,.comparison-table td:first-child{min-width:110px;width:110px;color:var(--muted);font-size:11px;font-weight:600}.comparison-table th:not(:first-child){color:var(--purple)}.comparison-table .btn{font-size:11px;padding:8px 10px;min-height:37px}.save-dialog{width:min(680px,calc(100vw - 24px))}.saved-row{padding:18px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:15px}.saved-row h3{font-size:17px;line-height:1.4;letter-spacing:-.025em}.saved-row p{font-size:11px;color:var(--muted);margin-top:5px}.saved-row .remove{background:none;font-size:11px;color:var(--purple);text-decoration:underline;align-self:start}.reminder{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}.reminder label{font-size:11px;color:var(--muted)}.reminder input{font-size:11px;border:1px solid var(--line);border-radius:6px;padding:5px;background:white;min-height:34px}.saved-bottom{padding:20px 0 0}.saved-bottom p{font-size:11px;line-height:1.75;color:var(--muted);margin:12px 0}.saved-search{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:15px;background:var(--tint);border-radius:10px;margin-bottom:20px}.saved-search p{font-size:12px;color:#6b557d}.saved-search strong{display:block;color:var(--purple);margin-bottom:3px}.saved-search button{background:white;color:var(--purple);border:1px solid #d3bde6;border-radius:8px;padding:8px 11px;font-size:11px}.search-save{background:transparent;border:1px solid var(--line);border-radius:8px;min-height:37px;padding:7px 10px;font-size:11px;font-weight:700;color:var(--purple)}.toast{position:fixed;bottom:23px;left:50%;transform:translateX(-50%);background:white;color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 7px 30px #281b3a30;padding:13px 20px;font-size:12px;z-index:70;max-width:calc(100vw - 30px);text-align:center}.toast[hidden]{display:none}.filter-dialog{max-width:460px}.filter-dialog .filter-panel{position:static;border:0;padding:0;display:block}.filter-dialog .dialog-body{padding:20px 28px}.mobile-filter-apply{width:100%;margin-top:18px}.proof-strip{display:flex;gap:17px;align-items:center;margin-top:18px;font-size:10px;color:#81708f}.proof-strip span{display:inline-flex;gap:6px;align-items:center}.proof-strip .icon{width:13px;height:13px}.related{font-size:11px;color:var(--muted);margin-top:18px}.related a{color:var(--purple);text-decoration:underline}.mobile-backtop{display:none}
@media(min-width:1450px){:root{--shell:1260px}.hero h1{font-size:62px}.hero-inner{gap:60px}.hero-art{height:315px}.hero-photo.big{height:260px}.hero-photo.small{height:170px}}
@media(max-width:1100px){.shell{width:calc(100% - 48px)}.header-inner{gap:24px}.utility{gap:17px}.desktop-nav{gap:18px}.hero h1{font-size:49px}.hero-inner{gap:25px}.hero-stamp{width:85px;height:85px;font-size:8px}.hero-stamp span{font-size:21px}.hero-photo.big{width:68%;height:235px}.hero-photo.small{width:48%;height:145px}.workspace{grid-template-columns:185px 1fr;gap:23px}.filter-panel{padding-right:18px}.card-content{padding:16px}.browse-nav{gap:20px}.hero-lede{font-size:15px}.utility-story{grid-template-columns:1fr 160px}.mission-hero h1{font-size:53px}}
@media(max-width:850px){.utility .provider-link{display:none}.desktop-nav{display:none}.menu-toggle{display:grid;place-items:center}.utility{gap:15px}.site-header{height:69px}.brand,.brand img{width:139px}.mobile-menu{position:absolute;top:68px;background:var(--paper);border-bottom:1px solid var(--line);left:0;right:0;padding:20px 24px;gap:13px;box-shadow:0 10px 20px #24153310}.mobile-menu.open{display:grid;grid-template-columns:1fr 1fr}.mobile-menu a{font-size:13px;font-weight:600;padding:8px}.hero-inner{grid-template-columns:1.2fr 1fr;min-height:265px}.hero{padding-top:28px}.hero h1{font-size:43px}.hero-art{height:255px}.hero-photo.big{height:213px;width:75%}.hero-photo.small{height:120px;width:55%}.hero-stamp{display:none}.hero-lede{font-size:14px}.hero-art.programs .third{height:80px;bottom:4px}.hero-art.programs .small{width:53%}.photo-label{font-size:8px;max-width:110px}.finder{grid-template-columns:1fr 1fr .9fr auto}.field{padding:3px 12px}.field input,.field select{font-size:13px}.finder .btn{padding:0 15px}.browse-nav{gap:22px}.workspace{grid-template-columns:1fr;margin-top:15px}.workspace>.filter-panel{display:none}.mobile-filters{display:inline-flex;gap:6px;align-items:center;background:white;border:1px solid var(--line);border-radius:8px;min-height:37px;font-size:11px;padding:7px 10px;font-weight:700}.mobile-filters .icon{width:15px;height:15px}.sort-label{display:none}.utility-story{grid-template-columns:1fr 200px}.principle-row{gap:20px}.principle-row h3{font-size:17px}.footer-grid{gap:25px}.mission-hero .hero-inner{gap:30px}.mission-hero h1{font-size:45px}.mission-hero .hero-lede{font-size:14px}.mission-hero .hero-art{height:265px}.mission-hero .big{height:240px}.mission-hero .small{height:125px;left:-10px}.mission-line{font-size:26px}.origin{gap:32px}.origin h2{font-size:31px}.origin p{font-size:13px}.founder{padding:20px;gap:15px}.portrait{width:85px;height:85px}.founder h3{font-size:20px}.mission-end{padding:35px;gap:25px}.mission-end h2{font-size:28px}.faq-section{gap:35px}}
@media(max-width:600px){html{scroll-padding-top:20px}.shell{width:calc(100% - 36px)}body{font-size:14px}.preview-note{font-size:9px;padding:5px 12px}.site-header{height:63px}.header-inner{gap:15px}.brand,.brand img{width:123px}.utility{gap:17px}.saved-trigger{font-size:11px;gap:5px}.saved-trigger .icon{width:16px;height:16px}.saved-count{height:18px;min-width:18px;font-size:10px}.menu-toggle{padding:6px}.mobile-menu{top:62px}.hero{padding:23px 0 17px}.hero-inner{display:block;min-height:0;position:relative}.hero-copy{position:relative;z-index:2}.eyebrow{font-size:9px;margin-bottom:12px;letter-spacing:.12em}.hero h1{font-size:37px;max-width:100%;line-height:1.07;letter-spacing:-.055em}.hero-lede{font-size:12px;line-height:1.7;max-width:100%;margin-top:13px;padding-right:0}.hero-art{height:94px;margin-top:18px;display:flex;gap:8px;position:relative;border-radius:12px;overflow:hidden}.hero-art:before,.hero-stamp,.scribble{display:none}.hero-photo.big,.hero-photo.small,.hero-art.programs .big,.hero-art.programs .small,.hero-art .third{position:static!important;transform:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;width:50%!important;height:94px!important;object-fit:cover!important}.hero-art.programs .big{width:36%!important;object-position:45% 28%}.hero-art.programs .small{width:35%!important}.hero-art.programs .third{width:29%!important}.hero-art .big{object-position:center 38%}.hero-art .small{object-position:center 40%}.hero-art.stem .big{object-position:50% 50%}.photo-label{background:#fcfaf7e8;bottom:0;right:0;border-radius:5px 0 0 0;padding:3px 6px;max-width:none;font-size:7px}.finder{grid-template-columns:1fr 1fr;border-radius:12px;padding:9px;gap:7px}.field{padding:3px 7px;border:0;min-height:45px}.field:first-child{grid-column:1/3;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:10px;padding-bottom:10px;min-height:40px}.field:first-child label{white-space:nowrap;margin:0;font-size:9px}.field:first-child input{font-size:13px;min-height:28px}.field:nth-child(2){border-right:1px solid var(--line)}.field label{font-size:8px;margin-bottom:3px}.field select{font-size:12px;min-height:25px}.finder .btn{grid-column:1/3;margin:0;height:40px;min-height:40px;font-size:12px}.finder .btn .icon{width:16px;height:16px}.browse-nav{margin-top:12px;gap:21px;width:calc(100% + 18px);padding-right:18px}.browse-nav a{font-size:11px;padding:9px 0 11px;border-bottom-width:2px}.browse-nav .icon{display:none}.browse-nav .aid-link{margin-left:0}.browser-body{padding-top:16px;padding-bottom:35px}.intent-row{margin-right:-18px;gap:7px;padding-right:18px}.intent-label{font-size:10px}.chip{font-size:10px;padding:6px 11px;min-height:32px}.workspace{margin-top:14px}.results-top{display:block;margin-bottom:13px}.results-top h2{font-size:23px}.result-count{font-size:10px;margin-top:3px}.result-controls{margin-top:13px;gap:8px;flex-wrap:wrap}.sort{font-size:10px;max-width:145px;min-height:33px}.mobile-filters{font-size:10px;min-height:33px;padding:5px 9px}.search-save{font-size:10px;min-height:33px;margin-left:auto;padding:5px 9px}.program-grid{grid-template-columns:1fr;gap:14px}.program-card{border-radius:12px}.card-content{padding:17px}.program-card h3{font-size:19px;max-width:310px}.provider{font-size:11px}.facts{gap:8px;margin-top:13px}.facts>div{font-size:12px}.card-bottom{padding-top:10px}.compare-check{font-size:11px}.detail-button{font-size:12px}.card-category{font-size:9px}.collection-note{font-size:10px;padding:9px 11px;margin-bottom:13px}.aid-summary{font-size:11px}.utility-story{grid-template-columns:1fr 108px;margin-top:23px;min-height:195px}.utility-story .copy{padding:20px}.utility-story h3{font-size:20px}.utility-story p{font-size:11px}.utility-story .text-link{font-size:11px}.utility-story img{object-position:42% 50%}.principle-row{grid-template-columns:1fr;padding:26px 0 31px;gap:19px}.principle-row .number{margin:0;grid-row:1/3;width:25px}.principle-row>div{display:grid;grid-template-columns:25px 1fr;gap:5px 10px}.principle-row h3{font-size:16px;margin:0}.principle-row p{font-size:11px;grid-column:2;max-width:none}.aid-guide{grid-template-columns:1fr;gap:14px;padding:18px;margin-bottom:20px}.aid-guide>div{display:grid;grid-template-columns:28px 1fr;gap:3px 8px}.aid-guide span{grid-row:1/3;font-size:10px;margin:0;padding-top:3px}.aid-guide h3{font-size:14px;margin-bottom:2px}.aid-guide p{font-size:11px;grid-column:2}.faq-section{grid-template-columns:1fr;padding:29px 0 35px;gap:24px}.faq-section h2{font-size:26px}.faqs summary{font-size:12px}.faqs details p{font-size:12px}.site-footer{padding:30px 0 23px}.footer-grid{grid-template-columns:1fr 1fr;gap:23px 25px}.footer-intro{grid-column:1/3}.footer-intro p{max-width:290px;font-size:11px}.footer-brand{font-size:31px}.footer-grid h3{font-size:9px;margin:0 0 13px}.footer-grid a{font-size:11px;margin-bottom:9px}.footer-bottom{font-size:9px;margin-top:22px;gap:8px}.compare-tray{min-width:0;width:calc(100% - 24px);bottom:12px;padding:10px 12px;gap:12px;border-radius:12px;justify-content:space-between}.compare-tray p{font-size:11px}.compare-tray .btn{font-size:11px;padding:8px 12px;min-height:35px}.compare-tray .clear-compare{font-size:10px}.dialog{max-height:92dvh;width:calc(100vw - 20px);border-radius:15px}.dialog-head{padding:20px 18px 16px}.dialog-head h2{font-size:23px}.dialog-head p{font-size:11px}.dialog-body{padding:20px 18px}.detail-grid{grid-template-columns:1fr;gap:13px}.detail-section{padding:17px}.detail-section p{font-size:12px}.detail-actions .btn{font-size:12px}.comparison-table th,.comparison-table td{padding:12px;min-width:170px}.comparison-table th:first-child,.comparison-table td:first-child{position:sticky;left:0;background:var(--paper);min-width:90px;max-width:90px;z-index:1}.comparison-table{min-width:440px}.mission-hero{padding:30px 0 22px}.mission-hero .hero-inner{display:block}.mission-hero h1{font-size:40px}.mission-hero .hero-lede{font-size:13px;line-height:1.8}.mission-hero .hero-art{display:flex;height:145px;margin-top:24px;gap:8px}.mission-hero .big,.mission-hero .small{position:static;width:60%!important;height:145px!important;transform:none}.mission-hero .small{width:40%!important;object-position:45% 40%}.mission-line{font-size:24px;line-height:1.45;padding:23px 0 31px}.origin{grid-template-columns:1fr;gap:27px;padding:30px 0}.origin-image img{height:230px}.origin h2{font-size:30px;margin-bottom:15px}.origin p{font-size:12px;line-height:1.9;margin-bottom:14px}.origin .btn{font-size:12px}.quote{padding:27px 18px;font-size:23px;border-radius:13px;margin:15px 0 0}.quote footer{font-size:10px;margin-top:13px}.founders{padding:36px 0 26px}.section-heading{margin-bottom:22px}.section-heading h2{font-size:28px}.section-heading p{font-size:12px}.founder-grid{grid-template-columns:1fr;gap:13px}.founder{padding:21px;gap:22px}.portrait{height:96px;width:96px}.founder h3{font-size:22px}.founder .role{font-size:9px}.founder p{font-size:11px}.promise-section{padding:22px 0 35px}.promise-section h2{font-size:28px}.promise-grid{grid-template-columns:1fr;gap:0;margin-top:23px}.promise{padding:18px 0}.promise h3{font-size:18px;margin-bottom:9px}.promise p{font-size:12px}.mission-end{padding:28px;display:block;margin-bottom:35px;border-radius:15px}.mission-end h2{font-size:27px}.mission-end p{font-size:12px}.mission-end .btn{margin-top:22px;font-size:12px}.proof-strip{margin-top:14px;gap:12px;font-size:9px}.proof-strip .icon{width:11px;height:11px}.related{font-size:10px}.saved-search{padding:12px}.saved-search p{font-size:11px}.saved-row h3{font-size:16px}.saved-bottom .btn{font-size:12px}.toast{font-size:11px;bottom:15px;padding:11px 14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
/* Keep first results close to the search, especially on phones. */
@media(min-width:601px){.hero{padding-top:24px;padding-bottom:20px}.hero-inner{min-height:260px}.hero-art{height:260px}.hero-photo.big{height:220px}.hero-photo.small{height:144px}.hero-stamp{width:95px;height:95px}.hero-stamp span{font-size:22px}.mission-hero .hero-art{height:330px}.mission-hero .big{height:290px}.mission-hero .small{height:160px}}
@media(max-width:600px){.preview-note{white-space:nowrap;font-size:8px}.hero{padding-top:19px;padding-bottom:15px}.hero-art{height:72px;margin-top:15px}.hero-photo.big,.hero-photo.small,.hero-art.programs .big,.hero-art.programs .small,.hero-art .third{height:72px!important}.hero-lede{margin-top:11px}.browse-nav{margin-top:8px}.browser-body{padding-top:12px}.results-top{margin-bottom:12px}.mission-hero .hero-art{height:145px}.mission-hero .big,.mission-hero .small{height:145px!important}}
.toast{pointer-events:none;bottom:84px}
@media(max-width:600px){.toast{bottom:80px}}
.aid-intro{margin:0 0 17px;border:1px solid #d9e5d7;border-radius:11px;background:#edf2eb}.aid-intro>summary{padding:12px 16px;cursor:pointer;font-size:12px;color:#486146;font-weight:700}.aid-intro .aid-guide{border:0;margin-bottom:0;padding-top:8px}
@media(max-width:600px){.hero h1{font-size:clamp(30px,9.5vw,37px)}.sort{width:108px;max-width:108px}.aid-intro>summary{font-size:11px;padding:11px 12px}}
.btn[aria-disabled="true"]{pointer-events:none;opacity:.5}html{scroll-behavior:auto}
.hero-stamp span{font-size:19px;line-height:1.12}

/* Final direction: photo-rich editorial heroes, readable copy, useful browsing. */
:root{--muted:#51435f;--line:#ddd5e4;--wash:#f2eafa}
/* Same text rasterisation as the rest of the site. Without it every glyph on
   a programs page rendered heavier than the identical glyph on the homepage,
   which reads as the header changing weight as you move between sections. */
body{font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:var(--paper)}.shell{max-width:1280px;width:calc(100% - 72px)}
.preview-note{background:#eee8f3;color:#403049;font-size:11px;line-height:1.4;padding:5px 14px}
.site-header{height:82px}.header-inner{gap:32px}.desktop-nav{gap:24px;font-size:14px}.utility{gap:22px}.provider-link{font-size:13px}
.page-hero{padding:38px 0 30px;background:var(--paper)}
.page-hero .hero-inner{display:grid;grid-template-columns:.88fr 1.22fr;gap:38px;min-height:0;align-items:center}
.page-hero .hero-copy{min-width:0}.page-hero .eyebrow{font-size:11px;margin-bottom:18px;letter-spacing:.12em;line-height:1.4}
.page-hero h1{font-size:clamp(38px,4.1vw,59px);line-height:1.045;letter-spacing:-.055em;max-width:540px}
.page-hero h1 em{font-style:normal;color:var(--purple);display:block}
.page-hero .hero-lede{font-size:16px;line-height:1.65;color:var(--muted);max-width:470px;margin:22px 0 0}
.hero-proof{font-size:12px;color:#403049;font-weight:700;margin-top:20px}
.hero-collage{display:block;width:100%;min-width:0;aspect-ratio:16/9;border-radius:3px 60px 3px 60px;overflow:hidden;box-shadow:0 14px 38px #2921390e;transform:rotate(-1.4deg)}
.hero-collage img{display:block;width:100%;height:100%;object-fit:contain}
body[data-page="sports"] .hero-collage{transform:rotate(1.3deg);border-radius:52px 3px 52px 3px}
body[data-page="arts"] .hero-collage{transform:rotate(-1.2deg);border-radius:3px 68px 3px 42px}
body[data-page="stem"] .hero-collage{transform:rotate(.7deg);border-radius:4px 42px 4px 42px}
body[data-page="camps"] .hero-collage{transform:rotate(-1deg);border-radius:48px 4px 48px 4px}
body[data-page="aid"] .hero-collage{transform:rotate(1deg);border-radius:4px 48px 4px 48px}
.finder-section{z-index:50;margin-top:6px}.finder{padding:18px;box-shadow:0 8px 30px #29213909;background:#fff;border:1px solid #d7cce2;grid-template-columns:1.35fr 1fr 1fr auto;gap:14px;border-radius:14px}
.field label{font-size:12px;font-weight:750;color:#292139;margin-bottom:8px}.field label span{font-weight:450;color:#51435f;font-size:11px}.field input,.field select{font-size:14px;min-height:44px;color:#292139;background:#fcfaf7;border-color:#e4dce9}.field input::placeholder{color:#65586f}
.finder .btn{min-height:46px;align-self:end;font-size:14px;padding-inline:22px}.finder .btn .icon{width:17px;height:17px}
.scope-note{font-size:12px;color:#51435f;margin:13px 2px 0;line-height:1.5}.scope-note strong{font-weight:700;color:#292139}
.browse-nav{gap:26px;margin-top:17px;padding:15px 2px;border-bottom:1px solid var(--line);font-size:14px;overflow-x:auto;white-space:nowrap}.browse-nav a{padding-bottom:6px}.browse-nav a[aria-current="page"]{color:var(--purple)}
.browser-body{padding:25px 0 50px}.intent-row{gap:9px;flex-wrap:wrap;margin-bottom:24px}.intent-label{font-size:12px;color:#51435f;margin-right:6px}.chip{font-size:13px;padding:8px 14px;border-radius:999px;min-height:38px}.chip[aria-pressed="true"]{background:#5929a7;color:#fff;border-color:#5929a7}
.workspace{grid-template-columns:225px minmax(0,1fr);gap:30px}.filter-panel{border-color:#e0d7e6;padding:18px;background:#f7f3fa;align-self:start}.filter-heading{font-size:14px}.filter-heading button{font-size:12px;color:#5929a7}.filter-group h3{font-size:13px;letter-spacing:0}.filter-select{font-size:13px;min-height:40px;background:#fff}.check{font-size:13px;line-height:1.45;color:#403049}.filter-foot{font-size:12px;color:#51435f;line-height:1.6}
.results-top{align-items:flex-start;gap:20px;margin-bottom:19px}.results-top h2{font-size:29px;letter-spacing:-.04em}.result-count{font-size:13px;line-height:1.5;color:#51435f;margin-top:7px;max-width:560px}.result-controls{flex-wrap:wrap;justify-content:flex-end;gap:10px}.sort-label{font-size:12px}.sort{font-size:12px;max-width:180px}.search-save{font-size:12px;font-weight:700;color:#5929a7}
.program-grid{gap:17px;align-items:start}.program-card{border-radius:13px;box-shadow:0 3px 12px #29213903}.program-card:hover{border-color:#bfa7d8;box-shadow:0 8px 24px #29213909}.card-content{padding:21px}.card-category{font-size:11px;font-weight:750;letter-spacing:.02em;color:#5929a7;line-height:1.5}.program-card h3{font-size:21px;line-height:1.25;letter-spacing:-.035em;margin:11px 0 6px}.program-card h3 button{text-align:left}.provider{font-size:12px;color:#51435f;line-height:1.5}.facts{font-size:13px;margin-top:17px;gap:11px}.facts dt{font-size:10px;letter-spacing:.06em;color:#51435f}.facts dd{font-size:13px;line-height:1.55;color:#292139}.facts .price{font-size:13px}.facts .venue{font-size:12px}.facts .icon{width:16px;height:16px;color:#67527b}.cost-unknown{color:#51435f!important}.card-bottom{padding-top:16px;margin-top:17px}.detail-button{font-size:12px;color:#5929a7;line-height:1.45;font-weight:750}.compare-check{font-size:12px}.badge{font-size:10px}.save-button{width:34px;height:34px;flex-shrink:0}.save-button .icon{width:18px;height:18px}
.unknown-note{font-size:12px;color:#51435f}.aid-summary{font-size:13px;line-height:1.65;color:#403049}.aid-summary strong{font-size:12px}.next-step{font-size:12px;line-height:1.5}.aid-choice{background:#f2eafa;border:1px solid #ddcee9;border-radius:12px;padding:17px 20px;display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}.aid-choice p{font-size:13px;line-height:1.6;color:#51435f}.aid-choice strong{color:#292139;display:block}.aid-choice .btn{font-size:12px;white-space:nowrap}.aid-intro{background:#f8f6f0;border-color:#ded7c4}.aid-intro>summary{font-size:13px;color:#403827;padding:15px 18px}.aid-guide h3{font-size:18px}.aid-guide p{font-size:12px;line-height:1.7;color:#51435f}
.active-filters{gap:7px}.active-filter{font-size:12px}.text-story{display:block;background:#f2eafa;min-height:0}.text-story .copy{padding:25px 28px}.text-story h3{font-size:23px;max-width:620px}.text-story p{font-size:13px;line-height:1.75;color:#51435f;max-width:650px}.text-story .text-link{font-size:12px}.related{font-size:12px;line-height:1.7;margin-top:22px}
.principle-row{padding:33px 0 45px;gap:36px}.principle-row h3{font-size:22px}.principle-row p:not(.number){font-size:13px;line-height:1.75;color:#51435f}.number{font-size:10px;letter-spacing:.12em}.site-footer p,.site-footer a{font-size:13px}.footer-bottom{font-size:11px;line-height:1.6}
.detail-note{font-size:12px;line-height:1.7}.detail-description{font-size:15px;line-height:1.7;color:#51435f}.detail-section h3{font-size:19px}.detail-section p,.session-list{font-size:14px;line-height:1.7;color:#403049}.session-list{padding-left:20px}.session-list li+li{margin-top:12px}.comparison-table th,.comparison-table td{font-size:13px;line-height:1.65}.comparison-table tbody th{background:#f7f3fa;text-align:left;font-weight:700;color:#292139;min-width:125px}.comparison-table thead th{font-size:15px}.comparison-table .text-link{font-size:12px}.saved-row p{font-size:13px}.saved-bottom p{font-size:12px;line-height:1.6}.reminder label{font-size:12px}.empty p{font-size:14px;line-height:1.7}
.mission-editorial{padding:65px 0 55px;border-bottom:1px solid var(--line)}.mission-editorial h1{font-size:clamp(45px,6vw,86px);line-height:1.03;letter-spacing:-.06em;max-width:1050px}.mission-editorial h1 span{color:#5929a7}.mission-editorial .hero-lede{max-width:730px;font-size:19px;line-height:1.7;color:#51435f;margin:25px 0 25px}.mission-editorial .text-link{font-size:14px}.origin{display:block;max-width:850px;margin:0 auto;border-top:0;padding:50px 0}.origin h2{font-size:39px;margin-bottom:23px}.origin p{font-size:16px;line-height:1.85;color:#51435f;margin-bottom:18px}.mission-quote{max-width:850px;margin:0 auto 40px;background:#f2eafa;font-size:34px;border-radius:3px;padding:35px 42px}.mission-quote footer{font-size:13px}.founders{max-width:1050px;margin:0 auto;padding:20px 0 45px}.section-heading h2{font-size:36px}.section-heading p{font-size:15px;line-height:1.7;color:#51435f;max-width:760px}.founder{padding:28px;background:#fff;border:1px solid var(--line);border-radius:14px;gap:24px}.portrait{width:124px;height:124px}.founder h3{font-size:27px}.founder p{font-size:14px;line-height:1.6}.founder .role{font-size:11px}.promise-section{max-width:1050px;margin:auto}.promise-section h2{font-size:35px}.promise h3{font-size:23px}.promise p{font-size:15px;line-height:1.8;color:#51435f}.mission-end{padding:38px 42px;margin-top:45px}.mission-end h2{font-size:32px}.mission-end p{font-size:15px;line-height:1.7}
@media(max-width:1100px){.shell{width:calc(100% - 48px)}.header-inner{gap:22px}.desktop-nav{gap:17px;font-size:12px}.utility{gap:15px}.provider-link{display:none}.page-hero .hero-inner{grid-template-columns:.95fr 1.05fr;gap:28px}.page-hero h1{font-size:45px}.page-hero .hero-lede{font-size:14px}.workspace{grid-template-columns:205px minmax(0,1fr);gap:22px}.card-content{padding:18px}.results-top{display:block}.result-controls{justify-content:flex-start;margin-top:12px}.program-card h3{font-size:20px}.finder{grid-template-columns:1.2fr 1fr 1fr auto;gap:9px;padding:14px}.field label span{display:none}.field label{font-size:11px}.field input,.field select{font-size:12px}.finder .btn{padding-inline:15px}}
@media(max-width:760px){.shell{width:calc(100% - 36px)}.desktop-nav{display:none}.site-header{height:69px}.brand,.brand img{width:135px}.utility{margin-left:auto}.menu-toggle{display:inline-flex}.page-hero{padding:28px 0}.page-hero .hero-inner{gap:22px;grid-template-columns:1fr 1fr}.page-hero h1{font-size:37px}.page-hero .hero-lede{font-size:14px;line-height:1.65}.page-hero .eyebrow{font-size:9px;margin-bottom:12px}.hero-proof{font-size:10px;line-height:1.5}.hero-collage{transform:none!important;border-radius:3px 36px 3px 36px!important}.workspace{display:block}.workspace>.filter-panel{display:none}.filter-dialog .filter-panel{display:block;border:0;background:transparent;padding:0}.mobile-filters{display:inline-flex}.browser-body{padding-top:20px}.results-top h2{font-size:27px}.program-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.browse-nav{gap:22px;font-size:13px}.principle-row{gap:24px}.principle-row h3{font-size:20px}.mission-editorial{padding:38px 0}.mission-editorial h1{font-size:58px}.mission-editorial .hero-lede{font-size:16px}.founder-grid{grid-template-columns:1fr}.founder{padding:24px}.origin{padding:35px 0}.origin p{font-size:15px}.mission-quote{font-size:28px;padding:25px 28px}.promise-grid{grid-template-columns:1fr 1fr}.promise p{font-size:14px}}
@media(max-width:640px){.page-hero{padding:22px 0 23px}.page-hero .hero-inner{display:grid;grid-template-columns:minmax(0,1fr) 142px;gap:12px 15px}.page-hero .hero-copy{display:contents}.page-hero .eyebrow{grid-column:1/-1;margin:0;font-size:9px;letter-spacing:.1em}.page-hero h1{grid-column:1;grid-row:2;font-size:32px;letter-spacing:-.05em;line-height:1.06;margin:0;max-width:none}.hero-collage{grid-column:2;grid-row:2;aspect-ratio:1;align-self:center;width:142px;height:142px;box-shadow:none}.page-hero .hero-lede{grid-column:1/-1;grid-row:3;margin:3px 0 0;font-size:13px;line-height:1.65;max-width:none}.hero-proof{display:none}.finder-section{margin-top:0}.finder{display:grid;grid-template-columns:1fr 1fr;gap:11px;position:relative;padding:14px;border-radius:12px}.finder>.field:first-child{grid-column:1/-1}.finder>.field:nth-child(2){grid-column:1}.finder>.field:nth-child(3){grid-column:2}.field label{font-size:11px;margin-bottom:6px}.field input,.field select{font-size:13px;min-height:43px;padding:9px 10px}.finder>.field:first-child input{padding-right:96px}.finder>.btn{position:absolute;top:38px;right:20px;min-height:33px;height:33px;padding:6px 12px;font-size:12px;gap:5px;border-radius:8px}.finder>.btn .icon{width:14px;height:14px}.scope-note{font-size:10px;line-height:1.65;margin:11px 1px 0}.scope-note strong{display:block}.browse-nav{gap:20px;margin-top:10px;padding:13px 1px;font-size:12px}.intent-row{margin-bottom:19px;gap:7px}.intent-label{font-size:11px;flex-basis:100%;margin-bottom:1px}.chip{font-size:11px;padding:7px 11px;min-height:33px}.browser-body{padding-top:17px;padding-bottom:35px}.results-top h2{font-size:25px}.result-count{font-size:11px;line-height:1.6}.result-controls{gap:9px;margin-top:12px}.mobile-filters{font-size:11px;padding:8px 11px;min-height:34px}.sort-label{font-size:11px}.sort{font-size:11px;min-height:34px;max-width:170px}.search-save{font-size:11px;margin-left:auto}.program-grid{grid-template-columns:1fr;gap:13px}.card-content{padding:20px}.card-category{font-size:10px}.program-card h3{font-size:22px;margin-top:10px}.provider{font-size:12px}.facts dd,.facts .price{font-size:13px}.facts .venue{font-size:12px}.facts dt{font-size:10px}.facts{margin-top:17px;gap:12px}.badge{font-size:10px}.detail-button{font-size:12px}.compare-check{font-size:12px}.card-bottom{padding-top:16px}.aid-choice{display:block;padding:16px;margin-bottom:18px}.aid-choice p{font-size:12px}.aid-choice .btn{margin-top:12px;font-size:12px;min-height:40px}.aid-intro>summary{font-size:12px;padding:13px}.aid-guide{display:block;padding:10px 15px 17px}.aid-guide>div+div{margin-top:17px}.aid-guide h3{font-size:18px;margin-top:6px}.aid-guide p{font-size:12px}.text-story .copy{padding:22px}.text-story h3{font-size:23px}.text-story p{font-size:12px}.related{font-size:11px}.principle-row{display:block;padding:20px 0 32px}.principle-row>div{padding:18px 0;border-top:1px solid var(--line)}.principle-row h3{font-size:22px;margin-top:8px}.principle-row p:not(.number){font-size:13px}.site-footer{padding-top:35px}.footer-grid{gap:28px}.site-footer a,.site-footer p{font-size:12px}.footer-bottom{font-size:10px}.preview-note{font-size:9px;padding:5px 10px}.dialog-head h2{font-size:25px}.dialog-head p{font-size:12px}.detail-section p,.session-list{font-size:13px}.detail-section h3{font-size:20px}.detail-description{font-size:14px}.comparison-table th,.comparison-table td{font-size:12px;min-width:170px}.comparison-table tbody th{position:sticky;left:0;min-width:105px;max-width:105px;z-index:1}.comparison-table .text-link{font-size:11px}.mission-editorial{padding:33px 0}.mission-editorial h1{font-size:44px}.mission-editorial .eyebrow{font-size:9px}.mission-editorial .hero-lede{font-size:15px;line-height:1.8;margin:20px 0}.mission-editorial .text-link{font-size:13px}.origin h2{font-size:32px}.origin p{font-size:14px;line-height:1.9}.mission-quote{font-size:27px;padding:25px;margin-bottom:30px}.mission-quote footer{font-size:11px}.founders{padding:10px 0 30px}.section-heading h2{font-size:30px}.section-heading p{font-size:14px}.founder{padding:22px;gap:21px}.portrait{height:104px;width:104px}.founder h3{font-size:25px}.founder p{font-size:12px}.founder .role{font-size:10px}.promise-grid{grid-template-columns:1fr}.promise-section h2{font-size:30px}.promise h3{font-size:22px}.promise p{font-size:14px;line-height:1.85}.mission-end{display:block;padding:27px;margin-top:30px}.mission-end h2{font-size:29px}.mission-end p{font-size:14px}.mission-end .btn{margin-top:20px}}
@media(max-width:360px){.shell{width:calc(100% - 28px)}.page-hero .hero-inner{grid-template-columns:minmax(0,1fr) 120px;column-gap:12px}.hero-collage{width:120px;height:120px}.page-hero h1{font-size:29px}.page-hero .hero-lede{font-size:12px}.saved-trigger{font-size:11px}.sort{max-width:146px}.search-save{margin-left:0}.card-content{padding:18px}.program-card h3{font-size:21px}}

/* Keep the narrow-screen finder readable and horizontal navigation contained. */
.browse-nav{max-width:100%;min-width:0;box-sizing:border-box}
@media(max-width:640px){.finder>.field:first-child{display:block;padding:0 0 12px;border-right:0}.finder>.field{border-right:0;padding:0}.finder>.field:first-child input{width:100%;padding-right:91px}.finder>.btn{top:39px;right:20px}.finder>.field:nth-child(2),.finder>.field:nth-child(3){padding-top:0}.page-hero h1{font-size:30px}.intent-row{flex-wrap:wrap;overflow:visible;padding-bottom:4px}.intent-label{flex-basis:auto;white-space:nowrap;margin:0 4px 0 0}.intent-row .chip{flex-shrink:0}.browse-nav{width:100%}.scope-note{max-width:100%}}

.mission-editorial>.shell{display:grid;grid-template-columns:1.16fr .84fr;gap:55px;align-items:center}.mission-editorial h1{font-size:clamp(45px,5.1vw,70px)}.mission-editorial .hero-lede{font-size:17px}.mission-editorial .founders{padding:0;width:100%}.mission-editorial .section-heading{margin-bottom:18px}.mission-editorial .section-heading h2{font-size:23px;letter-spacing:-.035em}.mission-editorial .founder-grid{grid-template-columns:1fr;gap:14px}.mission-editorial .founder{padding:20px;gap:20px}.mission-editorial .portrait{width:86px;height:86px}.mission-editorial .founder h3{font-size:24px}.mission-editorial .founder p{font-size:12px}
@media(max-width:760px){.mission-editorial>.shell{grid-template-columns:1fr;gap:30px}.mission-editorial h1{font-size:52px}.mission-editorial .hero-lede{font-size:15px}.mission-editorial .founder-grid{grid-template-columns:1fr 1fr}.mission-editorial .founder{display:block;padding:18px}.mission-editorial .portrait{width:75px;height:75px;margin-bottom:15px}.mission-editorial .founder h3{font-size:21px}.mission-editorial .founder .role{font-size:9px}}
@media(max-width:360px){.mission-editorial h1{font-size:44px}.mission-editorial .founder{padding:14px}.mission-editorial .founder h3{font-size:19px}}
@media(max-width:640px){.compare-tray{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px 14px;padding:12px;min-width:0;max-width:calc(100vw - 24px)}.compare-tray p{font-size:11px;min-width:0}.compare-tray .btn{grid-column:1/-1;width:100%;font-size:12px;min-height:35px}.compare-tray .clear-compare{font-size:11px}}
@media(max-width:640px){html{overflow-x:clip}.browse-nav{contain:inline-size}}

/* ---------------------------------------------------------------------------
   The finder
   The design's three-field row is replaced by the home page's single pill,
   with the location and age controls as multi-select chips underneath. The
   pill is the same object a visitor already knows from the home page; the two
   chips are optional scopes, not questions the form insists on.
   --------------------------------------------------------------------------- */
.programs-finder{position:relative;z-index:30;margin:16px auto 0;max-width:min(760px,100%);text-align:left}
.programs-finder .search-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;background:var(--white);border:1px solid #CBB0E6;border-radius:999px;padding:7px;box-shadow:0 0 0 3px rgba(203,176,230,.16),0 26px 54px -40px rgba(35,27,52,.6);transition:border-color .18s,box-shadow .18s}
.programs-finder .search-bar:focus-within{border-color:var(--purple);box-shadow:0 0 0 4px rgba(89,41,167,.12),0 26px 54px -40px rgba(35,27,52,.6)}
.programs-finder .search-field{min-width:0;display:flex}
.programs-finder .search-field input{width:100%;min-width:0;font:inherit;font-size:16px;color:var(--ink);line-height:1.3;padding:13px 18px;border:0;border-radius:999px;background:none}
.programs-finder .search-field input::placeholder{color:var(--muted)}
.programs-finder .search-field input:focus-visible{outline:none}
.programs-finder .search-go{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:var(--purple);color:#fff;cursor:pointer;transition:background .18s,transform .18s}
.programs-finder .search-go svg{width:21px;height:21px;flex:none}
.programs-finder .search-go:hover{background:var(--deep);transform:scale(1.06)}
.programs-finder .search-go:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.programs-finder .search-go:hover{transform:none}}

.finder-multi-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px}
.finder-multi{position:relative}
.finder-place-chip{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;font-weight:600;color:var(--muted);background:none;border:1px solid transparent;border-radius:999px;padding:6px 13px 6px 11px;cursor:pointer;transition:color .16s,background .16s,border-color .16s}
.finder-place-chip svg{width:15px;height:15px;flex:none;opacity:.75}
.finder-place-chip:hover{color:var(--ink);background:var(--white);border-color:var(--line)}
.finder-place-chip:focus-visible{outline:none;border-color:var(--purple);box-shadow:0 0 0 4px rgba(89,41,167,.12)}
.finder-place-chip.is-set{color:var(--purple)}
.finder-place-chip.is-set svg{opacity:1}
.finder-place-cue{opacity:.6;font-weight:500}
.finder-place-panel{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);z-index:40;width:min(420px,calc(100vw - 36px));max-height:min(62vh,440px);overflow:auto;padding:12px;background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 44px -22px rgba(35,27,52,.55);text-align:left}
.finder-place-panel[hidden]{display:none}
.finder-place-panel>input{width:100%;font:inherit;font-size:15px;color:var(--ink);padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper)}
.finder-place-panel>input:focus-visible{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(89,41,167,.12)}
.multi-list{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;margin-top:10px}
.multi-ages{grid-template-columns:repeat(5,1fr);gap:2px 6px}
.multi-option{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:6px 7px;border-radius:8px;cursor:pointer}
.multi-option:hover{background:var(--tint)}
.multi-option[hidden]{display:none}
.multi-option input{width:15px;height:15px;accent-color:var(--purple);flex:none}
.multi-ages .multi-option{justify-content:center;gap:5px;padding:6px 2px}
.multi-panel-foot{border-top:1px solid var(--line);margin-top:10px;padding-top:9px;text-align:right}
.multi-clear{font:inherit;font-size:12.5px;font-weight:600;color:var(--purple);background:var(--tint);border:1px solid transparent;border-radius:999px;padding:5px 12px;cursor:pointer}
.multi-clear:hover{background:var(--purple);color:#fff}
.programs-finder .finder-count{margin:9px 0 0;text-align:center;font-size:12.5px;color:var(--muted)}
.finder-section .scope-note{margin-top:10px}
.loading-note{grid-column:1/-1;padding:34px 8px;color:var(--muted);font-size:14px;text-align:center}

@media (max-width:640px){
  .programs-finder{margin-top:12px}
  .programs-finder .search-bar{padding:5px}
  .programs-finder .search-field input{padding:12px 14px;font-size:15px}
  .programs-finder .search-go{width:44px;height:44px}
  .finder-multi-row{gap:4px}
  .finder-place-chip{font-size:12.5px;padding:6px 10px}
  .finder-place-panel{width:calc(100vw - 32px);left:50%}
  .multi-list{grid-template-columns:1fr}
  .multi-ages{grid-template-columns:repeat(4,1fr)}
}

/* On a phone the category strip wraps instead of running off the edge. The
   design's horizontal scroll left the last label half-visible with no cue. */
@media (max-width:640px){
  .browse-nav{flex-wrap:wrap;overflow:visible;white-space:normal;gap:4px 18px;width:100%;padding-right:0}
  .browse-nav a{font-size:12px;padding:7px 0 9px}
  .sort{max-width:128px}
}

.multi-panel-foot{display:flex;justify-content:space-between;gap:8px;text-align:left}
.multi-done{background:var(--purple);color:#fff}
.multi-done:hover{background:var(--deep)}

/* On a phone the panel is a bottom sheet rather than a popover anchored to a
   chip that is already near the edge. */
@media (max-width:640px){
  .finder-place-panel{position:fixed;left:12px;right:12px;bottom:12px;top:auto;transform:none;width:auto;max-height:72vh;z-index:60;border-radius:18px}
  .multi-list{grid-template-columns:1fr 1fr}
  .multi-ages{grid-template-columns:repeat(5,1fr)}
}

/* The town-by-town index under the interactive page. Same content the hub
   pages used to carry, in the new page's type. */
.town-index{padding:44px 0 56px;border-top:1px solid var(--line);margin-top:44px}
.town-index h2{font-size:30px;margin:0 0 6px}
.town-index-stat{font-size:13px;color:var(--muted);margin:0 0 24px}
.town-index-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 34px}
.hub-town h3{font-size:17px;margin:0 0 2px}
.hub-town h3 a{color:var(--ink)}
.hub-town h3 a:hover{color:var(--purple)}
.hub-count{font-size:11px;color:var(--muted);margin:0 0 8px}
.hub-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.hub-list li{font-size:12.5px;line-height:1.45;padding-bottom:7px;border-bottom:1px solid #eee7f1}
.hub-list li:last-child{border-bottom:0}
.hub-name a{font-weight:600}
.hub-name a:hover{color:var(--purple)}
.hub-org{display:block;color:var(--muted);font-size:11.5px}
.hub-facts{display:block;color:#51435f;font-size:11px;margin-top:2px}
.hub-more{font-size:12px;font-weight:700;margin:8px 0 0}
.hub-more a{color:var(--purple)}
@media (max-width:900px){.town-index-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.town-index{padding:32px 0 44px;margin-top:32px}.town-index h2{font-size:25px}.town-index-grid{grid-template-columns:1fr;gap:18px}}

/* Shared account and sign-in surface, carried over from the home page so the
   header and the dialog are the same object on both. */
:root{--purple-tint:#F2EAFA;--surface:#fff;--ease:cubic-bezier(.22,.68,.28,1);--radius-panel:20px}
/* ==========================================================================
   SIGN IN DIALOG
   ========================================================================== */
.signin {
  /* The global `* { margin: 0 }` reset strips the dialog's native
     `margin: auto`, which is what centers it — put it back. */
  margin: auto;
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 40px) clamp(22px, 4vw, 38px) clamp(24px, 3vw, 32px);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 40px 90px -40px rgba(35,27,52,.6);
  text-align: left;
}
.signin::backdrop {
  background: rgba(35,27,52,.5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.signin-close {
  position: absolute;
  top: 14px; right: 16px;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.signin-close:hover { background: var(--purple-tint); color: var(--purple); }
.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: 20px;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--ink);
}
.signin-brand span { color: var(--purple); }
.signin-brand i {
  display: inline-block;
  width: 7px; height: 7px;
  margin: 12px 0 0 2px;
  border-radius: 50%;
  background: var(--logo-period, #C660B4);
}
.signin-title {
  margin-top: 18px;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.1;
  letter-spacing: -.03em;
}
.signin-text {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}
.signin-email { display: grid; gap: 10px; margin-top: 24px; }
.signin-label { font-size: 12px; font-weight: 700; color: var(--ink); }
.signin-email input {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #D9D2E3;
  border-radius: 10px;
}
.signin-email input:focus {
  outline: 2px solid #C9A9EA;
  outline-offset: 1px;
  border-color: #9B72C9;
}
.signin-continue {
  height: 50px;
  border: 0;
  border-radius: 10px;
  background: var(--purple);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.signin-continue:hover { background: var(--deep, #422080); }
.signin-continue:disabled { opacity: .6; cursor: default; }
.signin-error { margin: 2px 0 0; font-size: 12.5px; color: #9B2C2C; }
.signin-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
  color: var(--muted);
  font-size: 12px;
}
.signin-or::before,
.signin-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.signin-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1px solid #D9D2E3;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}
.signin-provider:hover { border-color: #B9A6D6; background: var(--purple-tint); }
.signin-provider + .signin-provider { margin-top: 12px; }
.signin-google-mark { flex: 0 0 auto; }
.signin-legal {
  margin: 18px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}
.signin-legal a { color: inherit; text-decoration: underline; }
.signin-note {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--purple-tint);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--purple-dark);
}
.signin-note[hidden] { display: none; }
.signin-note.is-live { font-weight: 600; }
.signin-account { display: grid; gap: 8px; margin-top: 22px; }
.signin-account[hidden] { display: none; }
.signin-account-name { font-size: 16px; font-weight: 700; color: var(--ink); }
.signin-account-email { margin-bottom: 10px; font-size: 14px; color: var(--muted); }


/* ---------------------------------------------------------------------------
   The home page header
   The programs pages carry the same bar as youthby.com: same 80px height,
   same 158px wordmark, same link order and the same account control. It is
   scoped to .home-header so the design package's own header styles cannot
   reach it.
   --------------------------------------------------------------------------- */
.home-header{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line);background:rgba(252,250,247,.92);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);line-height:1.6}
.home-header .shell{max-width:1320px;width:100%;margin:0 auto;padding:0 clamp(22px,5vw,74px)}
.home-header .header-inner{height:80px;display:flex;align-items:center;gap:22px}
.home-header .wordmark{display:block;flex:none}
.home-header .wordmark img{width:158px;height:auto}
.home-header .main-nav{flex:1;display:flex;align-items:center;min-width:0}
.home-header .nav-list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.home-header .nav-item{position:relative}
.home-header .nav-link{display:inline-flex;align-items:center;gap:7px;font-family:"DM Sans",sans-serif;font-size:15px;font-weight:600;color:var(--ink);background:none;border:0;padding:10px 10px;border-radius:8px;white-space:nowrap;text-decoration:none;transition:background-color .18s var(--ease),color .18s var(--ease)}
.home-header .nav-link:hover{background:var(--purple-tint);color:var(--purple)}
.home-header .nav-link[aria-current="page"]{color:var(--purple)}
.home-header .nav-utility{margin-left:auto;display:flex;align-items:center;gap:2px}
.home-header .nav-providers,.home-header .nav-calendar{font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;padding:10px;border-radius:8px;white-space:nowrap}
.home-header .nav-providers:hover,.home-header .nav-calendar:hover{color:var(--purple)}
.home-header .nav-calendar-count{display:inline-flex;align-items:center;justify-content:center;width:22px;height:20px;margin-left:6px;border-radius:999px;background:var(--purple-tint);color:var(--purple);font-size:11.5px;font-weight:800;flex:none}
.nav-signin{padding:11px 20px;border-radius:10px;background:var(--purple);color:#fff;font-weight:700;font-size:15px;font-family:"DM Sans",system-ui,sans-serif;line-height:1;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.home-header .nav-signin:hover{background:var(--deep)}
.home-header .nav-toggle{display:none;align-items:center;gap:9px;margin-left:auto;font-family:"DM Sans",sans-serif;font-size:14px;font-weight:700;color:var(--ink);background:none;border:1.5px solid var(--line);border-radius:9px;padding:10px 14px;cursor:pointer}
.home-header .nav-toggle-bars{display:grid;gap:4px}
.home-header .nav-toggle-bars i{display:block;width:18px;height:2px;border-radius:1px;background:currentColor}

/* The signed-in account control and its menu. */
.nav-account{position:relative}
@media (min-width:1121px){.nav-account{display:inline-flex;justify-content:flex-end;min-width:44px}}
/* The same boxes as the homepage header, so nothing moves when the logo takes
   a reader between the two. */
@media (min-width:1121px){
  .home-header .nav-link{height:44px}
  .home-header .nav-providers,.home-header .nav-calendar{display:inline-flex;align-items:center;height:44px;padding:0 6px;line-height:1}
  .home-header .nav-signin{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;line-height:1}
}
.nav-account-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;font:inherit;font-size:14px;font-weight:700;color:var(--ink);background:none;border:1px solid var(--line);border-radius:999px;padding:4px;cursor:pointer}
.nav-account-button:hover{border-color:#c9b3e0;background:var(--purple-tint)}
.nav-account-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;background:#F2EAFA;color:#5929A7;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex:none}
.nav-account-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-account-caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.6}
.nav-account-button::after{content:attr(data-name);position:absolute;top:calc(100% + 8px);right:0;z-index:75;background:var(--ink);color:#fff;font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;white-space:nowrap;opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .15s,transform .15s,visibility .15s;pointer-events:none;box-shadow:0 8px 20px rgba(35,27,52,.25)}
.nav-account-button:hover::after,.nav-account-button:focus-visible::after{opacity:1;visibility:visible;transform:none}
.nav-account-button[aria-expanded="true"]::after{opacity:0;visibility:hidden}
.verified-mark{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:5px;color:var(--purple);flex:none;vertical-align:middle;transform:translateY(-1px)}
.verified-mark svg{width:100%;height:100%;display:block}
.nav-account-menu{position:absolute;right:0;top:calc(100% + 30px);z-index:70;width:280px;background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px -28px rgba(35,27,52,.55);padding:8px;text-align:left}
.nav-account-menu[hidden]{display:none}
.nav-account-head{padding:12px 12px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.nav-account-head a.nav-account-who{display:block;color:inherit;text-decoration:none}
.nav-account-head strong{display:flex;align-items:center;font-size:15px}
.nav-account-head span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.nav-account-stats{display:flex;gap:8px;margin-top:10px}
.nav-account-stat{flex:1;display:block;background:var(--tint);border-radius:10px;padding:7px 8px;text-align:center;color:inherit;text-decoration:none}
.nav-account-stat b{display:block;font-size:15px;color:var(--purple)}
.nav-account-stat small{display:block;font-size:10px;color:var(--muted);letter-spacing:.02em}
.nav-account-menu > a,.nav-account-menu button.nav-account-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:9px;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer;text-align:left}
.nav-account-menu > a:hover,.nav-account-menu button.nav-account-item:hover{background:var(--purple-tint);color:var(--purple)}
.nav-account-menu .icon{width:17px;height:17px;flex:none;opacity:.75}
.nav-account-count{margin-left:auto;font-size:11.5px;font-weight:800;color:var(--purple);background:var(--purple-tint);border-radius:999px;padding:1px 7px}
.nav-account-sep{height:1px;background:var(--line);margin:6px 8px}
.nav-account-signout{color:#8a3b3b}
.nav-account-signout:hover{background:#fbeaea;color:#7a2f2f}

@media (max-width:1120px){
  /* A backdrop-filter makes the header the containing block for fixed
     descendants, so the drawer would be positioned from the header's top
     rather than the viewport's. Solid paper here keeps it on the screen. */
  .home-header{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}
  .home-header .nav-toggle{display:inline-flex}
  .home-header .main-nav{position:fixed;inset:80px 0 0 0;z-index:55;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);padding:14px clamp(22px,5vw,74px) 48px;overflow-y:auto;transform:translateX(100%);visibility:hidden;transition:transform .3s var(--ease),visibility .3s}
  .home-header .main-nav.is-open{transform:none;visibility:visible}
  .home-header .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .home-header .nav-link{display:flex;width:100%;justify-content:space-between;font-size:18px;font-weight:600;padding:16px 2px;border-radius:0;border-bottom:1px solid var(--line)}
  /* One row spec for every way through the site: the five links, For
     Providers, and Saved. The list runs unbroken into the utility rows, so
     the separators are evenly spaced and no row ends on a half-finished
     line. The button is the only thing below it. */
  .home-header .nav-utility{margin:0;flex-direction:column;align-items:stretch;gap:0}
  .home-header .nav-providers,.home-header .nav-calendar,.home-header .nav-saved{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;padding:16px 2px;border-radius:0;border-bottom:1px solid var(--line)}
  .home-header .nav-saved::before{width:18px;height:18px}
  .home-header .nav-saved-count{margin-left:auto}
  .home-header .nav-signin{justify-content:center;margin-top:18px;padding:15px 20px;font-size:18px}
  .nav-account-button{justify-content:center;padding:6px;margin-top:8px}
  .nav-account-avatar{width:40px;height:40px;font-size:15px}
  .nav-account-menu{position:static;width:100%;box-shadow:none;border:1px solid var(--line);margin-top:8px}
}
@media (max-width:620px){
  .home-header .header-inner{height:64px;gap:12px}
  .home-header .wordmark img{width:132px}
  .home-header .main-nav{inset:64px 0 0 0}
  /* The finder is above the drawer in the stacking order (z-index 60). While
     the menu is open it would paint its search bar and the Anywhere / Any age
     row across the links, which read as the menu being broken. */
  html.nav-open .finder-section{visibility:hidden}
}
.nav-account-level{margin-top:8px;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.02em}

/* The first-guide block on /mission, matching the home page's Newton section:
   two photographs, the origin copy, and the two ways into Newton. */
.first-guide{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:44px 0 10px}
.first-guide h2{font-size:clamp(30px,4vw,46px);letter-spacing:-.05em;margin:0 0 16px}
.first-guide h2 span{color:var(--purple)}
.first-guide p{color:var(--muted);font-size:16px;line-height:1.65;margin:0 0 12px;max-width:46ch}
.first-guide strong{color:var(--ink)}
.first-guide-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:22px}
.first-guide-art{position:relative;min-width:0}
.first-guide figure{margin:0}
.first-guide-main img{width:100%;height:auto;border-radius:18px;object-fit:cover;aspect-ratio:3/2}
.first-guide-main figcaption{display:block;margin-top:8px;font-size:11px;font-weight:700;color:var(--muted)}
.first-guide-small{position:absolute;right:-10px;bottom:0;width:38%;border:4px solid var(--paper);border-radius:14px;overflow:hidden;box-shadow:0 18px 40px -22px rgba(35,27,52,.55)}
.first-guide-small img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.first-guide .first-guide-place{grid-column:1/-1;max-width:none;margin:4px 0 0;font-size:12px;font-weight:700;color:var(--muted);text-align:right}
@media (max-width:900px){.first-guide{grid-template-columns:1fr;gap:30px}.first-guide-art{max-width:560px}.first-guide-place{margin-top:2px}}
@media (max-width:640px){.first-guide{padding-top:30px}.first-guide-small{right:0;bottom:0;width:42%}.first-guide-place{margin-top:2px;text-align:left}}
/* The sticky home header is 80px (64px on a phone); keep anchor jumps clear
   of it rather than the design package's taller assumption. */
html{scroll-padding-top:98px;scrollbar-gutter:stable}
#results-grid{overflow-anchor:none;min-height:70vh}
@media (max-width:620px){html{scroll-padding-top:82px}}
.aid-count-note{font-size:12px;line-height:1.6;color:var(--muted);margin:0 0 16px}
.aid-count-note strong{color:var(--ink)}
.hub-aid{display:block;margin-top:3px;font-size:11px;color:#51435f}
.badge-aid{display:inline-block;background:#e7f0e2;color:#3d5a32;border-radius:999px;padding:1px 7px;font-size:10px;font-weight:700;margin-right:4px}
a.founder{text-decoration:none;color:inherit;transition:border-color .18s,box-shadow .18s,transform .18s}
a.founder:hover{border-color:#c9b3e0;box-shadow:0 18px 44px -30px rgba(35,27,52,.5);transform:translateY(-2px)}
a.founder:focus-visible{outline:3px solid var(--purple);outline-offset:3px}

/* The home page's coverage strap, above the header. */
.coverage-strip{display:block;background:var(--ink);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 clamp(22px,5vw,74px);text-align:center}
.coverage-strip-arrow{transition:transform .18s var(--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)}
@media (max-width:700px){.coverage-strip-inner{min-height:0;padding:7px clamp(22px,5vw,74px);line-height:1.32}}

/* ---------------------------------------------------------------------------
   A single program page
   --------------------------------------------------------------------------- */
.crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);padding:22px 0 0;flex-wrap:wrap}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--purple)}
.crumb span[aria-hidden]{opacity:.5}
.program-head{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;padding:26px 0 28px}
.program-head h1{font-size:clamp(34px,4.4vw,56px);line-height:1.04;letter-spacing:-.055em;margin:12px 0 8px}
.program-provider{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 10px}
.program-badges{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px}
.program-badges:empty{display:none}
.program-lede{font-size:16px;line-height:1.7;color:var(--muted);max-width:56ch;margin:0}
/* Four actions, two rows of two at every width. As a wrapping row, adding
   Save pushed the fourth button onto a line by itself and left a ragged edge
   under the title; the phone had already settled on a grid, so the wide
   screen uses the same one. */
.program-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}
.program-actions > *{width:100%;margin:0;justify-content:center;text-align:center}
.program-actions .btn{min-height:44px}
.program-gallery{min-width:0}
/* Save sits in the actions row at every width: on its own under the
   photograph it added a row to the right-hand column, which made the header
   taller than the words in it and left a screenful of nothing above "What to
   know". */
.program-actions .btn.is-saved{background:var(--purple);border-color:var(--purple);color:#fff}
.save-icon{display:inline-flex;flex:none}
.save-icon svg{width:16px;height:16px}
.program-actions .btn.is-saved .save-icon svg{fill:currentColor}
.gallery-main img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:18px}
.gallery-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.gallery-thumbs img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.gallery-empty{aspect-ratio:3/2;border-radius:18px;background:var(--tint);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:24px}
.gallery-empty span{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--purple)}
.gallery-empty strong{font-family:Manrope,sans-serif;font-size:22px;letter-spacing:-.03em}
.program-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:52px;align-items:start;padding-bottom:60px}
.program-section{padding:26px 0;border-top:1px solid var(--line)}
.program-section:first-child{border-top:0;padding-top:0}
.program-section h2,.program-side h2{font-size:26px;letter-spacing:-.04em;margin:0 0 14px}
.program-facts-list{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin:0}
.program-facts-list dt{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.program-facts-list dd{margin:0;font-size:14.5px;line-height:1.55}
.session-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.session-list li{font-size:14px;line-height:1.6;padding:10px 12px;background:var(--tint);border-radius:10px}
.program-aid p{font-size:14.5px;line-height:1.7;margin:0 0 10px}
.program-venue{font-size:15px;font-weight:700;margin:0 0 4px}
.program-address{font-size:14px;color:var(--muted);margin:0 0 14px}
.program-map{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--tint)}
.program-map iframe{display:block;width:100%;height:300px;border:0}
.program-map-links{margin-top:10px;font-size:13px}
.program-note{font-size:12.5px;line-height:1.6;color:var(--muted)}
.program-side{position:sticky;top:104px;border-left:1px solid var(--line);padding-left:26px}
.program-side h2{font-size:18px;margin-top:26px}
.program-side h2:first-child{margin-top:0}
.program-side-facts{display:grid;gap:12px;margin:0}
.program-side-facts dt{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.program-side-facts dd{margin:2px 0 0;font-size:14px}
.program-side-facts a{color:var(--purple)}
.related-programs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.related-programs li{padding-bottom:9px;border-bottom:1px solid var(--line)}
.related-programs a{display:grid;grid-template-columns:56px minmax(0,1fr);gap:11px;align-items:center;font-size:13.5px;font-weight:700;line-height:1.4}
.related-programs a:hover{color:var(--purple)}
.related-programs img,.related-programs .related-mono{width:56px;height:56px;border-radius:10px;display:grid;place-items:center;object-fit:cover;background:var(--tint);color:var(--purple);font-size:19px;font-weight:800;flex:none}
.related-programs img{display:block}
.related-programs .related-text{display:grid;gap:2px;min-width:0}
.related-programs .related-text span{font-size:11.5px;font-weight:400;color:var(--muted)}
.program-source{font-size:11.5px;color:var(--muted);margin-top:22px;line-height:1.5}
.program-source a{color:var(--purple)}
.suggest-edit{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:16px 18px}
.suggest-edit-icon{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--tint);color:var(--purple)}
.suggest-edit-icon svg{width:20px;height:20px}
.suggest-edit-copy{min-width:0;flex:1 1 280px}
.suggest-edit-copy h2{font-size:16px;letter-spacing:-.02em;margin:0 0 4px}
.suggest-edit-copy .program-note{margin:0;font-size:13px;color:var(--muted);max-width:56ch}
.suggest-open{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:10px 18px;border-radius:10px;border:1px solid var(--purple);background:var(--white);color:var(--purple);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;transition:background .18s,color .18s}
.suggest-open:hover{background:var(--purple);color:#fff}
.suggest-open svg{width:15px;height:15px;flex:none}
.suggest-open .suggest-mark{width:28px;height:28px;margin-left:-9px}
.suggest-open:hover .suggest-mark,.suggest-open:focus-visible .suggest-mark{background:#fff;color:var(--purple);box-shadow:none}

/* The suggestion form opens where the reader is, not at the top of the page:
   a small panel above the button, with the page blurred behind it, and the
   scroll position untouched. */
.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:var(--paper);color:var(--ink);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}
.suggest-lede{margin:6px 22px 0;font-size:13px;color:var(--muted)}
.suggest-close{position:absolute;top:8px;right:10px;width:36px;height:36px;border-radius:50%;background:none;color:var(--muted);font-size:24px;line-height:1;cursor:pointer}
.suggest-close:hover{background:var(--tint);color:var(--ink)}
.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 var(--line);border-radius:9px;background:var(--white);color:var(--ink)}
.suggest-dialog textarea{resize:vertical}
.suggest-dialog .btn{justify-self:center;margin-top:2px}
.suggest-status{margin:0;font-size:12.5px;color:#1F7A4D;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}
.program-claim{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;border:1px solid #dccbEF;border-radius:14px;background:#F7F1FC;padding:16px 18px}
.program-claim-mark{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--purple)}
.program-claim-mark svg{width:22px;height:22px}
.program-claim-copy{min-width:0;flex:1 1 280px}
.program-claim-copy h2{font-size:16px;letter-spacing:-.02em;margin:0 0 4px}
.program-claim-copy .program-note{margin:0;font-size:13px;color:var(--muted);max-width:56ch}
.claim-dialog{position:fixed;inset:0;margin:auto;height:max-content;padding:0;border:0;border-radius:16px;width:min(520px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;background:var(--paper);color:var(--ink);box-shadow:0 28px 70px rgba(31,20,45,.32)}
.claim-dialog:not([open]){display:none}
.claim-dialog::backdrop{background:rgba(31,20,45,.3);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.claim-dialog h2{font-size:20px;letter-spacing:-.03em;padding:20px 22px 0}
.claim-lede{margin:6px 22px 0;font-size:13px;color:var(--muted);line-height:1.6}
.claim-close{position:absolute;top:8px;right:10px;width:36px;height:36px;border-radius:50%;background:none;color:var(--muted);font-size:24px;line-height:1;cursor:pointer}
.claim-close:hover{background:var(--tint);color:var(--ink)}
.claim-form{display:grid;gap:12px;padding:16px 22px 20px}
.claim-form[hidden]{display:none}
.claim-form label{display:block;font-size:12px;font-weight:700}
.claim-form input,.claim-form textarea{display:block;width:100%;margin-top:5px;font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--white);color:var(--ink)}
.claim-form textarea{resize:vertical}
.claim-form .btn{justify-self:center;margin-top:2px}
.claim-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.claim-optional{font-weight:400;color:var(--muted)}
.claim-status{margin:0;font-size:12.5px;font-weight:600;color:var(--purple);min-height:1em}
.claim-status:empty{display:none}
.claim-thanks{padding:6px 22px 22px}
.claim-thanks p{margin:0 0 14px;font-size:14px;line-height:1.5}
.claim-thanks[hidden]{display:none}
@media (max-width:620px){.claim-row{grid-template-columns:1fr}}
.suggest-status{font-size:12.5px;color:var(--purple);font-weight:600;margin:10px 0 0;min-height:1em}
.yb-stars{position:relative;display:inline-block;line-height:1;font-size:15px;letter-spacing:1px;color:#d8d2df}
.yb-stars-base{color:#d8d2df}
.yb-stars-fill{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:#f0b429}
@media (max-width:980px){
  .program-head{grid-template-columns:1fr;gap:26px}
  .program-gallery{max-width:620px}
  .program-body{grid-template-columns:1fr;gap:34px}
  .program-side{position:static;border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:24px}
}
@media (max-width:640px){
  .crumb{padding-top:14px}
  .program-head{padding:18px 0 28px}
  .program-head h1{font-size:32px}
  .program-lede{font-size:14px}
  .program-facts-list{grid-template-columns:1fr;gap:13px}
  .program-section h2,.program-side h2{font-size:22px}
  .program-map iframe{height:240px}
  .gallery-thumbs{gap:6px}
}

/* The filters sit on the lavender wash the home page's result rail uses, so a
   search that moves from the home page to here keeps the same visual language. */
.workspace>.filter-panel{background:var(--tint);border:1px solid #e0d7e6;border-radius:16px;padding:20px}
@media (max-width:980px){.workspace>.filter-panel{background:var(--tint);border:1px solid #e0d7e6;border-radius:16px;padding:18px}}
.program-card h3 a{color:inherit;text-decoration:none}
.program-card h3 a:hover{color:var(--purple)}
.suggest-link{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:999px;padding:3px 13px 3px 3px;margin-left:auto;margin-right:6px;text-decoration:none;white-space:nowrap;line-height:1}
.suggest-link:hover{border-color:var(--purple);color:var(--purple);text-decoration:none}
.suggest-link:hover .suggest-mark{background:var(--purple);color:#fff;box-shadow:none}
.suggest-link .suggest-mark{width:24px;height:24px}
.suggest-link svg{width:12px;height:12px;flex:none}

/* ---------------------------------------------------------------------------
   The account page
   --------------------------------------------------------------------------- */
.account-hero{padding:38px 0 18px}
.account-hero h1{font-size:clamp(38px,5vw,58px);letter-spacing:-.055em;margin:10px 0 10px}
.account-lede{font-size:16px;line-height:1.7;color:var(--muted);max-width:62ch}
.account-body{padding-bottom:64px}
.account-loading,.account-empty{font-size:15px;color:var(--muted);padding:26px 0}
.account-empty h2{font-size:28px;color:var(--ink);margin-bottom:8px}
.account-empty p{max-width:54ch;margin-bottom:16px}
.account-grid{display:grid;grid-template-columns:340px minmax(0,1fr);gap:22px;align-items:start}
.account-card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:26px}
.account-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;background:#F2EAFA;color:#5929A7;font-size:26px;font-weight:800;margin-bottom:14px}
.account-card h2{font-size:24px;margin:0 0 4px}
.account-card p{font-size:13.5px;color:var(--muted);margin:0 0 2px;overflow-wrap:anywhere}
.account-town{color:var(--ink);font-weight:600;margin-top:8px}
.account-since{margin-top:6px}
.account-level{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.account-level strong{display:block;font-size:15px;color:var(--purple)}
.account-level span{font-size:12.5px;color:var(--muted)}
.account-progress{height:7px;border-radius:999px;background:var(--tint);margin:10px 0 5px;overflow:hidden}
.account-progress i{display:block;height:100%;background:var(--purple);border-radius:999px}
.account-level small{font-size:11.5px;color:var(--muted)}
.account-stats h2{font-size:22px;margin-bottom:16px}
.account-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}
.account-stat-grid>div{background:var(--tint);border-radius:12px;padding:12px 10px;text-align:center}
.account-stat-grid b{display:block;font-size:22px;color:var(--purple);line-height:1.1}
.account-stat-grid span{font-size:11px;color:var(--muted)}
.account-card h3{font-size:15px;margin:0 0 10px}
.badge-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:9px}
.badge-list li{border:1px solid var(--line);border-radius:11px;padding:9px 11px;background:var(--paper)}
.badge-list strong{display:block;font-size:12.5px}
.badge-list span{font-size:11px;color:var(--muted);line-height:1.4}
.account-section{border-top:1px solid var(--line);margin-top:34px;padding-top:26px}
.account-section h2{font-size:26px;margin:0 0 14px}
.account-note{font-size:13.5px;color:var(--muted)}
.account-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.account-list li{border-bottom:1px solid var(--line);padding-bottom:12px}
.account-list li:last-child{border-bottom:0}
.account-list a{font-weight:700;color:var(--ink)}
.account-list a:hover{color:var(--purple)}
.account-list span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.account-list p{font-size:13.5px;line-height:1.6;color:var(--ink);margin:6px 0}
/* One row shape for every list on the account page: a square picture on the
   left — the listing's own photograph, or a post's — and the words beside it,
   with the whole row being the link. */
.account-item-link{display:flex;gap:12px;align-items:flex-start;width:100%;min-width:0;color:inherit;text-decoration:none}
.account-item-link:hover .account-item-text strong{color:var(--purple)}
.account-thumb{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:none;background:#F2EAFA;display:block}
.account-thumb.is-empty{background:#F6F2FA}
.account-item-text{display:grid;gap:3px;min-width:0}
.account-item-text strong{font-size:14px;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.account-item-text small{font-size:11.5px;color:var(--muted)}
.account-item-text p{font-size:13.5px;line-height:1.55;color:var(--ink);margin:2px 0 0}
.account-item-stars{color:#B08A2E}
.account-item-text .account-status{justify-self:start}
.account-review-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.account-review-head strong{font-size:14px}
.account-stars{color:#f0b429;letter-spacing:1px;font-size:13px}
.account-status{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:2px 8px;background:var(--tint);color:var(--purple)}
.account-status.is-approved{background:#e7f0e2;color:#3d5a32}
.account-status.is-rejected{background:#fbeaea;color:#7a2f2f}
@media (max-width:900px){.account-grid{grid-template-columns:1fr}.badge-list{grid-template-columns:1fr}.account-stat-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.account-stat-grid{grid-template-columns:repeat(2,1fr)}.account-hero{padding-top:26px}}
/* ==========================================================================
   RESULTS — filters, the ranked list, and the map
   --------------------------------------------------------------------------
   Wide screen: three columns, filters on the left, numbered results down the
   middle, and a map that stays put while the list scrolls past it. Narrow
   screen: one column, with the filters and the map as panels the visitor asks
   for, because there is nowhere else for them to go.

   The numbers do the work here. A result's rank is on the card and on the pin,
   so a parent moving down the list can see where each one is without reading
   a town name off every card.
   ========================================================================== */
/* Sticky, so the question stays reachable from anywhere in the answers. The
   frost is the header's — paper at the same opacity over the same blur — so
   the two bars read as one surface when the reader is deep in the list. */
.sr-head {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 12px;
  padding: 16px 0 14px;
  /* Near-solid rather than the header's .88: what passes under this bar is
     dense card text, not a hero, and at .88 the blur left two sentences
     legible on top of each other. */
  background: rgba(252, 250, 247, .975);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}
.sr-head-main { min-width: 0; }
/* The question sits to the right of the count once a search is running. The
   Start with chips are not repeated here; they belong to the page above. */
@media (min-width: 901px) {
  .sr-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
    align-items: center; column-gap: 28px; row-gap: 8px; }
  .sr-head-main { grid-column: 1; grid-row: 1; }
  .sr-bar { grid-column: 2; grid-row: 1; width: 100%; max-width: none; }
  .sr-intent { display: none; }
  /* A category page keeps its chip tray above the results while searching:
     the chips are the question, and hiding them hides what the list is
     filtered to. */
  .sr-intent.has-tray { display: block; grid-column: 1 / -1; grid-row: 3; }
  .sr-intent.has-tray .chip-tray { margin: 0; }
  .sr-head-views { grid-column: 1 / -1; grid-row: 2; }
}
/* The starting view keeps the hero, so the results below it can begin sooner. */
body.is-browsing .browser-body { padding-top: 14px; padding-bottom: 18px; }
body.is-browsing .sr-head { padding-top: 8px; }
.sr-head-views { display: none; gap: 8px; }
/* The design page's chip row, moved into the results header while results are
   on screen: count line, chips, then the question. */
.sr-intent { min-width: 0; }
.sr-intent .intent-row { margin: 0; padding: 0; overflow: visible; flex-wrap: wrap; }
.sr-intent .intent-row .chip { flex-shrink: 0; }
.sr-intent .chip-tray { margin: 12px 0 0; }
/* The tray now sits just under the sticky bar rather than inside it, so it
   starts where the bar ends and scrolls away with the page. */
.sr-head + .chip-tray { margin: 0 0 16px; }
/* Shown only once the subfilter chips have scrolled out of view: it brings
   them back without changing what is filtered. */
.intent-jump { border-style: dashed; color: var(--purple); border-color: #c9b3e0; background: #fff; }
/* One arrow, turned rather than swapped: it points right while the panel is
   closed and down while it is open, at the same size either way. */
.intent-jump-arrow { display: inline-block; margin-left: 5px; font-size: 10px; line-height: 1; transition: transform .16s ease; }
.intent-jump[aria-expanded="true"] .intent-jump-arrow { transform: rotate(90deg); }
.intent-jump:hover { background: var(--tint); }
.intent-jump[hidden] { display: none; }
/* The same chips, opened under the sticky bar instead of pulling the page
   back to the top: a copy of the tray, floating where the reader already is. */
.chip-tray.is-floating {
  position: fixed;
  z-index: 45;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, calc(100vw - 32px));
  max-height: 60vh;
  overflow: auto;
  margin: 0;
  box-shadow: 0 24px 60px -28px rgba(35, 27, 52, .55);
}

/* The hero's bar, brought down to the size of a bar. Same field, same button,
   same pill — a search box that looked different here would read as a
   different search. */
.sr-bar { width: 100%; max-width: 620px; }
.sr-bar .search-bar { padding: 5px; box-shadow: none; }
.sr-bar .search-field input { font-size: 15px; padding: 10px 16px; }
.sr-bar .search-go { width: 40px; height: 40px; }
.sr-bar .search-go svg { width: 18px; height: 18px; }
.sr-bar .search-bar:focus-within { box-shadow: 0 0 0 4px var(--purple-tint); }
@media (max-width: 720px) {
  /* Full width once the head has wrapped, because a 240px field beside a
     two-line count is a field nobody can read what they typed in. */
  .sr-bar { max-width: none; }
}
.sr-view {
  font: inherit; font-size: 13.5px; font-weight: 700;
  color: var(--purple); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 16px; min-height: 44px; cursor: pointer;
}
.sr-view[aria-expanded="true"] { background: var(--purple); border-color: var(--purple); color: #fff; }

.sr-layout {
  margin-top: 24px;
  display: grid;
  /* A map wider than about 420px stops telling you anything the list has not
     already, and every pixel it takes comes off the card. */
  grid-template-columns: minmax(200px, 216px) minmax(0, 1fr) minmax(340px, 420px);
  gap: clamp(20px, 2.4vw, 34px);
  align-items: start;
}

/* Under the results head, which is sticky too. `--sr-head-h` is measured from
   the head itself by search.js, because its height depends on whether the count
   line has wrapped. The 92px fallback is the head at its shortest. */
.sr-rail {
  display: grid; gap: 22px; position: sticky;
  top: calc(var(--header-h) + var(--sr-head-h, 92px) + 18px);
  /* With two facets open the rail is taller than the screen, and a sticky
     column taller than the viewport has its lower half cut off until the
     page itself reaches the bottom. It gets its own scrollbar instead, sized
     to end just above the bottom edge. */
  max-height: calc(100vh - var(--header-h) - var(--sr-head-h, 92px) - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.sr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--purple);
  background: var(--purple-tint);
  color: var(--purple-dark);
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.sr-chip span { font-size: 15px; line-height: 1; opacity: .7; }
.sr-chip:hover { background: var(--purple); color: #fff; }
.sr-chip:hover span { opacity: 1; }
.sr-chip-none { font-size: 13px; color: var(--muted); }

/* One control per group, label above it, down the rail. The rule above each
   one is what makes it read as a section rather than a run of fields. */
.sr-filters { display: grid; gap: 16px; }
.sr-filters label {
  display: grid; gap: 7px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 11.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.sr-filters label:first-child { padding-top: 0; border-top: 0; }
.sr-filters select,
.sr-filters input {
  font: inherit; font-size: 14px; font-weight: 500;
  text-transform: none; letter-spacing: 0;
  color: var(--ink);
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.sr-filters select:disabled { opacity: .5; }
.sr-filters input:focus-visible,
.sr-filters select:focus-visible { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-tint); }

/* A filter that takes more than one answer: the same section rule and the same
   field box as the selects, but it opens a list of checkboxes. The summary
   carries what is chosen, because a closed filter still has to say what it is
   doing — "Age · 6, 9" reads at a glance where a count does not. */
.sr-facet {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.sr-facet:first-child { padding-top: 0; border-top: 0; }
.sr-facet > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  cursor: pointer; list-style: none;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.sr-facet > summary::-webkit-details-marker { display: none; }
.sr-facet > summary::after {
  content: ""; flex: none;
  width: 8px; height: 8px; margin-left: 2px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s var(--ease, ease);
}
.sr-facet[open] > summary { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-tint); }
.sr-facet[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.sr-facet-name { text-transform: uppercase; }
.sr-facet-val {
  margin-left: auto; min-width: 0;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  text-transform: none; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sr-facet.is-set > summary { color: var(--purple); }
.sr-facet.is-set .sr-facet-val { color: var(--purple); }
.sr-facet-body {
  display: grid; gap: 2px;
  max-height: 232px; overflow-y: auto;
  margin-top: 6px; padding: 6px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface);
}
.sr-facet-group {
  margin: 6px 4px 2px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.sr-facet-group:first-child { margin-top: 2px; }
/* `.sr-filters label` dresses every label in the rail as a section heading —
   uppercase, a rule above it, a column. An option is a label inside one of
   those, so it has to undo all three, and it needs the specificity to do it. */
.sr-filters .sr-opt {
  display: flex; flex-direction: row; align-items: center; gap: 9px;
  padding: 6px 7px;
  border-top: 0;
  border-radius: 8px;
  font-size: 13.5px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--ink);
  cursor: pointer;
}
.sr-filters .sr-opt:hover { background: var(--purple-tint); }
.sr-opt input {
  appearance: none; flex: none;
  width: 17px; height: 17px; margin: 0;
  border: 1.6px solid #CFC7D8; border-radius: 5px;
  background: #fff;
  display: grid; place-items: center;
  cursor: pointer;
}
.sr-opt input::after {
  content: ""; width: 9px; height: 9px; border-radius: 2px;
  background: #fff; transform: scale(0); transition: transform .12s var(--ease, ease);
}
.sr-opt input:checked { background: var(--purple); border-color: var(--purple); }
.sr-opt input:checked::after { transform: scale(1); }
.sr-opt input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--purple-tint); }

/* ---------- the map ---------- */
/* The column starts below the results head, exactly where the filter rail
   starts, because the head is sticky too: at a fixed 84px the map slid under
   the bar and its top was cut off. Its height is what is left of the screen
   under the bar, minus the credit row, so the whole map is on screen. */
.sr-mapcol {
  position: sticky;
  top: calc(var(--header-h) + var(--sr-head-h, 92px) + 18px);
  display: grid; gap: 10px;
  max-height: calc(100vh - var(--header-h) - var(--sr-head-h, 92px) - 36px);
}
.sr-map {
  height: clamp(300px, calc(100vh - var(--header-h) - var(--sr-head-h, 92px) - 96px), 720px);
  min-height: 300px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  overflow: hidden;
  background: var(--surface);
}
.sr-map.is-blank { display: grid; place-items: center; text-align: center; padding: 24px; }
.sr-map-note { color: var(--muted); font-size: 13.5px; line-height: 1.6; max-width: 34ch; }
.sr-maperr { color: var(--muted); font-size: 12.5px; }
.sr-mapfoot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.sr-mapsync {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  cursor: pointer;
}
.sr-mapsync input { width: 16px; height: 16px; accent-color: var(--purple); }
.sr-mapcredit, .sr-mapcount { font-size: 12px; color: var(--muted); }

/* A pin carries its result's rank. It is a real button, so a pin can be
   reached by keyboard as well as by pointer.

   A disc with a point under it, not a rounded square rotated forty-five
   degrees: the old shape put the rank on a diagonal (the counter-rotation the
   number needed was easy to lose, and the tip was a corner rather than the
   bottom of the element, so pins sat slightly off their towns). The disc keeps
   the number upright and the tail hangs from the element's own bottom edge,
   which is where MapLibre's `anchor: 'bottom'` puts the coordinate — so the
   point of the pin is the place. */
.sr-pin {
  position: relative;
  appearance: none; border: 0; padding: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--purple);
  color: #fff;
  font: inherit; font-size: 12.5px; font-weight: 800;
  display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(35, 27, 52, .34), 0 0 0 2px #fff;
  cursor: pointer;
  transition: background .15s var(--ease, ease), transform .15s var(--ease, ease);
}
.sr-pin::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 12px; height: 7px; margin-left: -6px;
  background: var(--purple);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: background .15s var(--ease, ease);
}
.sr-pin:hover, .sr-pin.is-active {
  background: var(--logo-period, #C660B4);
  transform: scale(1.14);
  z-index: 3;
}
.sr-pin:hover::after, .sr-pin.is-active::after { background: var(--logo-period, #C660B4); }
.sr-pin.is-active { box-shadow: 0 3px 12px rgba(35, 27, 52, .45), 0 0 0 2px #fff; }

/* The popup a pin opens. This is the same 16:9 photograph and the same facts
   the card carries, because it is the same listing. */
.maplibregl-popup-content {
  font-family: inherit;
  padding: 14px 16px 15px !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 40px -18px rgba(35, 27, 52, .5) !important;
  max-width: 268px;
}
.sr-pop-photo {
  display: block; width: calc(100% + 32px); margin: -14px -16px 10px;
  aspect-ratio: 16 / 9; object-fit: cover; background: #f2eafa;
  border-radius: 14px 14px 0 0;
}
.sr-pop-town {
  font-size: 11px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--purple);
}
.sr-pop-name { margin: 4px 0 0; font-size: 15.5px; font-weight: 700; line-height: 1.28; color: var(--ink-deep); }
.sr-pop-org { margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.sr-pop-facts { margin: 10px 0 0; display: grid; gap: 5px; font-size: 12.5px; color: var(--slate); }
.sr-pop-facts dt { display: inline; font-weight: 700; color: var(--muted); }
.sr-pop-facts dd { display: inline; margin: 0 0 0 5px; }
.sr-pop-go {
  display: inline-block; margin-top: 11px;
  font-size: 13px; font-weight: 700; color: var(--purple);
}
/* On a phone the map panel is short and the card opens above the pin, so the
   photograph went and the type came down: a card that fits beats a card with
   a picture whose bottom half is off the screen. */
@media (max-width: 640px) {
  .maplibregl-popup-content { max-width: 240px; padding: 11px 13px 12px !important; }
  .sr-pop-photo { display: none; }
  .sr-pop-name { font-size: 14px; }
  .sr-pop-facts { font-size: 12px; margin-top: 7px; }
}
.sr-filters input[aria-invalid="true"] { border-color: #C0392B; }

/* One column, full width: the map is the other half of the page, and a result
   is read top to bottom — picture, rank, then the facts. */
.sr-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.sr-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .16s var(--ease, ease), border-color .16s var(--ease, ease);
}
.sr-card:hover { border-color: #D8D1EA; box-shadow: 0 10px 26px -18px rgba(35, 27, 52, .5); }
.sr-card { position: relative; }

/* Save, on the search card, in the same place and shape as the guide's. */
.sr-save {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.7); border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--muted);
  cursor: pointer; transition: color .15s, background .15s, border-color .15s;
  box-shadow: 0 2px 8px rgba(30,20,50,.12);
}
.sr-save svg { width: 15px; height: 15px; }
.sr-save:hover { color: var(--purple); border-color: #D8CCEE; }
.sr-save.is-saved { background: var(--purple); border-color: var(--purple); color: #fff; }
.sr-save.is-saved svg { fill: currentColor; }
.sr-card.no-thumb .sr-save { top: 10px; right: 10px; }

.sr-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0 0 8px; }
.sr-badge {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.35;
  text-transform: capitalize; color: #5B5268; background: #F3EFF7;
  border-radius: 999px; padding: 3px 8px;
}
.sr-badge-cat { background: var(--purple-tint); color: var(--purple); }
.sr-badge-aid { background: #E8F3EA; color: #2F6B3D; }
.sr-badge-coed { background: #EAF0FA; color: #34527A; }
.sr-badge-girls { background: #FBEAF3; color: #8A2C60; }
.sr-badge-adaptive { background: #FFF2DD; color: #7A5314; }

.sr-desc {
  margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sr-term {
  margin: 10px 0 0; font-size: 12.5px; font-weight: 600; color: #3F3550;
  background: #F7F3FB; border-radius: 8px; padding: 7px 10px;
}
.sr-reg { background: #FFF7E8; color: #6B4B12; }
.sr-aid {
  margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: #355B3D;
  background: #EEF7F0; border-radius: 8px; padding: 8px 10px;
}
.sr-aid a { color: #2F6B3D; font-weight: 600; }
.sr-review { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
.sr-save-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px);
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 600;
  border-radius: 999px; padding: 10px 18px; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 90;
}
.sr-save-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* The picture. A card with no photograph has no slot at all, so a listing
   without one is a full-width text card rather than a card with a hole in it.
   Whether there is one is decided before the card is written — see card() in
   search.js — so the list never reflows as pictures arrive.

   Across the top, not down the side. The feed is about 470px wide — the rail
   and the map take the rest of the row — and a card's text is 300px tall, so a
   side column could show a 16:9 picture only 99px of the way down it and left
   the other 200px as blank card. Stretching the picture to the card's height
   instead would have cropped a landscape photograph to a third of its width,
   which is the crop the guides refuse photographs for. Across the top the
   picture keeps its own shape and there is nothing left over. It is also what
   the town guides and the narrow-screen layout already do. */
.sr-thumb {
  flex: none; width: 100%;
  aspect-ratio: 16 / 7;
  max-height: 240px;
  background: var(--paper);
}
.sr-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sr-thumb a { display: block; width: 100%; height: 100%; }

.sr-card-main { flex: 1 1 auto; min-width: 0; padding: 16px 20px 15px; }
.sr-card-top {
  display: flex; align-items: center; gap: 10px; margin-bottom: 7px;
}
/* The rank, on the card and on the pin, so the two can be read together. */
.sr-rank {
  flex: none;
  min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: 999px;
  background: var(--purple); color: #fff;
  font-size: 12.5px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.sr-card-top .sr-miles { margin-left: auto; }
.sr-town {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--purple);
}
.sr-miles { font-size: 12px; color: var(--muted); }
.sr-card h3 { font-size: 17px; line-height: 1.3; }
.sr-org { margin-top: 4px; font-size: 13px; color: var(--muted); }

.sr-why, .sr-caution { list-style: none; margin: 12px 0 0; padding: 0; }
.sr-why li {
  position: relative; padding-left: 20px; margin-bottom: 4px;
  font-size: 13.5px; line-height: 1.45; color: var(--ink);
}
.sr-why li::before {
  content: ""; position: absolute; left: 5px; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--purple);
}
.sr-caution li {
  position: relative; padding-left: 20px; margin-bottom: 4px;
  font-size: 12.5px; line-height: 1.45; color: var(--muted);
}
.sr-caution li::before {
  content: ""; position: absolute; left: 4px; top: 7px;
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid var(--muted);
}
/* The price, on a card whose price could not be compared with the budget. It
   is a fact about the program rather than a reason it matched, so it reads as
   a label: a rule, a unit, no tick. */
.sr-why li.sr-price {
  font-weight: 700; color: var(--purple-dark);
}
.sr-why li.sr-price::before { background: var(--muted); border-radius: 50%; }

/* The line between the programs that fit a budget and the ones whose price
   could not be measured against it. It spans the grid, so it reads as a break
   in the list rather than as another card. */
.sr-group {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding-top: 22px;
  border-top: 2px solid var(--line);
}
.sr-group h3 {
  font-size: 15px; font-weight: 800; letter-spacing: .02em;
  color: var(--ink); margin: 0;
}
.sr-group p {
  margin-top: 6px; max-width: 62ch;
  font-size: 13.5px; line-height: 1.5; color: var(--muted);
}
/* The count belongs to the heading, so it sits on its line rather than in the
   sentence below: "Eligibility not published 12" is the whole group at a
   glance. */
.sr-group-count {
  display: inline-grid; place-items: center;
  min-width: 26px; height: 22px; padding: 0 8px; margin-left: 6px;
  border-radius: 999px; background: var(--tint); color: var(--purple);
  font-size: 12px; font-weight: 800; vertical-align: 2px;
}
.sr-group-confirmed { border-top-color: var(--purple); }
/* The group counts, at the top of the list: what the answer is, and what each
   kind of almost-answer is, before the first card. */
.sr-fit-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.sr-fit-summary[hidden] { display: none; }
.sr-fit-jump {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); color: var(--ink);
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.sr-fit-jump:hover { border-color: var(--purple); color: var(--purple); }
.sr-fit-jump span {
  display: inline-grid; place-items: center; min-width: 22px; height: 18px;
  padding: 0 6px; border-radius: 999px; background: var(--tint);
  color: var(--purple); font-size: 11px; font-weight: 800;
}
/* The chip that is filtering says so, and reads as pressed. */
.sr-fit-jump[aria-pressed="true"] {
  background: var(--purple); border-color: var(--purple); color: #fff;
}
.sr-fit-jump[aria-pressed="true"] span { background: rgba(255,255,255,.22); color: #fff; }
.sr-fit-all { color: var(--purple); border-color: var(--purple); }
/* A group heading is also the way to see only that group. */
.sr-group-only {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 0; border: 0; background: none; font: inherit;
  font-size: 15px; font-weight: 800; letter-spacing: .02em; color: inherit;
  cursor: pointer; text-align: left;
}
.sr-group-only:hover { color: var(--purple); }
.sr-group-only:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 4px; }
.sr-group-hint {
  margin-left: 10px; font-size: 11.5px; font-weight: 700;
  color: var(--purple); opacity: 0; transition: opacity .15s;
}
.sr-group-only:hover .sr-group-hint,
.sr-group-only:focus-visible .sr-group-hint { opacity: 1; }
.sr-group-price h3, .sr-group-related h3 { color: var(--ink); }

.sr-facts {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
}
.sr-facts dt {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.sr-facts dd { margin: 3px 0 0; font-size: 13px; line-height: 1.4; }

.sr-card-foot {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.sr-go {
  font-size: 13.5px; font-weight: 700; color: var(--purple);
  text-decoration: none;
}
.sr-go:hover { text-decoration: underline; }
.sr-guide { font-size: 12.5px; color: var(--muted); text-decoration: none; }
.sr-guide:hover { color: var(--purple); }

.sr-empty, .sr-loading {
  grid-column: 1 / -1;
  text-align: center; padding: 40px 20px; color: var(--muted);
}
.sr-empty h3 { font-size: 19px; color: var(--ink); margin-bottom: 8px; }
.sr-empty a { color: var(--purple); }
.sr-more { margin: 26px auto 0; display: block; }
.sr-more[hidden] { display: none; }

/* Two results to a row on a phone, the same as a town guide's cards. The
   search result is a shorter card than the town guide's — no photograph — so
   the facts stack and the footer puts the link under the price. */
/* Below this there is no room for three columns, so the filters become a panel
   the visitor opens. The map keeps its column as long as it can. */
@media (max-width: 1120px) {
  .sr-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 40%); }
  .sr-head-views { display: flex; }
  .sr-rail { display: none; position: static; max-height: none; overflow: visible; }
  .sr-rail.is-open { display: grid; grid-column: 1 / -1; padding-bottom: 4px; }
}
/* And below this there is not room for two, so the map becomes a panel as
   well. It is still built on demand and never on load. */
@media (max-width: 900px) {
  .sr-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sr-mapcol { display: none; position: static; max-height: none; }
  .sr-mapcol.is-open { display: grid; order: -1; }
  .sr-map { height: 320px; min-height: 0; }

  /* Two cards to a row on a phone, as a town guide does. The photograph is
     already across the top of every card at every width; on a phone it is a
     full 16:9, because there is no side column to buy the height back from. */
  .sr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sr-thumb { aspect-ratio: 16 / 9; }
  .sr-card-main { padding: 12px 13px 12px; }
  .sr-card-top { margin-bottom: 6px; gap: 7px; }
  .sr-rank { min-width: 20px; height: 20px; font-size: 11px; }
  .sr-town { font-size: 10.5px; letter-spacing: .07em; }
  .sr-miles { font-size: 11px; }
  .sr-card h3 { font-size: 14.5px; }
  .sr-org { font-size: 12px; }
  .sr-why li { font-size: 12.5px; padding-left: 16px; }
  .sr-why li::before { left: 3px; top: 7px; width: 6px; height: 6px; }
  .sr-caution li { font-size: 11.5px; padding-left: 16px; }
  .sr-caution li::before { left: 3px; top: 6px; width: 6px; height: 6px; }
  .sr-facts { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .sr-facts dd { font-size: 12.5px; }
  .sr-card-foot { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 12px; padding-top: 10px; }
  .sr-go, .sr-guide { font-size: 12.5px; }
}

/* The nav is fixed and 70px tall, so anything scrolled to needs to keep its
   heading clear of it. */
.results, .towns, .scope { scroll-margin-top: 92px; }


/* The home page's result system, on the programs page. When a search is
   running the design page's own filter panel and card grid step aside; the
   intent row and category nav stay above the results. */
:root{--header-h:80px}
body.is-searching .workspace{display:none}
body.is-searching .browser-body{display:none}
body.is-searching #search-results{display:block}
#search-results[hidden]{display:none}
#search-results .shell{max-width:1320px}
@media (max-width:620px){:root{--header-h:64px}}

/* The results header carries the same pill as the hero, but the home page's
   global .search-bar rules are not loaded here. */
.sr-bar .search-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;background:var(--white);border:1px solid #CBB0E6;border-radius:999px;padding:7px;transition:border-color .18s,box-shadow .18s}
.sr-bar .search-field{min-width:0;display:flex}
.sr-bar .search-field input{width:100%;min-width:0;font:inherit;font-size:15px;color:var(--ink);padding:10px 16px;border:0;border-radius:999px;background:none}
.sr-bar .search-field input::placeholder{color:var(--muted)}
.sr-bar .search-field input:focus-visible{outline:none}
.sr-bar .search-go{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--purple);color:#fff;cursor:pointer}
.sr-bar .search-go svg{width:18px;height:18px;flex:none}

/* While a search is on screen, the browse-page tail (the three principles,
   the FAQ and the town-by-town index) steps out of the way. */
body.is-searching .principle-row,
body.is-searching .faq-section,
body.is-searching .town-index{display:none}

/* A program's photo opens its page, the way its title does. */
.card-image-link { display: block; }
.card-media > a { display: block; }

.signin-apple-mark{width:18px;height:18px;flex:none}
.signin-apple{gap:9px}
.signin-switch {
  margin: 2px 0 0;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--purple);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.signin-switch:hover { text-decoration: underline; }

/* The confirmation step after creating an account. */
.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: var(--muted, #6E6977); }
.signin-confirm-text strong { color: var(--ink, #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; }

/* Account settings: the blocks a parent owns. */
.account-settings{grid-column:1/-1}
.account-settings h2{margin-bottom:4px}
.account-block{padding-top:20px;margin-top:20px;border-top:1px solid var(--line)}
.account-block:first-of-type{padding-top:0;margin-top:0;border-top:0}
.account-settings form{display:grid;gap:12px;margin-top:12px}
.account-settings h3{font-size:15px;margin:0 0 2px}
.account-hint{font-size:13px;line-height:1.55;color:var(--muted);margin:0!important}
.account-email-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.account-email-row>div{display:grid;gap:2px;min-width:0}
.account-email-row>div>span{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.account-email-row strong{font-size:14px;overflow-wrap:anywhere}
.account-method{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--purple);background:var(--tint);border-radius:999px;padding:3px 9px;white-space:nowrap}
.account-method .google-g{width:13px;height:13px;display:block;flex:none}
.account-code-row{align-items:end}
/* The code is the last step, not the first: the password is chosen above it,
   then one email proves the address before the change is saved. */
.account-code-block{margin-top:4px;padding-top:16px;border-top:1px solid var(--line)}
.account-step{margin:0 0 4px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--purple)}
.account-checks{display:grid;gap:9px}
.account-checks label{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;color:var(--ink)}
.account-checks input{width:17px;height:17px;margin:0;accent-color:var(--purple);flex:none}
/* The settings form's text inputs are full width; a newsletter box is not a
   text input and must not inherit that width, which pushed every label to
   the right edge of the card. */
.account-settings .account-checks input{display:inline-block;width:17px;height:17px;min-width:17px;margin:0;padding:0;border:0;background:none;flex:none}
.account-button-row{display:flex;flex-wrap:wrap;gap:10px}
/* The two measurement controls sit on their own line with the same air above
   and below: 20px from the paragraph, 20px from the card's edge. An empty
   status line takes no room; when it has something to say it adds its own. */
#privacy{padding-bottom:20px}
#privacy .account-button-row{margin-top:20px}
#privacy .account-form-note:empty{display:none}
#privacy .account-form-note:not(:empty){margin-top:12px}
/* The save button sat tight against the last newsletter option, reading as
   part of that line rather than the end of the form. */
.account-checks + .account-button-row{margin-top:20px}
.account-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;margin:10px 0 0}
.account-facts div{min-width:0}
.account-facts dt{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.account-facts dd{margin:3px 0 0;font-size:14px;color:var(--ink)}
.account-danger{font-size:12.5px;color:var(--muted);margin-top:18px!important}
.account-danger a{color:var(--purple);font-weight:600}
.guide-level-badge{display:inline-flex;align-items:center;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:3px 9px;background:var(--tint);color:var(--purple);vertical-align:middle;white-space:nowrap}
.account-settings label{display:block;font-size:12px;font-weight:700;color:var(--ink)}
.account-settings input{display:block;width:100%;margin-top:5px;font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--white);color:var(--ink)}
.account-settings textarea{display:block;width:100%;margin-top:5px;font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--white);color:var(--ink);resize:vertical}
.account-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* The settings form styles every label as a block heading, which a checkbox
   row is not: it left the box sitting on the text baseline and the label
   looking like a form caption. These four rows are a list of choices, so the
   box and its line are centered together, with a little more air between them. */
.account-settings .account-checks{display:grid;gap:12px}
.account-settings .account-checks label{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;line-height:1.4;color:var(--ink)}
.account-settings .account-checks input{margin:0;flex:none}
@media(max-width:560px){.account-field-row{grid-template-columns:1fr}.account-facts{grid-template-columns:1fr}.account-settings{padding:20px}.account-settings .btn{width:100%;justify-self:stretch}}
.account-settings .btn{justify-self:start;margin-top:2px}
.account-form-note{margin:0;font-size:12.5px;color:#1F7A4D;min-height:1em}
.account-form-note.is-error{color:#9B2C2C}

/* The tray under the intent row. It sits in the page rather than in a
   popover, so the choices are under the chip that owns them and the results
   begin below the tray. Lavender, like the filter panel it replaces. */
.chip-tray{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px;padding:12px 14px;border:1px solid #d9c8ee;border-radius:14px;background:var(--tint)}
.chip-tray[hidden]{display:none}
.chip-tray button{display:inline-flex;align-items:center;min-height:32px;padding:6px 13px;border:1px solid #cbb6e4;border-radius:999px;background:var(--white);color:var(--ink);font:inherit;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer}
.chip-tray button:hover{border-color:var(--purple);color:var(--purple);background:#fff}
@media(max-width:640px){
  .chip-tray{gap:7px;padding:11px;margin-bottom:14px}
  .chip-tray button{font-size:11px;min-height:30px;padding:5px 11px}
}
/* The intent row is the category control while results are on screen; the
   design page's own strip would be a second, competing one. */
body.is-searching .browse-nav{display:none}

/* A search replaces the hero: the title, the box and the results are the
   page, so the hero, its photograph and the big finder step out of the way. */
body.is-searching .page-hero,
body.is-searching .finder-section{display:none}

/* The intent chips are a filter group while results are on screen. */
.sr-rail .intent-row{display:grid;gap:6px;margin:0 0 18px;padding:0 0 16px;border-bottom:1px solid var(--line);overflow:visible}
.sr-rail .intent-label{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.sr-rail .intent-row .chip{display:flex;width:100%;justify-content:flex-start;text-align:left;padding:8px 11px;min-height:34px;font-size:12.5px;border-radius:9px;background:var(--white);white-space:normal}
.sr-rail .intent-row .chip[aria-pressed="true"]{background:var(--purple);border-color:var(--purple);color:#fff}
.sr-rail .chip-tray{display:grid;gap:4px;margin:2px 0 4px;padding:8px 0 2px 10px;border-left:2px solid #d9c8ee;background:none;border-radius:0}
.sr-rail .chip-tray button{width:100%;justify-content:flex-start;text-align:left;white-space:normal;font-size:11.5px;min-height:28px;padding:5px 9px;background:var(--white)}
@media(max-width:900px){
  .sr-rail .intent-row{grid-template-columns:1fr 1fr}
  .sr-rail .intent-label{grid-column:1/-1}
  .sr-rail .chip-tray{grid-column:1/-1}
}

/* --------------------------------------------------------------------------
   THE REVIEW FINDER (/review)
   A search page with a short list of programs the visitor is most likely to
   know, chosen from their town, their last search and where the visit came
   from. The list is a suggestion; the search box is the page.
   -------------------------------------------------------------------------- */
.review-hero{padding:38px 0 34px;background:linear-gradient(180deg,var(--tint) 0%,var(--paper) 78%)}
.review-hero-top{display:flex;align-items:flex-end;justify-content:space-between;gap:28px}
.review-hero-copy{min-width:0}
.review-hero .eyebrow{margin-bottom:16px}
.review-hero h1{font-size:clamp(38px,4.1vw,59px);line-height:1.045;letter-spacing:-.055em;max-width:560px}
.review-hero h1 em{font-style:normal;color:var(--purple)}
.review-hero .hero-lede{font-size:16px;line-height:1.65;color:var(--muted);max-width:520px;margin:20px 0 0}
.review-hero-mark{flex:none;display:grid;gap:4px;padding:18px 22px;border:1px solid #d9c8ee;border-radius:18px;background:var(--white);box-shadow:0 18px 40px -30px rgba(35,27,52,.5);color:var(--muted);font-size:12.5px;font-weight:600;line-height:1.5;text-align:center}
.review-hero-stars{color:#E8A317;font-size:22px;letter-spacing:2px;line-height:1}
.review-search{margin-top:26px;max-width:640px}
.review-search .search-bar{background:var(--white);box-shadow:0 18px 40px -30px rgba(35,27,52,.45)}
.review-place{margin:10px 2px 0;font-size:12.5px;color:var(--muted);font-weight:600}
.review-body{padding:34px 0 64px}
.review-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:20px}
.review-heading .eyebrow{margin-bottom:8px}
.review-heading h2{font-size:clamp(26px,3vw,36px);letter-spacing:-.045em}
.review-note{max-width:46ch;margin:0;font-size:13px;line-height:1.6;color:var(--muted);text-align:right}
.review-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.review-card{display:grid;grid-template-columns:118px minmax(0,1fr);border:1px solid var(--line);border-radius:16px;background:var(--white);overflow:hidden;transition:border-color .18s,box-shadow .18s,transform .18s}
.review-card:hover{border-color:#cbb0e6;box-shadow:0 18px 40px -30px rgba(35,27,52,.55);transform:translateY(-1px)}
.review-card.no-photo{grid-template-columns:minmax(0,1fr)}
.review-card-photo{display:block;background:var(--tint)}
.review-card-photo img{width:100%;height:100%;object-fit:cover;min-height:160px}
.review-card-body{display:flex;flex-direction:column;gap:5px;padding:16px 18px}
.review-card-meta{margin:0;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--purple)}
.review-card h3{margin:0;font-size:17px;line-height:1.25;letter-spacing:-.02em}
.review-card h3 a:hover{color:var(--purple)}
.review-card-org{margin:0;font-size:12.5px;color:var(--muted)}
.review-card-why{margin:4px 0 0;font-size:12px;color:#6B5A7C;font-style:italic}
.review-card-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:auto;padding-top:12px}
.review-card-foot .btn{min-height:38px;padding:8px 14px;font-size:12.5px;border-radius:999px}
.review-card-foot .text-link{font-size:12.5px}
.review-empty{padding:26px 0;color:var(--muted);font-size:14px}
.review-foot{margin:30px 0 0;font-size:12px;color:var(--muted);max-width:70ch}
@media(max-width:820px){
  .review-hero-top{display:block}
  .review-hero-mark{display:none}
  .review-heading{display:block}
  .review-note{text-align:left;margin-top:8px;max-width:none}
}
@media(max-width:560px){
  .review-hero{padding:26px 0 24px}
  .review-list{grid-template-columns:1fr}
  .review-card{grid-template-columns:92px minmax(0,1fr)}
  .review-card.no-photo{grid-template-columns:1fr}
  .review-card-photo img{min-height:100%}
}

/* A link that carries a search must not paint the design hero first. The head
   script marks the document before the first frame; search-init takes over and
   the fallback removes the mark if the script never starts. */
html.yb-searching .page-hero,
html.yb-searching .finder-section,
html.yb-searching .browser-body{display:none}
html.yb-searching #search-results{display:block}
html.yb-searching #search-results[hidden]{display:block}

/* --------------------------------------------------------------------------
   SHARING
   -------------------------------------------------------------------------- */
.program-share{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.program-share-label{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.program-share-btn,.sr-share{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 13px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink);font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:border-color .18s,color .18s,background .18s}
.program-share-btn:hover,.sr-share:hover{border-color:var(--purple);color:var(--purple);background:var(--purple-tint)}
.sr-share{min-height:30px;padding:4px 10px;font-size:11.5px}
.card-foot-right{display:inline-flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap}
.guide-link{font-size:12px;font-weight:700;color:var(--purple);white-space:nowrap}
.guide-link:hover{text-decoration:underline}

/* --------------------------------------------------------------------------
   RECENT ACTIVITY (/recent)
   -------------------------------------------------------------------------- */
.feed-hero{padding:38px 0 28px;background:linear-gradient(180deg,var(--tint) 0%,var(--paper) 80%)}
.feed-hero-top{display:flex;align-items:flex-end;justify-content:space-between;gap:28px}
.feed-hero-copy{min-width:0}
.feed-hero .eyebrow{margin-bottom:16px}
.feed-hero h1{font-size:clamp(38px,4.1vw,59px);line-height:1.045;letter-spacing:-.055em;max-width:560px}
.feed-hero h1 em{font-style:normal;color:var(--purple)}
.feed-hero .hero-lede{font-size:16px;line-height:1.65;color:var(--muted);max-width:520px;margin:20px 0 0}
.feed-hero-side{flex:none;display:grid;gap:10px;justify-items:end}
.feed-share-site{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 18px;border-radius:999px;border:1px solid var(--purple);background:var(--white);color:var(--purple);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.feed-share-site:hover{background:var(--purple);color:#fff}
.feed-where{margin:0;font-size:12.5px;color:var(--muted);text-align:right}
.feed-where a{color:var(--purple);font-weight:700}
.feed-filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px;padding:0;border:0}
.feed-filter{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:7px 14px 7px 11px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--muted);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.feed-filter:hover{border-color:#c9b3e0;color:var(--purple)}
.feed-filter.is-on{border-color:var(--purple);background:var(--tint);color:var(--purple)}
.feed-filter input[type="checkbox"]{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin:0;flex:none;border:1.5px solid #cbb8e2;border-radius:5px;background:var(--white);display:grid;place-content:center;cursor:pointer;transition:background .15s,border-color .15s}
.feed-filter input[type="checkbox"]::after{content:"";width:8px;height:4px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) scale(0);transform-origin:center;transition:transform .12s ease}
.feed-filter input[type="checkbox"]:checked{background:var(--purple);border-color:var(--purple)}
.feed-filter input[type="checkbox"]:checked::after{transform:rotate(-45deg) scale(1)}
.feed-filter input[type="checkbox"]:focus-visible{outline:none;box-shadow:0 0 0 3px var(--tint)}
/* A card with no reviews still shows the stars and the count: the empty
   state is "No reviews yet", not an absence of the control, and the town
   guides have always read that way. */
.sr-review .yb-review-count[data-empty]{color:var(--muted)}
.sr-extra{margin:10px 0 0}
.sr-extra summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--purple)}
.sr-extra .sr-desc{margin-top:8px}
.sr-freshness.is-current{background:#e4f2e6;color:#286b3d}
.sr-freshness.is-ongoing{background:var(--tint);color:var(--purple)}
.sr-freshness.is-past{background:#f1eef3;color:#6e6977}
.sr-fresh{margin:8px 0 0;font-size:11.5px;color:var(--muted)}
.sr-fresh a{color:var(--purple);font-weight:600}
.feed-kicker{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--tint);color:var(--purple);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.feed-kicker.is-deadline{background:#fde7e4;color:#a33223}
.feed-kicker.is-opening{background:#e4f2e6;color:#286b3d}
.feed-kicker.is-new{background:var(--tint);color:var(--purple)}
.feed-kicker.is-pick{background:#fdf3d8;color:#7a5a12}
.feed-parents{margin:0 0 18px;padding:15px 17px;border:1px solid var(--line);border-radius:16px;background:var(--tint)}
.feed-parents-title{margin:0;font-size:15px;font-weight:800;color:var(--ink)}
.feed-parents-sub{margin:3px 0 12px;color:var(--muted);font-size:12.5px}
.feed-parents-list{display:grid;gap:10px}
.feed-parents-empty{margin:0 0 10px;font-size:13px;line-height:1.55;color:var(--muted)}
.feed-parents[hidden]{display:none}
/* A filter that opens as a panel of ticks but reads as one line: the summary
   carries the answer, so the rail stays as short as the dropdowns it replaces
   and a parent can still pick two age bands at once. */
.feed-facet{border:0;margin:0;padding:0}
.feed-facet>summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;
  padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--white);
  font-size:13px;font-weight:600;color:var(--ink)}
.feed-facet>summary::-webkit-details-marker{display:none}
.feed-facet>summary::after{content:"\25BE";color:var(--muted);font-size:10px;line-height:1}
.ff-name{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ff-val{flex:1;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ff-arrow{flex:none;color:var(--muted);font-size:10px;line-height:1}
.feed-facet[open]>summary,.feed-facet.is-set>summary{border-color:var(--purple)}
.feed-facet.is-set .ff-val{color:var(--purple);font-weight:800}
.ff-body{display:grid;gap:6px;padding:8px 0 2px}
.ff-body .feed-filter{display:flex;width:100%;justify-content:flex-start;text-align:left;min-height:34px;padding:6px 11px}
.ff-body .feed-filter span{flex:1;text-align:left}

.feed-facets{display:grid;gap:12px;margin-top:22px}
.feed-facets-foot{display:grid;gap:12px;margin-top:12px}
/* Only the direct labels are the little uppercase captions. The tick boxes
   inside a facet panel are labels too, and inheriting this made every option
   shout in capitals and sit at the right edge. */
.feed-facets>label,.feed-facets-foot>label{display:grid;gap:5px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.feed-facets select,.feed-facets-foot select{width:100%;padding:9px 30px 9px 11px;border:1px solid var(--line);border-radius:10px;background-color:var(--white);color:var(--ink);font:inherit;font-size:13px;font-weight:600;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%2351435f'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;background-size:7px 4px}
.feed-facets select:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px var(--tint)}
.feed-reset{justify-self:start;margin-top:2px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--muted);font:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
.feed-reset:hover{border-color:var(--purple);color:var(--purple)}
/* Near and Distance are dropdowns, not tick panels, but a parent reads them as
   the same six filters: one box, the label at the left, the answer at the
   right, the arrow after it. */
.feed-facets label.feed-select,.feed-facets-foot label.feed-select{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--white);cursor:pointer}
.feed-facets label.feed-select:focus-within,.feed-facets-foot label.feed-select:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px var(--tint)}
/* The dropdown draws no arrow of its own. The label carries the triangle,
   in the same place the tick-panel summaries put theirs, so all six filters
   end their answer and their arrow on one line. A native select arrow sits
   wherever the browser likes, which is why these two never lined up with
   the other four. */
.feed-facets label.feed-select select,.feed-facets-foot label.feed-select select{flex:1 1 auto;width:auto;min-width:0;max-width:none;padding:0;border:0;border-radius:0;background:none;text-align:right;text-transform:none;letter-spacing:normal;font-size:13px;font-weight:600;cursor:pointer;-webkit-appearance:none;appearance:none}
.feed-facets label.feed-select select:focus,.feed-facets-foot label.feed-select select:focus{outline:none;box-shadow:none}
@media(max-width:900px){.feed-facets{grid-template-columns:1fr 1fr;gap:10px}.feed-reset{grid-column:1/-1}}
.feed-body{max-width:860px;padding:30px 0 70px}
.feed-list{display:grid;gap:16px}
.feed-card{border:1px solid var(--line);border-radius:16px;background:var(--white);padding:16px 18px 15px;transition:border-color .18s,box-shadow .18s}
.sr-card.feed-card{padding:0;background:var(--surface);border-radius:var(--radius-panel)}
.feed-card .sr-thumb img{width:100%;height:100%;object-fit:cover}
.feed-card .sr-card-main{padding:16px 20px 15px}
.feed-card .feed-card-top{margin:0 0 8px}
.feed-card.no-thumb .feed-card-top{padding-right:44px}
.feed-card .feed-review{margin:8px 0 0;font-size:14px;line-height:1.6;color:#3B3446}
.feed-card .feed-byline{margin:7px 0 0;font-size:12px;color:var(--muted)}
.feed-card:hover{border-color:#cbb0e6;box-shadow:0 18px 40px -32px rgba(35,27,52,.55)}
.feed-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.feed-when{font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.feed-card-main{display:grid;grid-template-columns:138px minmax(0,1fr);gap:16px;align-items:start}
.feed-card.no-photo .feed-card-main{grid-template-columns:minmax(0,1fr)}
.feed-photo{display:block;border-radius:11px;overflow:hidden;background:var(--tint)}
.feed-photo img{width:100%;height:100%;min-height:96px;object-fit:cover;display:block}
.feed-copy{min-width:0}
.feed-meta{margin:0 0 3px;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.feed-card h2{margin:0;font-size:20px;line-height:1.2;letter-spacing:-.03em}
.feed-card h2 a:hover{color:var(--purple)}
.feed-org{margin:3px 0 0;font-size:12.5px;color:var(--muted)}
.feed-facts{margin:6px 0 0;font-size:12.5px;color:#4A4356}
.feed-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.feed-action{display:inline-flex;align-items:center;min-height:32px;padding:5px 13px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink);font:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
.feed-action:hover{border-color:var(--purple);color:var(--purple)}
.feed-save.is-saved{background:var(--purple);border-color:var(--purple);color:#fff}
.feed-open{font-size:12px;font-weight:700;color:var(--purple);text-decoration:underline;text-underline-offset:3px}
.feed-card.is-review{background:linear-gradient(180deg,#FBF8FE,#fff)}
.feed-stars{margin:6px 0 0;color:#E8A317;font-size:16px;letter-spacing:2px}
.feed-review{margin:8px 0 0;font-size:14px;line-height:1.6;color:#3B3446}
.feed-byline{margin:7px 0 0;font-size:12px;color:var(--muted)}
.feed-sentinel{height:1px}
.feed-end{margin:22px 0 0;text-align:center;font-size:13px;color:var(--muted)}
.feed-end a{color:var(--purple);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.feed-empty{padding:20px 0;font-size:14px;color:var(--muted)}
@media(max-width:760px){
  .feed-hero-top{display:block}
  .feed-hero-side{justify-items:start;margin-top:16px}
  .feed-where{text-align:left}
  .feed-body{padding-top:22px}
}
@media(max-width:520px){
  .feed-card-main{grid-template-columns:92px minmax(0,1fr);gap:12px}
  .feed-card.no-photo .feed-card-main{grid-template-columns:1fr}
  .feed-card h2{font-size:18px}
  .feed-card{padding:14px}
}

/* --------------------------------------------------------------------------
   THE COMPOSER
   A short post from a parent, opened from What's new. The panel keeps the
   familiar shape — author, audience, words, comment setting — and returns the
   reader to the same scroll position when it closes.
   -------------------------------------------------------------------------- */
.composer{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:14px}
.composer-top{display:flex;align-items:center;gap:12px}
.composer-avatar,.composer-avatar-lg{border-radius:50%;background:#F2EAFA;color:#5929A7;display:inline-flex;align-items:center;justify-content:center;font-weight:800;flex:none;object-fit:cover}
.composer-avatar{width:40px;height:40px;font-size:14px}
.composer-avatar-lg{width:46px;height:46px;font-size:16px}
.composer-start{flex:1;min-height:46px;padding:0 18px;text-align:left;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.composer-start:hover{border-color:var(--purple);color:var(--purple)}

.composer-dialog{position:fixed;inset:0;margin:auto;width:min(560px,calc(100vw - 24px));height:max-content;max-height:calc(100vh - 24px);overflow:auto;padding:0;border:0;border-radius:18px;background:var(--white);color:var(--ink);box-shadow:0 30px 80px rgba(31,20,45,.34)}
.composer-dialog:not([open]){display:none}
.composer-dialog::backdrop{background:rgba(31,20,45,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.composer-panel{position:relative;padding:22px 24px 20px}
.composer-close{position:absolute;top:10px;right:12px;width:36px;height:36px;border-radius:50%;background:none;color:var(--muted);font-size:24px;line-height:1;cursor:pointer}
.composer-close:hover{background:var(--tint);color:var(--ink)}
.composer-title{font-size:19px;letter-spacing:-.02em;margin:0 36px 16px 0}
.composer-author{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.composer-author strong{display:block;font-size:15px}
.composer-author span{font-size:12px;color:var(--muted)}
.composer-body{width:100%;min-height:132px;padding:0;border:0;background:none;color:var(--ink);font:inherit;font-size:16.5px;line-height:1.55;resize:vertical}
.composer-body:focus{outline:none}
.composer-body::placeholder{color:#9A93A4}
.composer-link{display:flex;align-items:center;gap:9px;margin:6px 0 0;padding:9px 12px;border:1px solid var(--line);border-radius:11px;background:var(--paper)}
.composer-link svg{width:17px;height:17px;flex:none;color:var(--muted)}
.composer-link input{flex:1;min-width:0;border:0;background:none;color:var(--ink);font:inherit;font-size:13.5px}
.composer-link input:focus{outline:none}
.composer-rule{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--tint);color:#51435f;font-size:12.5px;line-height:1.5}
.composer-rule strong{color:var(--ink);font-weight:700}
.composer-note{margin:8px 0 0;padding:9px 11px;border-radius:9px;background:#fbeaea;color:#7a2f2f;font-size:12.5px;line-height:1.5}
.composer-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.composer-count{font-size:11.5px;color:var(--muted)}
.composer-post{min-height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--purple);color:#fff;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.composer-post:hover{background:var(--deep)}
.composer-post:disabled{opacity:.45;cursor:default}
@media(max-width:520px){.composer-panel{padding:18px 16px 16px}.composer-body{min-height:120px;font-size:16px}.composer-post{padding:0 16px}}
/* A parent's post in the feed. */
.feed-card.is-post{cursor:default}
.post-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.post-avatar{width:38px;height:38px;border-radius:50%;background:#F2EAFA;color:#5929A7;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex:none;object-fit:cover}
.post-who{min-width:0}
/* The name, the tick and the level sit on one line. They used to be spans
   inside a rule that made every span a block, so the tick dropped below the
   name and read as a second line rather than a mark. */
.post-name-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:14px;font-weight:800;color:var(--ink)}
.post-name-row .verified-mark{margin-left:0;display:inline-flex}
.post-time{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.composer-photos{display:flex;align-items:center;gap:10px;margin-top:10px}
.composer-photo-add{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--muted);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.composer-photo-add:hover{border-color:var(--purple);color:var(--purple)}
.composer-photo-add[hidden]{display:none}
.composer-photo-add svg{width:17px;height:17px;flex:none}
.composer-photo-hint{font-size:11.5px;color:var(--muted)}
.composer-previews{display:flex;gap:8px;margin-top:10px}
.composer-previews:empty{display:none}
.composer-preview{position:relative;width:84px;height:84px;border-radius:10px;overflow:hidden;border:1px solid var(--line);flex:none}
.composer-preview img{width:100%;height:100%;object-fit:cover;display:block}
.composer-preview button{position:absolute;top:3px;right:3px;width:22px;height:22px;border:0;border-radius:50%;background:rgba(35,27,52,.72);color:#fff;font-size:15px;line-height:1;cursor:pointer}
.level-badge{display:inline-block;width:22px;height:22px;object-fit:contain;vertical-align:-5px;margin-left:4px}
.account-profile h2 .level-badge{width:34px;height:34px;vertical-align:middle}
.account-level strong .level-badge{width:20px;height:20px;vertical-align:-4px;margin-left:4px}
.post-head .level-badge{width:22px;height:22px}
.post-images{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:18px}
.post-images.one{grid-template-columns:1fr}
.post-images a{display:block;border-radius:10px;overflow:hidden;background:var(--tint)}
.post-images img{display:block;width:100%;height:120px;object-fit:cover}
.post-images.one img{height:auto;max-height:320px}
.post-head .guide-level-badge{display:inline-flex;align-items:center;font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:2px 7px;margin-left:4px;background:var(--tint);color:var(--purple);vertical-align:middle;white-space:nowrap}
.post-link{display:inline-block;margin-top:10px;padding:7px 11px;border:1px solid var(--line);border-radius:9px;background:var(--paper);font-size:12.5px;font-weight:700;color:var(--purple);text-decoration:none;overflow-wrap:anywhere}
.post-link:hover{border-color:var(--purple)}
.post-body{margin:0;font-size:15px;line-height:1.6;color:#3B3446;white-space:pre-wrap}
.post-foot{display:flex;gap:4px;align-items:center;justify-content:flex-start;margin-top:12px;padding-top:8px;border-top:1px solid var(--line)}
.post-act{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;font-weight:700;color:#4a4356;background:none;border:1px solid transparent;border-radius:999px;padding:8px 13px;cursor:pointer;text-decoration:none;line-height:1.5}
.post-act:hover{background:var(--tint);color:var(--purple)}
.post-act svg{width:18px;height:18px}
/* Share closes the row on a post, in the same pill the program cards use, so
   the two cards finish the same way. */
.post-share{margin-left:auto}
/* One menu at the corner of the card: edit and delete for the person who
   wrote it, report for everyone else. */
.is-post .sr-card-main{position:relative}
.post-menu{position:relative;margin-left:auto;flex:none}
.post-more{
  display:grid;place-items:center;width:30px;height:30px;border-radius:999px;
  background:none;border:0;color:#6e6977;cursor:pointer;
}
.post-more svg{width:18px;height:18px}
.post-more:hover,.post-more[aria-expanded="true"]{background:var(--tint);color:var(--purple)}
.post-menu-list{
  position:absolute;top:calc(100% + 4px);right:0;z-index:20;
  display:grid;padding:5px;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 16px 36px -18px rgba(35,27,52,.5);
}
.post-menu-list[hidden]{display:none}
.post-menu-list button,.post-menu-list a{
  display:block;width:100%;text-align:left;font:inherit;font-size:13px;font-weight:600;
  color:var(--ink);background:none;border:0;border-radius:8px;padding:7px 10px;
  cursor:pointer;text-decoration:none;
}
.post-menu-list button:hover,.post-menu-list a:hover{background:var(--tint);color:var(--purple)}
.post-menu-list .post-del{color:#9b2c2c}
.post-menu-list .post-del:hover{background:#fff5f0;color:#9b2c2c}

/* Editing in place, under the words being edited. */
.post-edit-form{margin:10px 0 0;display:grid;gap:8px}
.post-edit-form[hidden]{display:none}
.post-edit-form textarea{
  width:100%;font:inherit;font-size:14px;padding:10px 12px;
  border:1px solid var(--line);border-radius:10px;resize:vertical;
}
.post-edit-actions{display:flex;align-items:center;gap:10px}
.post-edit-actions .btn{font-size:12.5px;padding:6px 14px}
.post-edit-cancel{font:inherit;font-size:12.5px;font-weight:700;color:#6e6977;background:none;border:0;cursor:pointer}
.post-edit-note{font-size:12px;color:#9b2c2c;font-weight:600}
.post-edit-note:empty{display:none}

/* The comment box a post opens under its own actions. */
.post-cbox{margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fbf9fd}
.post-cbox[hidden]{display:none}
.post-cbox textarea{
  width:100%;font:inherit;font-size:13.5px;line-height:1.5;padding:9px 11px;
  border:1px solid var(--line);border-radius:10px;background:#fff;resize:vertical;min-height:52px;
}
.post-cbox textarea:focus{outline:2px solid rgba(89,41,167,.25);border-color:var(--purple)}
.post-cbox-preview{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.post-cbox-preview[hidden]{display:none}
.pcb-thumb{position:relative;display:block}
.pcb-thumb img{display:block;width:74px;height:74px;object-fit:cover;border-radius:9px;background:#f2eafa}
.pcb-remove{
  position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;
  border:0;background:#231b34;color:#fff;font-size:13px;line-height:1;cursor:pointer;
}
.post-cbox-bar{display:flex;align-items:center;gap:6px;margin-top:8px}
.post-cbox-bar button{
  font:inherit;font-size:12px;font-weight:800;color:#5e5669;background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:4px 10px;cursor:pointer;line-height:1.3;
}
.post-cbox-bar button:hover{border-color:var(--purple);color:var(--purple);background:var(--purple-tint)}
.post-cbox-bar svg{width:16px;height:16px;display:block}
.pcb-note{font-size:11.5px;color:#6e6977;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcb-note:empty{display:none}
.pcb-note.is-error{color:#9b2c2c}
.post-cbox-bar .pcb-send{margin-left:auto;background:var(--purple);border-color:var(--purple);color:#fff}
.post-cbox-bar .pcb-send:hover{background:#4a2189;border-color:#4a2189;color:#fff}
.post-cbox-bar .pcb-send:disabled{opacity:.6;cursor:default}
.pcb-panel{margin-top:8px;border-top:1px solid var(--line);padding-top:8px}
.pcb-panel[hidden]{display:none}
.pcb-emojis{display:grid;grid-template-columns:repeat(auto-fill,minmax(32px,1fr));gap:2px;max-height:148px;overflow:auto}
.pcb-emoji-pick{font-size:19px;line-height:1;background:none;border:0;border-radius:8px;padding:4px;cursor:pointer}
.pcb-emoji-pick:hover{background:#f2eafa}

/* The thread under the comment box: the same person-mark, level and verified
   tick the post page shows, at card size. */
.post-comments{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.post-comments[hidden]{display:none}
.post-comments-note{margin:0;font-size:12.5px;color:var(--muted)}
.post-comment-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.post-comment.is-reply{margin-left:24px;padding-left:12px;border-left:2px solid #efe7f7}
.post-comment-head{display:flex;align-items:center;gap:6px;font-size:12.5px;flex-wrap:wrap}
.post-comment-avatar{
  width:26px;height:26px;border-radius:50%;flex:none;display:inline-flex;
  align-items:center;justify-content:center;background:var(--tint);color:var(--purple);
  font-size:10px;font-weight:800;object-fit:cover;
}
.post-comment-head a{font-weight:700;color:#231b34;text-decoration:none}
.post-comment-head a:hover{color:var(--purple)}
.post-comment-head time{color:#8a8296;font-size:11.5px}
.post-comment-tick{width:14px;height:14px;display:inline-flex;color:#1f9d55}
.post-comment-tick svg{width:100%;height:100%;display:block}
.post-comment-level{width:15px;height:15px;display:block}
.post-comment-body{margin:3px 0 0;font-size:13.5px;line-height:1.55;color:#3d2a63;white-space:pre-wrap}
.post-comment-photos{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.post-comment-photos img{max-width:132px;max-height:132px;border-radius:9px;object-fit:cover;border:1px solid var(--line)}

.post-like.is-on{color:var(--purple);background:#f2eafa}
.post-like.is-on svg{fill:var(--purple)}
.post-repost.is-on{color:#1f7a4d;background:#e9f4ee}
.post-repost.is-on svg{stroke:#1f7a4d}
.verified-mark{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;color:var(--purple);flex:none;vertical-align:middle}
.verified-mark svg{width:100%;height:100%;display:block}
.verified-mark.is-green{color:#1f7a4d}
.home-feed-post{border:1px solid var(--line);border-radius:14px;background:#fff;padding:14px;grid-column:1/-1}
.home-feed-post .post-body{font-size:14px}

/* The What's new page: the title and filters are a left rail, so the dated
   list begins at the top of the page rather than below a large hero. */
.feed-page{display:grid;grid-template-columns:minmax(200px,250px) minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:start;padding:36px 0 70px}
.feed-side{position:sticky;top:calc(var(--header-h) + 20px)}
.feed-side h1{font-size:clamp(30px,3vw,42px);line-height:1.05;letter-spacing:-.05em;margin:0}
.feed-side h1 br{display:none}
.feed-side-lede{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:var(--muted)}
.feed-filters{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-top:22px}
.feed-filter{justify-content:flex-start;width:100%;min-height:38px}
.feed-main{min-width:0}
.feed-composer{margin-bottom:16px}
@media(max-width:900px){
  .feed-page{grid-template-columns:minmax(0,1fr);padding:24px 0 60px;gap:20px}
  .feed-side{position:static}
  /* One line, not two: a forced break in a four-word heading pushed the
     filters down a row for no gain. */
  .feed-side h1 br{display:none}
  .feed-side h1{font-size:clamp(26px,6.6vw,34px);letter-spacing:-.045em}
  .feed-filters{flex-direction:row;flex-wrap:wrap;margin-top:14px}
  .feed-filter{width:auto}
}
/* The filter column is taller than a laptop window. The six facet menus
   scroll inside it, and Distance and Reset are pinned below them, so the two
   controls a parent reaches for last are on screen from the start rather than
   waiting at the bottom of a scroll they cannot see. */
@media (min-width:901px){
  .feed-side{display:flex;flex-direction:column;max-height:calc(100vh - var(--header-h) - 72px)}
  .feed-side>h1,.feed-side>.feed-side-lede,.feed-side>.feed-filters,.feed-side>.feed-facets-foot{flex:none}
  .feed-side h1{font-size:clamp(28px,2.7vw,36px)}
  .feed-side-lede{margin-top:10px;font-size:13px;line-height:1.55}
  /* Five chips stacked is a third of the column; wrapped, they are two or
     three short rows and leave the facet menus somewhere to live. */
  .feed-filters{flex-direction:row;flex-wrap:wrap;gap:6px;margin-top:14px}
  .feed-filter{width:auto;min-height:34px;padding:6px 12px;font-size:12.5px}
  /* A facet is a label and its menu on one line: five of them in the height
     that two used to take. */
  .feed-facets{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;gap:8px;margin-top:14px;padding-right:6px;scrollbar-width:thin}
  .feed-facets label,.feed-facets-foot label{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .feed-facets select,.feed-facets-foot select{width:auto;min-width:132px;max-width:150px;padding:7px 26px 7px 9px;font-size:12.5px;background-position:right 9px center}
  .feed-facets-foot{flex:none;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);background:var(--paper)}
}

/* The correction control is an offer to help, not a footnote. It carries the
   same pencil seal everywhere it appears — a tinted disc with the pencil in
   it — so one shape means "tell us what changed" across cards, the grid and
   the program page. Quiet at rest, purple on hover. */
.sr-suggest{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:3px 14px 3px 3px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink);font-size:12px;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap;transition:border-color .18s,color .18s,background .18s}
.sr-suggest:hover,.sr-suggest:focus-visible{border-color:var(--purple);color:var(--purple);background:var(--white);text-decoration:none}
.suggest-mark{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;background:var(--tint);color:var(--purple);box-shadow:inset 0 0 0 1px #e6dbf3;transition:background .18s,color .18s,box-shadow .18s}
.sr-suggest svg{width:13px;height:13px;flex:none}
.sr-suggest:hover .suggest-mark,.sr-suggest:focus-visible .suggest-mark{background:var(--purple);color:#fff;box-shadow:none}
.sr-suggest:active{transform:translateY(1px)}

/* The starting all-programs page browses through the search system: the hero
   and chips stay, the design page's own cards step aside, and the heading
   stays "Explore all programs" until a question is asked. */
/* The swap to the results rail happens when the scripts run, and a slow
   connection saw the design page's own pink filter panel for a moment before
   it. The head script marks the document as scripted before the first paint,
   so the panel is never drawn at all; it is only ever a no-JS fallback. */
html.yb-js body[data-page="programs"] .workspace{display:none}
body.is-browsing .workspace{display:none}
body.is-browsing #search-results{display:block}
body.is-browsing .sr-bar{display:none}
body.is-browsing .scope-note{display:none}

/* One header, one set of boxes: the utility row must not change size between
   the homepage and the program pages. */
@media (min-width: 1121px) {
  .home-header .nav-providers, .home-header .nav-calendar {
    display: inline-flex; align-items: center; height: 44px; padding: 0 6px; line-height: 1;
  }
  .home-header .nav-signin {
    display: inline-flex; align-items: center; justify-content: center;
    height: 44px; padding: 0 20px; line-height: 1;
  }
}

/* ---------- a photo on a suggested edit ---------- */
.suggest-photo{display:grid;gap:6px;padding:11px 12px;border:1px dashed #d7c9e7;border-radius:11px;background:var(--tint)}
.suggest-photo-pick{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--purple);cursor:pointer}
.suggest-photo-pick span{font-weight:600;color:var(--muted)}
.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:var(--white);border:1px solid #d7c9e7;font-size:14px;line-height:1}
.suggest-photo-pick:focus-within{outline:2px solid #b99edb;outline-offset:3px;border-radius:6px}
.suggest-photo-note{margin:0;font-size:11px;line-height:1.45;color:var(--muted)}
.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 var(--line)}
.suggest-photo-remove{font:inherit;font-size:11.5px;font-weight:700;color:#8a3b3b;background:none;padding:0;text-decoration:underline;cursor:pointer}
.site-footer {
  background: var(--youth-ink);
  color: #fff;
  padding: clamp(44px, 5vw, 66px) 0 38px;
}
/* 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;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px clamp(16px, 2vw, 32px);
}

/* 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; }
.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 var(--ease);
}
.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: 16px;
  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: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-contact a:hover { color: var(--brand-light, #c9a9ea); }
.footer-provenance {
  margin-top: 14px;
  font-size: 13.5px;
  letter-spacing: normal;
  color: rgba(255,255,255,.5);
}
.footer-provenance a { color: rgba(255,255,255,.72); text-decoration: underline; 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(140px, 16vw, 205px);
  margin-top: clamp(26px, 3vw, 40px);
  padding: clamp(9px, 1.1vw, 15px);
  background: var(--paper);
  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-top: clamp(6px, 1vw, 14px);
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 14px;
  color: rgba(255,255,255,.68);
}
.footer-utility {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px 28px;
  font-size: 13px;
}
.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; }
}

/* The saved shortlist, beside the calendar: a parent who has saved something
   should not have to remember it exists. */
.nav-saved{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;padding:10px;border-radius:8px;white-space:nowrap}
.nav-saved::before{content:"";width:16px;height:16px;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-saved:hover{color:var(--purple)}
.nav-saved[hidden]{display:none}
.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(--tint);color:var(--purple);font-size:11.5px;font-weight:800}
@media (min-width:1121px){height:44px}}
/* The review's own headline, above the body. The program name is already the
   card's h3; this is what the parent called the review. */
.feed-review-title{margin:4px 0 2px;font-weight:700;color:var(--ink);font-size:14px}
/* A review card is a link now, so the whole card says so. */
.feed-card.is-review[data-href]{cursor:pointer}
.feed-card.is-review[data-href]:hover{background:var(--tint)}

/* A hub page has no filter rail; the results use the width the rail gave up. */
.workspace-wide{grid-template-columns:minmax(0,1fr)}
@media (max-width:980px){.workspace-wide{display:block}}
/* Start-with chips are links on a hub page, so they need the pressed look
   without a button's default styling. */
a.chip{display:inline-flex;align-items:center;text-decoration:none}
a.chip.is-on{background:var(--purple);border-color:var(--purple);color:#fff}
a.chip-tray-item{display:inline-flex;align-items:center;min-height:34px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink);font-size:13px;font-weight:600;text-decoration:none}
a.chip-tray-item:hover{border-color:var(--purple);color:var(--purple)}
/* A chosen option stays chosen: filled, with a tick, so several at once read
   as one set rather than as a row of identical pills. */
.chip-tray button[aria-pressed="true"],.chip-tray .chip-tray-item.is-on{background:var(--purple);border-color:var(--purple);color:#fff}
.chip-tray button[aria-pressed="true"]:hover,.chip-tray .chip-tray-item.is-on:hover{background:var(--deep);border-color:var(--deep);color:#fff}
.chip-tray button[aria-pressed="true"]:focus-visible,.chip-tray .chip-tray-item.is-on:focus-visible{outline:3px solid #fff;outline-offset:-5px}

/* The financial-aid page is a different collection, so it says so before a
   parent reads a card: the same rose wash the "free option" panel uses. The
   wash runs behind the whole page, hero and finder included — only the cards
   and the search pill stay white. */
body[data-page="aid"]{background:linear-gradient(180deg,#FDF1F6 0%,#FBE7F0 55%,#FDF1F6 100%);min-height:100vh}
body[data-page="aid"] .page-hero,
body[data-page="aid"] .finder-section,
body[data-page="aid"] .browser-body{background:transparent}
body[data-page="aid"] .workspace>.filter-panel{background:#FBE7F0;border-color:#EFD3E2}
body[data-page="aid"] .faq-section{border-top-color:#EFD3E2}
/* The results head is sticky and carried the site's cream, so the count and
   the question sat on a white band in the middle of the rose page. */
body[data-page="aid"] .sr-head{background:rgba(253,241,246,.975)}
body[data-page="aid"] .intent-row a.chip.is-on{background:var(--purple);color:#fff;border-color:var(--purple)}

/* The pink belongs to the homepage's What's new band, not to this page: on
   /recent the feed is the whole page and the paper is the ground. */
body[data-page="recent"]{background:var(--paper);min-height:100vh}
body[data-page="recent"] .page-hero,
body[data-page="recent"] .finder-section,
body[data-page="recent"] .browser-body{background:transparent}
body[data-page="recent"] .sr-head{background:rgba(252,250,247,.975)}
body[data-page="recent"] .sr-rail{background:var(--paper)}

/* The rail is sticky and was transparent, so a card scrolling behind it read
   as a card drawn on top of the filters. It gets the page's own ground and a
   little breathing room instead. */
.sr-rail{background:var(--paper);z-index:1;padding-right:6px;padding-bottom:12px;min-width:0}
.sr-rail *{min-width:0}
.sr-rail .sr-opt span{overflow-wrap:anywhere}
body[data-page="aid"] .sr-rail{background:#FDF1F6}

/* The results view ends a few pixels above the next section's rule; a short
   breath here keeps "Show more", the map credit and "In town only" off it. */
#search-results{padding-bottom:30px}

/* The facet header is a name and its current choice on one line. The name
   must keep its width and the choice must be the one that shortens, or a
   long choice ("All after-school & life skills") prints over the name. */
.sr-facet-name{flex:0 0 auto;white-space:nowrap}
.sr-facet-val{flex:1 1 auto;text-align:right}

/* The shared footer takes its ground from a token the homepage stylesheet
   defines; the programs sheet carries the same one so the footer is not white
   text on a white page. */
:root{--youth-ink:#231B34}

@media (min-width:1121px){
  .home-header .nav-utility{margin-right:-6px}
  /* The Log in button keeps the same 0 20px padding as every other page. The
     fixed account slot below is what stops the links beside it moving, so the
     button does not need its width forced. */
  .nav-saved{height:44px}
}

/* The "know a program" line used to be an 11px footnote pinned against the
   page's left rule. It is a real invitation, so it reads as one: the same
   tinted panel, purple rule and rounded corners as the site's other asides. */
.related{
  margin:26px 0 0;padding:15px 18px;border:1px solid #E7DDF2;border-left:4px solid var(--purple);
  border-radius:12px;background:var(--tint);color:var(--ink);
  font-size:13.5px;line-height:1.6;display:flex;flex-wrap:wrap;gap:2px 16px;align-items:baseline;
}
.related span{max-width:80ch}
.related a{color:var(--purple);font-weight:700;text-decoration:none}
.related a:hover{text-decoration:underline}
@media (max-width:640px){.related{font-size:12.5px;padding:13px 14px}}

/* The shared footer's link lists are lists, not prose; the programs pages do
   not load the home page's global list reset. */
.site-footer .footer-group ul,
.site-footer .footer-utility-links{list-style:none;margin:0;padding:0}

/* ---------- account settings, apart from the profile ---------- */
.account-grid-settings{grid-template-columns:minmax(0,1fr);gap:20px}
.account-danger-zone{border-color:#e9c3c3;background:#fff8f8}
.account-danger-zone h2{color:#8a3b3b}
.account-danger-zone p{font-size:13.5px;color:var(--muted);margin:6px 0 14px;max-width:60ch}
.btn.danger{background:#b3322a;border-color:#b3322a;color:#fff}
.btn.danger:hover{background:#8f271f;border-color:#8f271f}
.account-confirm{border:1px solid var(--line);border-radius:18px;padding:26px;max-width:440px;width:calc(100% - 32px);background:var(--white);box-shadow:0 30px 70px -30px rgba(35,27,52,.55)}
.account-confirm::backdrop{background:rgba(26,26,46,.45);backdrop-filter:blur(2px)}
.account-confirm h2{font-size:24px;color:var(--ink)}
.account-confirm p{margin:8px 0 18px;font-size:14px;color:var(--muted)}
.account-confirm .account-button-row{justify-content:flex-start;gap:10px}

/* 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-utility .nav-calendar{display:none}

/* A phone shows one program per row. The 900px rule below the 720px one was
   re-imposing two columns on the narrowest screens, which left each card about
   170px wide — too narrow for a title, a venue and a price to read. */
@media (max-width:720px){ .sr-list{grid-template-columns:minmax(0,1fr)} }

/* Nothing on a phone may be dragged sideways. `clip` is the better answer but
   older mobile Safari ignores it, and an ignored value left the page scrollable
   to the width of the off-canvas menu. Hidden is the fallback, clip the
   preference. */
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 long tail of a result card: shown on a wide screen, folded behind one
   button on a phone, so a listing is a card and not a page. */
.sr-card-more{display:none}
.sr-long{display:block}
@media (max-width:720px){
  .sr-long{display:none}
  .sr-card.is-open .sr-long{display:block}
  .sr-card-more{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--purple);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
  .sr-card-more::after{content:'\203A';font-size:15px;line-height:1;transition:transform .15s}
  .sr-card-more[aria-expanded="true"]::after{transform:rotate(90deg)}
  /* Paint only what is near the viewport, so a long list scrolls smoothly. */
  .sr-card{content-visibility:auto;contain-intrinsic-size:auto 420px}
}

/* A review card on a phone: the picture becomes a slim banner and the two
   actions get the full width, instead of a 92px thumbnail squeezing the
   title and leaving Write a review cramped in a corner. */
@media(max-width:560px){
  .review-card{grid-template-columns:minmax(0,1fr)}
  .review-card-photo img{min-height:0;height:128px}
  .review-card-body{padding:14px 16px}
  .review-card-foot{gap:10px}
  .review-card-foot .btn,.review-card-foot .text-link{flex:1 1 auto;justify-content:center;text-align:center}
}

/* A phone result card, measured: the photograph was a 16:9 banner 199px tall,
   the facts stacked one per line, and the foot links stacked in a column —
   about 800px before the See more fold. The photograph is now a 130px strip,
   Ages and Cost share a row, Where and Season share the next, and the foot is
   one wrapping row. The card is roughly half its old height. */
@media (max-width:720px){
  .sr-thumb{aspect-ratio:auto;height:130px}
  .sr-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}
  .sr-card-foot{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 14px}
}

/* The match notes are the first thing folded away on a phone: useful when
   reading one card, noise when scanning forty. */
@media (max-width:720px){
  .sr-why,.sr-caution{display:none}
  .sr-card.is-open .sr-why,.sr-card.is-open .sr-caution{display:block}
}

/* ---------- What's new: the right rail ---------- */
/* The feed sits in the header's own content box: the heading starts under the
   wordmark and the rail ends where the account control ends, so the page
   reads as one column with the header rather than a wider slab under it. */
.shell.feed-page-wide{max-width:1320px;width:100%;margin:0 auto;padding:36px clamp(22px,5vw,74px) 70px}
/* The account control is pulled 6px past the header's content edge on
   purpose; the rail meets it there rather than stopping short. */
@media (min-width:901px){.shell.feed-page-wide{padding-right:calc(clamp(22px,5vw,74px) - 6px)}}
.feed-page{grid-template-columns:minmax(200px,220px) minmax(0,1fr) minmax(300px,330px);gap:clamp(20px,2vw,28px)}
.feed-rail{position:sticky;top:calc(var(--header-h) + 20px);display:grid;gap:16px;align-self:start}
.feed-rail[hidden]{display:none}
.rail-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:18px 18px 14px}
.rail-title{display:flex;align-items:center;gap:9px;font-size:17px;line-height:1.2;letter-spacing:-.02em;margin:0}
.rail-heading{display:inline}
.rail-heading #rail-town{font-weight:inherit;color:inherit;margin-left:2px}
.rail-icon{width:18px;height:18px;flex:none;color:var(--purple)}
.rail-sub{margin:5px 0 12px;font-size:12px;color:var(--muted)}
.rail-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.rail-item{display:block;padding:11px 0;border-top:1px solid #F1EDF4;color:inherit;text-decoration:none}
.rail-item.has-thumb{display:grid;grid-template-columns:52px 1fr;gap:11px;align-items:start}
.rail-thumb{width:52px;height:52px;border-radius:11px;object-fit:cover;background:#F1EDF4}
.rail-body{min-width:0}
.rail-list li:first-child .rail-item{border-top:0;padding-top:2px}
.rail-item:hover .rail-item-title{color:var(--purple)}
.rail-kicker{display:block;font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--purple)}
.rail-item-title{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-top:4px;font-size:14px;font-weight:700;line-height:1.35;letter-spacing:-.01em}
.rail-arrow{flex:none;font-size:13px;color:var(--muted);line-height:1.4}
.rail-meta{display:block;margin-top:5px;font-size:11.5px;color:var(--muted);line-height:1.4}
.rail-cta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:13.5px;font-weight:700;color:var(--purple);text-decoration:none}
.rail-cta:hover{text-decoration:underline;text-underline-offset:3px}
.rail-date{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start}
.rail-chip{display:grid;place-items:center;gap:0;width:44px;padding:6px 0 7px;border:1px solid #E4D9F0;border-radius:10px;background:var(--tint);color:var(--purple);line-height:1}
.rail-chip small{font-size:9.5px;font-weight:800;letter-spacing:.08em}
.rail-chip strong{font-size:17px;font-weight:800;letter-spacing:-.02em;margin-top:3px}
.rail-date .rail-item-title{margin-top:0}
.rail-empty{padding:4px 0 6px;font-size:12.5px;line-height:1.6;color:var(--muted)}
.rail-empty a{color:var(--purple);font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media (max-width:1320px){
  .feed-page{grid-template-columns:minmax(200px,250px) minmax(0,1fr)}
  .feed-rail{grid-column:1/-1;position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .feed-page{grid-template-columns:minmax(0,1fr)}
  .feed-rail{grid-template-columns:minmax(0,1fr)}
  /* One column has no side to sit on. Above the posts is where it is still
     read, rather than eight thousand pixels down at the end of the feed. */
  .feed-side{order:0}
  .feed-rail{order:1}
  .feed-main{order:2}
}

/* ---------- the phone's three boxes ----------
   Six dropdowns stacked above the feed is a wall a parent scrolls past. On a
   phone the filters, the local news and the saved dates are three boxes on
   one row, each opening in place; the row sits above the composer, so the
   first thing on the page is still what is new. */
.feed-mobile-bar{display:none}
@media (max-width:820px){
  /* Three controls, one row. They used to wrap onto two rows, which pushed the
     first post below the fold on a phone. The chevrons go: the label is what
     the button says, and the arrow was 22px of the 116 each one gets. */
  .feed-mobile-bar{display:flex;flex-wrap:nowrap;gap:6px;margin-top:16px}
  .feed-mobile-btn{
    flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;
    gap:0;min-height:40px;padding:9px 8px;white-space:nowrap;
    border:1px solid var(--line);border-radius:10px;background:var(--white);
    font:inherit;font-size:12px;font-weight:700;color:var(--ink);cursor:pointer;
  }
  .feed-mobile-btn>span{overflow:hidden;text-overflow:ellipsis}
  .feed-mobile-btn svg{display:none}
  .feed-mobile-btn[aria-expanded="true"]{border-color:var(--purple);color:var(--purple)}
  .feed-mobile-btn[aria-expanded="true"] svg{transform:rotate(90deg);color:var(--purple)}
  /* Shut until asked for: one column of the same controls the wide screen
     keeps in its rail, rather than the two-column grid that read as five
     boxes of five different widths. */
  .feed-side .feed-facets,.feed-side .feed-facets-foot{display:none}
  .feed-side.show-filters .feed-facets{display:grid;grid-template-columns:minmax(0,1fr);margin-top:14px}
  .feed-side.show-filters .feed-facets-foot{display:grid;margin-top:10px}
  .feed-rail .rail-card{display:none}
  .feed-rail .rail-card.is-open{display:block}
  .feed-rail.is-collapsed{display:none}
}

/* ---------- provider verification ---------- */
/* The green check is the organization's mark: a filled disc with a tick,
   small enough to sit beside a name and unmistakable at a glance. It is not
   the rosette a person earns — that one says "this account contributes",
   this one says "this organization is who it says it is". */
.yb-provider-check{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;flex:none;color:#178a4b;vertical-align:-2px}
.yb-provider-check svg{width:15px;height:15px;display:block}
.post-author-link{color:inherit;text-decoration:none}
.post-author-link:hover{color:var(--purple);text-decoration:underline;text-underline-offset:3px}
.provider-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 7px;border-radius:999px;background:#e8f6ee;color:#12663a;font-size:11.5px;font-weight:800;letter-spacing:.01em;white-space:nowrap}
.provider-badge .yb-provider-check{width:13px;height:13px;color:#178a4b}
.provider-badge .yb-provider-check svg{width:13px;height:13px}

/* The tray belongs to the Start with row above it; a full paragraph gap
   between them read as two separate controls. */
.intent-row:has(+ .chip-tray) { margin-bottom: 8px; }

/* ---------- the two invitations, at the top of a listing ---------- */
/* A review is the most useful thing a parent can leave, and a correction is
   the most useful thing anyone can send. Both sat at the bottom of a long
   page; both now open the listing, before the facts. */
.program-reviews .review-invite {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  margin-top: 14px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--white);
}
.program-reviews .review-invite .yb-review-summary {
  display: inline-flex; align-items: center; gap: 9px;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink);
}
.program-reviews .review-write-cta {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: 10px;
  background: var(--purple); color: #fff; border: 1px solid var(--purple);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.program-reviews .review-write-cta:hover { background: var(--deep); border-color: var(--deep); }
.program-reviews .yb-review-inline:not(:empty) { margin-top: 14px; }
.program-main > .suggest-edit { margin-top: 18px; }

/* Write a review and Suggest an edit sit in the same row as Visit provider.
   Both are quiet outlines: the provider visit is the primary action, and the
   review ask is an invitation rather than a warning. */
.program-actions .program-invite-review{display:contents}
/* The review stylesheet strips buttons to bare text (`.yb-review button`);
   these rules put the button shape back inside the action row. */
.program-actions .btn-review{background:var(--white);border:1px solid var(--line);color:var(--ink);padding:11px 18px;min-height:45px;font-size:14px;font-weight:700;border-radius:10px;display:inline-flex;align-items:center;justify-content:center}
.program-actions .btn-review:hover{background:var(--tint);border-color:#b99edb;color:var(--purple)}
.program-actions .btn.light .suggest-mark{width:24px;height:24px;margin-left:0;background:var(--tint);box-shadow:inset 0 0 0 1px #e6dbf3}
.program-actions .btn.light .suggest-mark svg{width:12px;height:12px;display:block}
.program-actions .btn.light:hover .suggest-mark{background:var(--purple);color:#fff;box-shadow:none}
@media (max-width: 720px) {
  .program-reviews .review-write-cta { margin-left: 0; width: 100%; justify-content: center; }
}

/* The review ask, at the top of the reviews view. */
.feed-review-invite {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
  padding: 18px 20px; margin: 0 0 16px;
  border: 1px solid #d9c8ee; border-radius: 16px;
  background: linear-gradient(180deg, #faf6ff 0%, #fff 100%);
}
.feed-review-invite-copy { flex: 1 1 280px; min-width: 0; }
.feed-review-invite-copy strong {
  display: block; font-family: Manrope, 'DM Sans', Arial, sans-serif;
  font-size: 16px; letter-spacing: -.02em; margin-bottom: 4px;
}
.feed-review-invite-copy p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.feed-review-invite .btn { flex: none; }
@media (max-width: 560px) {
  .feed-review-invite .btn { width: 100%; justify-content: center; }
}

/* ---------- level 10 ---------- */
/* The top level is the one badge that should feel like an ending: a warm
   card, the artwork at its own size, and the words to go with it. */
.account-level.is-maxed {
  padding: 14px 16px;
  border: 1px solid #e6d3f4;
  border-radius: 14px;
  background: linear-gradient(135deg, #faf4ff 0%, #fff8e8 100%);
}
.account-level.is-maxed strong {
  display: flex; align-items: center; gap: 8px;
  font-size: 17px; letter-spacing: -.01em;
}
.account-level.is-maxed strong .level-badge { width: 38px; height: 38px; margin: 0; }
.account-level.is-maxed small { display: block; margin-top: 8px; font-size: 12px; line-height: 1.55; color: #5d4b70; }
.account-maxed {
  display: inline-flex; align-items: center;
  margin-top: 8px; padding: 4px 11px; border-radius: 999px;
  background: linear-gradient(90deg, #5929a7, #c660b4);
  color: #fff; font-size: 10.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.level-badge.is-top { filter: drop-shadow(0 0 6px rgba(198, 96, 180, .35)); }

/* A post the "your post is live" email linked to, once the reader lands. */
.feed-card.is-deep-linked{border-color:#b99cdb;box-shadow:0 0 0 3px rgba(89,41,167,.28);transition:box-shadow .3s,border-color .3s}

/* A paper plane beside every Share button. The word alone reads as a label
   in a row of labels; the icon is what the eye looks for before reading. */
.program-share-btn::before,
.sr-share::before,
.post-share::before,
.pp-share::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21 23 12 2.01 3 2 10l15 2-15 2z'/%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'%3E%3Cpath d='M2.01 21 23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E") center / contain no-repeat;
  /* The plane points up and to the right, the way a sent message goes. */
  transform: rotate(-45deg);
}

/* A phone's program page: four actions in a 2x2 grid rather than a ragged
   row of three different widths. Save is moved here by program-page.js. */
@media (max-width: 640px) {
  .program-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
  }
  .program-actions > *,
  .program-actions > .yb-review,
  .program-actions .btn {
    width: 100%;
    margin: 0;
    justify-content: center;
    text-align: center;
  }
  .program-actions .btn-review { width: 100%; }
  /* Row two reads Write a review, then Suggest an edit, the way a parent
     would say it; the markup has them the other way round. */
  .program-actions .btn-review { order: 3; }
  .program-actions [data-suggest-open] { order: 4; }
  /* Four boxes of one size. The labels were wrapping to two lines on the
     narrower phones, which made the first row taller than the second and
     made Save look like the largest thing on the page; the mark beside it was
     drawn larger than every other icon here. One line each, one icon size,
     and the rows stay level however wide the phone is. */
  .program-actions .btn,
  .program-actions .btn-review {
    padding: 10px 8px;
    gap: 6px;
    min-height: 54px;
    font-size: 13.5px;
    white-space: nowrap;
  }
  .program-actions .save-icon svg { width: 15px; height: 15px; }
  .program-actions .btn.light .suggest-mark { width: 20px; height: 20px; }
  .program-actions .btn.light .suggest-mark svg { width: 11px; height: 11px; }
  /* A phone's Share button opens the system sheet, which already offers
     WhatsApp; a second one is a duplicate in the row with the least space on
     the site. */
  .program-share [data-share="whatsapp"] { display: none; }
  /* The drawing above "Something wrong or out of date?" is the same mark the
     button below already carries, and on a phone it is a third of a screen of
     nothing. */
  .suggest-edit-icon { display: none; }
}

/* While the menu is open the page behind it does not scroll. */
html.nav-open,
html.nav-open body { overflow: hidden; }
html.nav-open body { touch-action: pan-y; }

/* A phone's search head is the count, the search bar and the Filters/Map row —
   about 340px, held over the list the whole way down, which left a third of
   the screen for the programs it was describing. Below the desktop layout it
   scrolls away with the page; the buttons are one flick up. */
@media (max-width: 900px) {
  .sr-head { position: static; }
}

/* A filter sheet that leaves the page visible behind it. It used to be a
   centred dialog the height of the screen, which read as a different page. */
@media (max-width: 900px) {
  .filter-dialog {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: none;
    margin: 0;
    max-height: 76vh;
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
  }
  .filter-dialog .dialog-body { padding: 18px 20px 24px; }
  .mobile-filters.is-on {
    background: var(--purple);
    border-color: var(--purple);
    color: #fff;
  }
  .mobile-filters.is-on .icon { color: #fff; }
}

/* The hub pages carry the filter panel too, because their Filters button
   opened an empty sheet — the button was rendered and the panel was not. On a
   wide screen the hub pages have no column for it (their filters are the
   chips), so it stays hidden until the phone's sheet moves it in. */
@media (min-width: 901px) {
  .workspace-wide > .filter-panel { display: none; }
}

/* On a wide screen the program header was vertically centred against the
   gallery, so the title sat a third of a screen down with nothing above it,
   and "What to know" began 660px into the page. The copy starts at the top
   now, and the picture is capped so the header is not taller than its own
   text. */
@media (min-width: 901px) {
  .program-head { align-items: start; }
  .gallery-main img { max-height: 300px; }
  .gallery-thumbs img { max-height: 80px; }
}

/* iOS zooms the whole page in when a field it focuses is smaller than 16px,
   and it does not zoom back out — so a search left the reader looking at a
   magnified page until they pinched. Every field is 16px on a phone. */
@media (max-width: 900px) {
  input[type="search"],
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  select,
  textarea { font-size: 16px; }
}

/* The search bar's own rule is more specific than the input selector, so it
   keeps 15px and iOS still zooms. Named here so the phone gets 16px. */
@media (max-width: 900px) {
  .sr-bar .search-field input,
  .sr-bar input,
  .finder input,
  .feed-facets input { font-size: 16px; }
}

/* The programs finder's own input, named directly: it carries no type
   attribute to match and its 15px rule wins on specificity. */
@media (max-width: 900px) {
  .programs-finder .search-field input,
  .programs-finder input,
  .search-bar input { font-size: 16px; }
}

/* Copy link is a clipboard action, not a send: no plane on that one. */
[data-share="copy"]::before { display: none; }

/* A way back, where a phone puts one: top left of the drawer, an arrow and the
   word. The Menu button in the header still closes the drawer; this is the
   control the rest of the phone has taught people to reach for, and a drawer
   that covers the page should offer it. */
.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: 1120px) { .nav-back { display: inline-flex; } }