/* Growing FootPrints — the school's visual system.
 *
 * Read DESIGN-DNA.md first. Color is sampled from the school's own four-color
 * wordmark (green #007A3D, red #DC3C41, yellow #F7BE34) and from the Blue Room's
 * rug (#123A78). Surfaces are bright white and cool mist; warm neutral canvases
 * are intentionally excluded. A colored campus path is the signature motif.
 *
 * Sections, in order: faces, tokens, base, chrome, motif, content components,
 * rooms, tables, forms, utility routes, responsive, print, reduced motion.
 */

/* ---------- faces ---------- */

@font-face {
  font-family: "Hedvig Letters Serif";
  src: url("/assets/fonts/HedvigLettersSerif-opsz.subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hedvig Letters Sans";
  src: url("/assets/fonts/HedvigLettersSans-Regular.subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */

:root {
  --paper: #f4f8f7;
  --white: #ffffff;
  --ink: #172c25;
  --ink-soft: #52665f;
  --green: #007a3d;
  --green-deep: #04532c;
  --green-wash: #eef5ee;
  --red: #dc3c41;
  --red-ink: #b32a2f;
  --red-wash: #fdefee;
  --yellow: #f7be34;
  --yellow-wash: #fdf3dc;
  --blue: #123a78;
  --blue-wash: #eef2f8;
  --rule: #dce8e4;
  --rule-strong: #b9cec6;

  --measure: 34rem;
  --page: 72rem;
  --page-wide: 84rem;
  --radius: 3px;

  --display: "Hedvig Letters Serif", Georgia, "Times New Roman", serif;
  --body: "Hedvig Letters Sans", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, 0.97rem + 0.16vw, 1.08rem);
  line-height: 1.55;
  text-underline-offset: 0.14em;
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2.1rem, 1.55rem + 2.6vw, 3.6rem);
  line-height: 1.06;
  margin: 0 0 0.6rem;
}

h2 {
  font-size: clamp(1.55rem, 1.3rem + 1.15vw, 2.35rem);
  line-height: 1.14;
  margin: 0 0 0.75rem;
}

h3 {
  font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.2;
  margin: 0 0 0.5rem;
}

p {
  margin: 0 0 1rem;
  max-width: var(--measure);
}

a {
  color: var(--green-deep);
  text-decoration-thickness: 0.07em;
}

a:hover {
  color: var(--red-ink);
}

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.visually-hidden :focus-visible {
  outline-offset: -3px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 60;
  background: var(--green-deep);
  color: var(--white);
  padding: 0.85rem 1.2rem;
  font-weight: 500;
}

.skip-link:focus {
  left: 0;
}

.wrap {
  width: min(100% - 2.5rem, var(--page));
  margin-inline: auto;
}

.wrap-wide {
  width: min(100% - 2.5rem, var(--page-wide));
  margin-inline: auto;
}

.wrap-read {
  width: min(100% - 2.5rem, 46rem);
  margin-inline: auto;
}

/* ---------- chrome ---------- */

.proto-banner {
  background: var(--green-deep);
  color: #e8f2e6;
  font-size: 0.85rem;
  padding: 0.55rem 1.25rem;
  text-align: center;
  letter-spacing: 0.01em;
}

.proto-banner strong {
  color: var(--yellow);
  font-weight: 500;
}

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}

.header-bar {
  width: min(100% - 2.5rem, var(--page-wide));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 0 0.9rem;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-decoration: none;
  color: inherit;
  margin-inline-end: auto;
}

.brand-logo {
  width: 188px;
  height: auto;
}

.brand-tagline {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* The one action set apart from the six doors: a parent's actual errand.
 * It gets the mark's green and the stepped rule, so it reads as the end of
 * the footprint trail rather than a seventh nav item. */
/* The Apply block and the search button are the two controls in the header
   bar, so they are built to one control height. Stacking a kicker over a label
   used to make this one half again as tall as the button beside it, and the
   pair read as two unrelated widgets rather than one row. */
.nav-action {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-height: 44px;
  text-decoration: none;
  background: var(--green);
  color: var(--white);
  padding: 0.35rem 1.05rem 0.4rem;
  border-radius: var(--radius);
  order: 3;
}

.nav-action:hover {
  background: var(--green-deep);
  color: var(--white);
}

.nav-action[aria-current="page"] {
  background: var(--green-deep);
  box-shadow: inset 0 0 0 2px var(--yellow);
}

.nav-action-kicker {
  font-size: 0.6rem;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #eaf5ec;
}

.nav-action-label {
  font-size: 0.95rem;
  line-height: 1.15;
}

/* A phone number is one token to a reader even though it is three to a line
   breaker, and "408-356-" at the end of a line is unreadable and undialable. */
a[href^="tel:"] { white-space: nowrap; }

.header-search {
  position: relative;
  display: flex;
  gap: 0.4rem;
  order: 2;
  flex: 0 1 20rem;
}

.header-search input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.95rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}

.header-search button {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.55rem 0.9rem;
  min-height: 44px;
  border: 1px solid var(--green-deep);
  background: var(--white);
  color: var(--green-deep);
  border-radius: var(--radius);
  cursor: pointer;
}

