/* Home — the state the brand sells: calm, focus, steady.
   White ground throughout, one mild grey step for alternating sections, hairlines as the only
   separators. Everything is scoped under .home-page. Sections are plain vertical rhythm; there is
   no chapter apparatus, no folio and no ground transition on this page. */

.home-page { background: var(--bg); }

/* Section rhythm ---------------------------------------------------------- */
.home-page .section { padding-block: var(--section-gap); }
.home-page .section--mist { background: var(--bg-2); }
.home-page .hm-hero + .section { padding-block-start: var(--section-gap); }
.home-page .section--mist + .section:not(.section--mist) { padding-block-start: var(--section-gap); }

/* 1. Banner ---------------------------------------------------------------
   Full bleed, soft, low contrast. The scrim is warm and gradual so there is no
   edge anywhere in it; the type sits in the quietest part of the frame. */
.hm-hero { position: relative; isolation: isolate; min-height: min(92svh, 940px);
  display: grid; align-items: end; overflow: clip; background: var(--dark); }

.hm-hero__media { position: absolute; inset: 0; z-index: 0; margin: 0; }
.hm-hero__frame { position: absolute; inset: 0; }
.hm-hero__poster, .hm-hero__video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%; }
.hm-hero__video { opacity: 0; transition: opacity 1200ms var(--ease-out); }
.hm-hero__video.is-playing { opacity: 1; }

/* The reel: slides crossfade and only the active one is visible. The active slide drifts from a
   touch closer back to rest over its turn, which is the only movement the banner makes on its own. */
.hm-hero__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1600ms var(--ease-slow); }
.hm-hero__slide.is-active { opacity: 1; }
.hm-hero__slide.is-active :is(.hm-hero__poster, .hm-hero__video) { animation: hero-drift 9s linear both; }
@keyframes hero-drift { from { scale: 1.06; } to { scale: 1; } }
.hm-hero__dots { position: absolute; z-index: 1; inset-inline-end: var(--margin); bottom: clamp(1.75rem, 4.5vh, 3rem);
  display: flex; gap: .5rem; }
.hm-hero__dot { position: relative; width: 2rem; height: 1px; overflow: hidden; background: rgb(244 245 246 / .3); }
.hm-hero__dot::after { content: ""; position: absolute; inset: 0; background: var(--bone); transform-origin: left; scale: 0 1; }
.hm-hero__dot.is-active::after { animation: hero-dot var(--reel-interval, 7000ms) linear forwards; }
@keyframes hero-dot { to { scale: 1 1; } }
@media (prefers-reduced-motion: reduce) {
  .hm-hero__slide.is-active :is(.hm-hero__poster, .hm-hero__video), .hm-hero__dot.is-active::after { animation: none; }
}
html[data-still] .hm-hero__slide.is-active :is(.hm-hero__poster, .hm-hero__video),
html[data-still] .hm-hero__dot.is-active::after { animation: none; }

/* Two gradients, both soft: one warm wash from the lower left where the type sits,
   one gentle overall settle so white stays legible without the scene going flat. */
.hm-hero__scrim { position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgb(12 14 15 / .74) 0%, rgb(12 14 15 / .58) 30%, rgb(12 14 15 / .26) 58%, rgb(12 14 15 / .06) 100%),
    linear-gradient(to top, rgb(12 14 15 / .42) 0%, rgb(12 14 15 / .04) 45%, rgb(12 14 15 / .24) 100%); }

.hm-hero__inner { position: relative; z-index: 1;
  padding-block: calc(var(--nav-h) + clamp(4rem, 12vh, 9rem)) clamp(6rem, 16vh, 11rem); }
.hm-hero__copy { max-width: 46rem; }
.hm-hero__eyebrow { color: var(--bone-2); margin-block-end: clamp(1rem, 2.5vw, 1.75rem); }
.hm-hero__title { font-size: var(--t-display-xl); line-height: 1.02; letter-spacing: -.02em;
  font-weight: 600; color: var(--bone); margin: 0; max-width: 18ch;
  text-wrap: balance; }
.hm-hero__lead { margin-block-start: clamp(1.25rem, 2.6vw, 1.75rem); max-width: 38ch; color: var(--bone-2); }
.hm-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1rem, 2.5vw, 2rem);
  margin-block-start: clamp(1.75rem, 3.5vw, 2.5rem); }
.hm-hero__btn { border: 1px solid rgb(244 245 246 / .5); color: var(--bone);
  padding: .85rem 1.6rem; transition: background-color var(--d-hover) var(--ease-out), border-color var(--d-hover) var(--ease-out); }
