/* ============ The Way of Inner Knowing ============ */

@font-face {
  font-family: 'HN';
  src: url('../assets/fonts/HelveticaNeue-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'HN';
  src: url('../assets/fonts/HelveticaNeue-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'IvyOra';
  src: url('../assets/fonts/IvyOra-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IvyOra';
  src: url('../assets/fonts/IvyOra-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #050505;
  --ink: #f4f2ee;
  --ink-dim: rgba(244, 242, 238, .72);
  --ink-faint: rgba(244, 242, 238, .45);
  --lilac: #d9b3e4;
  --peri: #ccccff;
  --ivory: #f4f2ee;
  --ivory-ink: #0d0d0d;
  --ivory-dim: rgba(13, 13, 13, .74);
  --sans: 'HN', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: 'IvyOra', Georgia, serif;
  --mono: ui-monospace, 'SF Mono', Menlo, 'Cascadia Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

::selection { background: var(--lilac); color: var(--bg); }

.mono {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  line-height: 1.75;
}

.wrap {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(22px, 5.5vw, 64px);
}
.wrap--narrow { max-width: 820px; }

.sec { padding: clamp(90px, 15vh, 190px) 0; }
.sec--tight { padding-top: 0; }
.sec--flush-top { padding-top: 0; }

/* ============ links & CTAs ============ */

.link { color: var(--lilac); text-decoration-color: rgba(217, 179, 228, .5); text-underline-offset: 3px; }
.link:hover { text-decoration-color: var(--lilac); }
.dim { color: var(--ink-dim); }

.cta-bracket {
  display: inline-block;
  color: var(--lilac);
  text-decoration: none;
  margin-top: 2.4em;
}
.cta-bracket span { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(217,179,228,.55); transition: text-decoration-color .3s; }
.cta-bracket:hover span { text-decoration-color: var(--lilac); }

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

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
}
.hero__bg {
  position: absolute; inset: 0;
  background: url('../assets/img/eclipse.jpg') center 38% / cover no-repeat;
  z-index: 0;
}
.hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(5,5,5,.35), rgba(5,5,5,0) 30%, rgba(5,5,5,0) 62%, var(--bg) 96%),
    radial-gradient(ellipse at 62% 42%, rgba(5,5,5,0) 30%, rgba(5,5,5,.55) 100%);
}
.hero__meta {
  position: absolute;
  z-index: 2;
  color: var(--ink-dim);
  text-decoration: none;
}
.hero__meta--tl { top: clamp(24px, 4vw, 44px); left: clamp(24px, 4.5vw, 56px); }
.hero__meta--tr { top: clamp(24px, 4vw, 44px); right: clamp(24px, 4.5vw, 56px); color: var(--lilac); }
.hero__meta--tr:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero__meta--bl { bottom: clamp(24px, 4vw, 44px); left: clamp(24px, 4.5vw, 56px); }

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(22px, 5.5vw, 64px);
  padding-top: 4vh;
}
.hero__eyebrow { color: var(--ink); letter-spacing: .34em; font-size: 13px; }
.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 10.5vw, 132px);
  line-height: 1.02;
  letter-spacing: .005em;
  margin-top: .25em;
}
.hero__title em { font-style: italic; }
.hero__sub {
  margin-top: 1.6em;
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--ink-dim);
  max-width: 34em;
}
.hero__scroll {
  position: absolute;
  bottom: clamp(24px, 4vw, 44px);
  right: clamp(24px, 4.5vw, 56px);
  color: var(--ink-faint);
  z-index: 2;
}