.header-search button:hover {
  background: var(--green-deep);
  color: var(--white);
}

.header-search ul {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  z-index: 40;
  max-height: 24rem;
  overflow-y: auto;
}

.header-search ul:empty {
  display: none;
}

.header-search li {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  font-size: 0.92rem;
}

.header-search li:last-child {
  border-bottom: 0;
}

.header-search li[aria-selected="true"],
.header-search li:hover {
  background: var(--green-wash);
}

.header-search li .sug-kind {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.menu-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font: inherit;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
  order: 4;
}

.menu-toggle-bars {
  width: 18px;
  height: 2px;
  background: var(--green);
  box-shadow: 0 -5px 0 var(--red), 0 5px 0 var(--yellow);
}

.site-nav {
  width: min(100% - 2.5rem, var(--page-wide));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.9rem;
  padding-bottom: 0.35rem;
}

.nav-link {
  position: relative;
  text-decoration: none;
  color: var(--ink);
  font-size: 1rem;
  padding: 0.55rem 0 0.7rem;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: transparent;
}

.nav-link:hover {
  color: var(--green-deep);
}

.nav-link:hover::after {
  background: var(--yellow);
}

.nav-link[aria-current="page"] {
  color: var(--green-deep);
}

.nav-link[aria-current="page"]::after {
  background: var(--green);
}

/* ---------- footer ---------- */

.site-footer {
  background: var(--green-deep);
  color: #e6efe4;
  margin-top: clamp(3rem, 7vw, 6rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0 1.5rem;
}

.site-footer > * {
  width: min(100% - 2.5rem, var(--page-wide));
  margin-inline: auto;
}

.site-footer a {
  color: var(--yellow);
}

.site-footer a:hover {
  color: var(--white);
}

.footer-lockup {
  display: flex;
  align-items: center;
  gap: 1.1rem 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

/* The mark is dark ink on white; on the deep green footer it needs its own
 * white plate rather than being knocked out or recolored. */
.footer-home-link {
  background: var(--white);
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius);
  display: block;
  line-height: 0;
}

.footer-home-link img {
  width: 140px;
  height: auto;
}

.footer-welcome {
  flex: 1 1 20rem;
}

.footer-kicker {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 0.3rem;
}

.footer-welcome p {
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem);
  line-height: 1.25;
  margin: 0 0 0.4rem;
  color: var(--white);
  max-width: 28rem;
}

.footer-address {
  font-style: normal;
  font-size: 0.92rem;
  color: #c8dcc6;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem 2rem;
  padding: 1.25rem 0;
}

.footer-col p {
  font-size: 0.92rem;
  max-width: 26rem;
  color: #d6e5d3;
}

.footer-col-heading {
  font-family: var(--body);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow);
  margin: 0 0 0.75rem;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  padding: 1.5rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.footer-nav a {
  font-size: 0.92rem;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.footer-journey {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  font-size: 0.82rem;
  color: #b9d0b7;
}

.footer-journey li {
  position: relative;
  padding-left: 1.15rem;
}

.footer-journey li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow);
}

.footer-journey li:nth-child(2)::before {
  background: var(--red);
}

.footer-journey li:nth-child(3)::before {
  background: #7fc98f;
}

.footer-note {
  margin: 1.5rem 0 0;
  font-size: 0.8rem;
  color: #a9c2a7;
}

/* ---------- motif: footprint-step ---------- */

/* Three blocks climbing left to right in the mark's own order — red, yellow,
 * green — the way the footprints climb the wordmark. Marks a section start. */
.footprint-step {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 20px;
  margin-bottom: 1.1rem;
}

.footprint-step::before,
.footprint-step::after,
.footprint-step > i {
  content: "";
  display: block;
  width: 22px;
  border-radius: 1px;
}

.footprint-step::before {
  height: 7px;
  background: var(--red);
}

.footprint-step > i {
  height: 13px;
  background: var(--yellow);
}

.footprint-step::after {
  height: 20px;
  background: var(--green);
}

.footprint-step[data-tone="light"]::before {
  background: #f2a3a5;
}

.footprint-step[data-tone="light"] > i {
  background: var(--yellow);
}

.footprint-step[data-tone="light"]::after {
  background: #7fc98f;
}

/* ---------- content ---------- */

main {
  display: block;
}

.section {
  padding-block: clamp(1.5rem, 3.5vw, 2.75rem);
}

.section-tint {
  background: var(--white);
  border-block: 1px solid var(--rule);
}

.kicker {
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin: 0 0 0.6rem;
}

.lede {
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.65rem);
  line-height: 1.32;
  color: var(--ink);
  max-width: 40rem;
}

.prose > * + * {
  margin-top: 1rem;
}

.prose h2 {
  margin-top: 2.5rem;
}

.prose h3 {
  margin-top: 1.75rem;
}

.prose ul,
.prose ol {
  max-width: var(--measure);
  padding-left: 1.15rem;
}

.prose li + li {
  margin-top: 0.4rem;
}

