/* ALC Mosaic: "many pieces, one picture".
   Flat tiles in Mosaic's five brand colours, set in dark grout. Bricolage Grotesque for headings,
   Instrument Serif italic for the quiet voice, Figtree for reading. No scripts: everything here is CSS. */

/* Self-hosted (SIL Open Font License), so no visitor's IP address goes to Google. Latin subset only. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/images/font-bricolage-grotesque-normal.woff2?v=rTPLxtIykgUPHyAQhIq2GQ") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: italic; font-weight: 400 600; font-display: swap; src: url("/images/font-figtree-italic.woff2?v=Ya8aKUekTxyGwuyV4OyAoQ") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/images/font-figtree-normal.woff2?v=ICz7VNTmbRcCQEreSTOc6w") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/images/font-instrument-serif-italic.woff2?v=vIkb3QitVfIqVFUIRm-FWw") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/images/font-instrument-serif-normal.woff2?v=m43R7PZBcAvxyqnRfaY3Tg") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: only light;

  /* Brand palette */
  --yellow: #f0ba54;
  --blue: #b8d9d9;
  --pink: #dd7373;
  --plum: #6b618b;
  --gray: #d1d1d1;

  /* Grout, ink and paper */
  --grout: #2b2638;
  --ink: #2b2638;
  --ink-2: #4d475c;
  --paper: #f7f2ea;
  --paper-2: #efe7da;
  --cream: #fbf7f0;

  /* Text-safe shades on paper */
  --plum-ink: #4f4570;
  --pink-ink: #a6403f;
  --yellow-ink: #8a5d00;

  --display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --body: "Figtree", "Avenir Next", system-ui, sans-serif;

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 44px);
  --gap: clamp(6px, 0.8vw, 10px);
  --r: 5px;
  --line: 2px solid var(--grout);
  --lift: 4px 4px 0 var(--grout);
  /* Hexagons can't take a border or box-shadow (clip-path cuts them off), so the frame around a clipped photo draws the same 2px edge and 4px lift with drop-shadows. */
  --hex-edge: drop-shadow(2px 0 0 var(--grout)) drop-shadow(-2px 0 0 var(--grout)) drop-shadow(0 2px 0 var(--grout)) drop-shadow(0 -2px 0 var(--grout)) drop-shadow(4px 4px 0 var(--grout));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--plum-ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--ink); text-decoration-color: var(--pink); }
:focus-visible { outline: 3px solid var(--plum); outline-offset: 3px; border-radius: 3px; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-optical-sizing: auto;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 0.45em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 4.6vw, 3.9rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.85rem); font-weight: 750; }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700; }
p { margin: 0 0 1em; text-wrap: pretty; }

.eyebrow {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plum-ink);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 0.95em;
  height: 0.82em;
  background: var(--yellow);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

/* Colour tiles, shared by every section */
.t-yellow { background: var(--yellow); color: var(--ink); }
.t-blue { background: var(--blue); color: var(--ink); }
.t-pink { background: var(--pink); color: var(--ink); }
.t-plum { background: var(--plum); color: var(--cream); }
.t-gray { background: var(--gray); color: var(--ink); }
.t-paper { background: var(--cream); color: var(--ink); }

/* Buttons: a tile you can press */
.btn, .button {
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  color: var(--ink);
  background: var(--yellow);
  border: var(--line);
  border-radius: var(--r);
  padding: 0.85em 1.25em;
  box-shadow: var(--lift);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover, .button:hover { color: var(--ink); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--grout); }
.btn:active, .button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--grout); }
.btn-ink { background: var(--grout); color: var(--cream); box-shadow: 4px 4px 0 var(--yellow); }
.btn-ink:hover { color: var(--cream); box-shadow: 6px 6px 0 var(--yellow); }
.btn-ink:active { box-shadow: 1px 1px 0 var(--yellow); }
.btn-yellow { box-shadow: 4px 4px 0 var(--cream); }
.btn-yellow:hover { box-shadow: 6px 6px 0 var(--cream); }

.btn-text {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
  white-space: nowrap;
}
.btn-text::after { content: " \2192"; display: inline-block; transition: transform 0.15s ease; }
.btn-text:hover { color: var(--ink); text-decoration-color: var(--pink); }
.btn-text:hover::after { transform: translateX(4px); }
.btn-text-light, .btn-text-light:hover { color: var(--cream); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px var(--gutter);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: var(--line);
}
.brand img { height: 44px; width: auto; }
.nav-wide { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px); }
.nav-wide a, .nav-narrow nav a {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink);
  text-decoration: none;
}
.nav-wide a:not(.nav-cta):hover { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.nav-cta {
  background: var(--yellow);
  border: var(--line);
  border-radius: var(--r);
  padding: 0.45em 0.95em;
  box-shadow: 3px 3px 0 var(--grout);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.nav-cta:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--grout); }

.nav-narrow { display: none; }
.nav-narrow summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  padding: 0.45em 0.95em;
  border: var(--line);
  border-radius: var(--r);
  background: var(--cream);
  box-shadow: 3px 3px 0 var(--grout);
}
.nav-narrow summary::-webkit-details-marker { display: none; }
.nav-narrow[open] summary { background: var(--yellow); }
.nav-narrow nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: grid;
  gap: 0;
  background: var(--paper);
  border-bottom: var(--line);
  padding: 8px var(--gutter) 20px;
}
.nav-narrow nav a { font-size: 1.35rem; padding: 0.55em 0; border-bottom: 1.5px solid color-mix(in srgb, var(--grout) 15%, transparent); }
.nav-narrow nav a.nav-cta { margin-top: 16px; justify-self: start; font-size: 1.1rem; border-bottom: var(--line); }

@media (max-width: 920px) {
  .nav-wide { display: none; }
  .nav-narrow { display: block; }
  .brand img { height: 36px; }
}

/* ---------- The wall ---------- */
.wall {
  --rowh: clamp(64px, 6.4vw, 92px);
  max-width: var(--wrap);
  margin: clamp(18px, 3vw, 36px) auto 0;
  padding: var(--gap);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: var(--rowh);
    gap: var(--gap);
  background: var(--grout);
  border-radius: calc(var(--r) + 4px);
}
@media (max-width: 1299px) { .wall { margin-inline: var(--gutter); } }

.tile {
  position: relative;
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  animation: set 0.55s cubic-bezier(0.2, 0.8, 0.25, 1.15) backwards;
}
@keyframes set {
  from { opacity: 0; transform: translateY(-18px) scale(0.94) rotate(-1.5deg); }
}
.wall > :nth-child(1) { animation-delay: 0.05s; }
.wall > :nth-child(2) { animation-delay: 0.16s; }
.wall > :nth-child(3) { animation-delay: 0.24s; }
.wall > :nth-child(4) { animation-delay: 0.3s; }
.wall > :nth-child(5) { animation-delay: 0.38s; }
.wall > :nth-child(6) { animation-delay: 0.44s; }
.wall > :nth-child(7) { animation-delay: 0.5s; }
.wall > :nth-child(8) { animation-delay: 0.56s; }
.wall > :nth-child(9) { animation-delay: 0.62s; }
.wall > :nth-child(10) { animation-delay: 0.68s; }

.wall {
  grid-template-areas:
    "intro intro intro intro intro intro hero hero hero hero hero hero"
    "intro intro intro intro intro intro hero hero hero hero hero hero"
    "intro intro intro intro intro intro hero hero hero hero hero hero"
    "intro intro intro intro intro intro hero hero hero hero hero hero"
    "play play wood wood code code code art art art garden garden"
    "play play wood wood code code code art art art garden garden"
    "play play wood wood code code code art art art garden garden";
}
.a-intro { grid-area: intro; } .a-hero { grid-area: hero; }
.a-play { grid-area: play; } .a-wood { grid-area: wood; } .a-code { grid-area: code; }
.a-art { grid-area: art; } .a-garden { grid-area: garden; }
.a-hero img { object-position: 50% 62%; }
.a-play img { object-position: 50% 45%; }
.a-wood img { object-position: 50% 50%; }
.a-code img { object-position: 50% 55%; }
.a-art img { object-position: 50% 50%; }
.a-garden img { object-position: 50% 12%; }
.intro-facts { font-family: var(--display); font-weight: 700; font-size: 0.98rem; margin: 0 0 1.3em; opacity: 0.8; }

