/* ethos-styles.css — Kaya Our Ethos page
   Loaded after: assets/colors_and_type.css, styles.css, journal-styles.css  */

/* =================================================================
   HERO
   ================================================================= */
.ethos-hero {
  position: relative;
  height: 100vh;
  height: 100svh; /* stable on mobile Safari — no jump when the URL bar collapses */
  min-height: 720px;
  color: var(--kaya-ivory);
  overflow: hidden;
}

.ethos-hero__bg {
  position: absolute; inset: 0;
  transform: scale(1.08);
  transition: transform 12s var(--ease-cine);
}
.ethos-hero__bg.is-in { transform: scale(1.0); }
.ethos-hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
  display: block;
}

.ethos-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15,11,10,0.72) 0%,
    rgba(15,11,10,0.22) 28%,
    rgba(15,11,10,0.38) 58%,
    rgba(15,11,10,0.96) 100%
  );
}

.ethos-hero__content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: clamp(110px, 14vh, 180px) clamp(24px, 5vw, 80px) clamp(40px, 6vh, 64px);
}

.ethos-hero__top {
  display: flex; justify-content: space-between; align-items: baseline;
}

.ethos-hero__meta {
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--kaya-ivory);
  opacity: 0; transform: translateY(8px);
  transition: opacity 1200ms 200ms var(--ease-cine), transform 1200ms 200ms var(--ease-cine);
}
.ethos-hero__meta.is-in { opacity: 1; transform: translateY(0); }

.ethos-hero__main {
  display: flex; flex-direction: column; gap: 36px;
  max-width: 88vw;
}

.ethos-hero__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(72px, 14vw, 210px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--kaya-ivory);
  margin: 0;
  opacity: 0; transform: translateY(24px);
  transition: opacity 1600ms var(--ease-cine), transform 1600ms var(--ease-cine);
}
.ethos-hero__title.is-in { opacity: 1; transform: translateY(0); }

.ethos-hero__sub {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.72;
  color: var(--kaya-ivory);
  max-width: 50ch;
  margin: 0;
  opacity: 0; transform: translateY(12px);
  transition: opacity 1800ms 380ms var(--ease-cine), transform 1800ms 380ms var(--ease-cine);
}
.ethos-hero__sub.is-in { opacity: 1; transform: translateY(0); }

.ethos-hero__foot {
  display: flex; justify-content: flex-end;
  border-top: 1px solid var(--kaya-ivory);
  padding-top: 22px;
  opacity: 0; transform: translateY(8px);
  transition: opacity 1800ms 800ms var(--ease-cine), transform 1800ms 800ms var(--ease-cine);
}
.ethos-hero__foot.is-in { opacity: 1; transform: translateY(0); }

.ethos-hero__scroll {
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--kaya-ivory);
  writing-mode: vertical-rl; transform: rotate(180deg);
  display: inline-flex; align-items: center; gap: 14px;
}
.ethos-hero__scroll::after {
  content: ""; width: 1px; height: 44px;
  background: var(--kaya-ivory); display: block;
  animation: scroll-pulse 2.6s var(--ease-cine) infinite;
  transform-origin: top;
}

/* =================================================================
   OPENING
   ================================================================= */
.ethos-opening {
  background: var(--kaya-ivory);
  padding: clamp(96px, 14vh, 160px) clamp(24px, 5vw, 80px);
}
.ethos-opening__inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(48px, 8vw, 120px);
  align-items: center;
}
.ethos-opening__left {
  display: flex; flex-direction: column; gap: 28px;
}
.ethos-opening__left p {
  font-family: var(--font-body);
  font-size: 16px; line-height: 1.85;
  color: var(--kaya-ink);
  margin: 0; max-width: 48ch;
}
.ethos-opening__quote blockquote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 3.6vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--kaya-ink);
  margin: 0; padding: 0;
  border: 0; font-style: normal;
  max-width: 20ch;
  text-wrap: balance;
}

/* =================================================================
   PRINCIPLE SECTIONS
   ================================================================= */
.ethos-principle {
  padding: clamp(96px, 14vh, 160px) clamp(24px, 5vw, 80px);
}
.ethos-principle--bone  { background: var(--kaya-bone); }
.ethos-principle--ivory { background: var(--kaya-ivory); }

.ethos-principle__inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 8vw, 120px);
  align-items: center;
}

.ethos-principle--reversed .ethos-principle__media { order: 2; }
.ethos-principle--reversed .ethos-principle__body  { order: 1; }

.ethos-principle__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--kaya-sand);
}
.ethos-principle__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04);
  transition: transform 2400ms var(--ease-cine);
}
.ethos-principle__media.is-in img { transform: scale(1.0); }

.ethos-principle__body {
  display: flex; flex-direction: column; gap: 28px;
}

.ethos-principle__num {
  display: flex; align-items: center; gap: 16px;
}
.ethos-principle__num::before {
  content: ""; display: block;
  width: 64px; height: 1px;
  background: currentColor;
}

/* shared eyebrow dash — thin + long, replaces typed em dashes */
.eyebrow--rule {
  display: inline-flex; align-items: center; gap: 16px;
}
.eyebrow--rule::before {
  content: ""; display: block;
  width: 64px; height: 1px;
  background: currentColor;
}

.ethos-principle__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 3.6vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--kaya-ink);
  margin: 0; max-width: 20ch;
  text-wrap: balance;
}

.ethos-principle__body p {
  font-family: var(--font-body);
  font-size: 16px; line-height: 1.85;
  color: var(--kaya-ink);
  margin: 0; max-width: 46ch;
}

