:root {
  --night: #050d0b;
  --ivory: #eee6d6;
  --champagne: #d8c49a;
  --mist: #a8d0c8;
  --gold: #bfa36c;
  --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;
  --slide-offset: 0svh;
  --bg-x: 0px;
  --bg-y: 0px;
  --type-x: 0px;
  --type-y: 0px;
  --ease-premium: cubic-bezier(.2, .72, .2, 1);
  --ease-liquid: cubic-bezier(.65, 0, .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);
  -webkit-font-smoothing: antialiased;
}
.js,
.js body { width: 100%; height: 100%; overflow: hidden; }
img { display: block; width: 100%; height: 100%; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }

.fx-defs {
  position: fixed;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.intro {
  display: none;
  position: fixed;
  z-index: 100;
  inset: 0;
  place-items: center;
  overflow: hidden;
  background: #020705;
  opacity: 1;
  visibility: visible;
  transition: opacity 900ms var(--ease-premium), visibility 900ms;
}
.js .intro { display: grid; }
.intro::before {
  content: "";
  position: absolute;
  width: min(720px, 85vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(185 211 201 / 11%), rgb(191 163 108 / 3%) 34%, transparent 69%);
  filter: blur(18px);
  opacity: 0;
  transform: scale(.72);
  transition: opacity 1500ms ease, transform 2200ms 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 1300ms var(--ease-premium) 550ms, opacity 900ms ease 550ms;
}
.intro-mark > span {
  display: block;
  font: 400 clamp(34px, 5.2vw, 82px)/1 var(--serif);
  letter-spacing: .5em;
  opacity: 0;
  filter: blur(18px);
  transform: translateX(.25em) translateY(12px) scale(.985);
  text-shadow: 0 0 42px transparent;
  transition: opacity 1300ms ease, filter 1500ms var(--ease-premium), transform 1500ms var(--ease-premium), letter-spacing 1700ms var(--ease-premium), text-shadow 1700ms ease;
}
.intro-mark > small {
  font: 9px/1 var(--mono);
  letter-spacing: .42em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 900ms ease 700ms, transform 1100ms var(--ease-premium) 700ms;
}
body.is-intro-active .intro::before { opacity: 1; transform: scale(1.08); }
body.is-intro-active .intro-mark > span {
  opacity: 1;
  filter: blur(0);
  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; }

.film-grain,
.vignette {
  position: fixed;
  z-index: 80;
  inset: 0;
  pointer-events: none;
}
.film-grain {
  inset: -35%;
  opacity: .045;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
  animation: grain 850ms steps(2, end) infinite;
}
.vignette {
  z-index: 79;
  background: radial-gradient(ellipse at center, transparent 47%, rgb(0 0 0 / 22%) 78%, rgb(0 0 0 / 57%) 110%), linear-gradient(180deg, rgb(216 196 154 / 2.2%), transparent 23%, transparent 76%, rgb(0 0 0 / 16%));
}

.site-header {
  position: fixed;
  z-index: 60;
  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;
  transition: opacity 900ms ease 350ms;
}
.js .site-header { opacity: 0; }
body.is-ready .site-header { opacity: 1; }
.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; }

.progress {
  position: fixed;
  z-index: 70;
  top: 50%;
  right: 3.2vw;
  display: grid;
  gap: 11px;
  transform: translateY(-50%);
  opacity: 1;
  transition: opacity 900ms ease 500ms;
}
.js .progress { opacity: 0; }
body.is-ready .progress { opacity: 1; }
.progress-item {
  position: relative;
  width: 45px;
  height: 13px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.progress-item::before,
.progress-item > span {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 100%;
  height: 1px;
}
.progress-item::before { background: rgb(238 230 214 / 24%); }
.progress-item > span {
  background: linear-gradient(90deg, var(--champagne), var(--ivory));
  box-shadow: 0 0 9px rgb(216 196 154 / 28%);
  transform: scaleX(0);
  transform-origin: left center;
}
body.is-ready .progress-item.is-active > span { animation: progress-fill 8s linear forwards; }
.progress-item:focus-visible { outline: 1px solid var(--champagne); outline-offset: 4px; }

.experience { position: relative; }
.js .experience {
  height: 300svh;
  height: 300dvh;
  transform: translate3d(0, var(--slide-offset), 0);
  transition: transform 1150ms var(--ease-liquid);
  will-change: transform;
}
body.is-liquid .experience { filter: url("#liquid-distort"); }

.slide {
  position: relative;
  min-height: 100svh;
  height: 100svh;
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}
.media-plane {
  position: absolute;
  z-index: -3;
  inset: -3%;
  transform: translate3d(var(--bg-x), var(--bg-y), 0);
  transition: transform 900ms var(--ease-premium);
  will-change: transform;
}
.media-plane img { object-fit: cover; }

.ambient {
  position: absolute;
  z-index: -1;
  inset: -12%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .55;
  animation: ambient-drift 15s ease-in-out infinite alternate;
}
.ambient-hero {
  background: radial-gradient(circle at 73% 37%, rgb(116 191 173 / 14%), transparent 23%), radial-gradient(ellipse at 45% 72%, rgb(216 196 154 / 6%), transparent 33%);
}
.ambient-manifesto {
  background: radial-gradient(circle at 82% 22%, rgb(91 176 153 / 13%), transparent 30%), radial-gradient(circle at 14% 82%, rgb(191 163 108 / 6%), transparent 28%);
}
.ambient-landscape {
  background: radial-gradient(ellipse at 74% 44%, rgb(167 214 201 / 11%), transparent 27%), linear-gradient(113deg, transparent 35%, rgb(216 196 154 / 4%) 52%, transparent 67%);
  animation-duration: 19s;
}

.line-mask {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow: hidden;
  padding: .04em .09em .08em 0;
  margin-bottom: -.1em;
}
.line-inner {
  display: block;
  opacity: .08;
  filter: blur(7px);
  transform: translate3d(0, 112%, 0);
  transition: transform 1150ms var(--ease-premium), opacity 900ms ease, filter 1100ms var(--ease-premium);
  will-change: transform, opacity;
}
.line-mask:nth-child(2) .line-inner { transition-delay: 90ms; }
.line-mask:nth-child(3) .line-inner { transition-delay: 180ms; }
body.is-ready .slide.is-active .line-inner { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0); }
.soft-reveal {
  opacity: 0;
  filter: blur(4px);
  transform: translate3d(var(--type-x), calc(var(--type-y) + 22px), 0);
  transition: opacity 1000ms ease 420ms, filter 1100ms var(--ease-premium) 420ms, transform 1100ms var(--ease-premium) 420ms;
}
body.is-ready .slide.is-active .soft-reveal { opacity: 1; filter: blur(0); transform: translate3d(var(--type-x), var(--type-y), 0); }

