/* ── About ─────────────────────────────────────────────────────────────── */
.intro { padding-bottom: calc(var(--section-y) + 6vw); }
.intro__grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 7rem); align-items: center;
}
.intro__text { display: grid; gap: 1.6rem; justify-items: start; }
.intro__text .display { margin-bottom: 0.5rem; }
.intro__text p:not(.statement-sm) { max-width: 34rem; font-size: 1.125rem; line-height: 1.6; }
.intro__media { position: relative; padding-bottom: 18%; }
.intro__main { aspect-ratio: 3 / 4; width: 72%; margin-left: auto; }
.intro__detail {
  position: absolute; left: 0; bottom: 0;
  width: 58%; aspect-ratio: 3 / 2;
  overflow: hidden; border-radius: 28px; background: var(--bd-ivory);
  box-shadow: 0 0 0 10px var(--ivory);
}
.intro__detail img { width: 100%; height: 100%; object-fit: cover; }

/* ── Beyond the lesson ─────────────────────────────────────────────────── */
.extras .backdrop { top: clamp(1rem, 3vw, 2.5rem); }
.extras__head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2.5rem; align-items: end;
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}
.extras__head p { font-size: 1.125rem; line-height: 1.6; color: var(--light-soft); justify-self: end; max-width: 26rem; }
.extras__list { display: grid; gap: clamp(4rem, 8vw, 8rem); }
.extra { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
.extra--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.extra--flip .extra__media { order: 2; }
.extra__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 32px; background: var(--bd-pine); }
.extra__media img { width: 100%; height: 100%; object-fit: cover; }
.extra__body { display: grid; gap: 1.25rem; justify-items: start; }
.extra__title { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.extra__text { font-size: 1.125rem; line-height: 1.6; color: var(--light-soft); max-width: 30rem; }

/* ── Philosophy ────────────────────────────────────────────────────────── */
.philosophy .display { max-width: 13ch; }
.marquee {
  display: grid; gap: 0.1em;
  margin-block: clamp(3rem, 6vw, 5.5rem);
  font-family: var(--font-serif);
  font-weight: 900;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  font-size: clamp(3.4rem, 9vw, 9.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
}
.marquee__track { display: flex; gap: 0.5em; width: max-content; will-change: transform; color: var(--bd-green); }
.marquee__track + .marquee__track { color: var(--gold-light); }
.marquee__track span { display: inline-block; }
.philosophy__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 7rem); align-items: start;
}
.philosophy__figure { display: grid; gap: 1.4rem; position: sticky; top: calc(var(--nav-h) + 2rem); }
.philosophy__figure .arch { aspect-ratio: 3 / 4; background: var(--bd-green); }
.philosophy__figure figcaption { font-size: 1.0625rem; line-height: 1.55; color: var(--light-soft); max-width: 28rem; }
.principles { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 4vw, 3.75rem) clamp(1.5rem, 4vw, 3.5rem); padding-top: 1rem; }
.principle { display: grid; gap: 0.6rem; align-content: start; }
.principle__title { font-size: clamp(1.4rem, 2vw, 1.9rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.principle__text { font-size: 1.0625rem; line-height: 1.55; color: var(--light-soft); }

/* ── Brand statement ───────────────────────────────────────────────────── */
.statement { position: relative; height: 220vh; background: var(--pine); }
.statement__sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
}
.statement__media { position: absolute; inset: 0; }
.statement__media img { width: 100%; height: 100%; object-fit: cover; }
.statement__shade { position: absolute; inset: 0; background: rgba(21, 40, 28, 0.55); }
.statement__quote { position: relative; color: var(--light); }
.statement__quote p {
  max-width: 17ch;
  font-size: clamp(2.4rem, 5.2vw, 5.4rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.statement__word { transition: opacity 0.2s linear; }
.statement__sign { margin-top: 2rem; font-size: 1.125rem; font-weight: 600; color: var(--gold-light); }

@media (prefers-reduced-motion: reduce) {
  .statement { height: auto; }
  .statement__sticky { position: relative; min-height: 100vh; padding-block: 8rem; }
}

/* ── Phone and tablet ─────────────────────────────────────────────────── */
@media (max-width: 899px) {
  .intro__grid, .extras__head, .extra, .extra--flip, .philosophy__grid { grid-template-columns: 1fr; }
  .extra--flip .extra__media { order: 0; }
  .extras__head p { justify-self: start; }
  .intro__media { padding-bottom: 22%; }
  .intro__main { width: 80%; }
  .intro__detail { width: 66%; border-radius: 20px; box-shadow: 0 0 0 6px var(--ivory); }
  .philosophy__figure { position: relative; top: 0; max-width: 30rem; }
  .extra__media { border-radius: 24px; }
}
@media (max-width: 559px) {
  .principles { grid-template-columns: 1fr; }
}