.hm-hero__btn:hover, .hm-hero__btn:focus-visible { background: rgb(244 245 246 / .12); border-color: var(--bone); }
.hm-hero__signin { color: var(--bone); }

/* A single hairline that breathes, instead of an animated chevron. */
.hm-hero__cue { position: absolute; z-index: 1; inset-inline-start: 50%; bottom: clamp(1.5rem, 4vh, 2.75rem);
  translate: -50% 0; display: grid; place-items: center; width: 44px; height: 44px; }
.hm-hero__cue-line { display: block; width: 1px; height: 34px; background: rgb(244 245 246 / .55);
  transform-origin: top; animation: hero-cue 3.6s var(--ease-slow) infinite; }
@keyframes hero-cue { 0%, 100% { scale: 1 .35; opacity: .35 } 50% { scale: 1 1; opacity: .8 } }

/* Over the banner the header has no surface of its own until the reader scrolls. */
.site-header.is-over-media:not(.is-scrolled) { background: transparent; box-shadow: none; }
.site-header.is-over-media:not(.is-scrolled) :is(.wordmark, .site-nav__link,
  .site-header__link, .site-header__signout, .site-header__index) { color: var(--bone); }

@media (max-width: 63.98em) {
  .hm-hero { min-height: min(84svh, 720px); }
  .hm-hero__title { max-width: 14ch; }
  .hm-hero__scrim { background:
    linear-gradient(to top, rgb(12 14 15 / .80) 0%, rgb(12 14 15 / .48) 55%, rgb(12 14 15 / .30) 100%); }
}
@media (prefers-reduced-motion: reduce) { .hm-hero__cue-line { animation: none; opacity: .6 } }

/* 2. The feeling ----------------------------------------------------------
   Each state is paired with someone out in it; the hairline and its teal tick sit under the photo. */
.hm-feel__head { align-items: end; row-gap: 1.25rem; margin-block-end: clamp(2.5rem, 6vw, 4.5rem); }
.hm-feel__head h2 { margin: .5rem 0 0; max-width: 18ch; }
.hm-feel__lead { color: var(--fg-3); max-width: 34ch; padding-block-end: .35rem; }

.hm-feel__list { list-style: none; margin: 0; padding: 0; row-gap: clamp(2.5rem, 5vw, 3.5rem); }
.hm-feel__item { grid-column: span 4; }
.hm-feel__photo { margin: 0 0 1.25rem; aspect-ratio: 4 / 5; overflow: clip; background: var(--bg-2); }
.hm-feel__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 1400ms var(--ease-out); }
.hm-feel__item:hover .hm-feel__photo img { scale: 1.035; }
.hm-feel__text { position: relative; padding-block-start: 1.25rem; border-block-start: 1px solid var(--line); }
.hm-feel__tick { position: absolute; inset-block-start: -1px; inset-inline-start: 0; width: 2.5rem; height: 1px; background: var(--accent-bright); }
.hm-feel__word { font-size: var(--t-h3); font-weight: 600; margin: 0 0 .6rem; letter-spacing: -.01em; }
.hm-feel__body { color: var(--fg-2); margin: 0; max-width: 34ch; }

@media (max-width: 63.98em) {
  .hm-feel__item { grid-column: span 6; }
  .hm-feel__item:last-child { grid-column: 1 / -1; }
  .hm-feel__item:last-child .hm-feel__photo { aspect-ratio: 16 / 9; }
}
@media (max-width: 39.98em) {
  .hm-feel__item, .hm-feel__item:last-child { grid-column: 1 / -1; }
  .hm-feel__item:last-child .hm-feel__photo { aspect-ratio: 4 / 5; }
}

/* 2b. Out there -----------------------------------------------------------
   A mosaic of people in the day. Photographs run edge to edge inside their tiles with a narrow
   gutter; captions sit lower-left over a soft fade. */
.hm-moments__head { align-items: end; row-gap: 1.25rem; margin-block-end: clamp(2rem, 5vw, 3.5rem); }
.hm-moments__head h2 { margin: .5rem 0 0; max-width: 16ch; }
.hm-moments__lead { color: var(--fg-2); max-width: 38ch; padding-block-end: .35rem; }

.hm-moments__grid { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(6.5rem, 10vw, 11rem);
  gap: clamp(.5rem, 1vw, 1rem); }
.hm-moments__tile { position: relative; overflow: clip; background: var(--bg-2); }
.hm-moments__tile figure { position: absolute; inset: 0; margin: 0; }
.hm-moments__tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 1400ms var(--ease-out); }
.hm-moments__tile:hover img { scale: 1.04; }
.hm-moments__tile::after { content: ""; position: absolute; inset: auto 0 0; height: 50%; pointer-events: none;
  background: linear-gradient(to top, rgb(13 15 16 / .55), transparent); }