/* hero load sequence */
.ld { opacity: 0; transform: translateY(18px); animation: rise 1.1s cubic-bezier(.16,1,.3,1) forwards; }
.ld-1 { animation-delay: .15s; }
.ld-2 { animation-delay: .3s; }
.ld-3 { animation-delay: .55s; }
.ld-4 { animation-delay: .75s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ============ big serif statements ============ */

.bigserif {
  font-family: var(--serif);
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.35;
  max-width: 24em;
}
.bigserif + .bigserif { margin-top: 1.4em; }
.body + .bigserif { margin-top: 1.8em; }
.acc { font-style: italic; color: var(--lilac); }
.bigserif--dark { color: var(--ivory-ink); }
.acc-dark { font-style: italic; }

/* ============ questions ============ */

.qlist { list-style: none; max-width: 40em; }
.qlist li {
  display: flex;
  gap: 1.1em;
  align-items: baseline;
  padding: 1.15em 0;
  border-bottom: 1px dashed rgba(244,242,238,.18);
  font-size: clamp(16px, 1.7vw, 19px);
  color: var(--ink-dim);
}
.qlist li:first-child { border-top: 1px dashed rgba(244,242,238,.18); }

/* moon phase glyphs */
.mn {
  flex: none;
  display: inline-block;
  width: 15px; height: 15px;
  border: 1px solid var(--ink-faint);
  border-radius: 50%;
  transform: translateY(1px);
}
.mn svg { display: block; }
.sec--ivory .mn { border-color: rgba(13,13,13,.4); }

/* ============ body text ============ */

.body { color: var(--ink-dim); max-width: 36em; }
.body + .body { margin-top: 1.5em; }
.body-lg {
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.55;
  max-width: 30em;
}
.body-lg + .body { margin-top: 1.5em; }
.sec--ivory .body { color: var(--ivory-dim); }
.sec--ivory .body-lg { color: var(--ivory-ink); }

/* ============ cycle figure ============ */

.cycle { margin-top: clamp(48px, 8vh, 96px); }
.cycle img { width: min(880px, 100%); margin-inline: auto; mix-blend-mode: screen; }

/* ============ ivory sections ============ */

.sec--ivory { background: var(--ivory); color: var(--ivory-ink); }
.sec--ivory ::selection { background: var(--ivory-ink); color: var(--ivory); }
.sec--ivory.sec--flush-top { margin-top: calc(-1 * clamp(90px, 15vh, 190px) / 2); padding-top: 0; }

/* mega quote */
.mega {
  font-weight: 700;
  font-size: clamp(38px, 6.4vw, 92px);
  line-height: 1.04;
  letter-spacing: -.015em;
  text-transform: uppercase;
  max-width: 11.5em;
}
.mega__aside {
  margin-top: clamp(36px, 6vh, 64px);
  margin-left: auto;
  max-width: 26em;
  color: var(--ivory-dim);
}
.mega__aside p + p { margin-top: 1.4em; }

/* ============ guide ============ */

.guide {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.h-serif {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.15;
  margin-bottom: 1em;
}
.h-serif em { font-style: italic; }
.guide__sign {
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  margin-top: 1.6em;
  color: var(--lilac);
}
.guide__imgs { position: relative; padding-bottom: 90px; }
.guide__img--main { width: 86%; }
.guide__img--sub {
  position: absolute;
  width: 52%;
  right: 0;
  bottom: 0;
  border: 6px solid var(--bg);
}
.guide__img img { width: 100%; }

/* ============ why now (leaves band) ============ */

.sec--leaves {
  position: relative;
  background:
    linear-gradient(rgba(5,5,5,.88), rgba(5,5,5,.92)),
    url('../assets/img/leaves.jpg') center / cover no-repeat;
}
.eyebrow { color: var(--ink-faint); margin-bottom: 2.2em; display: block; }
.eyebrow--dark { color: rgba(13,13,13,.55); }

/* ============ what's inside ============ */

.inside {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
  gap: clamp(32px, 5vw, 80px);
}
.inside__label { position: sticky; top: 48px; align-self: start; }
.inside__list { list-style: none; }
.inside__list > li {
  border-top: 1px dashed rgba(13,13,13,.3);
  padding: clamp(26px, 3.6vh, 42px) 0;
}
.inside__list > li:last-child { border-bottom: 1px dashed rgba(13,13,13,.3); }
.inside__list h3 {
  font-weight: 700;
  font-size: clamp(22px, 3vw, 38px);
  letter-spacing: -.01em;
  line-height: 1.1;
}
.inside__list > li > p {
  margin-top: .5em;
  color: var(--ivory-dim);
  max-width: 36em;
}
.inside__maps {
  list-style: none;
  margin-top: 1.2em;
}
.inside__maps li {
  display: flex;
  gap: .9em;
  align-items: baseline;
  padding: .4em 0;
  color: var(--ivory-dim);
}
.inside__maps strong { color: var(--ivory-ink); font-weight: 700; }
.inside__note {
  margin-top: clamp(56px, 9vh, 100px);
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.5;
  color: var(--ivory-ink);
}

/* ============ walk away / learn ============ */

.walk {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.walk__img { aspect-ratio: 4 / 5; overflow: hidden; }
.walk__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.moonlist { list-style: none; max-width: 36em; }
.moonlist li {
  display: flex;
  gap: 1em;
  align-items: baseline;
  padding: .8em 0;
  color: var(--ink-dim);
}
.learn { margin-top: clamp(90px, 14vh, 170px); }
.moonlist--cols {
  max-width: none;
  columns: 2;
  column-gap: clamp(40px, 6vw, 96px);
}
.moonlist--cols li { break-inside: avoid; }

/* ============ coming home band ============ */

.home-band {
  position: relative;
  background:
    linear-gradient(to bottom, var(--bg) 0%, rgba(5,5,5,.62) 30%, rgba(5,5,5,.55) 70%, var(--bg) 100%),
    url('../assets/img/meditation.jpg') center / cover no-repeat;
  padding: clamp(130px, 22vh, 260px) 0;
}
.home-band .bigserif { margin-block: 1.2em; }
.home-band .body { color: var(--ink); text-shadow: 0 1px 18px rgba(5,5,5,.8); }

/* ============ join ============ */

.join { position: relative; text-align: center; overflow: hidden; }
.join__moon {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(78vw, 640px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217,179,228,.14) 0%, rgba(204,204,255,.07) 45%, rgba(5,5,5,0) 70%);
  pointer-events: none;
}
.join__wrap { position: relative; }
.join__price {
  font-weight: 700;
  font-size: clamp(84px, 14vw, 180px);
  line-height: 1;
  letter-spacing: -.02em;
}
.join__lines { margin-top: 2em; color: var(--ink-dim); }
.join__invite { margin-inline: auto; margin-top: 1.6em; max-width: 18em; }
.btn-join {
  display: inline-block;
  margin-top: 3em;
  padding: 1.15em 2.6em;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .18em;
  font-size: 14px;
  transition: background .35s, color .35s, border-color .35s;
}
.btn-join:hover, .btn-join:focus-visible {
  background: var(--lilac);
  border-color: var(--lilac);
  color: var(--bg);
}
.join__begin { margin-top: 2.6em; color: var(--ink-faint); }

/* ============ love notes ============ */

.lovenotes__title { text-align: center; margin-bottom: clamp(40px, 7vh, 80px); }
.shots { columns: 2; column-gap: 26px; max-width: 980px; margin-inline: auto; }
.shot {
  break-inside: avoid;
  margin-bottom: 26px;
  border: 1px solid rgba(244,242,238,.13);
  border-radius: 10px;
  overflow: hidden;
  background: #0b0b0b;
}
.shot img { width: 100%; }

/* ============ endcap ============ */

.endcap {
  text-align: center;
  padding: clamp(70px, 10vh, 120px) 24px clamp(56px, 8vh, 90px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4em;
}
.endcap__phases { display: flex; gap: 18px; }
.endcap .cta-bracket { margin-top: 0; }
.endcap__home { color: var(--ink-faint); text-decoration: none; }
.endcap__home:hover { color: var(--ink-dim); }

/* ============ moon progress ============ */

.moon-progress {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 10;
  opacity: .85;
}

/* ============ reveals ============ */

.rv { opacity: 0; transform: translateY(26px); transition: opacity .95s cubic-bezier(.16,1,.3,1), transform .95s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0ms); }
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv, .ld { opacity: 1; transform: none; animation: none; transition: none; }
}

/* ============ responsive ============ */

@media (max-width: 860px) {
  .guide { grid-template-columns: 1fr; }
  .guide__imgs { order: -1; max-width: 420px; }
  .inside { grid-template-columns: 1fr; }
  .inside__label { position: static; }
  .walk { grid-template-columns: 1fr; }
  .walk__img { max-width: 380px; }
  .moonlist--cols { columns: 1; }
  .shots { columns: 1; max-width: 640px; }
  .br-d { display: none; }
  .hero__meta--bl { display: none; }
  .hero__scroll { left: clamp(24px, 4.5vw, 56px); right: auto; }
  .moon-progress { right: 14px; bottom: 14px; }
}