/* Philosophy page: introduction, harmony, perspective, Vision and Mission.
   Reading motion comes from the shared reading.css and data attributes. */

.philosophy-introduction,
.philosophy-harmony-diagram,
.philosophy-harmony-story,
.philosophy-declaration {
  --philosophy-copy-ink: #28232c;
  --philosophy-copy-muted: #625963;
  --philosophy-copy-accent: #755e7e;
  color: var(--philosophy-copy-ink);
}

.philosophy-introduction,
.philosophy-harmony-diagram,
.philosophy-declaration {
  padding-block: clamp(88px, 9.5vw, 150px);
  border-bottom: 0;
}

:is(.philosophy-introduction, .philosophy-harmony-diagram, .philosophy-harmony-story, .philosophy-declaration) .eyebrow {
  margin: 0 0 26px;
  color: var(--philosophy-copy-accent);
  font-size: .72rem;
  font-weight: 650;
  line-height: 1.65;
  letter-spacing: .16em;
}

.philosophy-introduction-head,
.philosophy-introduction-layout,
.philosophy-introduction-conclusion,
.philosophy-section-heading,
.philosophy-story-heading,
.philosophy-story-body {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
}

:is(.philosophy-introduction-head, .philosophy-section-heading, .philosophy-story-heading) h2 {
  margin: 0;
  font-size: clamp(2.6rem, 4.65vw, 4.75rem);
  font-weight: 710;
  line-height: 1.4;
  letter-spacing: -.055em;
  text-wrap: balance;
}

/* An open two-column introduction, followed by the central question. */
.philosophy-introduction {
  background: #fffefa;
}

.philosophy-introduction-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: start;
  gap: clamp(42px, 6vw, 85px);
  margin-top: clamp(45px, 6vw, 82px);
}

.philosophy-introduction-context p {
  margin: 0;
  color: #4d454f;
  font-size: clamp(1rem, 1.2vw, 1.13rem);
  line-height: 2.15;
  text-wrap: pretty;
}

.philosophy-introduction-context p + p {
  margin-top: 23px;
}

.philosophy-introduction-questions {
  padding-left: clamp(26px, 3.5vw, 47px);
  border-left: 1px solid #d8cfd9;
}

.philosophy-question-lead {
  margin: 0 0 22px;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  font-weight: 650;
  line-height: 1.9;
  letter-spacing: -.025em;
}