.hm-moments__tile figcaption { position: absolute; z-index: 1; inset-inline-start: clamp(.9rem, 1.6vw, 1.4rem);
  bottom: clamp(.8rem, 1.4vw, 1.2rem); color: var(--bone); font-weight: 600;
  font-size: clamp(1rem, .9rem + .35vw, 1.25rem); letter-spacing: -.005em; }

.hm-moments__tile--1 { grid-column: 1 / 6;  grid-row: 1 / 5; }
.hm-moments__tile--2 { grid-column: 6 / 13; grid-row: 1 / 3; }
.hm-moments__tile--3 { grid-column: 6 / 9;  grid-row: 3 / 5; }
.hm-moments__tile--4 { grid-column: 9 / 13; grid-row: 3 / 6; }
.hm-moments__tile--5 { grid-column: 1 / 9;  grid-row: 5 / 7; }
.hm-moments__tile--6 { grid-column: 9 / 13; grid-row: 6 / 7; }

@media (max-width: 63.98em) {
  .hm-moments__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(9rem, 38vw, 15rem); }
  .hm-moments__grid > .hm-moments__tile { grid-column: auto; grid-row: auto; }
  .hm-moments__grid > .hm-moments__tile--1 { grid-column: 1 / -1; grid-row: span 2; }
  .hm-moments__grid > .hm-moments__tile--6 { grid-column: 1 / -1; }
  .hm-moments__tile figcaption { font-size: .9375rem; line-height: 1.25; inset-inline-end: .75rem; }
}

/* 3. How it works --------------------------------------------------------- */
.hm-method__head { align-items: end; row-gap: 1.25rem; margin-block-end: clamp(2.5rem, 6vw, 4.5rem); }
.hm-method__head h2 { margin: .5rem 0 0; max-width: 14ch; }
.hm-method__lead { color: var(--fg-2); max-width: 44ch; padding-block-end: .35rem; }

.hm-method__body { align-items: start; row-gap: clamp(2.5rem, 5vw, 3.5rem); }
.hm-method__list { list-style: none; margin: 0; padding: 0; }
.hm-method__item { display: grid; grid-template-columns: 3.5rem 1fr; gap: 0 clamp(1rem, 2vw, 1.75rem);
  padding-block: clamp(1.5rem, 3vw, 2rem); border-block-start: 1px solid var(--line); }
.hm-method__item:last-child { border-block-end: 1px solid var(--line); }
.hm-method__n { font-size: var(--t-h3); color: var(--fg-4); line-height: 1.2; font-variant-numeric: tabular-nums; }
.hm-method__text h3 { margin: 0 0 .5rem; }
.hm-method__text p { margin: 0; color: var(--fg-2); max-width: 46ch; }
.hm-method__media .mat { background: var(--bg); }

@media (max-width: 63.98em) {
  .hm-method__item { grid-template-columns: 2.5rem 1fr; }
  .hm-method__media { display: none; }
}

/* 4. Who it's for ---------------------------------------------------------
   One full-bleed band of people outdoors carries the heading; the moments sit on white below. */
.hm-who { background: var(--bg); }
.hm-who__band { position: relative; isolation: isolate; min-height: min(80svh, 780px); display: grid; align-items: end;
  overflow: clip; background: var(--dark); }
.hm-who__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.hm-who__scrim { position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(115% 95% at 0% 100%, rgb(12 14 15 / .72) 0%, rgb(12 14 15 / .44) 36%, rgb(12 14 15 / 0) 68%),
    linear-gradient(90deg, rgb(12 14 15 / .26) 0%, rgb(12 14 15 / 0) 52%); }
.hm-who__over { padding-block: clamp(6rem, 14vw, 10rem) clamp(2.5rem, 6vw, 4.5rem); }
.hm-who__over .eyebrow { color: var(--bone-2); }
.hm-who__over h2 { margin: .5rem 0 0; max-width: 16ch; color: var(--bone); }
.hm-who__lead { color: var(--bone); max-width: 40ch; margin-block-start: 1rem; }

.hm-who__body { padding-block: clamp(2rem, 4vw, 3rem) var(--section-gap); }
.hm-who__moments { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gap); }
.hm-who__moment { display: grid; align-content: start; gap: .35rem; padding-block: clamp(1rem, 2vw, 1.4rem);
  border-block-start: 1px solid var(--line); }
