/* ========================================================
   FOUNDATION
======================================================== */

:root {
  --ivory: #f3eee4;
  --paper-light: #f7f3eb;

  --charcoal: #34322f;
  --soft-charcoal: #67615a;
  --faint-charcoal: #918a80;

  --terracotta: #a5624f;
  --olive: #77774f;
  --violet: #77627d;

  --line: rgba(52, 50, 47, 0.16);

  --page-padding: clamp(24px, 4.6vw, 78px);

  --content-width: 1440px;

  --serif: "Libre Caslon Text", Georgia, serif;

  --sans: "Inter", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background: var(--ivory);
  color: var(--charcoal);

  font-family: var(--sans);

  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

::selection {
  background: rgba(165, 98, 79, 0.22);
}

/* ========================================================
   HEADER
======================================================== */

.site-header {
  position: absolute;
  z-index: 100;

  top: 0;
  left: 0;

  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 26px var(--page-padding);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.brand-primary {
  font-family: var(--serif);

  font-size: 18px;
  letter-spacing: 0.025em;
}

.brand-secondary {
  font-size: 10px;

  letter-spacing: 0.13em;
  text-transform: uppercase;

  color: var(--soft-charcoal);
}

.desktop-nav {
  display: flex;
  align-items: center;

  gap: clamp(20px, 2.6vw, 42px);
}

.desktop-nav a {
  position: relative;

  font-size: 12px;

  color: var(--soft-charcoal);
}

.desktop-nav a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -6px;

  width: 0;
  height: 1px;

  background: var(--terracotta);

  transition: width 180ms ease;
}

.desktop-nav a:hover::after {
  width: 100%;
}

.menu-button {
  display: none;

  padding: 0;

  border: 0;
  background: transparent;

  color: var(--charcoal);

  font-size: 12px;
}

/* ========================================================
   HERO
======================================================== */

.hero {
  position: relative;

  min-height: min(920px, 94vh);

  display: flex;
  align-items: center;

  overflow: hidden;

  padding: clamp(120px, 14vh, 170px) var(--page-padding) clamp(80px, 10vh, 120px);

  background: url("/images/hero_bg.jpg") center center / cover no-repeat;
}

.hero-content {
  position: relative;

  z-index: 2;

  width: min(580px, 52vw);

  margin-left: clamp(25px, 5vw, 80px);

  transform: translateY(-25px);
}

.hero h1 {
  margin: 0 0 18px;

  font-family: var(--serif);

  font-size: clamp(48px, 5vw, 72px);

  font-weight: 400;

  line-height: 0.98;

  letter-spacing: -0.045em;
}

.hero h1 span {
  display: block;
}

.hero-tagline {
  margin: 0;

  font-family: var(--serif);

  font-size: clamp(20px, 1.8vw, 27px);

  line-height: 1.4;

  color: var(--terracotta);
}

/* ========================================================
   GENERAL SECTION SYSTEM
======================================================== */

.section {
  padding: clamp(110px, 12vw, 190px) var(--page-padding);
}

.narrow {
  width: min(760px, 100%);

  margin: 0 auto;
}

.wide {
  width: min(var(--content-width), 100%);

  margin: 0 auto;
}

.eyebrow {
  margin: 0 0 32px;

  font-size: 10px;

  font-weight: 500;

  letter-spacing: 0.19em;

  text-transform: uppercase;

  color: var(--soft-charcoal);
}

.display-heading {
  margin: 0 0 46px;

  font-family: var(--serif);

  font-size: clamp(42px, 5.3vw, 72px);

  font-weight: 400;

  line-height: 1.05;

  letter-spacing: -0.04em;
}

.intro-copy {
  margin: 0 0 30px;

  font-family: var(--serif);

  font-size: clamp(21px, 2.1vw, 29px);

  line-height: 1.54;
}

.intro-copy.smaller {
  font-size: clamp(20px, 1.8vw, 26px);
}

.body-copy {
  max-width: 650px;

  margin: 0 0 26px;

  color: var(--soft-charcoal);

  font-size: 16px;

  line-height: 1.85;
}

.text-link {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  margin-top: 12px;

  padding-bottom: 5px;

  border-bottom: 1px solid rgba(52, 50, 47, 0.32);

  font-size: 13px;

  transition:
    color 180ms ease,
    border-color 180ms ease;
}

.text-link:hover {
  color: var(--terracotta);

  border-color: var(--terracotta);
}

/* ========================================================
   FOUNDATION
======================================================== */

.foundation {
  padding-top: clamp(140px, 15vw, 220px);
}

/* ========================================================
   PATHWAYS
======================================================== */

.pathways {
  border-top: 1px solid var(--line);
}

.section-heading-row {
  display: grid;

  grid-template-columns: 1fr 1.2fr;

  gap: clamp(60px, 10vw, 160px);

  margin-bottom: clamp(70px, 9vw, 130px);
}

.section-intro {
  max-width: 540px;

  margin: 0;

  font-family: var(--serif);

  font-size: clamp(20px, 2vw, 28px);

  line-height: 1.55;
}

.pathway-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: clamp(40px, 6vw, 100px);
}

