:root {
  --night: #06100e;
  --ivory: #ebe7db;
  --mist: #a8d0c8;
  --gold: #bfa36c;
  --champagne: #d8c49a;
  --muted: #aab8b4;
  --serif: "Bodoni 72", "Bodoni MT", Didot, "Iowan Old Style", Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
  --pointer-x: 50vw;
  --pointer-y: 50vh;
  --ease-premium: cubic-bezier(.2, .72, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--night); }
body { margin: 0; overflow-x: hidden; background: var(--night); color: var(--ivory); font-family: var(--sans); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.js body.is-booting { overflow: hidden; }

/* Opening sequence retained from the staging animation concepts. */
.intro {
  display: none;
  position: fixed;
  z-index: 100;
  inset: 0;
  place-items: center;
  overflow: hidden;
  background: #020705;
  opacity: 1;
  visibility: visible;
  transition: opacity 720ms var(--ease-premium), visibility 720ms;
}
.js .intro { display: grid; }
.intro::before {
  content: "";
  position: absolute;
  width: min(680px, 82vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(185 211 201 / 10%), rgb(191 163 108 / 3%) 34%, transparent 69%);
  opacity: 0;
  transform: scale(.76);
  transition: opacity 1250ms ease, transform 1800ms var(--ease-premium);
}
.intro-mark {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 18px;
  color: var(--ivory);
  text-align: center;
}
.intro-mark::after {
  content: "";
  width: 0;
  height: 1px;
  margin-top: 4px;
  background: linear-gradient(90deg, transparent, var(--champagne), transparent);
  opacity: 0;
  transition: width 1200ms var(--ease-premium) 500ms, opacity 800ms ease 500ms;
}
.intro-mark > span {
  display: block;
  font: 400 clamp(34px, 5.2vw, 82px)/1 var(--serif);
  letter-spacing: .5em;
  opacity: 0;
  transform: translate3d(.25em, 12px, 0) scale(.985);
  transition: opacity 1100ms ease, transform 1350ms var(--ease-premium), letter-spacing 1450ms var(--ease-premium), text-shadow 1450ms ease;
}
.intro-mark > small {
  font: 9px/1 var(--mono);
  letter-spacing: .42em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 800ms ease 650ms, transform 950ms var(--ease-premium) 650ms;
}
body.is-intro-active .intro::before { opacity: 1; transform: scale(1.06); }
body.is-intro-active .intro-mark > span {
  opacity: 1;
  transform: none;
  letter-spacing: .18em;
  text-shadow: 0 0 38px rgb(216 196 154 / 17%);
}
body.is-intro-active .intro-mark > small { opacity: .72; transform: none; }
body.is-intro-active .intro-mark::after { width: 92px; opacity: .72; }
body.is-ready .intro { opacity: 0; visibility: hidden; }

.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 25px 3.2vw;
  color: #f1ede2;
  mix-blend-mode: difference;
  pointer-events: none;
}

.site-header a { pointer-events: auto; }
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand > span { font: 400 16px/1 var(--serif); letter-spacing: .025em; }
.brand > small,
.site-header > p { margin: 0; font: 9px/1.2 var(--mono); letter-spacing: .17em; }

.scene-index {
  position: absolute;
  z-index: 5;
  right: 3.2vw;
  bottom: 28px;
  font: 9px/1 var(--mono);
  letter-spacing: .18em;
  color: rgb(235 231 219 / 68%);
}

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #020806;
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(.82) saturate(.9) contrast(1.04);
  animation: slow-push 14s ease-out both;
}

.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(2 8 6 / 94%) 0%, rgb(2 8 6 / 66%) 36%, transparent 69%),
    linear-gradient(0deg, rgb(2 8 6 / 72%), transparent 50%);
}

.pointer-light {
  position: absolute;
  inset: 0;
  opacity: .76;
  mix-blend-mode: screen;
  background: radial-gradient(circle 250px at var(--pointer-x) var(--pointer-y), rgb(112 205 187 / 19%), transparent 70%);
}

.overline {
  position: absolute;
  z-index: 2;
  top: 106px;
  left: 6vw;
  margin: 0;
  font: 9px/1.2 var(--mono);
  letter-spacing: .2em;
}

.hero h1 {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 5.5vw;
  margin: 0;
  transform: translateY(-54%);
  font: 400 clamp(72px, 11vw, 190px)/.75 var(--serif);
  letter-spacing: -.07em;
}

.hero h1 em { color: var(--mist); font-weight: 400; }

.hero-copy {
  position: absolute;
  z-index: 3;
  left: 6vw;
  bottom: 7vh;
}

.hero-copy p {
  margin: 0;
  font: 400 clamp(17px, 1.25vw, 21px)/1.4 var(--serif);
  letter-spacing: .01em;
}

.hero-copy a {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 24px;
  margin-top: 22px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgb(235 231 219 / 72%);
  font: 10px/1 var(--mono);
  letter-spacing: .17em;
  text-transform: uppercase;
  transition: gap .4s ease, color .4s ease;
}

.hero-copy a:hover { gap: 36px; color: var(--mist); }

.ghost-700 {
  position: absolute;
  right: 3vw;
  bottom: -4vh;
  color: rgb(209 227 221 / 16%);
  font: 400 clamp(140px, 25vw, 430px)/.7 var(--serif);
}

