/* ==========================================================================
   Interpretive Somatics — PROGRAM PAGE
   Isolated, Program-only styles. Loaded only on program.html, after style.css.

   Compositional identity: TRAJECTORY — where Home is gesture and About is
   field/constellation, Program is a page that changes state as the reader
   moves through it:
     compression (hero) → expansion (the arc) → interruption (the rhythm)
     → clarity (between modules) → responsibility (Year Four) → open close
   Expressed through scale, placement, density and whitespace — not cards,
   timelines, or repeated decorative devices.
   ========================================================================== */

.program-movement{ position:relative; }

/* -------------------------------------------------------------------------
   1 — OPENING  (kept as-is)
   ------------------------------------------------------------------------- */
.program-hero{
  padding-top: clamp(8rem, 15vw, 10.5rem);
  padding-bottom: clamp(4rem, 8vw, 6.75rem);
}
.program-hero__headline{
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: .98;
  letter-spacing: -.015em;
  color: var(--ink);
  max-width: 16ch;
  margin: 0;
}
.program-hero__answer{
  margin-top: clamp(3.5rem, 8vw, 6rem);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.program-hero__lede{
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0;
  text-align: right;
}
.program-hero__lede--2{
  margin-top: clamp(2rem, 4.5vw, 3rem);
  max-width: 38ch;
  color: var(--ink);
}

/* -------------------------------------------------------------------------
   2 — THE ARC  (expansion: one unfolding composition, not three entries)
   ------------------------------------------------------------------------- */
.program-arc{
  padding-top: clamp(2.9rem, 5.9vw, 4.75rem);
  padding-bottom: clamp(4.55rem, 9.1vw, 7.3rem);
}
@media(min-width: 761px){
  .program-arc{ padding-top: clamp(2.65rem, 5.35vw, 4.3rem); }
}
.program-arc__intro{
  max-width: 44ch;
}
.program-arc__intro p{
  font-family: var(--sans);
  font-size: clamp(1rem, 1.15vw, 1.08rem);
  line-height: 1.7;
  color: var(--ink-soft);
  margin-top: 1.2rem;
}
@media(min-width: 761px){
  .program-arc__intro{ margin-left: clamp(0px, 6vw, 70px); }
}

.program-year p{
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.75;
  color: var(--ink-soft);
}
.program-year p + p{ margin-top: 1.1rem; }

/* Year One — small, grounded, contained: establishing ground */
.program-year--one{
  max-width: 36ch;
  margin-top: clamp(2.25rem, 4.55vw, 3.65rem);
}
.program-year--one h3{
  font-size: clamp(1.4rem, 2.05vw, 1.75rem);
  font-weight: 460;
  margin-bottom: .9rem;
}

/* Year Two — inward, larger, more room: the page opening / complexifying */
.program-year--two{
  max-width: 48ch;
  margin-top: clamp(4.1rem, 7.45vw, 6.15rem);
}
@media(min-width: 761px){
  .program-year--two{ margin-left: clamp(2rem, 14vw, 190px); }
}
.program-year--two h3{
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  font-weight: 460;
  margin-bottom: 1.1rem;
}

/* Year Three — full width, outward-facing, paragraphs occupy separate ground */
.program-year--three{
  max-width: none;
  margin-top: clamp(5rem, 9.55vw, 7.65rem);
}
.program-year--three h3{
  font-size: clamp(2.3rem, 4.4vw, 3.6rem);
  font-weight: 440;
  max-width: 18ch;
  margin-bottom: clamp(1.8rem, 3.5vw, 2.4rem);
}
.program-year3__mobile-break{ display: none; }
@media(max-width: 760px){
  .program-year3__mobile-break{ display: block; }
}

.program-year3__field{
  display: flex;
  flex-direction: column;
}
@media(min-width: 761px){
  .program-year3__field{
    flex-direction: row;
    justify-content: space-between;
    gap: clamp(2rem, 6vw, 5rem);
  }
  .program-year3__field p{ max-width: 36ch; }
  .program-year3__field p:last-child{ margin-top: clamp(2.5rem, 5vw, 4rem); }
}

/* -------------------------------------------------------------------------
   3 — THE RHYTHM MATTERS  (interruption: tonal inversion, kept in principle)
   ------------------------------------------------------------------------- */
.program-rhythm{
  background: var(--ink);
  color: var(--bone);
  padding-block: clamp(5rem, 10.1vw, 7.8rem);
}
.program-rhythm h2{ color: var(--bone); max-width: 18ch; }
.program-rhythm__lede{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 380;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  color: var(--gold-pale);
  max-width: 32ch;
  margin-top: 1.4rem;
}
.program-rhythm__block{
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  line-height: 1.75;
  color: rgba(246,241,230,.7);
  max-width: 44ch;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.program-rhythm__block--integration{
  margin-left: auto;
  text-align: right;
}
.program-rhythm__block--between{
  margin-top: clamp(4.25rem, 8.5vw, 6.75rem);
  margin-inline: auto;
  max-width: 34ch;
  text-align: center;
  font-family: var(--serif);
  font-weight: 420;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.45;
  color: var(--bone);
}

/* -------------------------------------------------------------------------
   4 — THE WORK IS HELD BY WHAT SURROUNDS IT  (clarity, not a numbers device)
   ------------------------------------------------------------------------- */
.program-requirements{
  background: var(--paper);
  padding-block: clamp(5.45rem, 10vw, 8.2rem);
}
.program-requirements__layout{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.65rem, 5.3vw, 4rem);
}
@media(min-width: 761px){
  .program-requirements__layout{
    grid-template-columns: .8fr 1.2fr;
    gap: clamp(3rem, 7vw, 6rem);
    align-items: start;
  }
}
.program-requirements__intro h2{ max-width: none; }
.program-requirements__break{ display: none; }
@media(min-width: 761px){
  .program-requirements__break{ display: block; }
}
.program-requirements__intro p{
  font-size: clamp(1.02rem, 1.2vw, 1.12rem);
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 40ch;
  margin-top: 1.4rem;
}
@media(min-width: 761px){
  .program-requirements__intro p{ margin-top: clamp(3rem, 6.05vw, 4.8rem); }
}
.program-requirements__list{
  display: flex;
  flex-direction: column;
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--line);
}
.program-requirements__block + .program-requirements__block{
  margin-top: clamp(2rem, 4.25vw, 2.75rem);
}
.program-requirements__label{ margin: 0 0 .6rem; }
.program-requirements__text{
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 54ch;
  margin: 0;
}

