/* Pinecone — interior pages.
   Same grammar as the homepage: serif display, mono eyebrows, hairline
   rules, paper. An interior page should feel like a quieter room in the
   same house, never a different building. */

.pg-head {
  background: var(--paper-warm);
  padding: clamp(56px, 7vw, 104px) var(--v2-gut) clamp(40px, 5vw, 72px);
  border-bottom: 1px solid var(--ink-faint);
}
.pg-head-inner { max-width: 54rem; margin: 0 auto; }
.pg-head .v2-h-display { margin: 0; max-width: 20ch; }
.pg-lede {
  font-family: var(--sans); font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6; color: var(--ink-2);
  margin: clamp(20px, 2.4vw, 30px) 0 0; max-width: 54ch;
}

.pg-section {
  background: var(--paper);
  padding: clamp(52px, 6vw, 96px) var(--v2-gut);
  border-bottom: 1px solid var(--ink-faint);
}
.pg-warm { background: var(--paper-warm); }
.pg-deep { background: var(--paper-deep); }
.pg-inner { max-width: 54rem; margin: 0 auto; }
.pg-inner > .v2-h-section { margin: 0 0 clamp(22px, 2.6vw, 34px); max-width: 22ch; }

.pg-prose p {
  font-family: var(--sans); font-size: 16.5px; line-height: 1.7;
  color: var(--ink-2); margin: 0 0 18px; max-width: 66ch;
}
.pg-prose p:last-child { margin-bottom: 0; }
.pg-prose p b { font-weight: 600; color: var(--ink); }
.pg-prose a, .pg-qa-body a {
  color: var(--mustard-deep);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: rgba(138, 104, 38, 0.4);
  transition: text-decoration-color 180ms ease;
}
.pg-prose a:hover, .pg-qa-body a:hover { text-decoration-color: var(--mustard-deep); }
.pg-prose h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(21px, 2.1vw, 27px); line-height: 1.15;
  color: var(--ink); margin: clamp(30px, 3.4vw, 44px) 0 12px;
  letter-spacing: -0.006em;
}
.pg-prose ul { margin: 0 0 18px; padding-left: 1.1em; }
.pg-prose li {
  font-family: var(--sans); font-size: 16.5px; line-height: 1.7;
  color: var(--ink-2); margin-bottom: 8px; max-width: 62ch;
}

/* ── Numbered steps (the admissions arc) ─────────────────────────────── */
.pg-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.pg-step {
  display: grid; grid-template-columns: 54px 1fr; gap: clamp(16px, 2.4vw, 32px);
  padding: 26px 0; border-top: 1px solid var(--ink-faint); align-items: baseline;
}
.pg-step:last-child { border-bottom: 1px solid var(--ink-faint); }
.pg-step-n {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; color: var(--mustard-deep); padding-top: 5px;
}
.pg-step h3 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 2vw, 25px);
  line-height: 1.15; margin: 0 0 7px; color: var(--ink); letter-spacing: -0.006em;
}
.pg-step p {
  font-family: var(--sans); font-size: 15.5px; line-height: 1.65;
  color: var(--ink-2); margin: 0; max-width: 56ch;
}
@media (max-width: 600px) {
  .pg-step { grid-template-columns: 1fr; gap: 6px; }
  .pg-step-n { padding-top: 0; }
}

/* ── Q & A — real <details>, so it works with JS off and reads correctly
      to a screen reader. Opens with an ease where the browser supports
      interpolate-size; snaps (correctly) everywhere else. ────────────── */
