/* =====================================================================
   GENTLE BARRE — STYLES
   Direction: less design, more space. Cream paper, charcoal ink, and the
   photographs. Three sizes of voice: tiny sans for interface, small
   serif for reading, and a few large Cormorant statements.
   No decorative rules, labels, or color blocks.
   ===================================================================== */

:root {
  /* Official Gentle Barre colors (most appear only through photography) */
  --dusty-lilac: #DCD3E8;
  --ballet-rose: #A76471;
  --clay-pink: #D9A8A0;
  --sage: #C8D2C4;
  --lavender-grey: #C8C3D7;
  --cream: #F4F1EA;
  --charcoal: #3E3E3E;
  --brown-grey: #6B5F5F;

  --bg: var(--cream);
  --ink: var(--charcoal);
  --muted: var(--brown-grey);
  --accent: var(--ballet-rose);
  --hair: rgba(62, 62, 62, 0.12);
  --field-line: var(--brown-grey);
  --tone: #ECE8E0;                      /* empty image / map surface */
  --placeholder-bg: rgba(217, 168, 160, 0.28);

  --display: "Cormorant Garamond", "Cormorant", "Garamond", "Times New Roman", serif;
  --body: "Neue Haas Grotesk Text Pro", "Neue Haas Grotesk Text", "Helvetica Neue", Helvetica, "Hanken Grotesk", Arial, sans-serif;
  --sans: "Neue Haas Grotesk Text Pro", "Neue Haas Grotesk Text", "Helvetica Neue", Helvetica, "Hanken Grotesk", Arial, sans-serif;

  --ui: 0.6875rem;                       /* 11px interface text */
  --read: 0.90625rem;                    /* 14.5px reading text */

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --space: clamp(6.5rem, 15vw, 13rem);
  --max: 1440px;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--read);
  line-height: 1.7;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--dusty-lilac); }

:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, h3[tabindex="-1"]:focus, .loc-detail-slot:focus { outline: none; }

.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: var(--cream); padding: .7rem 1rem; font-family: var(--sans); font-size: var(--ui); letter-spacing: .14em; text-transform: uppercase; }
.skip-link:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--muted); }

.ph-on .ph { background: var(--placeholder-bg); padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ---------- Voices ---------- */
.h-hero { font-family: var(--display); font-weight: 300; font-size: clamp(3.1rem, 6.1vw, 6.6rem); line-height: .98; letter-spacing: -.018em; max-width: 6.4em; }
.h-statement { font-family: var(--display); font-weight: 300; font-size: clamp(2.3rem, 4vw, 4rem); line-height: 1.02; letter-spacing: -.014em; }
.h-page { font-family: var(--display); font-weight: 300; font-size: clamp(2.4rem, 3.8vw, 3.8rem); line-height: 1.02; letter-spacing: -.014em; }
.h-section { font-family: var(--display); font-weight: 400; font-size: clamp(1.65rem, 2.1vw, 2.15rem); line-height: 1.12; letter-spacing: -.005em; }
.h-small { font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 1.5vw, 1.45rem); line-height: 1.22; }
.body { font-size: var(--read); line-height: 1.7; max-width: 31em; }
.body > * + * { margin-top: 1.1rem; }

