/* ==========================================================================
   Interpretive Somatics — ABOUT PAGE
   Isolated, About-only styles. Loaded only on about.html, after style.css.

   Same editorial world as the homepage (gesture + typography + space) but
   more readable / explanatory: fuller paragraphs, quieter pacing, no large
   mark, no full-bleed ink beat. Five movements, each a distinct spatial idea.
   ========================================================================== */

.about-movement{ position:relative; }

/* -------------------------------------------------------------------------
   MOVEMENT 1 — WHAT THIS IS  (opening hero)
   ------------------------------------------------------------------------- */
.about-hero{
  padding-top: clamp(8rem, 15vw, 10.5rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}
.about-hero__headline{
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(3rem, 7.4vw, 6.2rem);
  line-height: 1.03;
  letter-spacing: -.01em;
  color: var(--ink);
  max-width: 15ch;
  margin: 0;
}
.about-hero__copy{
  font-size: clamp(1.1rem, 1.6vw, 1.28rem);
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 48ch;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  margin-left: clamp(0px, 22vw, 230px);
}

/* -------------------------------------------------------------------------
   MOVEMENT 2 — A PROCESS, NOT A FIXED METHOD  (editorial spread)
   ------------------------------------------------------------------------- */
.about-process{
  padding-top: clamp(3rem, 7vw, 5.5rem);
  padding-bottom: clamp(4rem, 9vw, 7rem);
}
.about-process__top{
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.about-process__heading{
  max-width: 20ch;
}
.about-process__principle{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 340;
  font-size: clamp(1.35rem, 2.1vw, 1.8rem);
  color: var(--gold-deep);
  margin: 0;
  max-width: 24ch;
}
.about-process__mid{
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.about-process__principle--2{
  margin-top: clamp(2rem, 4vw, 2.75rem);
}
.about-process__thesis{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 420;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.3;
  color: var(--ink);
  max-width: 26ch;
  margin-left: clamp(0px, 6vw, 40px);
}
.about-process__body{
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-top: clamp(1.8rem, 3.5vw, 2.5rem);
}
.about-process__principle--3{
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 761px){
  .about-process__top{
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
  }
  .about-process__principle--1{
    text-align: right;
    max-width: 28ch;
    flex-shrink: 0;
  }
  .about-process__mid{
    position: relative;
  }
  .about-process__thesis{
    max-width: 17ch;
    margin-left: clamp(0px, 44vw, 660px);
  }
  .about-process__principle--2{
    position: absolute;
    top: 0;
    bottom: 0;
    left: clamp(0px, 5vw, 55px);
    margin: auto 0;
    height: fit-content;
    max-width: 34ch;
  }
  .about-process__body{
    max-width: 42ch;
    margin-left: clamp(0px, 10vw, 110px);
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
  }
  .about-process__principle--3{
    text-align: center;
    margin-inline: auto;
    max-width: 34ch;
    margin-top: clamp(2rem, 4vw, 3rem);
  }
}

/* -------------------------------------------------------------------------
   MOVEMENT 3 — FOUR TERRITORIES  (stations across a field)
   ------------------------------------------------------------------------- */
.about-territories{
  padding-block: clamp(4rem, 9vw, 7rem);
}
.about-territories__heading{
  max-width: 18ch;
}
.about-territories__field{
  display: flex;
  flex-direction: column;
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
}
.territory{
  max-width: 36ch;
}
.territory + .territory{
  margin-top: clamp(3rem, 7vw, 5rem);
}
.territory__index{
  display: block;
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  font-size: 1rem;
  margin-bottom: .7rem;
}
.territory h3{ font-weight: 520; }
.territory p{
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-top: .6rem;
}

.territory--1{ align-self: flex-start; }

.territory--2{
  align-self: flex-end;
  text-align: left;
  margin-left: auto;
}

.territory--3{
  align-self: center;
  text-align: center;
  max-width: 32ch;
}
.territory--3 h3{ font-style: italic; color: var(--gold-deep); }

.territory--4{
  align-self: flex-start;
  max-width: 46ch;
  margin-top: clamp(4rem, 9vw, 6.5rem);
}

@media (min-width: 761px){
  .about-territories{ padding-block: clamp(3rem, 5.5vw, 4.5rem); }
  .about-territories__field{ margin-top: clamp(2.25rem, 4vw, 3.25rem); }
  .territory + .territory{ margin-top: clamp(1.75rem, 4vw, 3rem); }
  .territory--4{ margin-top: clamp(2.25rem, 5vw, 3.75rem); }
}

@media (max-width: 760px){
  .territory,
  .territory--2,
  .territory--3,
  .territory--4{
    align-self: flex-start;
    text-align: left;
    margin-left: 0;
    max-width: 30ch;
    transform: none;
  }
  .territory + .territory{ margin-top: 2.75rem; }
}

/* -------------------------------------------------------------------------
   MOVEMENT 4 — LINEAGE / SPIRITUALITY / INTERPRETATION  (quiet, contemplative)
   ------------------------------------------------------------------------- */
.about-lineage{
  background: var(--paper);
  padding-block: clamp(5rem, 9vw, 8rem);
}
.about-lineage__column{
  max-width: 50rem;
  margin-inline: auto;
}
.about-lineage__heading{
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  text-align: left;
}
@media (min-width: 761px){
  .about-lineage__heading{
    margin-left: -48px;
  }
}
.about-lineage__body{
  max-width: 62ch;
  margin-top: clamp(3rem, 6vw, 4.75rem);
}
.about-lineage__body p{
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.85;
  color: var(--ink-soft);
}
.about-lineage__body p + p{ margin-top: clamp(1.8rem, 3vw, 2.4rem); }

/* -------------------------------------------------------------------------
   MOVEMENT 5 — A SCHOOL THAT CHANGES  (opens back up, warmer)
   ------------------------------------------------------------------------- */
.about-alive{
  padding-top: clamp(4.5rem, 9vw, 7.5rem);
  padding-bottom: clamp(4.5rem, 9vw, 7.5rem);
}
@media (min-width: 761px){
  .about-alive{ padding-bottom: clamp(3.5rem, 7vw, 6rem); }
}
.about-alive__heading{
  max-width: 15ch;
}
.about-alive__body{
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.8;
  color: var(--ink-soft);
  max-width: 50ch;
  margin-top: clamp(1.6rem, 3.5vw, 2.2rem);
}
.about-alive__body p + p{ margin-top: 1.1rem; }
.about-alive__thought{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 420;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.4;
  color: var(--gold-deep);
  max-width: 32ch;
  margin-top: clamp(2.2rem, 5vw, 3.5rem);
  margin-left: clamp(0px, 8vw, 34px);
}

@media (min-width: 761px){
  .about-alive__grid{
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  .about-alive__heading{ max-width: none; }
  .about-alive__body{ max-width: none; margin-top: 0; }
  .about-alive__thought{
    max-width: 30ch;
    margin-top: clamp(3rem, 6vw, 4.5rem);
    margin-left: clamp(0px, 24vw, 320px);
  }
  .about-alive__thought-line{ display: block; }
  .about-alive__thought-line:nth-child(2){ margin-left: clamp(0px, 1.5vw, 16px); }
  .about-alive__thought-line:nth-child(3){ margin-left: clamp(0px, 4vw, 42px); }
  .about-alive__thought-line:nth-child(4){ margin-left: clamp(0px, 5.5vw, 58px); }
}

/* -------------------------------------------------------------------------
   FINAL TRANSITION
   ------------------------------------------------------------------------- */
.about-close{
  padding-block: clamp(4rem, 8vw, 6rem) clamp(4.5rem, 8vw, 7rem);
  text-align: center;
}
@media (min-width: 761px){
  .about-close{ padding-top: clamp(3rem, 5.5vw, 4.5rem); }
}
.about-close__statement{
  font-family: var(--serif);
  font-weight: 420;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: var(--ink);
  max-width: 40ch;
  margin-inline: auto;
}
.about-close__action{ margin-top: clamp(1.5rem, 3vw, 2rem); }