.pathway {
  padding-top: 20px;

  border-top: 1px solid var(--line);
}

.pathway-number {
  margin: 0 0 54px;

  font-size: 10px;

  letter-spacing: 0.13em;

  color: var(--faint-charcoal);
}

.pathway h3 {
  margin: 0 0 24px;

  font-family: var(--serif);

  font-size: clamp(38px, 3.8vw, 56px);

  font-weight: 400;

  line-height: 1;
}

.pathway p:last-child {
  max-width: 330px;

  margin: 0;

  color: var(--soft-charcoal);

  font-size: 15px;

  line-height: 1.75;
}

/* ========================================================
   FEATURE SECTIONS
======================================================== */

.feature-section {
  width: min(var(--content-width), calc(100% - (var(--page-padding) * 2)));

  margin: 0 auto;

  padding: clamp(90px, 11vw, 170px) 0;

  display: grid;

  grid-template-columns: 1.15fr 0.85fr;

  align-items: center;

  gap: clamp(55px, 9vw, 140px);

  border-top: 1px solid var(--line);
}

.feature-reverse {
  grid-template-columns: 0.85fr 1.15fr;
}

.feature-reverse .feature-image {
  order: 2;
}

.feature-image {
  aspect-ratio: 1.35 / 1;

  overflow: hidden;

  background: rgba(52, 50, 47, 0.055);
}

.image-placeholder {
  width: 100%;
  height: 100%;

  display: grid;

  place-items: center;

  color: var(--faint-charcoal);

  font-size: 11px;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}

.feature-copy {
  max-width: 510px;
}

.feature-copy h2 {
  margin: 0 0 28px;

  font-family: var(--serif);

  font-size: clamp(39px, 4.3vw, 62px);

  font-weight: 400;

  line-height: 1.08;

  letter-spacing: -0.035em;
}

.feature-copy > p:not(.eyebrow) {
  margin: 0 0 26px;

  color: var(--soft-charcoal);

  font-size: 16px;

  line-height: 1.8;
}

/* ========================================================
   INTERLUDE
======================================================== */

.interlude {
  position: relative;

  min-height: 580px;

  display: grid;

  place-items: center;

  overflow: hidden;

  padding: 100px var(--page-padding);
}

.interlude p {
  position: relative;

  z-index: 3;

  width: min(850px, 100%);

  margin: 0;

  text-align: center;

  font-family: var(--serif);

  font-size: clamp(39px, 5.2vw, 72px);

  line-height: 1.16;

  letter-spacing: -0.035em;
}

.interlude-brush {
  position: absolute;

  right: -8%;
  bottom: -45%;

  width: 500px;
  height: 720px;

  opacity: 0.08;

  background: var(--terracotta);

  transform: rotate(32deg);
}

/* ========================================================
   TRADITION
======================================================== */

.tradition {
  border-top: 1px solid var(--line);
}

.tradition-grid {
  width: min(var(--content-width), 100%);

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: clamp(70px, 12vw, 190px);
}

.tradition h2 {
  max-width: 570px;

  margin: 0;

  font-family: var(--serif);

  font-size: clamp(40px, 4.7vw, 67px);

  font-weight: 400;

  line-height: 1.08;

  letter-spacing: -0.035em;
}

/* ========================================================
   JOURNAL / CURRENT WORK
======================================================== */

.journal {
  border-top: 1px solid var(--line);
}

.journal-heading {
  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  gap: 40px;

  margin-bottom: clamp(70px, 8vw, 110px);
}

.journal-heading h2 {
  max-width: 670px;

  margin: 0;

  font-family: var(--serif);

  font-size: clamp(40px, 4.7vw, 64px);

  font-weight: 400;

  line-height: 1.08;

  letter-spacing: -0.035em;
}

.journal-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: clamp(28px, 4vw, 60px);
}

.journal-image {
  aspect-ratio: 0.95 / 1;

  margin-bottom: 25px;

  overflow: hidden;

  background: rgba(52, 50, 47, 0.055);
}

.journal-type {
  margin: 0 0 12px;

  color: var(--terracotta);

  font-size: 9px;

  font-weight: 500;

  letter-spacing: 0.17em;

  text-transform: uppercase;
}

