/* ============ fonts ============ */
@font-face { font-family: "EB Garamond"; src: url("../assets/fonts/EBGaramond-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../assets/fonts/EBGaramond-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/Inter-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/Inter-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Bootzy"; src: url("../assets/fonts/BootzyTM.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --bg: #ffffff;
  --ink: #111111;
  --sage: #dce8cc;
  --sage-ink: #1c2616;
  --serif: "EB Garamond", Garamond, Georgia, serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --display: "Bootzy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* one design pixel: measurements come from the ~1100px Canva artboard,
     scaled with the window so the page fills large screens like the mock */
  --u: clamp(1px, calc(100vw / 1000), 1.75px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }

.page {
  max-width: calc(1100 * var(--u));
  margin: 0 auto;
  padding: 0 0 calc(160 * var(--u));
}

/* ============ header ============ */
.masthead { padding: calc(68 * var(--u)) calc(62 * var(--u)) 0; }
.masthead__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(56 * var(--u));
  line-height: 0.9;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.socials {
  display: flex;
  gap: calc(10 * var(--u));
  margin-top: calc(14 * var(--u));
}
.socials a {
  display: grid;
  place-items: center;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  transition: opacity 0.25s ease;
}
.socials a:hover { opacity: 0.55; }
.socials svg {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.socials svg .fill { fill: var(--ink); stroke: none; }

/* ============ about ============ */
.about {
  display: grid;
  grid-template-columns: calc(440 * var(--u)) calc(318 * var(--u));
  column-gap: calc(48 * var(--u));
  align-items: start;
  padding: calc(66 * var(--u)) calc(62 * var(--u)) 0;
}
.about__text {
  font-size: calc(16 * var(--u));
  line-height: 1.08;
  /* pull the first line's cap height up to the portrait's top edge */
  margin-top: -0.06em;
}
.about__text p + p { margin-top: 1.05em; }
.about__portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
.about__portrait figcaption {
  font-family: var(--sans);
  font-size: calc(12 * var(--u));
  line-height: 1.1;
  text-transform: uppercase;
  width: max-content;
  margin: calc(14 * var(--u)) auto 0;
}

/* ============ mission + cta ============ */
.mission {
  width: calc(440 * var(--u));
  margin: calc(90 * var(--u)) auto 0;
  font-size: calc(16 * var(--u));
  line-height: 1.08;
}
.mission p + p { margin-top: 1.05em; }

.cta { display: flex; justify-content: center; margin-top: calc(50 * var(--u)); }
.cta__btn {
  display: inline-block;
  padding: calc(9 * var(--u)) calc(15 * var(--u));
  border-radius: 999px;
  background: var(--sage);
  color: var(--sage-ink);
  font-family: var(--sans);
  font-weight: 700;
  font-size: calc(14 * var(--u));
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}
.cta__btn:hover { transform: scale(1.05); background: #cfe0bb; }

/* ============ pillars ============ */
.kind {
  font-family: var(--sans);
  font-size: calc(16 * var(--u));
  text-align: center;
  margin-top: calc(140 * var(--u));
}
.kind strong { font-weight: 700; }

.pillars {
  display: grid;
  grid-template-columns: calc(240 * var(--u)) calc(200 * var(--u)) calc(200 * var(--u));
  column-gap: calc(100 * var(--u));
  justify-content: center;
  align-items: center;
  margin-top: calc(56 * var(--u));
}
.pillars__quote {
  font-family: var(--serif);
  font-size: calc(21 * var(--u));
  line-height: 1.1;
}
.pillars__list {
  list-style: none;
  font-family: var(--sans);
  font-size: calc(13 * var(--u));
}
.pillars__list li + li { margin-top: calc(28 * var(--u)); }
.pillars__list h3 {
  font-weight: 700;
  font-size: calc(13 * var(--u));
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.pillars__list p {
  line-height: 1.05;
  margin-top: calc(10 * var(--u));
}
.pillars__video video {
  width: 100%;
  aspect-ratio: 200 / 322;
  object-fit: cover;
  background: #e9e9e6;
}

/* ============ tribe ============ */
.tribe { margin-top: calc(72 * var(--u)); }
.tribe__inner {
  --tw: calc(583 * var(--u));
  width: var(--tw);
  margin: 0 auto;
}
.tribe__img {
  width: calc(var(--tw) * 0.465);
  margin: 0 auto;
}
.tribe__img img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.tribe__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(var(--tw) * 0.08);
  line-height: 0.86;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.tribe__row {
  display: flex;
  justify-content: space-between;
}
/* top row sits beside the image, its baseline on the image's bottom edge */
.tribe__row--top { margin-top: -0.72em; }

/* ============ substack ============ */
.substack {
  display: flex;
  justify-content: center;
  margin-top: calc(110 * var(--u));
  padding: 0 24px;
}
.substack iframe {
  display: block;
  width: 480px;
  max-width: 100%;
  height: 320px;
  border: 0;
  background: transparent;
}

/* ============ reveal on scroll ============ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

/* ============ tablet ============ */
@media (max-width: 1000px) {
  :root { --u: 1px; }
  .masthead, .about { padding-left: 6vw; padding-right: 6vw; }
  .about { grid-template-columns: 1fr 34vw; column-gap: 5vw; }
  .pillars { grid-template-columns: 1fr 1fr 18vw; column-gap: 5vw; padding: 0 6vw; }
}

/* ============ mobile ============ */
@media (max-width: 720px) {
  .page { padding-bottom: 110px; }
  .masthead { padding: 44px 24px 0; }
  .masthead__name { font-size: clamp(38px, 12vw, 56px); }

  .about {
    grid-template-columns: 1fr;
    row-gap: 44px;
    padding: 44px 24px 0;
  }
  .about__text { margin-top: 0; font-size: 17px; line-height: 1.18; }
  .about__portrait img { max-width: 420px; margin: 0 auto; }

  .mission { width: auto; margin: 72px 24px 0; font-size: 17px; line-height: 1.18; }

  .kind { margin-top: 100px; }

  .pillars {
    grid-template-columns: 1fr;
    row-gap: 48px;
    padding: 0 24px;
    margin-top: 44px;
  }
  .pillars__quote { font-size: 23px; }
  .pillars__list { font-size: 14px; }
  .pillars__list h3 { font-size: 14px; }
  .pillars__video { justify-self: center; width: 64vw; max-width: 280px; }

  /* on phones the title sits under the image as two tight lines */
  .tribe { margin-top: 80px; }
  .tribe__inner { --tw: calc(100vw - 48px); }
  .tribe__img { width: 62vw; }
  .tribe__title { font-size: 9vw; text-align: center; margin-top: 22px; line-height: 0.92; }
  .tribe__row { justify-content: center; gap: 0.28em; }
  .tribe__row--top { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: opacity 0.6s ease; transform: none; }
  html { scroll-behavior: auto; }
}