.t-photo { background: var(--plum); }
.t-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.t-photo:hover img { transform: scale(1.04); }
.t-photo figcaption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.2;
  color: var(--cream);
  background: var(--grout);
  padding: 0.3em 0.6em 0.35em;
  border-radius: 3px;
}

.tile-intro { padding: clamp(20px, 3vw, 40px); display: flex; flex-direction: column; justify-content: center; }
.tile-intro h1 { font-size: clamp(1.9rem, 3.5vw, 3.15rem); margin-bottom: 0.55em; }
.intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 0; }


@media (max-width: 760px) {
  .wall {
    grid-template-columns: repeat(4, 1fr);
    --rowh: 22vw;
    grid-template-areas:
      "intro intro intro intro" "intro intro intro intro" "intro intro intro intro" "intro intro intro intro"
      "hero hero hero hero" "hero hero hero hero" "hero hero hero hero"
      "play play garden garden" "play play garden garden" "play play garden garden"
      "code code code code" "code code code code"
      "art art art art" "art art art art";
  }
  .a-wood { display: none; }
  .t-photo figcaption { font-size: 0.9rem; left: 6px; bottom: 6px; max-width: calc(100% - 12px); }
}


/* ---------- Bands ---------- */
.band { max-width: var(--wrap); margin-inline: auto; padding: clamp(64px, 9vw, 120px) var(--gutter); }

.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 5vw, 80px); align-items: start; }
.split-head { position: sticky; top: 96px; }
.split-body { font-size: 1.12rem; max-width: 640px; }
.head-note { font-family: var(--serif); font-style: italic; font-size: 1.45rem; line-height: 1.25; color: var(--plum-ink); }
.lede { font-family: var(--display); font-weight: 600; font-size: 1.45rem; line-height: 1.3; letter-spacing: -0.01em; }
.aside {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.1;
  color: var(--plum-ink);
  margin: 1.1em 0;
}
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split-head { position: static; }
}


/* Small print and the moving path */
.small-print { font-size: 0.98rem; color: var(--ink-2); border-top: var(--line); padding-top: 1em; margin-top: 2em; }
.place { margin: 2.2em 0 0; }
.place img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 999px 999px var(--r) var(--r); border: var(--line); }
.place figcaption { margin-top: 10px; font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--ink-2); }