.hero { background: #020806; }
.hero .media-plane img {
  object-position: center;
  filter: brightness(.81) saturate(.87) contrast(1.07);
  animation: slow-push 18s var(--ease-premium) both;
}
.hero-shade {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: linear-gradient(90deg, rgb(2 8 6 / 94%) 0%, rgb(2 8 6 / 65%) 36%, transparent 69%), linear-gradient(0deg, rgb(2 8 6 / 72%), transparent 50%);
}
.overline {
  position: absolute;
  z-index: 2;
  top: 106px;
  left: 6vw;
  margin: 0;
  color: var(--champagne);
  font: 9px/1.2 var(--mono);
  letter-spacing: .2em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 900ms ease 620ms, transform 1000ms var(--ease-premium) 620ms;
}
body.is-ready .hero.is-active .overline { opacity: .86; transform: none; }
.hero h1 {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 5.5vw;
  margin: 0;
  transform: translate3d(var(--type-x), calc(-54% + var(--type-y)), 0);
  font: 400 clamp(72px, 11vw, 190px)/.75 var(--serif);
  letter-spacing: -.07em;
  transition: transform 850ms var(--ease-premium);
}
.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(238 230 214 / 62%);
  font: 10px/1 var(--mono);
  letter-spacing: .17em;
  text-transform: uppercase;
  transition: gap .5s var(--ease-premium), color .4s ease, border-color .4s ease;
}
.hero-copy a:hover { gap: 36px; color: var(--champagne); border-color: var(--champagne); }
.ghost-700 {
  position: absolute;
  z-index: 0;
  right: 3vw;
  bottom: -4vh;
  color: rgb(209 227 221 / 12%);
  font: 400 clamp(140px, 25vw, 430px)/.7 var(--serif);
}

.manifesto {
  display: grid;
  place-items: center;
  padding: 12vh 8vw;
  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: 6vh 0; font: 400 clamp(52px, 8.2vw, 135px)/.9 var(--serif); letter-spacing: -.052em; }
.manifesto h2 .line-mask { margin-inline: auto; }
.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 { background: #06100e; }
.landscape .media-plane img {
  object-position: center;
  filter: brightness(.32) saturate(.6) contrast(1.08);
  transform: scale(1.018);
  transition: transform 5s var(--ease-premium), filter 2s ease;
}
.landscape.is-active .media-plane img { transform: scale(1.055); filter: brightness(.39) saturate(.7) contrast(1.06); }
.landscape-shade {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: linear-gradient(90deg, rgb(3 9 7 / 12%), rgb(3 9 7 / 87%));
}
.landscape-copy {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 8vw;
  transform: translate3d(var(--type-x), calc(-50% + var(--type-y)), 0);
  transition: transform 850ms var(--ease-premium);
}
.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; }
.contact {
  margin-top: clamp(28px, 4vh, 48px);
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(0, 18px, 0);
  transition: opacity 950ms ease 660ms, filter 1050ms var(--ease-premium) 660ms, transform 1050ms var(--ease-premium) 660ms;
}
body.is-ready .landscape.is-active .contact { opacity: 1; filter: blur(0); transform: none; }
.contact p { margin: 0 0 10px; color: var(--muted); font: 400 clamp(16px, 1.1vw, 19px)/1.4 var(--serif); }
.contact a {
  position: relative;
  display: inline-block;
  padding-bottom: 9px;
  font: 400 clamp(24px, 2.15vw, 38px)/1.1 var(--serif);
  letter-spacing: -.025em;
  transition: color 500ms ease, text-shadow 500ms ease, filter 500ms ease;
}
.contact a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--champagne), var(--mist));
  box-shadow: 0 0 8px rgb(216 196 154 / 24%);
  transform: scaleX(.16);
  transform-origin: left center;
  transition: transform 700ms var(--ease-premium), box-shadow 500ms ease;
}
.contact a:hover {
  color: #f4ead7;
  text-shadow: 8px 0 14px rgb(168 208 200 / 16%), -5px 0 12px rgb(216 196 154 / 15%);
  filter: saturate(1.08);
}
.contact a:hover::after { transform: scaleX(1); box-shadow: 0 0 12px rgb(216 196 154 / 39%); }
.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(238 230 214 / 15%);
  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; }

