:root {
  color-scheme: dark;
  --black: #050505;
  --white: #f1eee8;
  --muted: #aaa59d;
  --page-pad: clamp(1.25rem, 4vw, 4.5rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.hero {
  position: relative;
  width: 100%;
  height: min(100svh, 61.87vw);
  min-height: 42rem;
  overflow: hidden;
  background: var(--black);
  will-change: opacity;
}
.hero-media,
.hero-shade {
  position: absolute;
  inset: 0;
}
.hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.hero-shade {
  background: linear-gradient(90deg, rgba(5, 5, 5, .88) 0%, rgba(5, 5, 5, .64) 25%, rgba(5, 5, 5, .18) 50%, rgba(5, 5, 5, 0) 68%);
  pointer-events: none;
}
.hero-logo {
  position: absolute;
  z-index: 2;
  top: clamp(1.5rem, 3vw, 3rem);
  left: var(--page-pad);
  display: block;
  width: clamp(11.5rem, 17.5vw, 17rem);
  height: auto;
}
.hero-copy {
  position: absolute;
  z-index: 1;
  left: var(--page-pad);
  top: 55%;
  width: min(47vw, 47rem);
  transform: translateY(-48%);
}
.eyebrow {
  margin: 0 0 clamp(1.5rem, 3.5vh, 2.75rem);
  color: rgba(241, 238, 232, .72);
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.hero-title {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4rem, 6.8vw, 8.2rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.045em;
}
.hero-title span,
.hero-title em { display: block; }
.hero-title span { font-style: normal; }
.hero-title em { font-weight: 400; }
.hero-intro {
  max-width: 39ch;
  margin: clamp(2rem, 4vh, 3.25rem) 0 0;
  color: rgba(241, 238, 232, .76);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.92rem, 1.1vw, 1.15rem);
  line-height: 1.65;
}
.scroll-cue {
  display: inline-block;
  margin-top: clamp(2.75rem, 6vh, 5rem);
  color: var(--muted);
  font-size: .67rem;
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
}
.scroll-cue span { margin-left: .65rem; }

.essay { overflow: clip; padding-top: clamp(8rem, 16vh, 14rem); }
.image-moment {
  width: var(--width, 64vw);
  max-width: calc(100vw - (2 * var(--page-pad)));
  margin-top: var(--before, 24vh);
  margin-bottom: var(--after, 24vh);
}
.image-moment img {
  display: block;
  width: 100%;
  height: auto;
}
.align-left { margin-left: var(--page-pad); margin-right: auto; }
.align-right { margin-left: auto; margin-right: var(--page-pad); }
.align-center { margin-left: auto; margin-right: auto; }

.size-contained { --width: 38vw; }
.size-environmental { --width: 55vw; }
.size-major { --width: 74vw; --before: 34vh; --after: 38vh; }
.size-quiet { --width: 34vw; --before: 27vh; --after: 27vh; }
.size-statement { --width: 50vw; }
.size-graphic { --width: 43vw; }
.size-landscape { --width: 78vw; --before: 36vh; --after: 38vh; }
.size-contained-wide { --width: 40vw; }
.size-final { --width: 48vw; --after: 38vh; }
.opening-f10 { --width: 30vw; }
.opening-f7 { --width: 44vw; }
.image-f6 { --width: 40vw; }
.image-f8 { --width: 40vw; }
.image-f17 { --width: 42vw; }
.image-sp11 { --width: 38vw; }
.image-f1 { --width: 40vw; }
.gap-opening { --before: 12vh; }
.gap-tight { --before: 17vh; }
.gap-major { --before: 36vh; }

/* Desktop editorial pacing: selective transitions, not a uniform rhythm. */
@media (min-width: 701px) {
  .pace-open-expand { --before: 22vh; --after: 22vh; }
  .pace-f18 { --before: 42vh; --after: 36vh; row-gap: clamp(7rem, 15vh, 12rem); }
  .pace-after-f18 { --before: 36vh; }
  .pace-s17-f6 { --before: 24vh; }
  .pace-f6-f16 { --before: 32vh; }
  .pace-f16-sp4 { --before: 23vh; --after: 29vh; }
  .pace-sp4-sp6 { --before: 29vh; }
  .pace-sp6-sp11 { --before: 34vh; --after: 32vh; }
  .pace-vintage-exit { --before: 36vh; }
  .pace-f13-f8 { --before: 23vh; }
  .pace-f8-f12 { --before: 30vh; }
  .pace-f12-f3 { --before: 30vh; --after: 34vh; }
  .pace-f3-f17 { --before: 34vh; }
  .pace-f20 { --before: 43vh; --after: 40vh; row-gap: clamp(7rem, 15vh, 12rem); }
  .pace-after-f20 { --before: 40vh; --after: 30vh; }
  .pace-close-soften { --before: 34vh; --after: 30vh; }
  .pace-final-arrival { --before: 40vh; }
}

.text-moment,
.final-moment {
  width: min(34rem, calc(100vw - (2 * var(--page-pad))));
  margin-top: clamp(13rem, 30vh, 25rem);
  margin-bottom: clamp(13rem, 30vh, 25rem);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 2.25vw, 2.25rem);
  font-weight: 400;
  line-height: 1.52;
  letter-spacing: -.012em;
}

.editorial-pair {
  display: grid;
  align-items: center;
  column-gap: clamp(3rem, 7vw, 9rem);
  width: 100%;
  margin-top: var(--before, 30vh);
  margin-bottom: var(--after, 30vh);
  padding-inline: var(--page-pad);
}
.pair-image-left { grid-template-columns: auto minmax(0, 1fr); }
.pair-image-right { grid-template-columns: minmax(0, 1fr) auto; }
.editorial-pair .associated-text { width: min(34rem, 100%); }
.editorial-pair .image-moment,
.editorial-pair .text-moment,
.editorial-pair .final-moment {
  margin-top: 0;
  margin-bottom: 0;
}
.editorial-pair .image-moment {
  max-width: none;
}
.pair-image-left .image-moment { grid-column: 1; justify-self: start; }
.pair-image-left .associated-text { grid-column: 2; justify-self: start; }
.pair-image-right .image-moment { grid-column: 2; justify-self: end; }
.pair-image-right .associated-text { grid-column: 1; grid-row: 1; justify-self: end; }
.pair-horizontal {
  grid-template-columns: 1fr;
  row-gap: clamp(5rem, 12vh, 10rem);
}
.pair-horizontal .image-moment,
.pair-horizontal .associated-text {
  grid-column: 1;
  justify-self: center;
}
.pair-horizontal .associated-text {
  width: min(34rem, calc(100vw - (2 * var(--page-pad))));
  text-align: center;
}
.pair-major {
  column-gap: clamp(2rem, 4vw, 5rem);
}
.pair-final { margin-bottom: clamp(8rem, 22vh, 18rem); }
.editorial-pair .final-moment { width: min(34rem, 100%); }

.editorial-pair .image-moment,
.editorial-pair .associated-text {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.05s ease-out, transform 1.05s ease-out;
}
.editorial-pair.is-visible .image-moment { opacity: 1; transform: none; }
.editorial-pair.is-text-visible .associated-text { opacity: 1; transform: none; }
.text-moment { padding: 0; border: 0; }
.text-moment p, .final-moment p { margin: 0; }
.align-text-left { margin-left: clamp(var(--page-pad), 14vw, 13rem); margin-right: auto; }
.align-text-right { margin-left: auto; margin-right: clamp(var(--page-pad), 13vw, 12rem); }

.final-moment {
  width: min(39rem, calc(100vw - (2 * var(--page-pad))));
  margin-left: clamp(var(--page-pad), 11vw, 10rem);
  margin-right: auto;
  margin-bottom: clamp(8rem, 22vh, 18rem);
}
.signature {
  margin-top: 5rem !important;
  color: var(--muted);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2.5rem;
  margin-top: 2.75rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.contact-links a {
  padding: .35rem 0;
  color: var(--white);
  opacity: .78;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: .35em;
  transition: opacity .2s ease, text-decoration-color .2s ease;
}
.contact-links a:hover,
.contact-links a:focus-visible {
  opacity: 1;
  text-decoration-color: currentColor;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.05s ease-out, transform 1.05s ease-out;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (min-width: 701px) and (max-width: 1194px) {
  .pair-image-left,
  .pair-image-right {
    column-gap: clamp(1.75rem, 3.5vw, 3.25rem);
    padding-inline: clamp(1.5rem, 3vw, 2.5rem);
  }
  .pair-image-left .associated-text,
  .pair-image-right .associated-text,
  .pair-image-right .final-moment {
    width: min(30rem, 100%);
    margin-left: 0;
    margin-right: 0;
  }
  .pair-final {
    column-gap: clamp(3rem, 5.5vw, 4.5rem);
    padding-left: clamp(2.25rem, 4vw, 3.5rem);
    padding-right: clamp(2.25rem, 4vw, 3.5rem);
  }
}

@media (max-width: 700px) {
  :root { --page-pad: 1.25rem; }
  .hero {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .hero-media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 3719 / 2301;
  }
  .hero-media img {
    object-fit: contain;
    object-position: center;
  }
  .hero-shade { display: none; }
  .hero-copy {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    padding: 4.25rem var(--page-pad) 1rem;
    transform: none;
    background: var(--black);
  }
  .hero-logo {
    top: 1.25rem;
    left: 1.25rem;
    width: clamp(9.35rem, 37.4vw, 12.1rem);
  }
  .hero-title { font-size: clamp(3.35rem, 16vw, 5.4rem); }
  .hero-intro { max-width: 32rem; font-size: 1rem; }
  .scroll-cue { margin-top: 3rem; }
  .essay { padding-top: 14vh; }
  .image-moment {
    max-width: calc(100vw - (2 * var(--page-pad)));
    --before: 20vh;
    --after: 20vh;
  }
  .size-contained { --width: 79vw; }
  .size-environmental { --width: 89vw; }
  .size-major { --width: calc(100vw - 1.25rem); --before: 29vh; --after: 30vh; }
  .size-quiet { --width: 75vw; --before: 24vh; --after: 24vh; }
  .size-statement { --width: 87vw; }
  .size-graphic { --width: 78vw; }
  .size-landscape { --width: calc(100vw - 1.25rem); --before: 30vh; --after: 31vh; }
  .size-contained-wide { --width: 84vw; }
  .size-final { --width: 83vw; --before: 29vh; --after: 30vh; }
  .align-left { margin-left: var(--page-pad); }
  .align-right { margin-right: var(--page-pad); }
  .size-major.align-center, .size-landscape.align-center { margin-left: auto; margin-right: auto; }
  .text-moment, .final-moment {
    width: calc(100vw - 3.5rem);
    margin-top: 25vh;
    margin-bottom: 25vh;
    font-size: clamp(1.35rem, 6vw, 1.8rem);
    line-height: 1.5;
  }
  .align-text-left, .final-moment { margin-left: 1.75rem; margin-right: auto; }
  .align-text-right { margin-left: auto; margin-right: 1.75rem; }
  .final-moment { margin-bottom: 7rem; }
  .editorial-pair,
  .pair-major {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 4.5rem;
    width: 100%;
    margin-top: var(--before, 25vh);
    margin-bottom: var(--after, 25vh);
    padding-inline: 0;
  }
  .editorial-pair .image-moment,
  .editorial-pair .associated-text,
  .editorial-pair .final-moment {
    grid-column: 1;
    grid-row: auto;
  }
  .editorial-pair .image-moment { justify-self: auto; }
  .editorial-pair .associated-text,
  .editorial-pair .final-moment {
    width: calc(100vw - 3.5rem);
    margin-left: 1.75rem;
    margin-right: auto;
    justify-self: auto;
    text-align: left;
  }
  .pair-horizontal .associated-text { text-align: left; }
  .pair-final { margin-bottom: 7rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .editorial-pair .image-moment,
  .editorial-pair .associated-text { opacity: 1; transform: none; transition: none; }
}