/* =================================================================
   MANIFESTO  (Principle 03 — typographic centerpiece)
   ================================================================= */
.ethos-manifesto {
  background: var(--kaya-burgundy);
  color: var(--kaya-ivory);
  padding: clamp(120px, 20vh, 220px) clamp(24px, 5vw, 80px);
}
.ethos-manifesto__inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; flex-direction: column;
  gap: clamp(40px, 6vh, 72px);
}

.ethos-manifesto__statement {
  display: flex; flex-direction: column;
  gap: clamp(6px, 0.8vh, 14px);
}
.ethos-manifesto__word {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(72px, 13vw, 200px);
  line-height: 0.9;
  letter-spacing: -0.046em;
  color: var(--kaya-ivory);
  display: block;
}
.ethos-manifesto__word--italic {
  font-style: italic;
  color: var(--kaya-ivory);
}
.ethos-manifesto__eyebrow { color: var(--kaya-ivory); }

.ethos-manifesto__body {
  max-width: 50ch;
}
.ethos-manifesto__body p {
  font-family: var(--font-body);
  font-size: 17px; line-height: 1.85;
  color: var(--kaya-ivory);
  margin: 0 0 18px;
}
.ethos-manifesto__body p:last-child { margin-bottom: 0; }
.ethos-manifesto__body em {
  font-style: italic; color: var(--kaya-ivory);
}

/* =================================================================
   JOIN / CTA
   ================================================================= */
.ethos-join {
  background: var(--kaya-burgundy);
  color: var(--kaya-ivory);
  padding: clamp(120px, 18vh, 200px) clamp(24px, 5vw, 80px);
}
.ethos-join__inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; flex-direction: column;
  gap: clamp(64px, 10vh, 120px);
}

.ethos-join__header {
  text-align: center;
  display: flex; flex-direction: column;
  align-items: center; gap: 28px;
}
.ethos-join__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(48px, 8vw, 128px);
  line-height: 0.96;
  letter-spacing: -0.038em;
  color: var(--kaya-ivory);
  margin: 0; max-width: 14ch;
  text-wrap: balance;
  text-align: center;
}
.ethos-join__title em {
  font-style: italic; color: var(--kaya-ivory);
}
.ethos-join__sub {
  font-family: var(--font-body);
  font-size: 17px; line-height: 1.75;
  color: var(--kaya-ivory);
  max-width: 46ch; margin: 0;
  text-align: center;
}

.ethos-join__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(40px, 5vw, 80px);
  border-top: 1px solid rgba(245,238,230,0.10);
  padding-top: clamp(48px, 7vh, 80px);
}
.ethos-join__col {
  display: flex; flex-direction: column; gap: 22px;
}
.ethos-join__col-label {
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--kaya-ivory);
  margin: 0;
}
.ethos-join__col-body {
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.75;
  color: var(--kaya-ivory);
  margin: 0; max-width: 32ch;
}
.ethos-join__links {
  display: flex; flex-direction: column; gap: 16px;
}

/* newsletter form — dark surface overrides */
.ethos-form {
  display: flex; flex-direction: column; gap: 12px;
}
.ethos-form__row {
  display: flex; align-items: center;
  border-bottom: 1px solid rgba(245,238,230,0.28);
  padding-bottom: 12px; gap: 16px;
}
.ethos-form__row input {
  flex: 1;
  font-family: var(--font-body); font-size: var(--fs-body);
  background: transparent; border: 0; outline: none;
  color: var(--kaya-ivory); padding: 0;
}
.ethos-form__row input::placeholder { color: rgba(245,238,230,0.28); }
.ethos-form__row button {
  font-family: var(--font-body); font-size: 11px;
  font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  color: var(--kaya-ivory);
  display: inline-flex; align-items: center; gap: 10px;
  transition: color var(--dur-base) var(--ease-cine);
  white-space: nowrap;
}
.ethos-form__row button:hover { color: var(--kaya-ivory); opacity: 0.7; }
.ethos-form__row button svg { transition: transform var(--dur-slow) var(--ease-cine); }
.ethos-form__row button:hover svg { transform: translateX(5px); }
.ethos-form__note {
  font-size: var(--fs-caption); letter-spacing: 0.08em;
  color: rgba(245,238,230,0.32);
}
.ethos-form-done {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--fs-h3);
  color: var(--kaya-ivory);
  padding: 16px 0;
  border-bottom: 1px solid var(--kaya-ivory);
}

/* belief statement — black interlude before the join section (07.06.26) */
.ethos-belief {
  background: #000000;
  padding: clamp(96px, 16vh, 180px) clamp(24px, 5vw, 80px);
  text-align: center;
}
.ethos-belief__inner p {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(17px, 1.9vw, 27px);
  line-height: 1.72;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  margin: 0 auto;
  max-width: 40ch;
}
.ethos-belief__inner em {
  font-style: italic; color: #FFFFFF;
  display: block;
  margin-top: 8px;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 980px) {
  .ethos-hero { min-height: 640px; }
  .ethos-opening__inner,
  .ethos-principle__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ethos-principle--reversed .ethos-principle__media { order: unset; }
  .ethos-principle--reversed .ethos-principle__body  { order: unset; }

  .ethos-join__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}
@media (max-width: 600px) {
  .ethos-hero { min-height: 560px; }
  .ethos-hero__main { max-width: 100%; }
  .ethos-hero__title { font-size: clamp(52px, 15vw, 72px); }
  .ethos-manifesto__word { font-size: clamp(52px, 15vw, 90px); }
  .ethos-join__title { font-size: clamp(44px, 12vw, 80px); }
}