/* Hero: one photograph of the place, cropped to a band so the first line of
 * copy is not pushed off the screen. */
.hero {
  padding-top: clamp(2rem, 4vw, 3.25rem);
}

.hero-copy {
  max-width: 44rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.hero-figure {
  margin: 0;
}

.hero-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.hero-figure figcaption,
.figure figcaption {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.6rem;
  max-width: 42rem;
}

.figure {
  margin: 0;
}

.figure img {
  border-radius: var(--radius);
}

/* The ladder: the site's spine, and the first thing on the home page. */
.ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.ladder li {
  background: var(--white);
  padding: 1.4rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ladder a {
  text-decoration: none;
  color: inherit;
}

.ladder a:hover .ladder-room {
  text-decoration: underline;
}

.ladder-age {
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.ladder-room {
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--green-deep);
}

.ladder-note {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 0;
}

.ladder li::before {
  content: "";
  display: block;
  height: 5px;
  width: 46px;
  border-radius: 1px;
  margin-bottom: 0.35rem;
}

.ladder li[data-room="green"]::before {
  background: var(--green);
}

.ladder li[data-room="red"]::before {
  background: var(--red);
}

.ladder li[data-room="yellow"]::before,
.ladder li[data-room="between"]::before {
  background: var(--yellow);
}

.ladder li[data-room="blue"]::before {
  background: var(--blue);
}

/* A six-item rail breaks 5 + 1 on a wide screen, which reads as a mistake.
 * Curriculum lists get an explicit three-across grid so they break 3 + 3. */
.rail.rail-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 60rem) {
  .rail.rail-3 {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
}

/* The action rail: the four errands that bring a parent here. */
.rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.25rem;
}

.rail li {
  border-top: 3px solid var(--green);
  padding-top: 0.9rem;
}

.rail h3 {
  font-family: var(--body);
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}

.staff-roster { margin-block: 1.4rem 1.6rem; }
.staff-roster h4 {
  font-family: var(--body);
  font-size: 1.05rem;
  margin: 0 0 0.35rem;
}
.staff-roster li { min-width: 0; }
.board-menu { width: 100%; border-collapse: collapse; min-width: 42rem; }
.board-menu caption { text-align: left; font-weight: 700; padding-block: 0 0.75rem; }
.board-menu th,
.board-menu td { text-align: left; vertical-align: top; padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--rule); }
.board-menu thead th { color: var(--green-deep); border-bottom: 2px solid var(--green); }
.board-room { padding-block: clamp(1.5rem, 4vw, 2.75rem); border-block-start: 1px solid var(--rule); }
.board-room:first-of-type { margin-block-start: 1.4rem; }
.board-room h3 { color: var(--green-deep); }
.board-week { margin: 0; }
.board-week > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding-block: 0.65rem; border-bottom: 1px solid var(--rule); }
.board-week dt { font-weight: 700; }
.board-week dd { margin: 0; }
@media (max-width: 34rem) {
  .board-week > div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}

.rail p {
  font-size: 0.93rem;
  color: var(--ink-soft);
  margin: 0;
}

.rail a {
  text-decoration: none;
}

.rail a:hover {
  text-decoration: underline;
}

/* Photo bays: asymmetric, so the grid never reads as a card wall. */
.bays {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1.35fr 1fr;
  align-items: start;
}

.bays-flip {
  grid-template-columns: 1fr 1.35fr;
}

.bay-body h2 {
  margin-top: 0;
}

.callout {
  background: var(--yellow-wash);
  border-left: 4px solid var(--yellow);
  padding: 1.1rem 1.35rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  max-width: 42rem;
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout-green {
  background: var(--green-wash);
  border-left-color: var(--green);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.25rem 2rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.stat-num {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.85rem, 1.5rem + 1.3vw, 2.5rem);
  line-height: 1;
  color: var(--green-deep);
}

.stat-label {
  display: block;
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin-top: 0.3rem;
  max-width: 13rem;
}

/* ---------- rooms and the age control ---------- */

.age-control {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.35rem 1.4rem 1.5rem;
}

.age-control h2 {
  font-family: var(--body);
  font-size: 1.05rem;
  margin-bottom: 0.9rem;
}

.age-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.age-options a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
}

.age-options a:hover,
.age-options a[aria-current="true"] {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

.room {
  border-top: 1px solid var(--rule);
  padding-top: clamp(1.75rem, 4vw, 2.75rem);
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  scroll-margin-top: 1.5rem;
}

.room:target,
.room[data-highlight="true"] {
  background: var(--white);
  box-shadow: 0 0 0 1.15rem var(--white);
  border-radius: var(--radius);
}

.room-head {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.room-swatch {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  flex: none;
  align-self: center;
}

.room[data-room="green"] .room-swatch {
  background: var(--green);
}

.room[data-room="red"] .room-swatch {
  background: var(--red);
}

.room[data-room="yellow"] .room-swatch,
.room[data-room="between"] .room-swatch {
  background: var(--yellow);
}

.room[data-room="blue"] .room-swatch {
  background: var(--blue);
}

.room-head h2 {
  margin: 0;
}

.room-ages {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.room-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 1.75rem;
  align-items: start;
  margin-top: 1.1rem;
}

.room-facts {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  font-size: 0.93rem;
}

.room-facts div {
  display: flex;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--rule);
}

.room-facts dt {
  flex: 0 0 8.5rem;
  color: var(--ink-soft);
  margin: 0;
}

.room-facts dd {
  margin: 0;
}

/* ---------- tables ---------- */

.table-scroll {
  max-width: 58rem;
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
}

caption {
  text-align: left;
  padding: 1rem 1.1rem 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

th,
td {
  text-align: left;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--rule);
}

thead th {
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--rule-strong);
  white-space: nowrap;
}