/* ---------- Links + one button ---------- */
.more {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem;
  font-family: var(--sans); font-size: var(--ui); font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  text-underline-offset: .45em; text-decoration-thickness: 1px;
}
.more:hover { text-decoration: underline; }
.more .arr { transition: transform .4s ease; font-weight: 400; }
.more:hover .arr { transform: translateX(3px); }
.more.is-disabled { opacity: .4; cursor: not-allowed; text-decoration: none; }
.text-button { background: none; border: 0; padding: 0; cursor: pointer; }
.body > .more { margin-top: 1.5rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .7rem 1.5rem;
  font-family: var(--sans); font-size: var(--ui); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  background: var(--ink); color: var(--cream); border: 0; border-radius: 0; cursor: pointer;
  transition: background-color .4s ease;
}
.btn:hover { background: #2B2929; }
.btn .arr { display: none; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; }

/* ---------- Header: light, steps aside while reading ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--cream);
  transition: transform .5s cubic-bezier(.2,.6,.2,1);
}
.site-header.is-hidden { transform: translateY(-110%); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; padding-inline: var(--gutter); max-width: var(--max); margin-inline: auto; }
.brand { display: inline-flex; align-items: center; gap: .75rem; min-width: 0; }
.brand img { width: 24px; height: auto; flex: none; }
.brand img.wordmark { width: auto; height: 26px; }
.header-cta, .menu-toggle {
  font-family: var(--sans); font-size: var(--ui); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
}
.header-actions { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); }
.header-cta { display: inline-flex; align-items: center; min-height: 2.75rem; text-underline-offset: .45em; }
.header-cta { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .55em; transition: text-underline-offset .4s ease; }
.header-cta:hover { text-underline-offset: .35em; }
.menu-toggle { background: none; border: 0; cursor: pointer; min-height: 2.75rem; padding: 0; }
@media (max-width: 480px) {
  .header-cta, .menu-toggle { letter-spacing: .12em; }
  .brand img { width: 21px; }
  .header-actions { gap: 1rem; }
}

.mobile-menu {
  position: fixed; inset: 0; z-index: 40; background: var(--cream);
  padding: calc(120px + env(safe-area-inset-top, 0px)) var(--gutter) calc(2.5rem + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 16rem); grid-template-areas: "primary cta" "primary side";
  gap: 1.75rem 3rem; align-content: start; align-items: start; overflow-y: auto;
}
.menu-cta { grid-area: cta; justify-self: start; margin-top: .8rem; }
.menu-primary { grid-area: primary; }
.menu-side { grid-area: side; }
.mobile-menu:not([hidden]) { animation: menu-in .5s cubic-bezier(.2,.6,.2,1) both; }
.mobile-menu:not([hidden]) .m-link { display: inline-block; animation: rise .8s cubic-bezier(.2,.6,.2,1) both; }
.mobile-menu li:nth-child(2) .m-link { animation-delay: .04s; } .mobile-menu li:nth-child(3) .m-link { animation-delay: .08s; }
.mobile-menu li:nth-child(4) .m-link { animation-delay: .12s; } .mobile-menu li:nth-child(5) .m-link { animation-delay: .16s; }
@keyframes menu-in { from { opacity: 0; } to { opacity: 1; } }
.menu-primary ul { display: grid; gap: .3rem; }
.m-link { font-family: var(--display); font-weight: 300; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.15; transition: color .3s ease; }
.m-link:hover, .m-link[aria-current="page"] { color: var(--accent); }
.menu-side ul { padding-top: .2rem; }
.menu-side ul { display: grid; gap: .55rem; }
.menu-side li a { font-family: var(--sans); font-size: .8125rem; color: var(--muted); }
.menu-side li a:hover { color: var(--ink); }
@media (max-width: 700px) { .mobile-menu { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cta" "primary" "side"; gap: 2.25rem; padding-top: calc(100px + env(safe-area-inset-top, 0px)); } .menu-cta { margin-top: 0; } }

/* ---------- Photographs ---------- */
.media { position: relative; overflow: hidden; background: var(--tone); margin: 0; width: 100%; }
.media { --z: var(--zoom, 1); }
.media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transform-origin: var(--pos, 50% 50%); transform: scale(calc(var(--z) * 1.02)); transition: transform 2.2s cubic-bezier(.2,.6,.2,1); image-rendering: auto; }
@media (max-width: 860px) {
  .media { --z: var(--zoom-m, var(--zoom, 1)); }
  .media img { object-position: var(--pos-m, var(--pos, 50% 50%)); transform-origin: var(--pos-m, var(--pos, 50% 50%)); }
}
.media.in-view img { transform: scale(var(--z)); }
/* Photographs surface slowly, like a print developing. */
.reveal .media img { opacity: 0; transition: transform 2.2s cubic-bezier(.2,.6,.2,1), opacity 1.6s ease; }
.reveal .media.in-view img { opacity: 1; }
/* Barely-there warmth: a breath of soft natural light, not a "vintage" filter. */
.media img { filter: sepia(.04) saturate(.97); }
/* Very faint film grain, so photographs read like prints. Static, photos only. */
.media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .11; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.45  0 0 0 0 0.4  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

.load-rise { animation: rise 1.3s cubic-bezier(.2,.6,.2,1) both; }
.load-rise.d1 { animation-delay: .12s; } .load-rise.d2 { animation-delay: .24s; }
@keyframes rise { from { opacity: .001; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Hero: words on cream, photograph to the edge ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: end; min-height: min(calc(100vh - 68px), 960px); }
.hero-copy { padding: 4rem var(--gutter) clamp(2.5rem, 4.5vw, 4.5rem); display: grid; gap: 2rem; justify-items: start; }
.hero-copy .body { max-width: 25em; }
.hero-copy .actions { margin-top: .5rem; }
.hero-media { align-self: stretch; }
.hero-media .media { height: 100%; min-height: 32rem; max-height: calc(100vh - 68px); }
@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-media { order: -1; }
  .hero-media .media { aspect-ratio: var(--ar-m, 4 / 5); height: auto; min-height: 0; max-height: 82vh; }
  .hero-copy { padding-top: 2.5rem; padding-bottom: 0; gap: 1.4rem; }
}