/* Four groups: one long typographic line, no boxes */
.groups { border-block: var(--line); background: var(--yellow); padding: clamp(40px, 6vw, 72px) var(--gutter); }
.groups-title { max-width: var(--wrap); margin: 0 auto clamp(20px, 3vw, 36px); font-size: clamp(1.6rem, 3vw, 2.4rem); }
.groups-title em { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: 0; }
.group-row { max-width: var(--wrap); margin-inline: auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.group { padding: 4px clamp(14px, 2vw, 28px) 4px 0; }
.group + .group { border-left: var(--line); padding-left: clamp(14px, 2vw, 28px); }
.group-name { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4vw, 3.6rem); letter-spacing: -0.045em; line-height: 0.95; margin-bottom: 0.25em; }
.group-note { display: block; font-size: 1.02rem; max-width: 30ch; text-wrap: pretty; }
.group-frame { width: min(100%, 200px); margin-bottom: 18px; }
.g-roots .group-photo { object-position: center 50%; } .g-saplings .group-photo { object-position: center 50%; }
.g-canopy .group-photo { object-position: center 40%; } .g-acorns .group-photo { object-position: center 50%; }
.group-photo { display: block; width: 100%; aspect-ratio: 1 / 1.1547; object-fit: cover; object-position: center 30%; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
@media (min-width: 761px) and (max-width: 1100px) {
  .group-row { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .group:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 760px) {
  .group-row { grid-template-columns: 1fr; }
  .group + .group { border-left: 0; border-top: var(--line); padding: 18px 0 4px; }
  .group { display: grid; grid-template-columns: 110px 1fr; column-gap: 18px; align-items: center; }
  .group-frame { grid-row: span 2; width: 110px; margin-bottom: 0; }
}

/* The day: a clock rail on grout */
.day { background: var(--grout); color: var(--cream); }
.day-inner { max-width: var(--wrap); margin-inline: auto; padding: clamp(64px, 8vw, 110px) var(--gutter); display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.day-head { position: sticky; top: 96px; }
.day-head .eyebrow { color: var(--yellow); }
.day-head > p:not(.eyebrow) { font-family: var(--serif); font-style: italic; font-size: 1.4rem; line-height: 1.3; color: color-mix(in srgb, var(--cream) 85%, transparent); }
.day-head > p.day-week { font-family: var(--body); font-style: normal; font-size: 1rem; line-height: 1.6; text-wrap: pretty; }
.board { margin: 28px 0 0; }
.board img { border-radius: var(--r); transform: rotate(-1.5deg); box-shadow: 8px 8px 0 var(--yellow); }
.board figcaption { margin-top: 16px; font-size: 0.92rem; color: color-mix(in srgb, var(--cream) 70%, transparent); }
.clock { list-style: none; margin: 0; padding: 0; position: relative; }
.clock::before { content: ""; position: absolute; left: 7.2rem; top: 0.6rem; bottom: 0.6rem; width: 2px; background: color-mix(in srgb, var(--cream) 22%, transparent); }
.clock li { display: grid; grid-template-columns: 6.4rem 1fr; gap: 1.6rem; align-items: baseline; padding: 0.85rem 0; position: relative; }
.clock li::after { content: ""; position: absolute; left: calc(7.2rem - 7px); top: 1.45rem; width: 16px; aspect-ratio: 1.15; background: var(--blue); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.clock li:nth-child(3n+2)::after { background: var(--pink); }
.clock li:nth-child(3n)::after { background: var(--yellow); }
.clock time { font-family: var(--display); font-weight: 800; font-size: clamp(1.7rem, 2.8vw, 2.4rem); letter-spacing: -0.03em; text-align: right; color: var(--cream); }
.clock p { margin: 0; padding-left: 1rem; font-size: 1.05rem; color: color-mix(in srgb, var(--cream) 82%, transparent); }
.clock strong { color: var(--cream); font-family: var(--display); font-size: 1.2rem; }
.clock .clock-all time { color: var(--yellow); }
.clock .clock-all strong { color: var(--yellow); }
@media (max-width: 860px) {
  .day-inner { grid-template-columns: 1fr; }
  .day-head { position: static; }
  .clock::before { left: 4.6rem; }
  .clock li { grid-template-columns: 4rem 1fr; gap: 1.2rem; }
  .clock li::after { left: calc(4.6rem - 7px); }
}

/* Longer rhythms: a definition index in serif, no cards */
.rhythms { background: var(--blue); border-bottom: var(--line); }
.rhythms-inner { max-width: var(--wrap); margin-inline: auto; padding: clamp(64px, 8vw, 104px) var(--gutter); }
.rhythms h2 { max-width: 18ch; }
.rhythm-list { margin: clamp(24px, 4vw, 44px) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 5vw, 72px); }
.rhythm-list > div { border-top: var(--line); padding: 18px 0 22px; }
.rhythm-list dt { font-family: var(--serif); font-style: italic; font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1; margin-bottom: 0.3em; }
.rhythm-list dd { margin: 0; font-size: 1.04rem; max-width: 46ch; }
@media (max-width: 760px) { .rhythm-list { grid-template-columns: 1fr; } }

/* Moments from the record */
.lately-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 48px); }
.moments { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: clamp(18px, 2.4vw, 30px); }
.moment { margin: 0; }
.moment img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--line); border-radius: var(--r); box-shadow: var(--lift); }
.moment figcaption { margin-top: 14px; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.moment figcaption cite { font-style: italic; }
.m-tall { grid-row: span 2; }
.m-tall img { aspect-ratio: 3 / 4.2; }
.m-wide { grid-column: span 2; }
.m-wide img { aspect-ratio: 2 / 1; }
.lately-more { margin: clamp(32px, 4vw, 48px) 0 0; }
.lately-more .btn-text { white-space: normal; }
@media (max-width: 860px) {
  .moments { grid-template-columns: 1fr 1fr; }
  .m-tall { grid-row: auto; grid-column: span 2; }
  .m-tall img { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .moments { grid-template-columns: 1fr; }
  .m-tall, .m-wide { grid-column: auto; }
  .m-wide img { aspect-ratio: 2 / 1; }
}

/* The four roots: four big lines on plum, hexagon bullets, no boxes */
.roots { background: var(--plum); color: var(--cream); }
.roots-inner { max-width: var(--wrap); margin-inline: auto; padding: clamp(72px, 9vw, 120px) var(--gutter); }
.roots .eyebrow { color: var(--yellow); }
.roots-title { max-width: 20ch; font-size: clamp(2rem, 4.2vw, 3.4rem); }
.root-lines { list-style: none; margin: clamp(28px, 4vw, 52px) 0 0; padding: 0; counter-reset: r; }
.root-lines li { counter-increment: r; position: relative; padding: clamp(16px, 2.2vw, 26px) 0 clamp(16px, 2.2vw, 26px) clamp(64px, 7vw, 96px); border-top: 2px solid color-mix(in srgb, var(--cream) 28%, transparent); font-size: 1.05rem; }
.root-lines li::before { content: counter(r); position: absolute; left: 0; top: clamp(14px, 2vw, 24px); width: clamp(42px, 4.4vw, 56px); aspect-ratio: 1.15; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: var(--ink); background: var(--yellow); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.root-lines li:nth-child(2)::before { background: var(--blue); }
.root-lines li:nth-child(3)::before { background: var(--pink); }
.root-lines li:nth-child(4)::before { background: var(--cream); }
.root-lines strong { display: block; font-family: var(--display); font-size: clamp(1.5rem, 3.2vw, 2.6rem); line-height: 1.08; letter-spacing: -0.03em; }
.root-lines span { display: block; margin-top: 0.35em; color: color-mix(in srgb, var(--cream) 82%, transparent); font-size: 1.08rem; }
.roots-note { margin: 2em 0 0; font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: color-mix(in srgb, var(--cream) 80%, transparent); }

/* Who this is for */
.fit { padding-top: clamp(64px, 9vw, 120px); }
.fit-list { list-style: none; margin: 0; padding: 0; border-top: var(--line); }
.fit-list li {
  position: relative;
  padding: 22px 0 22px 46px;
  border-bottom: var(--line);
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
}
.fit-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 27px;
  width: 24px;
  aspect-ratio: 1.15;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.fit-list li:nth-child(1)::before { background: var(--yellow); }
.fit-list li:nth-child(2)::before { background: var(--blue); }
.fit-list li:nth-child(3)::before { background: var(--pink); }
.fit-list li:nth-child(4)::before { background: var(--plum); }

/* Who's here */
.here { padding-top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.here-photo { margin: 0; }
.here-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border: var(--line); border-radius: var(--r); box-shadow: 10px 10px 0 var(--pink); }
.here-photo figcaption { margin-top: 16px; font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--ink-2); }
.here-text { font-size: 1.1rem; }
@media (max-width: 860px) { .here { grid-template-columns: 1fr; } .here-photo { max-width: 460px; } }

/* Come see it */
.visit { background: var(--plum); color: var(--cream); overflow: hidden; }
.visit-inner { max-width: var(--wrap); margin-inline: auto; padding: clamp(72px, 10vw, 132px) var(--gutter) clamp(48px, 6vw, 80px); display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.visit-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, clamp(56px, 6vw, 84px));
  grid-template-areas: "a a b" "a a b" "c d d" "c d d";
  gap: var(--gap);
  padding: var(--gap);
  background: var(--grout);
  border-radius: calc(var(--r) + 4px);
  transform: rotate(2deg);
}
.vw-a { grid-area: a; } .vw-b { grid-area: b; } .vw-c { grid-area: c; } .vw-d { grid-area: d; }
.visit-wall .tile { animation: none; }
@media (max-width: 860px) { .visit-inner { grid-template-columns: 1fr; } .visit-wall { max-width: 420px; transform: rotate(1.5deg); } }
.visit h2 { font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 800; letter-spacing: -0.04em; max-width: 12ch; margin-bottom: 0.35em; }
.visit-inner > p:not(.visit-actions) { max-width: 560px; font-size: 1.15rem; }
.visit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin: 28px 0 0; }
.visit-tiles { display: grid; grid-template-columns: 3fr 1fr 2fr 1.4fr 2.6fr 1fr; gap: 8px; padding: 0 8px; }
.visit-tiles span { height: clamp(28px, 4vw, 48px); border-radius: var(--r) var(--r) 0 0; }
.visit-tiles .t-plum { background: var(--grout); }

/* ---------- Footer ---------- */
.site-footer { background: var(--grout); color: var(--cream); }
.footer-inner {
  position: relative;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(48px, 6vw, 80px) var(--gutter) 40px;
  display: grid;
  grid-template-columns: 2.2fr repeat(4, 1fr);
  gap: 32px;
  font-size: 0.97rem;
}
.footer-brand img { width: 190px; margin-bottom: 18px; }
.footer-brand p { max-width: 30ch; color: color-mix(in srgb, var(--cream) 80%, transparent); }
.footer-label { font-family: var(--display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yellow); margin-bottom: 0.7em; }
.site-footer a { color: var(--cream); text-decoration-color: color-mix(in srgb, var(--cream) 35%, transparent); }
.site-footer a:hover { text-decoration-color: var(--yellow); }
.footer-inner { padding-bottom: clamp(148px, 14vw, 182px); }
.footer-skyline { position: absolute; right: var(--gutter); bottom: clamp(24px, 3vw, 32px); width: 120px; pointer-events: none; }
@media (max-width: 960px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-skyline { width: 84px; }
}

/* ---------- Inner pages (brought over from the old site) ---------- */
main:not(.home) {
  max-width: 800px;
  margin-inline: auto;
  padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(64px, 8vw, 112px);
  font-size: 1.1rem;
}
main:not(.home) h1 { font-size: clamp(2rem, 4.4vw, 3.3rem); margin-top: 1.3em; }
main:not(.home) h1:first-child, main:not(.home) h2:first-child { margin-top: 0; }
main:not(.home) h2 { margin-top: 1.4em; }
main:not(.home) h3 { margin-top: 1.4em; }
main:not(.home) figure { margin: 2em 0; }
main:not(.home) figure img, main:not(.home) p > img { border: var(--line); border-radius: var(--r); }
main:not(.home) blockquote {
  margin: 2em 0;
  padding: 1.4em 1.6em;
  background: var(--cream);
  border: var(--line);
  border-radius: var(--r);
  box-shadow: 5px 5px 0 var(--yellow);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.35;
}
main:not(.home) ul, main:not(.home) ol { padding-left: 1.3em; }
main:not(.home) li { margin-bottom: 0.45em; }
main:not(.home) table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 0.98rem; }
main:not(.home) th, main:not(.home) td { border: 1.5px solid var(--grout); padding: 0.55em 0.75em; text-align: left; vertical-align: top; }
main:not(.home) th { background: var(--paper-2); font-family: var(--display); }
main:not(.home) details { border-bottom: var(--line); padding: 0.9em 0; }
main:not(.home) summary { cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 1.15rem; }
main:not(.home) hr { border: 0; height: 10px; margin: 3em 0; background: linear-gradient(90deg, var(--yellow) 0 22%, var(--paper) 22% 24%, var(--blue) 24% 49%, var(--paper) 49% 51%, var(--pink) 51% 72%, var(--paper) 72% 74%, var(--plum) 74% 100%); border-radius: 3px; }
main:not(.home) iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: var(--line); border-radius: var(--r); }
.button-small { font-size: 0.92rem; padding: 0.5em 0.9em; }