tbody th {
  font-weight: 400;
  color: var(--ink);
}

td {
  font-variant-numeric: tabular-nums;
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

.fee-note {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-top: 0.75rem;
}

.form-status {
  min-height: 1.5em;
  margin-block: 0.75rem 0;
  font-weight: 600;
  color: var(--green-deep);
}

.form-status[data-status="error"] { color: var(--red-deep, #9f2027); }

/* ---------- forms ---------- */

.form-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 3vw, 2rem);
}

.field {
  margin-bottom: 1.1rem;
  max-width: 32rem;
}

.field label {
  display: block;
  font-size: 0.92rem;
  margin-bottom: 0.35rem;
}

.field .hint {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}

.field input,
.field select,
.field textarea {
  font: inherit;
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}

fieldset {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 1.1rem 1.15rem;
  margin: 0 0 1.25rem;
  max-width: 32rem;
}

fieldset[hidden] { display: none; }

.program-guidance {
  max-width: 32rem;
  margin-block: -0.25rem 1rem;
}

legend {
  font-size: 0.92rem;
  padding-inline: 0.4rem;
}

.choice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
}

.choice input {
  width: 20px;
  height: 20px;
  min-height: 0;
  accent-color: var(--green);
}

.consent-choice {
  align-items: flex-start;
  max-width: 32rem;
  margin-top: 0.25rem;
}

.consent-choice label {
  line-height: 1.45;
}

.form-status {
  min-height: 1.5rem;
  margin: 0.8rem 0 0;
  font-weight: 600;
}

.form-status[data-status="success"] { color: var(--green-deep); }
.form-status[data-status="error"] { color: var(--red); }
.form-status[data-status="pending"] { color: var(--ink-soft); }

form[aria-busy="true"] button[type="submit"],
button[type="submit"]:disabled {
  cursor: wait;
  opacity: 0.7;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.65rem 1.35rem;
  font: inherit;
  background: var(--green);
  color: var(--white);
  border: 1px solid var(--green);
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: var(--white);
}

.btn-quiet {
  background: var(--white);
  color: var(--green-deep);
  border-color: var(--rule-strong);
}

.btn-quiet:hover {
  background: var(--green-wash);
  color: var(--green-deep);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.park-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.15rem;
  margin: 0.85rem 0 0;
  font-size: 0.92rem;
  font-weight: 700;
}
.park-path span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.park-path span + span::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-inline: 0.45rem 0.55rem;
  border-block: 0.32rem solid transparent;
  border-inline-start: 0.48rem solid var(--green);
}

/* ---------- utility routes ---------- */

.results {
  margin-top: 1.5rem;
}

.result-group h2 {
  font-family: var(--body);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.4rem;
  margin: 2rem 0 0.9rem;
}

.result {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}