.journal-item h3 {
  margin: 0 0 14px;

  font-family: var(--serif);

  font-size: clamp(23px, 2.3vw, 32px);

  font-weight: 400;

  line-height: 1.2;
}

.journal-item > a > p:last-child {
  max-width: 360px;

  margin: 0;

  color: var(--soft-charcoal);

  font-size: 14px;

  line-height: 1.7;
}

/* ========================================================
   CLOSING
======================================================== */

.closing {
  min-height: 570px;

  display: grid;

  place-items: center;

  padding: 120px var(--page-padding);

  border-top: 1px solid var(--line);
}

.closing-inner {
  text-align: center;
}

.closing-lotus {
  margin-bottom: 30px;

  color: var(--terracotta);

  font-size: 22px;
}

.closing-brand {
  margin: 0 0 22px;

  font-size: 11px;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}

.closing h2 {
  margin: 0;

  font-family: var(--serif);

  font-size: clamp(40px, 5vw, 65px);

  font-weight: 400;

  line-height: 1.1;
}

/* ========================================================
   FOOTER
======================================================== */

.site-footer {
  padding: 70px var(--page-padding) 28px;

  color: var(--paper-light);

  background: var(--charcoal);
}

.footer-main {
  display: flex;

  justify-content: space-between;

  gap: 70px;

  padding-bottom: 80px;
}

.footer-logo {
  margin: 0 0 20px;

  font-family: var(--serif);

  font-size: 23px;
}

.footer-logo span {
  display: block;

  margin-top: 4px;

  font-size: 17px;
}

.footer-brand > p:last-child {
  color: rgba(247, 243, 235, 0.6);

  font-size: 12px;
}

.footer-links {
  display: flex;

  gap: clamp(70px, 10vw, 150px);
}

.footer-links div {
  display: flex;

  flex-direction: column;

  gap: 15px;
}

.footer-links a {
  color: rgba(247, 243, 235, 0.72);

  font-size: 12px;
}

.footer-links a:hover {
  color: white;
}

.footer-bottom {
  display: flex;

  justify-content: space-between;

  gap: 30px;

  padding-top: 24px;

  border-top: 1px solid rgba(247, 243, 235, 0.15);

  color: rgba(247, 243, 235, 0.45);

  font-size: 10px;

  letter-spacing: 0.05em;
}

/* ========================================================
   TABLET
======================================================== */

@media (max-width: 980px) {
  .hero-content {
    width: 58vw;
    margin-left: 0;
  }

  .section-heading-row {
    grid-template-columns: 1fr;

    gap: 30px;
  }

  .pathway-grid {
    grid-template-columns: 1fr;

    gap: 55px;
  }

  .pathway-number {
    margin-bottom: 25px;
  }

  .feature-section,
  .feature-reverse {
    grid-template-columns: 1fr;

    gap: 55px;
  }

  .feature-reverse .feature-image {
    order: 0;
  }

  .feature-copy {
    max-width: 650px;
  }

  .tradition-grid {
    grid-template-columns: 1fr;

    gap: 55px;
  }
}

/* ========================================================
   MOBILE
======================================================== */

@media (max-width: 720px) {
  :root {
    --page-padding: 24px;
  }

  .site-header {
    padding-top: 22px;
  }

  .desktop-nav {
    position: absolute;

    top: 65px;
    left: 24px;
    right: 24px;

    display: none;

    flex-direction: column;

    align-items: flex-start;

    gap: 20px;

    padding: 28px;

    background: rgba(247, 243, 235, 0.97);

    border: 1px solid var(--line);
  }

  .desktop-nav.is-open {
    display: flex;
  }

  .menu-button {
    display: block;
  }

  .brand-secondary {
    display: none;
  }

  .hero {
    min-height: 760px;

    align-items: flex-start;

    padding-top: 170px;

    background-position: 65% center;
  }

  .hero-content {
    width: 100%;

    margin-left: 0;

    transform: none;
  }

  .hero h1 {
    max-width: 320px;

    font-size: clamp(45px, 14vw, 62px);
  }

  .hero-tagline {
    font-size: 21px;
  }

  .display-heading br {
    display: none;
  }

  .feature-section {
    width: calc(100% - 48px);
  }

  .interlude {
    min-height: 450px;
  }

  .journal-heading {
    display: block;
  }

  .desktop-link {
    display: none;
  }

  .journal-grid {
    grid-template-columns: 1fr;

    gap: 70px;
  }

  .journal-image {
    aspect-ratio: 1.2 / 1;
  }

  .footer-main {
    flex-direction: column;

    padding-bottom: 60px;
  }

  .footer-links {
    gap: 60px;
  }

  .footer-bottom {
    flex-direction: column;

    gap: 8px;
  }
}