/* Local photo-preview page only */
.preview-banner { max-width: var(--wrap); margin: 16px auto 0; padding: 10px 16px; background: var(--pink); border: var(--line); border-radius: var(--r); font-size: 0.95rem; }
img.cand { outline: 6px solid var(--pink); outline-offset: -6px; }

/* Families say: one block per affirmation, easy to swap */
main.affirmations-page { max-width: var(--wrap); }
.page-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.affirmation-list { columns: 2 380px; column-gap: clamp(18px, 3vw, 32px); }
.affirmation { break-inside: avoid; margin: 0 0 clamp(18px, 3vw, 32px); padding: clamp(22px, 3vw, 34px); border-radius: var(--r); display: grid; grid-template-columns: 64px 1fr; gap: 6px 18px; }
.affirmation img { grid-row: span 2; width: 64px; height: 64px; object-fit: cover; border-radius: 50%; border: var(--line); }
.affirmation:not(:has(img)) { grid-template-columns: 1fr; }
main:not(.home) .affirmation blockquote { grid-column: -2 / -1; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; font-size: 1.12rem; line-height: 1.45; }
.affirmation blockquote p { margin: 0 0 0.7em; }
.affirmation figcaption { grid-column: -2 / -1; font-size: 0.95rem; }
.affirmation figcaption strong { display: block; font-family: var(--display); font-size: 1.05rem; }
.affirmation figcaption span { opacity: 0.85; }
main:not(.home) .affirmation img { width: 72px; height: 72px; border: 0; border-radius: 0; object-fit: contain; }

/* Rhythms with a photo each */
.rhythm-list { grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 36px); }
.rhythm-list > div { border-top: 0; padding: 0; }
.rhythm-list img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--line); border-radius: var(--r); box-shadow: var(--lift); margin-bottom: 16px; }
.rhythm-list > div:nth-child(3n+2) img { border-radius: 999px 999px var(--r) var(--r); }
.rhythm-list .hex-frame img { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); border: 0; border-radius: 0; box-shadow: none; aspect-ratio: 1.15; margin-bottom: 0; }
.rhythm-list .hex-frame { margin-bottom: 20px; }
@media (max-width: 860px) { .rhythm-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rhythm-list { grid-template-columns: 1fr; } }

/* Photo strips on inner pages: wider than the text column, three shapes */
main:not(.home) .photo-strip { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(10px, 1.6vw, 18px); align-items: end; margin: clamp(32px, 5vw, 56px) calc(-1 * min(14vw, 180px)); }
main:not(.home) .photo-strip.two { grid-template-columns: 1.4fr 1fr; margin-inline: calc(-1 * min(8vw, 100px)); }
main:not(.home) .photo-strip figure { margin: 0; }
main:not(.home) .photo-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--line); border-radius: var(--r); box-shadow: var(--lift); }
main:not(.home) .photo-strip figure:nth-child(2) img { aspect-ratio: 4 / 5; border-radius: 999px 999px var(--r) var(--r); }
main:not(.home) .photo-strip figure:nth-child(3) img { aspect-ratio: 1.15; border: 0; box-shadow: none; border-radius: 0; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
main:not(.home) .photo-strip figure:nth-child(3) { filter: var(--hex-edge); }
main:not(.home) .photo-strip img.crop-top { object-position: 50% 28%; }
main:not(.home) .photo-strip.two figure:nth-child(2) img { aspect-ratio: 1; }
@media (max-width: 1100px) { main:not(.home) .photo-strip, main:not(.home) .photo-strip.two { margin-inline: 0; } }
@media (max-width: 560px) {
  main:not(.home) .photo-strip { grid-template-columns: 1fr 1fr; }
  main:not(.home) .photo-strip figure:first-child { grid-column: 1 / -1; }
}
.affirmations-page .photo-strip { margin-inline: 0 !important; }

/* Rewritten inner pages: About, A day here, Admissions */
main:not(.home) > .eyebrow { margin-bottom: 0.8rem; }
main:not(.home) > .eyebrow + h1 { margin-top: 0; font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
main:not(.home) .lede { font-size: clamp(1.25rem, 2vw, 1.5rem); }
main:not(.home) blockquote p:last-child { font-family: var(--display); font-style: normal; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--plum-ink); margin: 0.6em 0 0; }
.page-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 1.6em; }

.term-list { margin: 1.4em 0; }
.term-list > div { display: grid; grid-template-columns: 11rem 1fr; gap: 0 20px; padding: 14px 0; border-top: 1.5px solid color-mix(in srgb, var(--grout) 25%, transparent); }
.term-list > div:last-child { border-bottom: 1.5px solid color-mix(in srgb, var(--grout) 25%, transparent); }
.term-list dt { font-family: var(--serif); font-style: italic; font-size: 1.55rem; line-height: 1.1; }
.term-list dd { margin: 0; }
@media (max-width: 560px) { .term-list > div { grid-template-columns: 1fr; } }