/* ---------- Intro: one paragraph, alone ---------- */
.intro { padding-block: var(--space); }
.intro-copy { margin-left: 41.666%; max-width: 31rem; display: grid; gap: 1.6rem; justify-items: start; }
@media (max-width: 860px) { .intro-copy { margin-left: 0; } }

/* ---------- Movement has many languages ---------- */
.approach-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; }
.approach-copy { padding: clamp(1rem, 4vw, 4rem) var(--gutter) 0; display: grid; gap: clamp(2.5rem, 5vw, 4rem); justify-items: start; }
.approach-copy .h-statement { max-width: 7em; }
.languages { display: grid; gap: 2rem; max-width: 24rem; }
.languages dt { font-family: var(--display); font-size: 1.35rem; line-height: 1.2; }
.languages dd { margin-top: .3rem; color: var(--muted); }
.approach-media .media { aspect-ratio: var(--ar, 4 / 5); }
@media (max-width: 860px) {
  .approach-grid { grid-template-columns: minmax(0, 1fr); }
  .approach-media { padding-top: 3.5rem; padding-left: 16%; }
  .approach-media .media { aspect-ratio: var(--ar-m, var(--ar, 4 / 5)); }
}

/* ---------- There is more than one way to dance ---------- */
.statement { padding-top: var(--space); }
.statement-text { font-family: var(--display); font-style: italic; font-weight: 300; font-size: clamp(2.1rem, 3.9vw, 3.9rem); line-height: 1.04; letter-spacing: -.012em; max-width: 12em; margin-left: 33.333%; padding-bottom: clamp(3rem, 7vw, 6rem); }
.media--bleed { height: clamp(30rem, 94vh, 62rem); }
@media (max-width: 860px) {
  .statement-text { margin-left: 0; }
  .media--bleed { height: auto; aspect-ratio: 3 / 4; max-height: 86vh; min-height: 0; }
}