.result h3 {
  font-family: var(--body);
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

.result p {
  font-size: 0.93rem;
  color: var(--ink-soft);
  margin: 0;
}

.result-empty {
  padding: 1.5rem 0;
}

.source-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.source-list li {
  border-top: 1px solid var(--rule);
  padding: 1rem 0;
}

.source-list h3 {
  font-family: var(--body);
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.source-list p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- responsive ---------- */

@media (max-width: 60rem) {
  .bays,
  .bays-flip,
  .room-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 52rem) {
  .header-bar {
    flex-wrap: nowrap;
    gap: 0.55rem;
  }

  .brand {
    margin-inline-end: auto;
    flex: 0 1 auto;
    min-width: 0;
  }

  .brand-logo {
    width: 7.6rem;
  }

  .header-aside {
    order: 2;
    width: auto;
    flex: 0 0 auto;
  }

  .header-aside .nav-action {
    display: none;
  }

  .header-search,
  .header-search-link {
    order: 3;
    flex: 0 0 auto;
  }

  .menu-toggle {
    display: inline-flex;
    order: 4;
  }

  .site-nav {
    display: none;
    flex-direction: column;
    gap: 0;
    padding-bottom: 0.75rem;
  }

  .site-nav.open,
  .site-nav.is-open {
    display: flex;
  }

  .site-nav a[href="/apply/"] {
    display: block;
  }

  .nav-link {
    border-top: 1px solid var(--rule);
    padding: 0.7rem 0;
  }

  .nav-link::after {
    left: 0;
    width: 3px;
    right: auto;
    top: 0;
    bottom: 0;
    height: auto;
  }

  .room-facts dt {
    flex: 0 0 7rem;
  }
}

@media (max-width: 34rem) {
  .age-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .age-options a {
    justify-content: center;
    text-align: center;
  }

  .room-facts div {
    flex-direction: column;
    gap: 0.15rem;
  }

  .room-facts dt {
    flex: none;
  }
}

/* ---------- print ---------- */

@media print {
  .proto-banner,
  .header-search,
  .menu-toggle,
  .site-nav,
  .nav-action,
  .skip-link,
  .footer-nav,
  .age-control {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .site-footer {
    background: #fff;
    color: #000;
    border-top: 1px solid #999;
    padding-block: 1rem;
  }

  .site-footer a,
  .footer-col-heading,
  .footer-kicker {
    color: #000;
  }

  .footer-home-link {
    background: none;
    padding: 0;
  }

  .table-scroll {
    overflow: visible;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* The note under the ladder: the one age band the school's own room
 * descriptions do not resolve, answered by a phone call rather than a guess. */
.ladder-aside {
  margin-top: 1.25rem;
  max-width: 46rem;
}

/* Callout headings are labels, not display type. */
.callout-h {
  font-family: var(--body);
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.section-tight {
  padding-top: 0;
}

/* The band between the Green Room and the Yellow Room is more than one room, so
 * its swatch carries the mark's three colors rather than claiming one. */
.room[data-room="between"] .room-swatch {
  background: linear-gradient(
    to bottom,
    var(--red) 0 33.33%,
    var(--yellow) 33.33% 66.66%,
    var(--green) 66.66% 100%
  );
}

.fee-note-loose {
  margin-top: 1.5rem;
}

/* Search results as search.js renders them: grouped sections, each a list of
 * records carrying a summary and a source-and-checked-date line. */
.result-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.result-list li {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.result-list li:last-child {
  border-bottom: 0;
}

.result-list li > a {
  font-size: 1.08rem;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.result-list .s-sub {
  font-size: 0.93rem;
  color: var(--ink-soft);
  max-width: 46rem;
}

.result-list .s-sub.record {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.rubric {
  font-family: var(--body);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--rule-strong);
  padding-bottom: 0.4rem;
  margin: 2rem 0 0.4rem;
}

.result-note {
  padding: 1rem 0;
  color: var(--ink-soft);
}

.answer-sources {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.answer-sources li {
  padding: 0.4rem 0;
  font-size: 0.9rem;
}

/* ---------- header: the church, on every page ----------
   The tagline in the lockup says who this preschool belongs to; this is how you
   get there. It sits in the header bar rather than the nav row, because the nav
   row is the shape of THIS site and a door out of it would misreport that. */
/* Apply and the church link are one cluster in the bar, not a stack: the
   scaffold wraps both in .header-aside, so that wrapper carries the order the
   nav-action used to carry on its own. */
.header-aside { display: flex; align-items: center; gap: 0.6rem; order: 3; }
.header-aside .nav-action { order: 0; }
.header-links { display: flex; align-items: center; }
.header-link {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  padding: 0.2rem 0.35rem;
  border: 0;
  border-radius: 0;
  color: var(--green-deep);
  text-decoration: none;
  font-size: 0.9rem;
}
.header-link:hover { background: transparent; color: var(--green); }
.header-link-kicker { font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }

/* ---------- footer, rebuilt ----------
   It was five loosely stacked rows: a lockup, three columns, a link row, a row
   of coloured dots repeating facts already on the page, and an orphaned credit
   line over a stretch of empty green. The dots are gone (their three facts are
   the standing answers, so they moved up into the lockup where a parent reads
   the hours), and the bottom two rows are now one baseline row, so the footer
   ends where its content ends instead of trailing off. */
.site-footer { padding-block: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2vw, 1.35rem); }

.footer-lockup {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem 1.5rem;
  padding-bottom: 1rem;
}
.footer-kicker {
  display: block;
  color: var(--yellow);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer-welcome p { margin: 0.3rem 0 0; font-size: 1.02rem; color: #e6efe4; max-width: 44ch; }
.footer-address { margin-block-start: 0.35rem; font-style: normal; font-size: 0.9rem; color: #b9d0b7; }

.footer-columns { padding-block: 1.15rem; border-top: 1px solid rgba(255, 255, 255, 0.18); }

.footer-feedback {
  padding-block: 1rem 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.footer-feedback-disclosure { max-width: 50rem; }
.footer-feedback-disclosure summary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.6rem;
  color: var(--white);
  font-family: var(--display);
  font-size: 1.02rem;
  cursor: pointer;
  list-style: none;
}
.footer-feedback-disclosure summary::-webkit-details-marker { display: none; }
.footer-feedback-disclosure summary::after {
  color: var(--yellow);
  content: "+";
  font-family: var(--body);
  font-size: 1.25rem;
  line-height: 1;
}
.footer-feedback-disclosure[open] summary::after { content: "−"; }
.footer-feedback-disclosure summary:hover { color: var(--yellow); }
.footer-feedback-disclosure summary:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.footer-feedback-form {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem 0.85rem;
  align-items: end;
  margin-block-start: 0.75rem;
}
.footer-feedback-field { display: grid; gap: 0.4rem; }
.footer-feedback-field label { color: #c8dcc6; font-size: 0.88rem; }
.footer-feedback-field textarea {
  min-width: 0;
  min-height: 5.25rem;
  padding: 0.7rem 0.8rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid #9ab697;
  border-radius: 2px;
  font: inherit;
  line-height: 1.45;
  resize: vertical;
}
.footer-feedback-field textarea:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.footer-feedback-form button[type="submit"] {
  min-height: 48px;
  padding: 0.65rem 1.15rem;
  color: var(--green-deep);
  background: var(--yellow);
  border: 1px solid var(--yellow);
  border-inline-start: 4px solid var(--red);
  border-radius: 2px;
  font: 700 1rem/1 var(--body);
  cursor: pointer;
}
.footer-feedback-form button[type="submit"]:hover { background: var(--white); border-color: var(--white); }
.footer-feedback-form button[type="submit"]:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.footer-feedback-form button[type="submit"]:disabled { cursor: wait; opacity: 0.65; }
.footer-feedback-status,
.footer-feedback-noscript { grid-column: 1 / -1; min-height: 1.4em; margin: 0; color: #b9d0b7; font-size: 0.84rem; }
.footer-feedback-status[data-status="success"] { color: var(--yellow); font-weight: 700; }
.footer-feedback-status[data-status="error"] { color: #ffe0b7; font-weight: 700; }
.footer-feedback-honeypot {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .footer-feedback-form { grid-template-columns: minmax(0, 1fr); }
  .footer-feedback-form button[type="submit"] { justify-self: start; }
}

/* One row, one baseline: the ways out of the site and the line that says who
   built it are both metadata, and stacking them left a hole under the footer. */
.footer-nav {
  align-items: baseline;
  gap: 0.2rem 1.6rem;
  padding-block-start: 1.25rem;
}
.footer-nav a { min-height: 32px; }
.footer-note { margin: 0.75rem 0 0; }

@media (min-width: 800px) {
  .site-footer { display: grid; }
  .footer-nav { padding-inline-end: 14rem; }
  .footer-note { margin-block-start: -2.1rem; text-align: end; }
}
@media (max-width: 640px) {
  .footer-lockup { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   N3 compact chrome and shared action system
   -------------------------------------------------------------------------- */

.header-bar { padding-block: 0.7rem 0.62rem; gap: 0.7rem; }
.brand-logo { width: clamp(8.6rem, 11vw, 10rem); }
.brand-tagline { display: none; }
.header-aside { order: 3; gap: 0.5rem; }
.header-links { order: -1; }
.header-aside .nav-action { order: 1; }
.nav-action {
  min-height: 44px;
  padding: 0.55rem 1rem;
  border: 1px solid var(--green-deep);
  border-inline-start: 4px solid var(--yellow);
  border-radius: 2px;
  font-family: var(--body);
  font-weight: 600;
  transition: color 120ms ease-out, background 120ms ease-out, border-color 120ms ease-out, transform 80ms ease-out;
}
.nav-action:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.nav-action:active { transform: translateY(1px); }
.header-link {
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.2rem 0.35rem;
  border: 0;
  font-weight: 600;
}
.header-link-mark {
  display: block;
  width: 2.6rem;
  height: auto;
  padding: 0;
  background: transparent;
}
.header-search-link {
  position: relative;
  display: grid;
  order: 2;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--green-deep);
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  text-decoration: none;
}
.header-search-icon {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 50%;
}
.header-search-icon::after {
  position: absolute;
  right: -5px;
  bottom: -3px;
  width: 7px;
  height: 2px;
  content: "";
  background: currentColor;
  transform: rotate(45deg);
  transform-origin: left center;
}
.header-search-link:hover,
.header-search-link:focus-visible { color: var(--white); background: var(--green-deep); }
.header-search-link:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.site-nav { gap: 0 1.45rem; padding-bottom: 0.2rem; }
.nav-link { min-height: 40px; padding-block: 0.45rem 0.58rem; font-size: 0.95rem; }

:where(.btn, .button, .email-action > a, .page-action, .owned-form button[type="submit"]) {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0.68rem 1.05rem;
  color: var(--white);
  background: var(--green-deep);
  border: 1px solid var(--green-deep);
  border-inline-start: 4px solid var(--yellow);
  border-radius: 2px;
  font: 600 0.95rem/1.2 var(--body);
  text-align: center;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  transition: color 120ms ease-out, background 120ms ease-out, border-color 120ms ease-out, transform 80ms ease-out;
}
:where(.btn, .button, .email-action > a, .page-action, .owned-form button[type="submit"]):hover,
:where(.btn, .button, .email-action > a, .page-action, .owned-form button[type="submit"]):focus-visible {
  color: var(--white);
  background: var(--green);
  border-color: var(--green);
  border-inline-start-color: var(--red);
}
:where(.btn, .button, .email-action > a, .page-action, .owned-form button[type="submit"]):focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}
:where(.btn, .button, .email-action > a, .page-action, .owned-form button[type="submit"]):active { transform: translateY(1px); }
:where(.btn, .button, .email-action > a, .page-action, .owned-form button[type="submit"]):disabled,
:where(.btn, .button, .email-action > a, .page-action, .owned-form button[type="submit"])[aria-disabled="true"] {
  color: #e7efec;
  background: #647b72;
  border-color: #647b72;
  border-inline-start-color: #a9bdb5;
  cursor: not-allowed;
  opacity: 0.8;
  transform: none;
}
.email-action { display: inline-block; }

.site-nav a[href="/apply/"] { display: none; }

@media (max-width: 820px) {
  .header-bar { flex-wrap: nowrap; align-items: center; gap: 0.5rem; }
  .brand { flex: 0 1 auto; min-width: 0; margin-inline-end: auto; }
  .header-aside { order: 2; width: auto; flex: 0 0 auto; justify-content: flex-end; }
  .header-aside .nav-action { display: none; }
  .header-links { min-width: 0; }
  .header-link {
    min-width: 44px;
    min-height: 44px;
    padding: 0.2rem;
    border: 0;
    background: transparent;
  }
  .header-link-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .header-link-mark { width: 2.4rem; padding: 0; background: transparent; }
  .header-search-link { order: 3; flex: 0 0 auto; }
  .menu-toggle { display: inline-flex; order: 4; }
  .site-nav { display: none; flex-direction: column; padding-block: 0.3rem 0.75rem; }
  .site-nav.is-open { display: flex; }
  .site-nav a[href="/apply/"] { display: block; }
}

@media (max-width: 430px) {
  .brand-logo { width: 7.1rem; }
  .header-link-mark { width: 2.2rem; }
  .header-link { padding: 0.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-action,
  :where(.btn, .button, .email-action > a, .page-action, .owned-form button[type="submit"]) { transition: none; }
}

/* --------------------------------------------------------------------------
   Growing FootPrints editorial path system

   One green route connects the generated cut-paper kit to real rooms and
   practical decisions. White and cool-mint surfaces carry the content; red and
   yellow stay small enough to work as wayfinding rather than a nursery wash.
   -------------------------------------------------------------------------- */

body { background: var(--white); }
main { overflow: clip; }
.section { position: relative; }
.section-tint { background: var(--paper); }

.hero-editorial {
  display: grid;
  min-height: min(42rem, calc(100vh - 8rem));
  grid-template-columns: minmax(18rem, 0.82fr) minmax(28rem, 1.45fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 3.25rem);
  padding-block: clamp(2rem, 5vw, 4.5rem);
}
.hero-editorial .hero-copy { position: relative; z-index: 1; margin: 0; }
.hero-editorial .hero-copy::before {
  display: block;
  width: 4.8rem;
  height: 0.48rem;
  margin-block-end: 1rem;
  content: "";
  background: linear-gradient(90deg, var(--red) 0 28%, transparent 28% 34%, var(--yellow) 34% 62%, transparent 62% 68%, var(--green) 68% 100%);
}
.hero-editorial h1 { max-width: 11ch; font-size: clamp(2.7rem, 4.7vw, 5rem); }
.hero-editorial .lede { max-width: 36rem; }
.hero-art { position: relative; margin-inline-end: calc((100vw - min(100vw - 2.5rem, var(--page-wide))) / -2); }
.hero-art img {
  width: 100%;
  height: auto;
  border-radius: 0;
}

.path-graphic,
.icon-family {
  position: relative;
  margin: 0.75rem 0;
}
.path-graphic img { width: 100%; height: auto; display: block; }
.path-graphic--compact { max-width: 74rem; }
.icon-family { width: min(100%, 60rem); border: 0; }
.icon-family img { width: 100%; height: auto; display: block; }

@media (min-width: 821px) {
  .section.wrap-wide:has(> .path-graphic) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.85fr);
    align-items: start;
    column-gap: 1.25rem;
  }
  .section.wrap-wide:has(> .path-graphic) > .footprint-step,
  .section.wrap-wide:has(> .path-graphic) > h1,
  .section.wrap-wide:has(> .path-graphic) > .lede {
    grid-column: 1;
  }
  .section.wrap-wide:has(> .path-graphic) > .path-graphic {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: start;
    margin: 0;
  }
}

/* Keep the cropped cut-paper files. Soften every frame edge so
   redwood cuts dissolve into the white field instead of ending flat. */
.hero-art::before,
.path-graphic::before,
.icon-family::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(to bottom, var(--white) 0%, rgb(255 255 255 / 0.65) 6%, rgb(255 255 255 / 0) 16%, rgb(255 255 255 / 0) 82%, rgb(255 255 255 / 0.65) 93%, var(--white) 100%),
    linear-gradient(to right, var(--white) 0%, rgb(255 255 255 / 0.5) 3%, rgb(255 255 255 / 0) 8%, rgb(255 255 255 / 0) 92%, rgb(255 255 255 / 0.5) 97%, var(--white) 100%);
}

/* The small section marker is the same path in miniature. */
.footprint-step {
  position: relative;
  display: block;
  width: 5.75rem;
  height: 0.38rem;
  margin-block-end: 1.15rem;
  background: var(--green);
  border-radius: 999px;
}
.footprint-step > i { display: none; }
.footprint-step::before,
.footprint-step::after {
  position: absolute;
  top: 50%;
  display: block;
  width: 0.78rem;
  height: 0.78rem;
  content: "";
  border: 2px solid var(--white);
  border-radius: 50%;
  transform: translateY(-50%);
}
.footprint-step::before { right: 0.92rem; background: var(--yellow); }
.footprint-step::after { right: -0.14rem; background: var(--red); }

.availability-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 2rem;
  margin-block-start: 1.5rem;
  padding: 1.25rem 1.35rem;
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-inline-start: 5px solid var(--green);
}
.availability-card p { margin: 0; }
.availability-card .kicker { margin-block-end: 0.25rem; }

.rail li {
  padding: 1rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--green);
}
.rail li:has(a) { transition: border-color 120ms ease-out, transform 120ms ease-out; }
.rail li:has(a):hover,
.rail li:has(a):focus-within { border-color: var(--green); transform: translateY(-2px); }
.rail a:focus-visible { outline-offset: 4px; }

.ladder { gap: 0.65rem; overflow: visible; background: transparent; border: 0; }
.ladder li { position: relative; border: 1px solid var(--rule); }
.ladder a { display: inline-flex; min-height: 44px; align-items: center; }
.ladder a::after { margin-inline-start: 0.5rem; content: "→"; color: var(--green); }
.ladder li:focus-within { outline: 3px solid var(--red); outline-offset: 3px; }

.callout { background: var(--white); border: 1px solid var(--rule); border-inline-start: 5px solid var(--yellow); }
.callout-green { background: var(--paper); border-inline-start-color: var(--green); }
.room:target,
.room[data-highlight="true"] { background: var(--paper); box-shadow: 0 0 0 1.15rem var(--paper); }
.age-control { border-inline-start: 5px solid var(--green); }

.table-scroll { max-width: 100%; border-radius: 0; }
tbody tr:hover { background: var(--paper); }
td a { display: inline-flex; min-height: 32px; align-items: center; font-weight: 600; }

.school-calendar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(10, auto);
  grid-auto-flow: column;
  gap: 0;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--rule-strong);
}
.school-calendar li {
  display: grid;
  grid-template-columns: minmax(9rem, 0.8fr) minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.78rem 1rem;
  border-bottom: 1px solid var(--rule);
}
.school-calendar li:nth-child(-n + 10) { border-inline-end: 1px solid var(--rule); }
.school-calendar li:nth-child(10),
.school-calendar li:last-child { border-bottom: 0; }
.church-program-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}
.church-program-mark {
  width: 5.5rem;
  height: auto;
}
.school-calendar time { font-weight: 600; color: var(--green-deep); }
.school-calendar span { color: var(--ink-soft); }
.school-calendar .calendar-closure { background: var(--paper); border-inline-start: 4px solid var(--yellow); }

.calendar-subscribe {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.4rem, 4vw, 2.5rem);
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-inline-start: 6px solid var(--green);
}

.calendar-instructions {
  padding-inline-start: clamp(1rem, 3vw, 2rem);
  border-inline-start: 1px solid var(--rule);
}

.calendar-instructions ol { padding-inline-start: 1.3rem; }
.calendar-instructions li + li { margin-top: 0.5rem; }
.calendar-link-code {
  padding: 0.75rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  overflow-wrap: anywhere;
  font-size: 0.88rem;
}
.calendar-copy-status { min-height: 1.5em; margin: 0; color: var(--green-deep); font-weight: 600; }
.staff-home .figure { max-width: 36rem; }

.footer-contact-action {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0.55rem 0.85rem;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.44);
  border-inline-start: 4px solid var(--yellow);
  text-decoration: none;
}
.site-footer a.footer-contact-action:hover,
.site-footer a.footer-contact-action:focus-visible { color: var(--green-deep); background: var(--white); }

@media (max-width: 900px) {
  .hero-editorial { min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .hero-art { margin-inline: 0; }
  .hero-editorial h1 { max-width: 13ch; }
  .school-calendar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
  }
  .school-calendar li:nth-child(-n + 10) { border-inline-end: 0; }
  .school-calendar li:nth-child(10) { border-bottom: 1px solid var(--rule); }
  .school-calendar li:last-child { border-bottom: 0; }
  .calendar-subscribe { grid-template-columns: minmax(0, 1fr); }
  .calendar-instructions { padding-inline-start: 0; padding-block-start: 1.5rem; border-inline-start: 0; border-block-start: 1px solid var(--rule); }
  .church-program-callout { grid-template-columns: minmax(0, 1fr); }
  .church-program-mark { width: 4.5rem; }
}

@media (max-width: 600px) {
  .availability-card { grid-template-columns: minmax(0, 1fr); }
  .availability-card .btn { width: 100%; }
  .school-calendar li { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rail li:has(a) { transition: none; }
  .rail li:has(a):hover,
  .rail li:has(a):focus-within { transform: none; }
}