main:not(.home) .belief-list { list-style: none; padding: 0; counter-reset: b; margin: 1.4em 0; }
.belief-list li { counter-increment: b; position: relative; padding: 4px 0 18px 64px; margin: 0; }
.belief-list li::before { content: counter(b); position: absolute; left: 0; top: 2px; width: 44px; aspect-ratio: 1.15; display: grid; place-items: center; font-family: var(--display); font-weight: 800; background: var(--yellow); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.belief-list li:nth-child(2)::before { background: var(--blue); }
.belief-list li:nth-child(3)::before { background: var(--pink); }
.belief-list li:nth-child(4)::before { background: var(--plum); color: var(--cream); }
.belief-list strong { display: block; font-family: var(--display); font-size: 1.25rem; line-height: 1.2; }

main:not(.home) .timeline { list-style: none; padding: 0; margin: 1.4em 0 2em; position: relative; }
.timeline::before { content: ""; position: absolute; left: 8.9rem; top: 10px; bottom: 10px; width: 2px; background: color-mix(in srgb, var(--grout) 22%, transparent); }
.timeline li { display: grid; grid-template-columns: 8rem 1fr; gap: 1.9rem; padding: 12px 0; margin: 0; position: relative; }
.timeline li::after { content: ""; position: absolute; left: calc(8.9rem - 8px); top: 19px; width: 18px; aspect-ratio: 1.15; background: var(--blue); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.timeline li:nth-child(3n+2)::after { background: var(--pink); }
.timeline li:nth-child(3n)::after { background: var(--yellow); }
.timeline time { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; text-align: right; padding-top: 2px; white-space: nowrap; }
.timeline strong { font-family: var(--display); }
.timeline .timeline-all time, .timeline .timeline-all strong { color: var(--pink-ink); }
@media (max-width: 560px) {
  .timeline::before { left: 0.45rem; }
  .timeline li { grid-template-columns: 1fr; gap: 2px; padding-left: 2rem; }
  .timeline li::after { left: -1px; top: 16px; }
  .timeline time { text-align: left; }
}

main:not(.home) .steps { list-style: none; padding: 0; counter-reset: s; margin: 1.4em 0; }
.steps li { counter-increment: s; position: relative; padding: 18px 0 18px 70px; margin: 0; border-top: 1.5px solid color-mix(in srgb, var(--grout) 25%, transparent); }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 14px; font-family: var(--display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--plum); }
.steps strong { display: block; font-family: var(--display); font-size: 1.2rem; }
main:not(.home) .fit-list { padding-left: 0; }
main:not(.home) .fit-list li { font-size: 1.15rem; margin: 0; }
main:not(.home) blockquote p:first-child { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; }

/* ---------- Forms (Org posts them to /forms/<name>; no scripts) ---------- */
main.form-page { max-width: 760px; }
.org-form { margin-top: clamp(28px, 4vw, 44px); }
.form-note { font-size: 0.95rem; color: var(--ink-2); }
.req { color: var(--pink-ink); font-weight: 700; }
.form-section {
  margin: 0 0 clamp(22px, 3vw, 32px);
  padding: clamp(20px, 3vw, 32px);
  background: var(--cream);
  border: var(--line);
  border-radius: var(--r);
  box-shadow: var(--lift);
  min-width: 0;
}
.form-section > legend {
  float: left;
  width: 100%;
  margin-bottom: 0.9em;
  padding: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.25;
}
.form-section > legend + * { clear: left; }
main:not(.home) .form-section h3 { margin-top: 0.4em; font-size: 1.15rem; }
.field { margin: 0 0 1.4em; border: 0; padding: 0; min-width: 0; }
.field:last-child { margin-bottom: 0; }
.field > label:not(.choice), .field > legend {
  display: block;
  margin-bottom: 0.45em;
  padding: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.35;
}
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 18px; }
.hint { margin: 0 0 0.7em; font-size: 0.95rem; color: var(--ink-2); line-height: 1.5; }
.hint-list { margin: 0 0 0.8em; font-size: 0.95rem; color: var(--ink-2); }
.org-form input:not([type="radio"]):not([type="checkbox"]), .org-form textarea, .org-form select {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0.6em 0.75em;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: var(--line);
  border-radius: var(--r);
}
.org-form textarea { resize: vertical; line-height: 1.5; }
.org-form input:focus-visible, .org-form textarea:focus-visible, .org-form select:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}
.choice {
  display: flex;
  gap: 0.7em;
  align-items: flex-start;
  margin: 0 0 0.5em;
  padding: 0.7em 0.9em;
  min-height: 48px;
  background: #fff;
  border: 1.5px solid var(--grout);
  border-radius: var(--r);
  cursor: pointer;
  line-height: 1.4;
}
.choice:hover { background: var(--paper-2); }
.choice input { flex: none; width: 1.2em; height: 1.2em; margin: 0.12em 0 0; accent-color: var(--plum); }
.choice:has(input:checked) { background: var(--blue); }
.choice:has(input:focus-visible) { outline: 3px solid var(--yellow); outline-offset: 2px; }
.choices-inline { display: flex; flex-wrap: wrap; gap: 10px; }
.choices-inline > legend, .choices-inline > .hint { flex-basis: 100%; }
.choices-inline .choice { margin: 0; min-width: 72px; justify-content: center; }
.choice-confirm { margin-top: 1em; }
.only-if {
  display: block;
  margin-bottom: 0.25em;
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--plum-ink);
}
.field-only-if { padding-top: 1.1em; border-top: 1.5px dashed var(--gray); }
main:not(.home) .tuition-table { margin: 1.2em 0 1.6em; background: #fff; font-variant-numeric: tabular-nums; }
.tuition-table caption { caption-side: top; text-align: left; padding-bottom: 0.5em; font-family: var(--display); font-weight: 700; }
main:not(.home) .tuition-table td, main:not(.home) .tuition-table thead th:not(:first-child) { text-align: right; }
.choice > span:not(.req) { flex: 1; min-width: 0; }
.choice > span:not(.req) > strong:first-child { display: block; font-family: var(--display); }
.form-submit { margin-top: clamp(24px, 3vw, 36px); }
.org-form button.button { cursor: pointer; font-size: 1.05rem; padding: 0.95em 1.5em; }
.small-print { margin-top: 2.5em; font-size: 0.9rem; color: var(--ink-2); }
@media (max-width: 560px) {
  .form-section { padding: 18px 16px; box-shadow: 3px 3px 0 var(--grout); }
  main:not(.home) .tuition-table { font-size: 0.88rem; }
  main:not(.home) .tuition-table th, main:not(.home) .tuition-table td { padding: 0.5em 0.4em; }
}

/* Hexagon photo frames: same edge and lift as the square and arch photos */
.hex-frame { display: block; filter: var(--hex-edge); }

/* Krishnamurti, given a band of its own just before the four roots */
.quote-band { max-width: var(--wrap); margin-inline: auto; padding: clamp(56px, 8vw, 104px) var(--gutter) clamp(40px, 6vw, 72px); }
.quote-band blockquote { margin: 0 auto; max-width: 880px; text-align: center; }
.quote-band p { font-family: var(--serif); font-style: italic; font-size: clamp(1.7rem, 3.6vw, 3rem); line-height: 1.14; color: var(--plum); margin: 0 0 0.6em; text-wrap: balance; }
.quote-band cite { font-family: var(--display); font-style: normal; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); opacity: 0.75; }

/* Hexagon in a row of 4:3 photos: same height as its neighbours, centred, so headings line up */
.rhythm-list .hex-frame { margin-bottom: 16px; display: flex; justify-content: center; }
.rhythm-list .hex-frame img { width: 86.25%; aspect-ratio: 1.15; }
.rhythm-list > div { text-align: center; }
.rhythm-list dt { font-size: clamp(1.6rem, 2.3vw, 2.15rem); text-wrap: balance; }
@media (min-width: 1000px) { .rhythm-list dt { white-space: nowrap; } }
.rhythm-list dd { margin-inline: auto; max-width: 38ch; text-wrap: pretty; }