:root { interpolate-size: allow-keywords; }
.pg-qa { border-top: 1px solid var(--ink-faint); }
.pg-qa-item::details-content {
  height: 0; overflow: clip;
  transition: height 340ms cubic-bezier(0.22, 1, 0.36, 1), content-visibility 340ms allow-discrete;
}
.pg-qa-item[open]::details-content { height: auto; }
.pg-qa-item { border-bottom: 1px solid var(--ink-faint); }
.pg-qa-item summary {
  list-style: none; cursor: pointer; padding: 20px 36px 20px 0;
  position: relative;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(18px, 1.8vw, 22px); line-height: 1.3;
  color: var(--ink); letter-spacing: -0.005em;
}
.pg-qa-item summary::-webkit-details-marker { display: none; }
.pg-qa-item summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif); font-size: 26px; line-height: 1;
  color: var(--mustard-deep); transition: transform 240ms ease;
}
.pg-qa-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.pg-qa-item summary:hover { color: var(--mustard-deep); }
.pg-qa-body { padding: 0 0 24px; }
.pg-qa-body p {
  font-family: var(--sans); font-size: 16px; line-height: 1.7;
  color: var(--ink-2); margin: 0 0 14px; max-width: 64ch;
}
.pg-qa-body p:last-child { margin-bottom: 0; }
.pg-qa-body b { font-weight: 600; color: var(--ink); }

/* ── Definition rows (fees, hours) ───────────────────────────────────── */
.pg-rows { border-top: 1px solid var(--ink-faint); }
.pg-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; padding: 18px 12px; margin: 0 -12px; border-radius: 3px;
  border-bottom: 1px solid var(--ink-faint);
  transition: background 240ms ease;
}
.pg-row:hover { background: rgba(42, 26, 22, 0.03); }
.pg-row-k {
  font-family: var(--sans); font-size: 16.5px; color: var(--ink);
}
.pg-row-k small {
  display: block; font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute);
  margin-top: 5px;
}
.pg-row-v {
  font-family: var(--serif); font-size: clamp(19px, 1.9vw, 24px);
  color: var(--mustard-deep); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pg-row-v-split { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; white-space: normal; }
.pg-row-tier { display: block; text-align: right; line-height: 1.15; white-space: nowrap; }
.pg-row-tier small {
  display: block; margin-top: 3px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute);
}
/* ── Closing invitation ──────────────────────────────────────────────── */
.pg-cta {
  background: var(--paper-warm);
  padding: clamp(56px, 7vw, 104px) var(--v2-gut);
  text-align: center;
}
.pg-cta .v2-h-display { margin: 0 auto; max-width: 18ch; }
.pg-cta .v2-availability { margin-left: auto; margin-right: auto; }
.pg-cta .v2-tour-actions { justify-content: center; }

/* Desktop reading pass — interior prose follows the same >=1440 bump. */
@media (min-width: 1440px) {
  .pg-prose p, .pg-prose li { font-size: 17.5px; }
  .pg-qa-body p { font-size: 17px; }
  .pg-step p { font-size: 16.5px; }
  .pg-lede { font-size: 20px; }
  .pg-row-k { font-size: 17px; }
}

/* ── A note the school can see and a visitor can't miss ──────────────── */
.pg-note {
  border-left: 3px solid var(--mustard);
  padding: 4px 0 4px 18px; margin: 26px 0;
}
.pg-note p { color: var(--ink); font-style: italic; }

/* ══════════════════════════════════════════════════════════════
   PROGRAM CHAPTERS — the arc, not the catalog (2026-08-02).
   Full-width chapters, photo and prose alternating sides, stitched
   by quiet "moves up" markers. The photo pins gently while its
   room's passage scrolls, so image and words stay married.
   ══════════════════════════════════════════════════════════════ */