/* ---------- What a class feels like ---------- */
.experience { padding-top: var(--space); }
.experience-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.experience-media .media { aspect-ratio: var(--ar, 4 / 5); }
.experience-copy { padding: clamp(1rem, 6vw, 7rem) var(--gutter) 0 clamp(2rem, 8vw, 9rem); display: grid; gap: 1.5rem; justify-items: start; max-width: 44rem; }
.sequence { display: grid; gap: 2.25rem; margin-top: 2.5rem; }
.sequence h3 { font-family: var(--sans); font-size: var(--ui); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.sequence p { margin-top: .35rem; color: var(--muted); }
.aside { margin-top: 1.5rem; color: var(--muted); max-width: 26em; }
@media (max-width: 860px) {
  .experience-grid { grid-template-columns: minmax(0, 1fr); }
  .experience-media { padding-right: 16%; }
  .experience-media .media { aspect-ratio: var(--ar-m, var(--ar, 4 / 5)); }
  .experience-copy { padding: 3.5rem var(--gutter) 0; }
}

/* ---------- Find a class ---------- */
.finder-section { padding-top: var(--space); }
.page-top + .finder-section { padding-top: clamp(4rem, 9vw, 8rem); }
.finder-head { display: grid; gap: 1.4rem; max-width: 34rem; margin-bottom: clamp(3.5rem, 7vw, 6rem); }
.search-row { display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid var(--field-line); margin-top: 1rem; }
.search-row input { flex: 1 1 auto; min-width: 0; min-height: 3rem; padding: .5rem 0; border: 0; background: transparent; font-family: var(--body); font-size: 1rem; color: var(--ink); }
.search-row input::placeholder { color: var(--muted); opacity: .8; }
.search-row input:focus-visible { outline: none; }
.search-row:focus-within { border-bottom-color: var(--ink); }
.search-btn { flex: none; background: none; border: 0; cursor: pointer; min-height: 2.75rem; font-family: var(--sans); font-size: var(--ui); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.search-btn:hover { text-decoration: underline; text-underline-offset: .45em; }

.finder { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.finder-status { font-family: var(--sans); font-size: .75rem; margin-bottom: 1.5rem; }
.finder-none { display: grid; gap: .5rem; margin-bottom: 2rem; justify-items: start; }
.loc-list { display: grid; gap: .5rem; }
.loc-item { width: 100%; text-align: left; background: none; border: 0; padding: .75rem 0; cursor: pointer; display: grid; gap: .3rem; }
.loc-item .loc-name { font-family: var(--display); font-size: 1.45rem; line-height: 1.15; color: var(--muted); transition: color .3s ease; }
.loc-item:hover .loc-name, .loc-item[aria-pressed="true"] .loc-name { color: var(--ink); }
.loc-item .loc-meta { font-family: var(--sans); font-size: .75rem; color: var(--muted); }
.finder-side { display: grid; gap: 3.5rem; min-width: 0; }
.finder-results { min-width: 0; }
.finder-results .map { margin-top: 2.5rem; }
.loc-detail { display: grid; gap: 1.5rem; justify-items: start; }
.loc-detail h2, .loc-detail h3 { font-family: var(--display); font-size: clamp(1.6rem, 2.2vw, 2.1rem); font-weight: 400; line-height: 1.1; }
.note { font-family: var(--sans); font-size: .75rem; color: var(--muted); }
.facts { display: grid; gap: .9rem; width: 100%; max-width: 36rem; }
.facts > div { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: 1.5rem; }
.facts dt { font-family: var(--sans); font-size: .75rem; color: var(--muted); padding-top: .2rem; }
.facts ul { display: grid; gap: .4rem; }
.detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; margin-top: .5rem; }
/* Map: quiet surface, charcoal pins, rose for the chosen one */
.map { position: relative; aspect-ratio: 5 / 4; background: var(--tone); overflow: hidden; }
.gb-map-canvas { position: absolute; inset: 0; }
.gb-map-point { position: absolute; width: 0; height: 0; }
.gb-map-point .gb-pin { position: absolute; left: -1.375rem; top: -1.375rem; }
.gb-map-point .gb-pin-label { position: absolute; top: 50%; transform: translateY(-50%); left: 1rem; margin: 0; }
.gb-map-point.label-left .gb-pin-label { left: auto; right: 1rem; }
.gb-pin { width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.gb-pin::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--cream); transition: transform .3s ease, background-color .3s ease; }
.gb-pin.is-selected::before { background: var(--accent); transform: scale(1.35); }
.gb-pin:focus-visible { outline: 1px solid var(--ink); outline-offset: -8px; }
.gb-pin-label { font-family: var(--sans); font-size: .6875rem; letter-spacing: .04em; color: var(--muted); white-space: nowrap; pointer-events: none; }
.gb-map-point.is-selected .gb-pin-label { color: var(--ink); }
.gb-card-name { font-family: var(--display); font-size: 1.15rem; line-height: 1.2; }
.gb-card-address { font-family: var(--sans); font-size: .75rem; line-height: 1.55; color: var(--muted); }
.gb-card-note { font-family: var(--sans); font-size: .6875rem; color: var(--muted); }
.gb-popup .more { min-height: 2.25rem; }
.gb-map-note { position: absolute; left: 1.25rem; bottom: 1rem; right: 1.25rem; font-family: var(--sans); font-size: .6875rem; color: var(--muted); }
@media (max-width: 960px) { .map { aspect-ratio: 16 / 10; } }
@media (max-width: 560px) { .map { aspect-ratio: 1 / 1; } }

/* Mapbox overrides, so its controls sit quietly in the palette */
.gb-map .mapboxgl-popup.gb-popup .mapboxgl-popup-content { background: var(--cream); border-radius: 0; box-shadow: none; padding: 1rem 1.1rem .6rem; display: grid; gap: .3rem; justify-items: start; }
.gb-map .mapboxgl-popup.gb-popup .mapboxgl-popup-tip { display: none; }
.gb-map .mapboxgl-popup-close-button { font-size: 1rem; color: var(--muted); padding: .2rem .45rem; }
.gb-map .mapboxgl-ctrl-group { background: var(--cream); border-radius: 0; box-shadow: none; }
.gb-map .mapboxgl-ctrl-group button + button { border-top: 1px solid var(--hair); }
.gb-map .mapboxgl-ctrl-attrib { background: rgba(244, 241, 234, .8); font-family: var(--sans); }
.gb-map .mapboxgl-canvas:focus-visible { outline: 1px solid var(--ink); outline-offset: -1px; }
@media (max-width: 960px) { .finder { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .facts > div { grid-template-columns: minmax(0, 1fr); gap: .1rem; } }

/* ---------- Quiet two-part sections (heading / text) ---------- */
.quiet { padding-top: var(--space); }
.quiet-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem var(--gutter); align-items: start; }
.quiet-grid > .body { max-width: 31rem; }
@media (max-width: 760px) { .quiet-grid { grid-template-columns: minmax(0, 1fr); } }
.partner-names { display: grid; gap: .2rem; }
.partner-names li { font-family: var(--display); font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.25; }
.partner-names img { max-height: 48px; width: auto; }
.partner-rows .wrap { display: grid; gap: clamp(3.5rem, 7vw, 6rem); }
.partner-rows + .form-section { padding-top: clamp(5rem, 10vw, 9rem); }
.who-list { max-width: 30em; }
.partner-names + p { margin-top: 1.5rem; }
/* Scholarship resource — a quiet mark beneath the access note */
.body > .access-logo { margin-top: clamp(2.25rem, 3.5vw, 3rem); }
.access-logo img { display: block; height: 4.5rem; width: auto; }
.body > .access-logo + .more { margin-top: clamp(2rem, 3vw, 2.5rem); }
@media (max-width: 560px) { .access-logo img { height: 4rem; } }

/* Partner acknowledgment — quiet, like a credit in an arts publication */
.ack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem clamp(2rem, 5vw, 4.5rem); margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.ack-item { display: grid; align-content: start; justify-items: start; }
.ack-logo { display: flex; align-items: flex-end; height: 3.5rem; margin-bottom: 1.6rem; }
.ack-logo img { width: auto; max-width: 100%; display: block; }
.ack-name { font-family: var(--display); font-size: 1.2rem; line-height: 1.25; }
.ack-name a:hover { text-decoration: underline; text-underline-offset: .3em; }
.ack-role { font-family: var(--sans); font-size: var(--ui); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: .45rem; }
.ack-desc { color: var(--muted); margin-top: 1rem; }
.body > .ack + .more { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
@media (max-width: 560px) {
  .ack .ack-logo { height: 3rem; }
  .ack .ack-logo img { transform: scale(.86); transform-origin: left bottom; }
}
@media (max-width: 420px) { .partner-rows .ack { grid-template-columns: minmax(0, 1fr); } }
.simple-list { display: grid; gap: 1.75rem; }
.simple-list h3 { font-family: var(--display); font-size: 1.35rem; line-height: 1.2; }
.simple-list p { color: var(--muted); }

/* ---------- Our people (home) ---------- */
.people { padding-top: var(--space); }
.people-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
.people-copy { order: -1; padding: 0 clamp(2rem, 7vw, 8rem) clamp(1rem, 5vw, 5rem) var(--gutter); display: grid; gap: 1.5rem; justify-items: start; }
.people-media .media { aspect-ratio: var(--ar, 4 / 5); }
@media (max-width: 860px) {
  .people-grid { grid-template-columns: minmax(0, 1fr); }
  .people-copy { order: 0; padding: 3.5rem var(--gutter) 0; }
  .people-media { padding-left: 16%; }
  .people-media .media { aspect-ratio: var(--ar-m, var(--ar, 4 / 5)); }
}

/* ---------- Pathways ---------- */
.pathways { padding-block: var(--space) calc(var(--space) * .55); }
.pathways-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem var(--gutter); }
.pathway { display: grid; gap: 1.1rem; justify-items: start; max-width: 26rem; }
@media (max-width: 760px) { .pathways-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Inner page heads ---------- */
.page-head { display: grid; grid-template-columns: minmax(0, 1fr); padding: clamp(5rem, 12vw, 10rem) var(--gutter) 0; max-width: var(--max); margin-inline: auto; }
.page-head-copy { display: grid; gap: 1.6rem; justify-items: start; max-width: 40rem; }
.page-head-copy .body { max-width: 30em; }
.page-head.has-image { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; padding: 0; max-width: none; }
.page-head.has-image .page-head-copy { padding: 4rem var(--gutter) clamp(2rem, 5vw, 5rem); }
.page-head-media .media { aspect-ratio: var(--ar, 4 / 5); max-height: calc(100vh - 68px); }
@media (max-width: 860px) {
  .page-head.has-image { grid-template-columns: minmax(0, 1fr); }
  .page-head-media { order: -1; }
  .page-head-media .media { aspect-ratio: var(--ar-m, 4 / 5); max-height: 80vh; }
  .page-head.has-image .page-head-copy { padding: 2.75rem var(--gutter) 0; }
}

/* ---------- About ---------- */
.text-rows { padding-top: var(--space); }
.text-rows .wrap { display: grid; gap: clamp(4rem, 8vw, 7rem); }
.text-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem var(--gutter); }
@media (max-width: 760px) { .text-row { grid-template-columns: minmax(0, 1fr); } }
.photo-pair { padding-top: var(--space); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
.pair-a .media { aspect-ratio: var(--ar, 4 / 5); }
.pair-b { padding: 0 var(--gutter) 0 clamp(2rem, 8vw, 9rem); }
.pair-b .media { aspect-ratio: var(--ar, 2 / 3); }
@media (max-width: 760px) {
  .photo-pair { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .pair-a { padding-right: 12%; }
  .pair-b { padding: 0 var(--gutter) 0 45%; }
}

/* ---------- Approach page ---------- */
.principles { padding-top: calc(var(--space) * .8); display: grid; gap: clamp(4rem, 8.5vw, 8rem); }
.principle.has-image { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.principle.has-image > * { grid-row: 1; min-width: 0; }
.principle .p-media .media { aspect-ratio: var(--ar, 4 / 5); }
.principle .p-copy { display: grid; gap: 1rem; max-width: 30rem; }
.principle .p-copy .h-small { font-size: clamp(1.55rem, 2vw, 2rem); line-height: 1.12; letter-spacing: -.005em; }
.p-num { font-family: var(--display); font-style: italic; font-size: 1rem; line-height: 1; color: var(--muted); letter-spacing: .04em; }
/* 1: large, to the left edge */
.principle:nth-child(3n+1 of .has-image) .p-media { grid-column: 1 / span 6; }
.principle:nth-child(3n+1 of .has-image) .p-copy { grid-column: 8 / span 4; }
/* 2: medium, inset on the right */
.principle:nth-child(3n+2 of .has-image) .p-media { grid-column: 7 / span 5; }
.principle:nth-child(3n+2 of .has-image) .p-copy { grid-column: 2 / span 4; padding-left: var(--gutter); }
/* 3: small and quiet, more air around it */
.principle:nth-child(3n+3 of .has-image) .p-media { grid-column: 2 / span 4; padding-left: var(--gutter); }
.principle:nth-child(3n+3 of .has-image) .p-copy { grid-column: 7 / span 4; }
.principle.text-only { padding-inline: var(--gutter); max-width: var(--max); margin-inline: auto; width: 100%; }
.principle.text-only .p-copy { margin-left: 41.666%; padding: 0; max-width: 31rem; }
@media (max-width: 860px) {
  .principle.has-image { grid-template-columns: minmax(0, 1fr); row-gap: 2.25rem; }
  .principle.has-image > * { grid-row: auto; grid-column: 1 !important; }
  .principle .p-copy { padding-inline: var(--gutter) !important; }
  .principle .p-media .media { aspect-ratio: var(--ar-m, var(--ar, 4 / 5)); }
  .principle:nth-child(3n+1 of .has-image) .p-media { padding: 0 16% 0 0; }
  .principle:nth-child(3n+2 of .has-image) .p-media { padding: 0 0 0 16%; }
  .principle:nth-child(3n+3 of .has-image) .p-media { padding: 0 var(--gutter); max-width: 34rem; }
  .principle.text-only .p-copy { margin-left: 0; }
}
.closing { display: grid; gap: 1.25rem 2rem; justify-items: start; }
.closing-line { font-family: var(--display); font-style: italic; font-weight: 300; font-size: clamp(1.7rem, 2.8vw, 2.6rem); line-height: 1.15; max-width: 20em; }
.approach-page-end { padding-bottom: 0; }

/* ---------- Team ---------- */
.team { padding-top: var(--space); }
.page-head .lede-secondary { color: var(--muted); margin-top: -.4rem; }
.role { font-family: var(--sans); font-size: var(--ui); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.portrait { aspect-ratio: var(--ar, 4 / 5); }

/* Founder: portrait and words, side by side */
.founder { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.f-photo { grid-column: 1 / span 4; }
.f-copy { grid-column: 6 / span 6; display: grid; gap: 1rem; justify-items: start; max-width: 34rem; padding-top: clamp(1rem, 4vw, 4rem); }
.f-copy .h-section { margin-top: .1rem; }
.f-copy .body { margin-top: clamp(1.25rem, 2vw, 1.75rem); }

/* Around every class */
.team-philosophy { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1.5rem; padding-top: clamp(5rem, 10vw, 9rem); }
.team-philosophy .h-section { grid-column: 1 / span 4; }
.tp-copy { grid-column: 6 / span 6; display: grid; gap: 2rem; max-width: 34rem; }
.tp-statement { font-family: var(--display); font-style: italic; font-weight: 300; font-size: clamp(1.35rem, 1.9vw, 1.75rem); line-height: 1.3; }

/* Teaching artists, classroom support */
.team-group { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(2.5rem, 4vw, 3.5rem); margin-top: clamp(5rem, 10vw, 9rem); position: relative; padding-top: clamp(2.25rem, 3.5vw, 3rem); }
.team-group::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--hair); }
.tg-head { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 1rem; }
.tg-label { grid-column: 1 / span 4; font-family: var(--sans); font-size: var(--ui); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; padding-top: .35rem; }
.tg-text { grid-column: 6 / span 6; color: var(--muted); max-width: 34rem; }
.tg-members { grid-column: 6 / span 7; display: grid; gap: clamp(3.5rem, 6vw, 5rem); }
.member { display: grid; gap: 1.75rem var(--gutter); max-width: 34rem; }
.member.has-photo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); max-width: none; align-items: start; }
.m-copy { display: grid; gap: .55rem; justify-items: start; align-content: start; }
.m-name { font-family: var(--display); font-size: clamp(1.5rem, 1.9vw, 1.85rem); font-weight: 400; line-height: 1.12; }
.m-copy .body { margin-top: clamp(1.1rem, 1.8vw, 1.5rem); }

@media (max-width: 1100px) and (min-width: 761px) {
  .f-photo { grid-column: 1 / span 5; }
  .f-copy, .tp-copy, .tg-text, .tg-members { grid-column: 7 / -1; }
  .team-philosophy .h-section, .tg-label { grid-column: 1 / span 5; }
}
@media (max-width: 760px) {
  .founder, .team-philosophy, .team-group, .tg-head { grid-template-columns: minmax(0, 1fr); }
  .f-photo, .f-copy, .team-philosophy .h-section, .tp-copy, .tg-head, .tg-label, .tg-text, .tg-members { grid-column: 1; }
  .f-photo { max-width: 78%; }
  .f-copy { padding-top: 2.5rem; }
  .member.has-photo { grid-template-columns: minmax(0, 1fr); }
  .member.has-photo .m-photo { max-width: 60%; }
}

/* ---------- Forms ---------- */
.form-section { padding-block: var(--space); }
.form-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem var(--gutter); align-items: start; }
.f-intro { display: grid; gap: 1.25rem; align-content: start; }
@media (max-width: 860px) { .form-wrap { grid-template-columns: minmax(0, 1fr); } }
.gb-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 2rem; max-width: 40rem; }
.field { display: grid; gap: .25rem; grid-column: span 2; min-width: 0; }
.field.half { grid-column: span 1; }
@media (max-width: 560px) { .gb-form { grid-template-columns: minmax(0, 1fr); } .field, .field.half { grid-column: 1; } }
.field > label, .field legend { font-family: var(--sans); font-size: .75rem; color: var(--muted); padding: 0; }
.field .req { color: var(--muted); }
.field .hint { font-family: var(--sans); font-size: .75rem; color: var(--muted); opacity: .85; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="url"], .field select, .field textarea {
  width: 100%; min-height: 2.75rem; padding: .45rem 0; border: 0; border-bottom: 1px solid var(--field-line); border-radius: 0;
  background: transparent; font-family: var(--body); font-size: 1rem; color: var(--ink);
}
.field textarea { min-height: 6.5rem; resize: vertical; line-height: 1.6; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 9px) 55%, calc(100% - 5px) 55%; background-size: 4px 4px; background-repeat: no-repeat; padding-right: 1.75rem; }
.field input[type="file"] { font-family: var(--sans); font-size: .8rem; padding: .6rem 0; color: var(--muted); max-width: 100%; }
.field input[type="file"]::file-selector-button { font-family: var(--sans); font-size: var(--ui); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: .35rem 0; margin-right: 1.25rem; cursor: pointer; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.field [aria-invalid="true"] { border-bottom-color: var(--ballet-rose); }
.field .error { font-family: var(--sans); font-size: .75rem; color: #8A4653; }
fieldset.field { border: 0; margin: 0; padding: 0; }
.choice-row { display: flex; flex-wrap: wrap; gap: .25rem 2rem; margin-top: .4rem; }
.choice { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; cursor: pointer; }
.choice input { width: .95rem; height: .95rem; margin: 0; accent-color: var(--charcoal); cursor: pointer; }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: .5rem; }
.form-foot .fine { font-family: var(--sans); font-size: .72rem; color: var(--muted); }
.form-alert { grid-column: 1 / -1; font-family: var(--sans); font-size: .82rem; color: #8A4653; }
.form-result { display: grid; gap: 1.1rem; justify-items: start; max-width: 40rem; }
.form-result h3 { font-family: var(--display); font-size: clamp(1.6rem, 2.2vw, 2.1rem); font-weight: 400; line-height: 1.1; }
.form-result textarea { width: 100%; min-height: 12rem; padding: 1rem; border: 0; background: var(--tone); font: inherit; font-size: .9rem; line-height: 1.65; color: var(--ink); resize: vertical; }
.copy-row { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; }
.email-chip, .selectable { user-select: all; word-break: break-word; }
.email-chip { font-family: var(--display); font-size: 1.4rem; }
.contact-lines { gap: 1.75rem; }
.contact-lines .muted { font-family: var(--sans); font-size: .75rem; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 40rem; }
.faq-list details { border-bottom: 1px solid var(--hair); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.15rem 0; font-family: var(--display); font-size: 1.3rem; line-height: 1.25; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list .plus { position: relative; width: 9px; height: 9px; flex: none; }
.faq-list .plus::before, .faq-list .plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink); transition: transform .4s ease; }
.faq-list .plus::after { transform: rotate(90deg); }
.faq-list details[open] .plus::after { transform: rotate(0deg); }
.faq-list .answer { padding: 0 0 1.5rem; color: var(--muted); max-width: 32em; }
.faq-list .answer p + p { margin-top: .75rem; }
.faq-list + .more, .faq-list + .actions { margin-top: 2.5rem; }

/* ---------- Footer ---------- */
.site-footer { padding-block: clamp(4rem, 8vw, 7rem) calc(2.25rem + env(safe-area-inset-bottom, 0px)); }
.site-footer > .wrap { position: relative; padding-top: clamp(2.75rem, 4.5vw, 4rem); }
.site-footer > .wrap::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--hair); }
.footer-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 3rem var(--gutter); font-family: var(--sans); font-size: .75rem; }
.footer-brand { display: grid; gap: .4rem; align-content: start; justify-items: start; }
.footer-brand img { width: 22px; height: auto; margin-bottom: .9rem; }
.footer-name { font-family: var(--display); font-size: 1.3rem; line-height: 1.2; letter-spacing: -.003em; }
.footer-brand img.wordmark { width: auto; height: 30px; }
.footer-nav ul { columns: 2; column-gap: 2rem; }
.footer-nav li { padding-block: .2rem; }
.footer-nav a:hover, .footer-contact a:hover { text-decoration: underline; text-underline-offset: .35em; }
.footer-contact { display: grid; gap: .4rem; align-content: start; overflow-wrap: anywhere; min-width: 0; }
.footer-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-top: clamp(3rem, 6vw, 5rem); color: var(--muted); font-size: .72rem; line-height: 1.6; }
@media (max-width: 1060px) {
  .footer-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Draft notice (review aid only) ---------- */
.draft-note { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 60; background: var(--charcoal); color: var(--cream); font-family: var(--sans); font-size: .6875rem; letter-spacing: .04em; padding: .35rem .4rem .35rem .75rem; display: flex; gap: .5rem; align-items: center; }
.draft-note button { background: none; border: 0; color: var(--cream); cursor: pointer; padding: .2rem .35rem; font-size: .9rem; line-height: 1; }
@media (max-width: 520px) { .draft-note .long-text { display: none; } }
@media (min-width: 521px) { .draft-note .short-text { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .media img { transform: scale(var(--z, 1)) !important; }
  .site-header.is-hidden { transform: none; }
}

.gb-map-note--over { z-index: 2; background: rgba(244, 241, 234, .92); padding: .4rem .6rem; right: auto; max-width: calc(100% - 2.5rem); }

/* ------------------------------------------------------------ email signup */
.footer-signup { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem var(--gutter); align-items: end; margin-bottom: clamp(3rem, 6vw, 5rem); }
.footer-signup .h-small { margin: 0; }
.signup-copy p { margin: .6rem 0 0; color: var(--muted); font-family: var(--sans); font-size: var(--read); max-width: 30em; }
.signup-form { position: relative; }
.signup-form .search-row { margin-top: 0; }
.signup-msg { min-height: 1.2em; margin: .75rem 0 0; font-family: var(--sans); font-size: .8rem; color: var(--muted); }
@media (max-width: 760px) { .footer-signup { grid-template-columns: minmax(0, 1fr); } }