/* Founders video: a vertical YouTube embed framed as a tile, with a pull quote from each founder */
.founders { background: var(--paper-2); border-block: var(--line); }
.founders-inner { max-width: var(--wrap); margin-inline: auto; padding: clamp(64px, 8vw, 104px) var(--gutter); display: grid; grid-template-columns: minmax(240px, 340px) 1fr; grid-template-areas: "video head" "video quotes"; column-gap: clamp(32px, 6vw, 96px); align-items: start; }
.founders-head { grid-area: head; }
.founders-video { grid-area: video; margin: 0; }
.founder-quotes { grid-area: quotes; }
.founders-frame { aspect-ratio: 9 / 16; border: 3px solid var(--grout); border-radius: 14px; overflow: hidden; background: var(--grout); box-shadow: 10px 10px 0 var(--yellow), 10px 10px 0 3px var(--grout); }
.founders-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.founders-tiles { display: flex; gap: 8px; margin-top: 26px; }
.founders-tiles span { flex: 1; height: 16px; border: var(--line); border-radius: 4px; }
.ft-yellow { background: var(--yellow); } .ft-pink { background: var(--pink); } .ft-blue { background: var(--blue); } .ft-plum { background: var(--plum); }
.founder-quotes { list-style: none; padding: 0; margin: clamp(20px, 3vw, 32px) 0 0; display: grid; gap: 22px; }
.founder-quotes li { border-top: var(--line); padding-top: 18px; }
.founder-quotes blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.45rem, 2.2vw, 1.95rem); line-height: 1.2; text-wrap: pretty; }
.founder-quotes cite { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-style: normal; font-family: var(--display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; }
.founder-quotes cite::before { content: ""; width: 16px; height: 18px; background: var(--c); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.fq-lacy { --c: var(--yellow); } .fq-nancy { --c: var(--pink); } .fq-tomis { --c: var(--blue); }
@media (max-width: 760px) {
  .founders-inner { grid-template-columns: 1fr; grid-template-areas: "head" "video" "quotes"; }
  .founders-video { width: min(100%, 320px); margin: 24px auto 8px; }
}
.founders h2 { scroll-margin-top: 120px; }
.fit-next { margin: 28px 0 0; }

/* FAQ: topics with a jump row, each question a <details> that opens in place (no script) */
.faq-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 clamp(28px, 4vw, 44px); }
.faq-nav a { font-family: var(--display); font-weight: 700; font-size: 0.92rem; text-decoration: none; color: var(--grout); background: var(--cream); border: var(--line); border-radius: 999px; padding: 7px 14px; }
.faq-nav a:hover { background: var(--yellow); }
.faq-group { margin-bottom: clamp(32px, 5vw, 52px); }
.faq-group h2 { scroll-margin-top: 110px; margin-bottom: 14px; }
.faq-yellow { --c: var(--yellow); } .faq-pink { --c: var(--pink); } .faq-blue { --c: var(--blue); } .faq-plum { --c: var(--plum); }
.faq { background: var(--cream); border: var(--line); border-radius: 8px; box-shadow: var(--lift); margin-bottom: 14px; overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 16px 18px; font-family: var(--display); font-weight: 700; font-size: 1.08rem; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: ""; flex: none; width: 16px; height: 18px; background: var(--c); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.faq summary::after { content: "+"; flex: none; margin-left: auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: var(--line); font-size: 1.2rem; line-height: 1; transition: rotate 0.2s; }
.faq[open] summary::after { rotate: 45deg; background: var(--c); }
.faq[open] summary { border-bottom: var(--line); }
.faq summary:focus-visible { outline: 3px solid var(--plum); outline-offset: -3px; }
.faq-a { padding: 6px 22px 10px; }
.faq-a > :first-child { margin-top: 1em; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* Resources page: cards for the key reads, columns for the long lists, tiles for the kids' picks */
.res { max-width: var(--wrap); margin-inline: auto; padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(56px, 8vw, 104px); }
.res-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 64px); }
.res-note { margin-top: 28px; background: var(--cream); border: var(--line); border-radius: 10px; box-shadow: 6px 6px 0 var(--yellow), 6px 6px 0 2px var(--grout); padding: 20px 24px; }
.res-note-title { font-family: var(--display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 8px; }
.res-note ul { margin: 0; padding-left: 1.2em; }
.res-note li { margin: 0.45em 0; text-wrap: pretty; }
.res-section { padding-top: clamp(32px, 5vw, 56px); margin-top: clamp(32px, 5vw, 56px); border-top: var(--line); }
.res-section h2 { margin-bottom: 8px; }
.res-sub { max-width: 70ch; margin: 0 0 clamp(20px, 3vw, 32px); color: var(--ink-2); text-wrap: pretty; }
.res-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(16px, 2vw, 24px); }
.res-card { background: var(--cream); border: var(--line); border-radius: 10px; box-shadow: var(--lift); padding: 20px 22px; }
.res-card:nth-child(4n+1) { --c: var(--yellow); } .res-card:nth-child(4n+2) { --c: var(--pink); } .res-card:nth-child(4n+3) { --c: var(--blue); } .res-card:nth-child(4n+4) { --c: var(--plum); }
.res-kind { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 10px; }
.res-kind::before { content: ""; width: 14px; height: 16px; background: var(--c); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.res-card h3 { font-size: 1.2rem; line-height: 1.25; margin: 0 0 10px; }
.res-card p:last-child { margin: 0; font-size: 0.98rem; text-wrap: pretty; }
.res-by { font-family: var(--body); font-weight: 400; font-size: 0.92em; color: var(--ink-2); }
.res-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.res-cols h3 { font-size: 1.05rem; margin: 0 0 10px; }
.res-list { list-style: none; padding: 0; margin: 0; }
.res-list li { padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--grout) 18%, transparent); text-wrap: pretty; }
.res-list-cols { columns: 2; column-gap: clamp(20px, 3vw, 40px); }
.res-list-cols li { break-inside: avoid; }
.kb-genre { margin-bottom: clamp(24px, 4vw, 40px); }
.kb-genre h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 0 0 14px; }
.kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; align-items: start; }
.kb-tile { background: var(--cream); border: var(--line); border-radius: 10px; padding: 16px 18px; }
.kb-genre:nth-of-type(4n+1) .kb-tile { box-shadow: 5px 5px 0 var(--yellow), 5px 5px 0 2px var(--grout); }
.kb-genre:nth-of-type(4n+2) .kb-tile { box-shadow: 5px 5px 0 var(--pink), 5px 5px 0 2px var(--grout); }
.kb-genre:nth-of-type(4n+3) .kb-tile { box-shadow: 5px 5px 0 var(--blue), 5px 5px 0 2px var(--grout); }
.kb-genre:nth-of-type(4n+4) .kb-tile { box-shadow: 5px 5px 0 var(--plum), 5px 5px 0 2px var(--grout); }
.kb-sub { font-family: var(--display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 6px; }
.kb-tile h4 { font-family: var(--display); font-weight: 700; font-size: 1.02rem; line-height: 1.3; margin: 0 0 8px; }
.kb-tile blockquote { margin: 10px 0 0; }
.kb-tile blockquote p { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.12rem; line-height: 1.3; text-wrap: pretty; }
.kb-tile cite { display: block; margin-top: 4px; font-style: normal; font-size: 0.82rem; color: var(--ink-2); }
@media (max-width: 860px) { .res-cols { grid-template-columns: 1fr; } .res-list-cols { columns: 1; } }

/* The generic page rules (main:not(.home) …) outrank the component rules above; restate the parts that clash */
main.res { max-width: var(--wrap); }
main:not(.home) .res-card h3, main:not(.home) .res-cols h3, main:not(.home) .kb-genre h3, main:not(.home) .res-section h2 { margin-top: 0; }
main:not(.home) .res-list { padding-left: 0; }
main:not(.home) .res-list li, main:not(.home) .res-note li { margin-bottom: 0; }
main:not(.home) .kb-tile blockquote { margin: 10px 0 0; padding: 0; background: none; border: 0; box-shadow: none; font-size: inherit; max-width: none; }
main:not(.home) details.faq { border: var(--line); padding: 0; }
main:not(.home) .faq summary { font-size: 1.08rem; }
main:not(.home) .kb-tile blockquote p { font-size: 1.02rem; line-height: 1.32; }
main:not(.home) .kb-tile blockquote + blockquote { margin-top: 12px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--grout) 18%, transparent); }