.hm-who__moment-title { font-weight: 600; color: var(--fg); font-size: var(--t-h3); letter-spacing: -.01em; }
.hm-who__moment-line { color: var(--fg-3); }
@media (max-width: 47.98em) { .hm-who__moments { grid-template-columns: 1fr; } }
@media (max-width: 63.98em) {
  .hm-who__scrim { background: linear-gradient(to top, rgb(12 14 15 / .80) 0%, rgb(12 14 15 / .42) 55%, rgb(12 14 15 / .06) 100%); }
}

/* 5. The standard --------------------------------------------------------- */
.hm-standard__head { align-items: end; row-gap: 1.25rem; margin-block-end: clamp(2.5rem, 5vw, 4rem); }
.hm-standard__head h2 { margin: .5rem 0 0; max-width: 14ch; }
.hm-standard__lead { color: var(--fg-2); max-width: 42ch; padding-block-end: .35rem; }

.hm-standard__list { margin: 0; display: grid; }
.hm-standard__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: .35rem clamp(1.5rem, 4vw, 4rem); padding-block: clamp(1.1rem, 2.4vw, 1.6rem);
  border-block-start: 1px solid var(--line-2); }
.hm-standard__row:last-child { border-block-end: 1px solid var(--line-2); }
.hm-standard__term { display: flex; align-items: baseline; gap: .75rem; font-size: var(--t-h3);
  font-weight: 600; color: var(--fg); letter-spacing: -.01em; margin: 0; }
.hm-standard__mark { flex: none; width: .75rem; height: 1px; background: var(--fg); translate: 0 -.35em; }
.hm-standard__def { margin: 0; color: var(--fg-2); }

@media (max-width: 47.98em) { .hm-standard__row { grid-template-columns: 1fr; } }

/* 6. Journal -------------------------------------------------------------- */
.hm-journal__head { align-items: end; row-gap: 1rem; margin-block-end: clamp(2rem, 4vw, 3rem); }
.hm-journal__head h2 { margin: .5rem 0 0; }
.hm-journal__all { display: flex; justify-content: flex-start; padding-block-end: .5rem; }
@media (min-width: 64em) { .hm-journal__all { justify-content: flex-end; } }

.hm-journal__list { list-style: none; margin: 0; padding: 0; row-gap: clamp(2rem, 4vw, 3rem); }
.hm-journal__item { grid-column: span 4; }
.hm-journal__link { display: grid; gap: .5rem; text-decoration: none; color: inherit; }
.hm-journal__thumb { display: block; overflow: clip; background: var(--bg-2); aspect-ratio: 3 / 2; margin-block-end: .75rem; }
.hm-journal__thumb img { width: 100%; height: 100%; object-fit: cover;
  transition: scale var(--d-hover) var(--ease-out); }
.hm-journal__link:hover .hm-journal__thumb img,
.hm-journal__link:focus-visible .hm-journal__thumb img { scale: 1.03; }
.hm-journal__meta { font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: .16em; color: var(--fg-3); }
.hm-journal__title { display: block; font-weight: 600; letter-spacing: -.01em;
  background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px;
  background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--d-hover) var(--ease-out); }
.hm-journal__link:hover .hm-journal__title,
.hm-journal__link:focus-visible .hm-journal__title { background-size: 100% 1px; }
.hm-journal__dek { color: var(--fg-2); max-width: 40ch; }

@media (max-width: 63.98em) { .hm-journal__item { grid-column: span 6; } }
@media (max-width: 39.98em) { .hm-journal__item { grid-column: span 4; } }

/* 7. Write to us ---------------------------------------------------------- */
.hm-letter { border-block-start: 1px solid var(--line); }
.hm-letter__grid { row-gap: clamp(2.5rem, 5vw, 3.5rem); align-items: start; }
.hm-letter__intro h2 { margin: .5rem 0 0; max-width: 14ch; }
.hm-letter__body { color: var(--fg-2); margin-block-start: 1rem; max-width: 36ch; }
.hm-letter__links { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-block-start: 1.5rem; }

.hm-letter__sub-title { margin: 0 0 .5rem; }
.hm-letter__sub-note { color: var(--fg-2); margin: 0 0 1.5rem; max-width: 38ch; }
.hm-letter__row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; }
.hm-letter__row .field__input { flex: 1 1 16rem; }
.hm-letter__submit { flex: none; }
.hm-letter__fine { margin-block-start: .75rem; }

/* Members — the collection sits between the method and who it's for. Its own file styles the
   tiles; here we only give the section its rhythm so it sits in the page like any other. */
.home-page .hm-collection { padding-block: var(--section-gap); }