.ch {
  background: var(--paper);
  padding: clamp(56px, 7vw, 104px) var(--v2-gut) 0;
  border-bottom: 1px solid var(--ink-faint);
}
.ch-inner {
  max-width: var(--v2-max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: clamp(36px, 5vw, 96px);
  align-items: start;
  padding-bottom: clamp(56px, 7vw, 104px);
}
.ch-inner { grid-template-rows: auto 1fr; row-gap: 18px; }
.ch-media { grid-column: 1; grid-row: 1 / span 2; }
.ch-head  { grid-column: 2; grid-row: 1; }
.ch-body  { grid-column: 2; grid-row: 2; }
.ch-flip .ch-inner { grid-template-columns: 1.15fr 1fr; }
.ch-flip .ch-media { grid-column: 2; }
.ch-flip .ch-head, .ch-flip .ch-body { grid-column: 1; }

.ch-media { position: sticky; top: 96px; }

.ch-copy { position: relative; }
/* The page numbers of the book: enormous, barely there. Same grammar as
   the pillar numerals in the base system (serif italic, faint). */
.ch-ghost {
  position: absolute; top: -34px; right: 0;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(90px, 10vw, 150px); line-height: 1;
  color: var(--mustard-deep); opacity: 0.09;
  pointer-events: none; user-select: none;
}
.ch-name {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 0.98; letter-spacing: -0.018em;
  margin: 0 0 18px; color: var(--ink);
}
.ch-name em { font-style: italic; font-weight: 500; color: var(--mustard-deep); }

.ch-essence {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(19px, 1.8vw, 24px); line-height: 1.4;
  color: var(--ink-2); margin: 0 0 26px; max-width: 44ch;
  text-wrap: pretty;
}

/* ── The fold ────────────────────────────────────────────────────────
   The chapter arrives at its definition line and stops. Everything past
   it lives behind one quiet row: the hairline that used to sit above the
   passage now sits above the CONTROL, so the eye still meets a rule at
   the same place — it just gets a choice there. No new colour: the mono
   caps and ink-mute of every other label in the house, warming to
   mustard on hover the way the quiet links do. */
.ch-fold { max-width: 62ch; }
.ch-more-toggle {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; width: 100%;
  margin: 0; padding: 15px 1px 15px 0;
  background: none; border: 0; border-top: 1px solid var(--ink-faint);
  border-radius: 2px; cursor: pointer; text-align: left;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute);
  transition: color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.ch-more-toggle:hover { color: var(--mustard-deep); }
.ch-more-toggle:focus-visible {
  outline: 2px solid var(--mustard-deep); outline-offset: 3px; color: var(--mustard-deep);
}
.ch-more-chevron {
  flex: 0 0 auto; overflow: visible;
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ch-more-toggle[aria-expanded="true"] .ch-more-chevron { transform: rotate(180deg); }

/* 0fr → 1fr: the row grows to exactly the passage's height, eased, with
   nothing measured in JavaScript and nothing to jump. */
.ch-more {
  display: grid; grid-template-rows: 0fr;
  opacity: 0; visibility: hidden;
  transition: grid-template-rows 420ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 300ms ease, visibility 420ms;
}
.ch-more.is-open { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
.ch-more-clip { overflow: hidden; min-height: 0; }
@media (prefers-reduced-motion: reduce) {
  .ch-more, .ch-more-chevron { transition: none; }
}

.ch-passage {
  padding-top: 22px;
}
.ch-passage p {
  font-family: var(--sans); font-size: 16px; line-height: 1.75;
  color: var(--ink-2); margin: 0 0 16px;
}
.ch-passage p:last-child {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 18.5px; line-height: 1.55; color: var(--mustard-deep);
  margin-bottom: 0;
}
@media (min-width: 1440px) {
  .ch-passage p { font-size: 17px; }
  .ch-passage p:last-child { font-size: 20px; }
}

@media (max-width: 980px) {
  .ch-inner, .ch-flip .ch-inner { grid-template-columns: 1fr; grid-template-rows: auto; gap: 28px; row-gap: 22px; }
  .ch-media, .ch-head, .ch-body,
  .ch-flip .ch-media, .ch-flip .ch-head, .ch-flip .ch-body { grid-column: 1; grid-row: auto; }
  .ch-media { position: static; }
  .ch-media .v2-photo { aspect-ratio: 16/10; }
}

/* Age band sits under the room name (Micah, 2026-09-06). */
.ch-head .ch-name { margin-top: 0; margin-bottom: 10px; }
.ch-head .ch-band { margin-bottom: 0; }

/* ── Desktop: the passage stands open ──────────────────────────────────
   The fold exists for phones, where four open passages in one column are
   too much to meet on arrival. On a desktop the copy column sits beside a
   photo that spans both of its rows; folded, that column held a definition
   line and a hairline against a tall photograph, and the chapter read as an
   empty page (Micah, 2026-09-08). So above the phone breakpoint the control
   is gone and the passage is simply there — the hairline that topped the
   control tops the passage, where it stood before the fold. Only the room
   chapters (.ch-fold): the homepage day keeps its own fold at every width. */
@media (min-width: 981px) {
  .ch-fold .ch-more-toggle { display: none; }
  .ch-fold .ch-more { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
  .ch-fold .ch-passage { border-top: 1px solid var(--ink-faint); padding-top: 24px; }
}

/* ══════════════════════════════════════════════════════════════
   SCHOOL CALENDAR — the dated year (2026-09-08).
   Twelve month cards in the house grammar: serif month names, mono
   day letters, hairlines, paper. A closed day is a solid mustard
   square-of-a-circle; a parents' evening rings the day in mauve, a
   family event in sage — the three inks of the grove. Below each grid,
   the month's rows: what and when.
   ══════════════════════════════════════════════════════════════ */
.cal-inner { max-width: 76rem; margin: 0 auto; }
.cal-strip {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 14px 28px; padding-bottom: 22px; border-bottom: 1px solid var(--ink-faint);
  margin-bottom: clamp(26px, 3.4vw, 42px);
}
.cal-hours { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; }
.cal-hours span { font-family: var(--sans); font-size: 15.5px; color: var(--ink-2); }
.cal-hours b {
  font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1;
  color: var(--mustard-deep); font-variant-numeric: tabular-nums; margin-left: 8px;
}
.cal-hours small, .cal-legend {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute);
}
.cal-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.cal-legend span { display: inline-flex; align-items: center; gap: 7px; }
.cal-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.cal-dot-closed  { background: var(--mustard-deep); }
.cal-dot-parents { background: var(--mauve-deep); }
.cal-dot-family  { background: var(--sage-deep); }
.cal-dot-note    { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-mute); }

.cal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); }
.cal-month {
  background: var(--paper-warm); border: 1px solid var(--ink-faint); border-radius: 4px;
  padding: 20px 20px 18px; display: flex; flex-direction: column;
}
.cal-month-name {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--serif); font-weight: 500; font-size: 25px; line-height: 1;
  letter-spacing: -0.006em; color: var(--ink); margin: 0 0 14px;
}
.cal-month-name small {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute);
}
.cal-dow, .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-dow span {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em;
  text-align: center; color: var(--ink-mute); padding-bottom: 6px;
}
.cal-days { row-gap: 2px; }
.cal-day {
  display: flex; align-items: center; justify-content: center; height: 32px;
  font-family: var(--sans); font-size: 13px; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.cal-day b {
  font-weight: 400; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.cal-day.is-weekend { color: var(--ink-mute); }
/* Three kinds of day, three filled discs in the grove's own inks (Micah,
   2026-09-08: a ring read as an EMPTY day next to a filled one). */
.cal-day.is-closed b  { background: var(--mustard-deep); color: var(--paper); font-weight: 500; }
.cal-day.is-parents b { background: var(--mauve-deep);   color: var(--paper); font-weight: 500; }
.cal-day.is-family b  { background: var(--sage-deep);    color: var(--paper); font-weight: 500; }

.cal-rows {
  list-style: none; margin: 14px 0 0; padding: 12px 0 0;
  border-top: 1px solid var(--ink-faint);
  display: flex; flex-direction: column; gap: 9px;
}
.cal-rows li {
  display: grid; grid-template-columns: 9px 90px 1fr; gap: 10px; align-items: baseline;
  font-family: var(--sans); font-size: 13.5px; line-height: 1.45; color: var(--ink-2);
}
.cal-rows .cal-dot { position: relative; top: -1px; }
.cal-when {
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.cal-what b { font-weight: 600; color: var(--ink); }
.cal-foot {
  font-family: var(--sans); font-size: 14.5px; line-height: 1.6; color: var(--ink-mute);
  margin: clamp(24px, 3vw, 36px) auto 0; text-align: center; max-width: 60ch;
}
@media (min-width: 1440px) {
  .cal-rows li { font-size: 14.5px; }
  .cal-day { font-size: 14px; }
}
@media (max-width: 980px) { .cal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .cal-grid { grid-template-columns: 1fr; }
  .cal-strip { flex-direction: column; align-items: flex-start; }
  .cal-rows li { grid-template-columns: 9px 82px 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   ADMISSIONS & TUITION — two panels, one grammar (2026-09-08, second pass).
   Left: how it goes, on paper. Right: what it costs, on warm paper that
   bleeds to the screen's edge, a hairline between. Both open the same
   way — mono eyebrow, serif heading — so they read as two rooms of one
   house, not a page with a box on it. The tuition column pins while the
   steps scroll; below tablet width it becomes a full-width warm band
   after the steps, and a quiet link at the top jumps to it.
   ══════════════════════════════════════════════════════════════ */
/* overflow-x: CLIP, never hidden — hidden would make the section a scroll
   container, and the tuition column's sticky would pin to the section
   instead of the screen (and sit 10px low from the start). Clip only
   trims the warm bleed at the screen's edge. */
.adm { background: var(--paper); border-bottom: 1px solid var(--ink-faint); padding: 0 var(--v2-gut); overflow-x: clip; }
.adm-inner {
  max-width: 76rem; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch;
}
.adm-col { padding: clamp(52px, 6vw, 96px) 0; }
/* Block-level, so both columns' eyebrows start on the same line, not on an inline baseline. */
.adm-col .v2-eyebrow { display: flex; margin-bottom: 14px; }
.adm-col > .v2-h-section, .adm-tuition-inner > .v2-h-section {
  margin: 0 0 clamp(20px, 2.4vw, 30px); max-width: 22ch;
}
.adm-steps { padding-right: clamp(32px, 4.5vw, 72px); }
.adm-steps .pg-step { padding: 20px 0; }
.adm-steps .pg-step p { max-width: 50ch; }
.adm-seats { margin-top: clamp(32px, 4vw, 52px); }
.adm-seats h3 { margin-top: 0; }
.adm-tuition {
  position: relative; border-left: 1px solid var(--ink-faint);
  padding-left: clamp(32px, 4.5vw, 72px);
}
/* The warm tone runs from the hairline to the right edge of the screen. */
.adm-tuition::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: -100vw;
  background: var(--paper-warm); z-index: 0;
}
.adm-tuition-inner { position: sticky; top: 96px; z-index: 1; }
.adm-lede {
  font-family: var(--sans); font-size: 16px; line-height: 1.65; color: var(--ink-2);
  margin: 0; max-width: 52ch;
}
.adm-lede em {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 21px; color: var(--mustard-deep);
}
.adm-tuition .pg-row { padding: 14px 10px; margin: 0 -10px; }
.adm-tuition .pg-row-v { font-size: clamp(18px, 1.6vw, 22px); }
.adm-tuition .pg-note { margin: 22px 0 14px; }
.adm-tuition .pg-prose p { font-size: 15.5px; }
.adm-jump { display: none; margin-bottom: 22px; }
@media (max-width: 980px) {
  .adm-inner { grid-template-columns: 1fr; }
  .adm-steps { padding-right: 0; }
  .adm-tuition { border-left: 0; border-top: 1px solid var(--ink-faint); padding-left: 0; }
  .adm-tuition::before { left: -100vw; }
  .adm-tuition-inner { position: static; }
  .adm-jump { display: flex; width: fit-content; }
}