/* Tuition tiers: cards for what each tier costs, a plain table for which tier a family is in */
.tiers { margin: 2em 0; }
main:not(.home) .tiers-title { margin: 1.6em 0 0.6em; font-size: 1.25rem; }
main:not(.home) .tiers > .tiers-title:first-child { margin-top: 0; }
.tier-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tier-card { background: var(--cream); border: var(--line); border-radius: 10px; padding: 16px 16px 14px; box-shadow: 5px 5px 0 var(--c), 5px 5px 0 2px var(--grout); }
.tc-1 { --c: var(--yellow); } .tc-2 { --c: var(--blue); } .tc-3 { --c: var(--pink); } .tc-4 { --c: var(--plum); }
main:not(.home) .tier-card p { margin: 0; }
.tier-name { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; }
.tier-name::before { content: ""; width: 14px; height: 16px; background: var(--c); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
main:not(.home) .tier-tuition { font-family: var(--display); font-weight: 800; font-size: 1.9rem; letter-spacing: -0.03em; margin: 6px 0 10px; }
main:not(.home) .tier-line { font-size: 0.9rem; color: var(--ink-2); line-height: 1.35; }
main:not(.home) .tier-pay { margin-top: 10px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--grout) 20%, transparent); font-size: 0.98rem; }
.tier-pay strong { font-family: var(--display); font-size: 1.15rem; }
main:not(.home) .tiers-note { font-size: 1rem; color: var(--ink-2); max-width: 62ch; }
.tier-table-wrap { overflow-x: auto; }
main:not(.home) .tier-table { margin: 0.5em 0 0; background: var(--cream); font-variant-numeric: tabular-nums; }
main:not(.home) .tier-table caption { caption-side: top; text-align: left; font-family: var(--display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; padding-bottom: 8px; }
main:not(.home) .tier-table th, main:not(.home) .tier-table td { text-align: right; }
main:not(.home) .tier-table th[scope="row"], main:not(.home) .tier-table thead th:first-child { text-align: left; }
main:not(.home) .tier-table tbody tr:nth-child(even) { background: var(--paper-2); }
@media (max-width: 760px) { .tier-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) {
  main:not(.home) .tier-table { font-size: 0.86rem; }
  main:not(.home) .tier-table th, main:not(.home) .tier-table td { padding: 0.5em 0.45em; }
  main:not(.home) .tier-table thead th:first-child { white-space: normal; width: 3.5em; }
}

/* Collapsible form sections (<details class="form-section" open>): Org's form script folds all but
   the first and opens any section with a missing answer on Submit. The marker beside each title is
   CSS only: "To do" while a required answer is missing, a check once none are, "Optional" when the
   section requires nothing. */
main:not(.home) details.form-section { padding: 0; border: var(--line); }
main:not(.home) details.form-section > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  padding: clamp(16px, 2.4vw, 22px) clamp(20px, 3vw, 32px);
  font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1.25;
}
details.form-section > summary::-webkit-details-marker { display: none; }
details.form-section > summary::before {
  content: "+"; order: 3; flex: none; display: grid; place-items: center; width: 30px; height: 30px;
  border: var(--line); border-radius: 50%; font-size: 1.2rem; line-height: 1; transition: rotate 0.2s;
}
details.form-section[open] > summary::before { rotate: 45deg; }
details.form-section[open] > summary { border-bottom: var(--line); }
details.form-section > summary::after {
  order: 2; margin-left: auto; flex: none; font-family: var(--display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; border: var(--line); border-radius: 999px;
}
details.form-section:has(:invalid) > summary::after { content: "To do"; background: var(--paper); }
details.form-section:not(:has(:invalid)) > summary::after { content: "\2713  Done"; background: var(--yellow); }
details.form-section:not(:has([required])) > summary::after { content: "Optional"; background: var(--blue); }
details.form-section > summary:focus-visible { outline: 3px solid var(--plum); outline-offset: -3px; }
details.form-section > summary ~ * { margin-inline: clamp(20px, 3vw, 32px); }
details.form-section > summary + * { margin-top: clamp(18px, 2.6vw, 26px); }
details.form-section > :last-child { margin-bottom: clamp(20px, 3vw, 32px); }
@media (prefers-reduced-motion: reduce) { details.form-section > summary::before { transition: none; } }

/* Coworking page: hero with one big photo, feature tiles with their own photos, a small mosaic */
main.cowork { max-width: var(--wrap); }
.cw-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
main:not(.home) .cw-hero h1 { margin-top: 0.2em; }
.cw-actions { margin-top: 1.4em; }
main:not(.home) .cw-hero-photo { margin: 0; }
main:not(.home) .cw-hero-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: var(--line); border-radius: 12px; box-shadow: 10px 10px 0 var(--yellow), 10px 10px 0 3px var(--grout); }
.cw-section { margin-top: clamp(48px, 7vw, 88px); }
main:not(.home) .cw-section h2 { margin: 0 0 18px; }
.cw-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px); }
main:not(.home) .cw-feature { margin: 0; background: var(--cream); border: var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--lift); }
main:not(.home) .cw-feature img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 0; border-radius: 0; border-bottom: var(--line); }
.cw-feature figcaption { padding: 14px 16px 16px; font-size: 0.98rem; color: var(--ink-2); }
.cw-feature figcaption strong { display: block; font-family: var(--display); font-size: 1.1rem; color: var(--grout); margin-bottom: 2px; }
.cw-section:nth-of-type(2) .cw-feature:nth-child(1) { box-shadow: 5px 5px 0 var(--yellow), 5px 5px 0 2px var(--grout); }
.cw-section:nth-of-type(2) .cw-feature:nth-child(2) { box-shadow: 5px 5px 0 var(--blue), 5px 5px 0 2px var(--grout); }
.cw-section:nth-of-type(2) .cw-feature:nth-child(3) { box-shadow: 5px 5px 0 var(--pink), 5px 5px 0 2px var(--grout); }
.cw-who { margin-top: clamp(48px, 7vw, 88px); padding-top: clamp(32px, 5vw, 56px); border-top: var(--line); display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 5vw, 64px); align-items: start; }
main:not(.home) .cw-who h2 { margin-top: 0; }
.cw-grid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.cw-grid figure:first-child { grid-row: span 2; }
main:not(.home) .cw-grid figure { margin: 0; }
main:not(.home) .cw-grid img { width: 100%; height: 100%; min-height: 140px; object-fit: cover; border: var(--line); border-radius: 8px; }
@media (max-width: 860px) {
  .cw-hero, .cw-who { grid-template-columns: 1fr; }
  .cw-features { grid-template-columns: 1fr; }
  main:not(.home) .cw-hero-photo img { aspect-ratio: 4 / 3; }
}

/* Resources page, second pass: topic links, a two-up section, collapsible lists, and the kids' picks
   as a masonry shelf (CSS columns, so short and long reviews pack without gaps). */
.res-head .faq-nav { margin-top: 24px; }
.res-card-by { margin: -6px 0 8px !important; font-size: 0.9rem; color: var(--ink-2); }
.res-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); }
.res-list .res-by { display: inline; }
.res-count { margin-left: 8px; font-family: var(--body); font-weight: 600; font-size: 0.85rem; color: var(--ink-2); }
main.res details.faq { margin-bottom: 12px; }
main:not(.home) .res-section > .faq + .faq { margin-top: 0; }
.kb-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(24px, 4vw, 36px); }
.kb-nav a { font-family: var(--display); font-weight: 700; font-size: 0.88rem; text-decoration: none; color: var(--grout); background: var(--cream); border: var(--line); border-radius: 999px; padding: 6px 12px; }
.kb-nav a:hover { background: var(--yellow); }
.kb-nav a span { font-family: var(--body); font-weight: 600; color: var(--ink-2); margin-left: 4px; }
.kb-c0 { --c: var(--yellow); } .kb-c1 { --c: var(--pink); } .kb-c2 { --c: var(--blue); } .kb-c3 { --c: var(--plum); }
main:not(.home) .kb-genre h3 { display: flex; align-items: center; gap: 10px; scroll-margin-top: 110px; }
.kb-genre h3::before { content: ""; width: 18px; height: 20px; background: var(--c); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.kb-shelf { columns: 4 220px; column-gap: 14px; }
main:not(.home) .kb-genre .kb-tile { break-inside: avoid; display: block; margin: 0 0 14px; box-shadow: 4px 4px 0 var(--c), 4px 4px 0 2px var(--grout); }
main:not(.home) .kb-tile h4 { margin: 0; }
.kb-by { margin: 2px 0 0; font-size: 0.86rem; color: var(--ink-2); }
main:not(.home) .kb-tile .kb-by { margin: 2px 0 0; }
@media (max-width: 860px) { .res-two { grid-template-columns: 1fr; } }
main:not(.home) .res-list .res-feature { background: var(--cream); border: var(--line); border-radius: 8px; box-shadow: 4px 4px 0 var(--yellow), 4px 4px 0 2px var(--grout); padding: 12px 14px; margin-bottom: 10px; }
.res-feature a { font-weight: 700; }
.res-feature .res-by { display: block; margin-top: 4px; }

/* Families say: the generic blockquote rules (first paragraph big, last paragraph as a small-caps
   attribution) suit a one-line pull quote, not a family's whole story. Here the first paragraph
   leads in the serif and every paragraph after it reads as plain text. */
main:not(.home) .affirmation blockquote p { font-family: var(--body); font-style: normal; font-weight: 400; font-size: 1rem; line-height: 1.55; letter-spacing: 0; text-transform: none; color: inherit; margin: 0 0 0.8em; }
main:not(.home) .affirmation blockquote p:first-child { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 1.9vw, 1.55rem); line-height: 1.3; margin-bottom: 0.7em; }
main:not(.home) .affirmation blockquote p:last-child { margin-bottom: 0.4em; }
main:not(.home) .affirmation.t-plum { color: var(--cream); }
main:not(.home) .affirmation.t-plum a { color: var(--cream); }
.affirmation figcaption { margin-top: 4px; padding-top: 12px; border-top: 1.5px solid color-mix(in srgb, currentColor 25%, transparent); }