.philosophy-introduction-questions ul {
  display: grid;
  gap: 17px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.philosophy-introduction-questions li {
  position: relative;
  padding-left: 17px;
  color: var(--philosophy-copy-muted);
  font-size: .97rem;
  line-height: 1.95;
}

.philosophy-introduction-questions li::before {
  content: "";
  position: absolute;
  top: .92em;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #9d8da4;
}

.philosophy-introduction-conclusion {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  align-items: end;
  gap: 34px 60px;
  margin-top: clamp(65px, 8vw, 110px);
  padding-top: clamp(38px, 5vw, 66px);
  border-top: 1px solid #d8cfd9;
}

.philosophy-introduction-conclusion > .philosophy-question-bridge {
  grid-column: 1 / -1;
}

.philosophy-core-question {
  margin: 0;
  font-size: clamp(1.9rem, 3.1vw, 3rem);
  font-weight: 650;
  line-height: 1.65;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.philosophy-introduction-conclusion > p:not(.philosophy-core-question) {
  margin: 0 0 7px;
  color: var(--philosophy-copy-muted);
  font-size: .97rem;
  line-height: 2;
}

/* The diagram keeps its complete composition at every viewport size. */
.philosophy-harmony-diagram {
  padding-bottom: clamp(58px, 7vw, 100px);
  background: #f8f6f3;
}

.philosophy-section-heading > p:not(.eyebrow) {
  max-width: 700px;
  margin: 29px 0 0;
  color: var(--philosophy-copy-muted);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 2;
}

.philosophy-detail-figure {
  max-width: 860px;
  margin: clamp(36px, 4.5vw, 64px) auto 0;
}

.philosophy-detail-figure picture,
.philosophy-detail-figure img {
  display: block;
  width: 100%;
}

.philosophy-detail-figure img {
  height: auto;
  object-fit: contain;
}

@media (max-width: 900px) {
  .philosophy-detail-figure {
    max-width: 600px;
    margin-inline: auto;
  }
}

/* Three chapters: ample reading space and a consistent text measure. */
.philosophy-harmony-story {
  padding-block: clamp(88px, 10vw, 155px) clamp(105px, 12vw, 185px);
  background: #fffefa;
}

.philosophy-story-body {
  margin-top: clamp(65px, 8vw, 115px);
}

.philosophy-story-chapter {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: start;
  column-gap: 34px;
}

.philosophy-story-chapter + .philosophy-story-chapter {
  margin-top: clamp(72px, 9vw, 130px);
  padding-top: clamp(40px, 5vw, 68px);
  border-top: 1px solid #e0d9df;
}

.philosophy-story-number {
  grid-column: 1;
  grid-row: 1 / 3;
  padding-top: 9px;
  color: var(--philosophy-copy-accent);
  font-size: .76rem;
  font-weight: 650;
  line-height: 1.7;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}

.philosophy-story-chapter h3 {
  grid-column: 2;
  margin: 0;
  font-size: clamp(1.6rem, 2.65vw, 2.65rem);
  font-weight: 650;
  line-height: 1.6;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.philosophy-story-chapter > .reading-copy {
  grid-column: 2;
  max-width: 38em;
  margin-top: 30px;
  color: #4e4551;
  font-size: clamp(1.13rem, 1.65vw, 1.55rem);
  font-weight: 400;
  line-height: 2.1;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}

.philosophy-story-chapter > .reading-copy > [data-reading-line] {
  display: block;
  margin: 0;
}

.philosophy-story-chapter > .reading-copy > [data-reading-line] + [data-reading-line] {
  margin-top: 24px;
}

/* The page closes with two plain, clearly separated declarations. */
.philosophy-declaration-vision {
  background: #f7f4f1;
}

.philosophy-declaration-mission {
  background: #fffefa;
  border-bottom: 1px solid #e9e3e4;
}

.philosophy-declaration > .wrap > .eyebrow {
  max-width: 1000px;
  margin-inline: auto;
  margin-bottom: 34px;
}

.philosophy-declaration > .wrap > .philosophy-declaration-title {
  max-width: 1000px;
  margin: 0 auto;
  font-size: clamp(2.4rem, 4.35vw, 4.35rem);
  font-weight: 710;
  line-height: 1.5;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.philosophy-declaration-title > span {
  display: block;
}

.philosophy-declaration-note {
  max-width: 1000px;
  margin: 34px auto 0;
  color: var(--philosophy-copy-muted);
  font-size: clamp(1rem, 1.25vw, 1.13rem);
  line-height: 2;
}

@media (max-width: 900px) {
  .philosophy-introduction-layout,
  .philosophy-introduction-conclusion {
    grid-template-columns: 1fr;
  }

  .philosophy-introduction-layout {
    gap: 40px;
  }

  .philosophy-introduction-questions {
    padding-left: 28px;
  }

  .philosophy-introduction-conclusion {
    gap: 23px;
  }

  .philosophy-introduction-conclusion > p:not(.philosophy-core-question) {
    max-width: 580px;
    margin-bottom: 0;
  }

  .philosophy-story-chapter {
    grid-template-columns: 35px minmax(0, 1fr);
    column-gap: 22px;
  }

  .philosophy-story-number {
    padding-top: 7px;
  }

  .philosophy-story-chapter > .reading-copy {
    font-size: 1.17rem;
  }

  .philosophy-declaration > .wrap > .philosophy-declaration-title {
    font-size: clamp(2.05rem, 5.6vw, 3.5rem);
  }
}

@media (max-width: 600px) {
  .philosophy-detail-figure {
    width: calc(100% + 24px);
    margin-inline: -12px;
  }

  .philosophy-introduction,
  .philosophy-harmony-diagram,
  .philosophy-declaration {
    padding-block: 68px;
  }

  :is(.philosophy-introduction, .philosophy-harmony-diagram, .philosophy-harmony-story, .philosophy-declaration) .eyebrow {
    margin-bottom: 21px;
    font-size: .66rem;
    letter-spacing: .14em;
  }

  :is(.philosophy-introduction-head, .philosophy-section-heading, .philosophy-story-heading) h2 {
    font-size: clamp(2.05rem, 8.2vw, 2.9rem);
    line-height: 1.5;
    letter-spacing: -.05em;
  }

  .philosophy-introduction-layout {
    gap: 34px;
    margin-top: 32px;
  }

  .philosophy-introduction-context p {
    font-size: .96rem;
    line-height: 2;
  }

  .philosophy-introduction-context p + p {
    margin-top: 20px;
  }

  .philosophy-introduction-questions {
    padding-left: 22px;
  }

  .philosophy-question-lead {
    margin-bottom: 17px;
    font-size: 1.03rem;
  }

  .philosophy-introduction-questions ul {
    gap: 13px;
  }

  .philosophy-introduction-questions li {
    font-size: .91rem;
  }

  .philosophy-introduction-conclusion {
    gap: 19px;
    margin-top: 44px;
    padding-top: 31px;
  }

  .philosophy-core-question {
    font-size: clamp(1.55rem, 6.3vw, 2.15rem);
    line-height: 1.7;
  }

  .philosophy-introduction-conclusion > p:not(.philosophy-core-question),
  .philosophy-section-heading > p:not(.eyebrow) {
    font-size: .94rem;
    line-height: 1.95;
  }

  .philosophy-section-heading > p:not(.eyebrow) {
    margin-top: 23px;
  }

  .philosophy-detail-figure {
    margin-top: 31px;
  }

  .philosophy-harmony-story {
    padding-block: 66px 78px;
  }

  .philosophy-story-body {
    margin-top: 44px;
  }

  .philosophy-story-chapter {
    grid-template-columns: 1fr;
  }

  .philosophy-story-number {
    grid-column: 1;
    grid-row: auto;
    padding-top: 0;
    margin-bottom: 17px;
    font-size: .7rem;
  }

  .philosophy-story-chapter h3,
  .philosophy-story-chapter > .reading-copy {
    grid-column: 1;
  }

  .philosophy-story-chapter h3 {
    font-size: clamp(1.42rem, 5.9vw, 1.9rem);
    line-height: 1.65;
  }

  .philosophy-story-chapter > .reading-copy {
    margin-top: 23px;
    font-size: 1.02rem;
    line-height: 2.05;
    letter-spacing: 0;
  }

  .philosophy-story-chapter > .reading-copy > [data-reading-line] + [data-reading-line] {
    margin-top: 19px;
  }

  .philosophy-story-chapter + .philosophy-story-chapter {
    margin-top: 44px;
    padding-top: 33px;
  }

  .philosophy-declaration > .wrap > .philosophy-declaration-title {
    font-size: clamp(1.9rem, 7.7vw, 2.65rem);
    line-height: 1.6;
    letter-spacing: -.05em;
  }

  .philosophy-declaration > .wrap > .eyebrow {
    margin-bottom: 25px;
  }

  .philosophy-declaration-note {
    margin-top: 26px;
    font-size: .94rem;
    line-height: 1.95;
  }
}