.custom-cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .js body.is-ready,
  .js body.is-ready a,
  .js body.is-ready button { cursor: none; }
  .custom-cursor {
    position: fixed;
    z-index: 120;
    top: 0;
    left: 0;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgb(238 230 214 / 45%);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
    transition: width 350ms var(--ease-premium), height 350ms var(--ease-premium), border-color 350ms ease, background 350ms ease, opacity 250ms ease;
    will-change: transform;
  }
  body.is-ready .custom-cursor { opacity: 1; }
  .custom-cursor::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--champagne);
    box-shadow: 0 0 8px rgb(216 196 154 / 56%);
  }
  .custom-cursor > span { position: absolute; font: 10px/1 var(--sans); opacity: 0; transition: opacity 250ms ease; }
  .custom-cursor.is-control { width: 48px; height: 48px; border-color: rgb(216 196 154 / 70%); background: rgb(5 13 11 / 20%); }
  .custom-cursor.is-control::before { opacity: 0; }
  .custom-cursor.is-control > span { opacity: .82; }
  .custom-cursor.is-link { width: 46px; height: 46px; border-color: var(--champagne); }
}

@keyframes slow-push { from { transform: scale(1.01); } to { transform: scale(1.065); } }
@keyframes ambient-drift {
  0% { transform: translate3d(-1.2%, -.6%, 0) scale(1); opacity: .42; }
  100% { transform: translate3d(1.3%, .8%, 0) scale(1.035); opacity: .62; }
}
@keyframes grain {
  0% { transform: translate3d(-3%, 2%, 0); }
  25% { transform: translate3d(3%, -4%, 0); }
  50% { transform: translate3d(-5%, 4%, 0); }
  75% { transform: translate3d(4%, 5%, 0); }
  100% { transform: translate3d(2%, -3%, 0); }
}
@keyframes progress-fill { to { transform: scaleX(1); } }

@media (max-width: 760px), (pointer: coarse) {
  :root { --bg-x: 0px; --bg-y: 0px; --type-x: 0px; --type-y: 0px; }
  body.is-liquid .experience { filter: blur(1.5px); }
  .site-header { padding: 20px; }
  .site-header > p { display: none; }
  .progress { top: auto; right: 50%; bottom: 66px; display: flex; gap: 9px; transform: translateX(50%); }
  .progress-item { width: 35px; }
  .overline { top: 84px; left: 7vw; font-size: 8px; }
  .hero .media-plane img { 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; }
  .manifesto { padding-inline: 6vw; }
  .manifesto-inner { width: 100%; }
  .manifesto h2 { margin-block: 5vh; font-size: 10.2vw; }
  .manifesto-inner > span { font-size: 14px; }
  .landscape .media-plane img { object-position: 38% center; }
  .landscape-shade { background: linear-gradient(0deg, rgb(3 9 7 / 89%), rgb(3 9 7 / 14%) 85%); }
  .landscape-copy { top: auto; right: auto; left: 7vw; bottom: 16vh; transform: none; }
  .landscape h2 { font-size: 19vw; }
  .contact { margin-top: 3.5vh; }
  .contact p { font-size: 16px; }
  .contact a { font-size: clamp(23px, 6.7vw, 29px); }
  .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; }
  .custom-cursor { display: none !important; }
}

@media (max-height: 700px) and (min-width: 761px) {
  .landscape h2 { font-size: min(8.7vw, 120px); }
  .contact { margin-top: 24px; }
  .manifesto h2 { margin-block: 4vh; font-size: min(7vw, 96px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .intro { display: none !important; }
  .site-header,
  .progress { opacity: 1 !important; }
  .experience { filter: none !important; }
  .line-inner,
  .soft-reveal,
  .overline,
  .contact { opacity: 1 !important; filter: none !important; transform: none !important; }
  .film-grain,
  .ambient { animation: none !important; }
  .custom-cursor { display: none !important; }
  .js body,
  .js body a,
  .js body button { cursor: auto !important; }
}