/* Families say: this year's voices first, earlier years folded below */
main:not(.home) .aff-title { margin: 0 0 18px; }
.aff-section + .aff-section { margin-top: clamp(28px, 4vw, 44px); }
main:not(.home) .aff-earlier details.faq { background: var(--cream); }
main:not(.home) .aff-earlier .faq-a { padding: 18px 22px 8px; }
.affirmation-list-old { columns: 2 340px; }
main:not(.home) .affirmation.affirmation-old { background: var(--paper); border: 1.5px solid color-mix(in srgb, var(--grout) 25%, transparent); color: var(--grout); padding: 18px 20px; }
main:not(.home) .affirmation-old blockquote p:first-child { font-size: 1.15rem; }
main:not(.home) .affirmation-old blockquote p { font-size: 0.95rem; }

/* Families say, featured: each card shows its opening line and the family's name; the rest of the
   story opens in place */
.aff-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: clamp(16px, 2.4vw, 26px); align-items: start; }
main:not(.home) details.aff-card { border: var(--line); border-radius: 12px; padding: 0; box-shadow: 6px 6px 0 var(--grout); }
.aff-card.t-yellow { background: var(--yellow); } .aff-card.t-blue { background: var(--blue); } .aff-card.t-pink { background: var(--pink); }
.aff-card.t-plum { background: var(--plum); color: var(--cream); } .aff-card.t-paper { background: var(--cream); }
.aff-card > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 2.6vw, 28px); }
.aff-card > summary::-webkit-details-marker { display: none; }
.aff-lead { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 1.8vw, 1.5rem); line-height: 1.3; text-wrap: pretty; }
.aff-who { padding-top: 12px; border-top: 1.5px solid color-mix(in srgb, currentColor 25%, transparent); font-size: 0.92rem; }
.aff-who strong { display: block; font-family: var(--display); font-size: 1.02rem; }
.aff-who span { opacity: 0.85; }
.aff-more { align-self: flex-start; font-family: var(--display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; padding: 5px 12px; border: var(--line); border-color: currentColor; border-radius: 999px; }
.aff-more::after { content: "Read the full story +"; }
.aff-card[open] .aff-more::after { content: "Show less \2212"; }
.aff-rest { padding: 0 clamp(20px, 2.6vw, 28px) clamp(20px, 2.6vw, 28px); font-size: 1rem; line-height: 1.55; }
main:not(.home) .aff-rest p { margin: 0 0 0.8em; }
.aff-card[open] > summary { padding-bottom: 14px; }
.aff-card > summary:focus-visible { outline: 3px solid var(--grout); outline-offset: -6px; }

/* Families say, one card per row: the opening line reads wide, and an opened story keeps a
   comfortable measure instead of a narrow column. */
.aff-cards { grid-template-columns: 1fr; max-width: 860px; gap: clamp(14px, 2vw, 20px); }
.aff-card > summary { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "lead lead" "who more"; align-items: end; column-gap: 20px; }
.aff-lead { grid-area: lead; font-size: clamp(1.35rem, 2vw, 1.65rem); }
.aff-who { grid-area: who; }
.aff-more { grid-area: more; align-self: end; }
.aff-rest { max-width: 68ch; }
@media (max-width: 560px) {
  .aff-card > summary { grid-template-columns: 1fr; grid-template-areas: "lead" "who" "more"; }
}
.aff-cards { max-width: none; }
.aff-lead { padding-bottom: 14px; border-bottom: 1.5px solid color-mix(in srgb, currentColor 25%, transparent); }
.aff-who { padding-top: 0; border-top: 0; }
.aff-rest { max-width: 78ch; font-size: 1.04rem; }

/* Home: a short band of family voices, linking to the full page */
.families { background: var(--paper-2); border-block: var(--line); }
.families-inner { max-width: var(--wrap); margin-inline: auto; padding: clamp(56px, 8vw, 96px) var(--gutter); }
.families h2 { margin-bottom: clamp(20px, 3vw, 32px); }
.family-quotes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 26px); }
.family-quotes li { background: var(--cream); border: var(--line); border-radius: 12px; padding: clamp(20px, 2.4vw, 26px); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; box-shadow: 6px 6px 0 var(--c), 6px 6px 0 2px var(--grout); }
.fq-1 { --c: var(--blue); } .fq-2 { --c: var(--pink); } .fq-3 { --c: var(--yellow); }
.family-quotes blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 1.8vw, 1.5rem); line-height: 1.3; text-wrap: pretty; }
.family-quotes cite { font-style: normal; font-family: var(--display); font-weight: 700; font-size: 1rem; padding-top: 12px; border-top: 1.5px solid color-mix(in srgb, var(--grout) 20%, transparent); }
.family-quotes cite span { display: block; font-family: var(--body); font-weight: 400; font-size: 0.9rem; color: var(--ink-2); }
.families-more { margin: clamp(22px, 3vw, 32px) 0 0; }
@media (max-width: 860px) { .family-quotes { grid-template-columns: 1fr; } }
.families + .here { padding-top: clamp(64px, 9vw, 120px); }
main:not(.home) .after-list { margin-top: 1.6em; }
.nav-narrow nav a.nav-cta { padding: 0.55em 1.2em; }

/* Starla, the school cat: asleep on the "not found" page, and peeking over the footer edge */
main.not-found { max-width: 720px; text-align: center; }
.nf-starla { margin: 0 auto 8px !important; width: min(320px, 80%); }
main:not(.home) .nf-starla img { border: 0; border-radius: 0; width: 100%; height: auto; }
.not-found .eyebrow { justify-content: center; }
.nf-links { display: flex; flex-wrap: wrap; gap: 14px 24px; justify-content: center; align-items: center; margin-top: 1.6em; }
.footer-starla { position: absolute; z-index: 2; top: 0; right: calc(var(--gutter) + 40px); width: 64px; height: auto; transform: translateY(-58%); transition: transform 0.35s cubic-bezier(.3,1.5,.6,1); cursor: help; }
.footer-starla:hover { transform: translateY(-78%); }
@media (max-width: 760px) { .footer-starla { right: var(--gutter); width: 50px; } }
@media (prefers-reduced-motion: reduce) { .footer-starla { transition: none; } }
.footer-starla { filter: drop-shadow(0 0 1.5px rgba(251,247,240,.85)); }
@media (max-width: 560px) { .nf-links { flex-direction: column; gap: 16px; } }
.fit-list li:nth-child(4n+1)::before { background: var(--yellow); }
.fit-list li:nth-child(4n+2)::before { background: var(--blue); }
.fit-list li:nth-child(4n+3)::before { background: var(--pink); }
.fit-list li:nth-child(4n+4)::before { background: var(--plum); }