/* -------------------------------------------------------------------------
   5 — YEAR FOUR  (responsibility: a single clean opening gesture)
   ------------------------------------------------------------------------- */
.program-year4{
  background: var(--bone-deep);
  padding-block: clamp(5.45rem, 10vw, 8.2rem);
}
.program-year4__heading{ max-width: 24ch; }
@media(min-width: 761px){
  .program-year4__heading{ max-width: none; }
  .program-year4{ padding-bottom: clamp(4.7rem, 8.65vw, 7.1rem); }
}
.program-year4__label{
  display: block;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-deep);
  margin-bottom: .9rem;
}
.program-year4__body{
  margin-top: clamp(2.75rem, 5.5vw, 4rem);
}
.program-year4__body p{
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.68;
  color: var(--ink-soft);
}
.program-year4__body p + p{ margin-top: 1.5rem; }
@media(min-width: 761px){
  .program-year4__body{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: clamp(1rem, 2vw, 1.75rem);
  }
  .program-year4__body p{ margin: 0; }
  .program-year4__body p:nth-of-type(1){ grid-column: 1 / 7; }
  .program-year4__body p:nth-of-type(2){
    grid-column: 6 / 13;
    margin-top: clamp(1.8rem, 3.75vw, 2.95rem);
    max-width: 38ch;
  }
  .program-year4__body p:nth-of-type(3){
    grid-column: 2 / 10;
    margin-top: clamp(1.8rem, 3.75vw, 2.95rem);
  }
}

/* -------------------------------------------------------------------------
   6 — FINAL INVITATION  (open, resolved, asymmetric — not a centered CTA)
   ------------------------------------------------------------------------- */
.program-close{
  background: var(--gold-wash);
  padding-block: clamp(4.75rem, 9.55vw, 7.5rem);
}
@media(min-width: 761px){
  .program-close{ padding-top: clamp(4.1rem, 8.25vw, 6.5rem); }
}
.program-close__field{ max-width: none; }
.program-close__statement{
  font-family: var(--serif);
  font-weight: 420;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.12;
  color: var(--ink);
  max-width: 34ch;
  margin: 0;
}
.program-close__break{ display: none; }
@media(min-width: 761px){
  .program-close__break{ display: block; }
}
.program-close__body{
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-top: 1.6rem;
}
.program-close__action{
  margin-top: clamp(2.25rem, 4.75vw, 3.75rem);
  display: flex;
  justify-content: flex-start;
}
@media(min-width: 761px){
  .program-close__action{
    justify-content: flex-end;
    margin-top: clamp(1.45rem, 3.05vw, 2.4rem);
    width: 86%;
    margin-left: auto;
  }
}

/* -------------------------------------------------------------------------
   Responsive recomposition — mobile is deliberately re-authored, not a
   collapsed desktop layout
   ------------------------------------------------------------------------- */
@media (max-width: 760px){
  .program-hero__answer{ align-items: flex-start; }
  .program-hero__lede{ text-align: left; max-width: none; }
  .program-hero__lede--2{ max-width: none; }

  .program-year--one{ margin-top: 2.05rem; }
  .program-year--two{ max-width: none; margin-top: 3.1rem; }
  .program-year--three{ max-width: none; margin-top: 3.9rem; }
  .program-year--three h3{ max-width: none; }

  .program-rhythm__block--integration{
    margin-left: 0;
    text-align: left;
  }
  .program-rhythm__block--between{ max-width: none; }

  .program-year4__body p:nth-of-type(2){ margin-top: 1.75rem; }
  .program-year4__body p:nth-of-type(3){ margin-top: 2rem; }
}