.manifesto {
  position: relative;
  min-height: 105svh;
  display: grid;
  place-items: center;
  padding: 16vh 8vw;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 22%, #123b33 0%, transparent 38%),
    radial-gradient(circle at 14% 82%, rgb(26 70 60 / 42%), transparent 32%),
    var(--night);
  text-align: center;
}

.manifesto::before {
  content: "700";
  position: absolute;
  color: transparent;
  -webkit-text-stroke: 1px rgb(173 206 198 / 10%);
  font: 400 clamp(260px, 48vw, 760px)/.75 var(--serif);
  letter-spacing: -.12em;
}

.manifesto-inner { position: relative; z-index: 2; }
.manifesto-inner > p { margin: 0; color: var(--gold); font: 9px/1.3 var(--mono); letter-spacing: .21em; }
.manifesto h2 {
  margin: 7vh 0;
  font: 400 clamp(52px, 8.2vw, 135px)/.9 var(--serif);
  letter-spacing: -.052em;
}
.manifesto h2 em { color: #9cc9c0; font-weight: 400; }
.manifesto-inner > span {
  display: block;
  width: min(570px, 92%);
  margin: auto;
  color: var(--muted);
  font: 400 clamp(14px, 1.05vw, 17px)/1.8 var(--sans);
}

.landscape {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #06100e;
}

.landscape > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.34) saturate(.62) contrast(1.05);
  transform: scale(1.015);
  transition: transform 4s cubic-bezier(.2,.7,.2,1), filter 2s ease;
}

.landscape.is-awake > img { transform: scale(1.055); filter: brightness(.4) saturate(.72) contrast(1.05); }
.landscape-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(3 9 7 / 16%), rgb(3 9 7 / 86%)); }
.landscape-copy { position: absolute; z-index: 2; top: 50%; right: 8vw; transform: translateY(-50%); }
.landscape-copy.reveal { transform: translateY(calc(-50% + 32px)); }
.landscape-copy.reveal.is-visible { transform: translateY(-50%); }
.landscape h2 { margin: 0; font: 400 clamp(72px, 10vw, 165px)/.74 var(--serif); letter-spacing: -.045em; }
.landscape h2 em { color: var(--mist); font-weight: 400; }
.landscape h2 .slide-3-reduced { font-size: 80%; }
.contact { margin-top: clamp(28px, 4vh, 48px); }
.contact p { margin: 0 0 10px; color: var(--muted); font: 400 clamp(16px, 1.1vw, 19px)/1.4 var(--serif); }
.contact a {
  display: inline-block;
  padding-bottom: 9px;
  border-bottom: 1px solid rgb(235 231 219 / 64%);
  font: 400 clamp(19.2px, 1.72vw, 30.4px)/1.1 var(--serif);
  letter-spacing: -.025em;
  transition: color .35s ease, border-color .35s ease;
}
.contact a:hover { color: var(--mist); border-color: var(--mist); }

.landscape footer {
  position: absolute;
  z-index: 4;
  left: 0;
  bottom: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  padding: 25px 3.2vw;
  border-top: 1px solid rgb(235 231 219 / 18%);
  font: 8px/1 var(--mono);
  letter-spacing: .15em;
}

.landscape footer span:nth-child(2) { justify-self: center; }
.landscape footer span:last-child { justify-self: end; }
.landscape > .scene-index { bottom: 74px; }

.reveal { opacity: 0; transform: translateY(32px); transition: opacity 1s ease, transform 1.2s cubic-bezier(.2,.72,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
.hero h1.reveal.is-visible { transform: translateY(-54%); }

@keyframes slow-push {
  from { transform: scale(1); }
  to { transform: scale(1.045); }
}

@media (max-width: 760px) {
  .site-header { padding: 20px; }
  .site-header > p { display: none; }
  .overline { top: 84px; left: 7vw; font-size: 8px; }
  .hero-image { object-position: 59% center; }
  .hero-shade { background: linear-gradient(90deg, rgb(2 8 6 / 88%), rgb(2 8 6 / 28%) 68%, transparent), linear-gradient(0deg, rgb(2 8 6 / 78%), transparent 58%); }
  .hero h1 { top: 42%; left: 6.5vw; font-size: 19vw; }
  .hero-copy { left: 7vw; bottom: 9vh; }
  .hero-copy p { font-size: 17px; }
  .ghost-700 { right: -8vw; font-size: 42vw; }
  .scene-index { right: 20px; bottom: 21px; }
  .manifesto { padding-inline: 6vw; }
  .manifesto h2 { font-size: 13vw; }
  .manifesto-inner > span { font-size: 14px; }
  .landscape > img { object-position: 38% center; }
  .landscape-shade { background: linear-gradient(0deg, rgb(3 9 7 / 88%), rgb(3 9 7 / 18%) 85%); }
  .landscape-copy { top: auto; right: auto; left: 7vw; bottom: 16vh; transform: none; }
  .landscape-copy.reveal { transform: translateY(32px); }
  .landscape-copy.reveal.is-visible { transform: none; }
  .landscape h2 { font-size: 19vw; }
  .contact { margin-top: 3.5vh; }
  .contact p { font-size: 16px; }
  .contact a { font-size: clamp(18.4px, 5.36vw, 23.2px); }
  .landscape footer { grid-template-columns: 1fr auto; padding: 20px; }
  .landscape footer span:nth-child(2) { justify-self: end; }
  .landscape footer span:last-child { display: none; }
  .landscape > .scene-index { bottom: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .intro { display: none !important; }
  .reveal { opacity: 1; transform: none; }
  .hero h1.reveal { transform: translateY(-54%); }
}