:root {
  --navy: #053142;
  --stone: #faefe7;
  --cream: #f3ead9;
  --light: #e0c095;
  --strip: 28px;
  --edge: 5.5rem;
  --display: "Marcellus", Georgia, serif;
  --wide: "Krona One", "Helvetica Neue", sans-serif;
  --text: "Instrument Sans", "Helvetica Neue", sans-serif;
}

/* The whole layout scales as one poster: 16px at a 1440 window. */
html { font-size: calc(100vw / 90); background: var(--navy); }

/* Lenis needs these to stay in charge of the scroll. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

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

.is-loading { overflow: hidden; }

body {
  background: var(--stone);
  color: var(--navy);
  font: 400 1.05rem/1.5 var(--text);
  -webkit-font-smoothing: antialiased;
}

/* Paper grain, fixed so it never repaints. A plain overlay: a blend mode here would re-composite the whole window every frame. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.micro {
  font: 400 .66rem/1.45 var(--wide);
  text-transform: uppercase;
  letter-spacing: .01em;
}

a { color: inherit; text-decoration: none; }
img { display: block; }
ul { list-style: none; padding: 0; }

/* Header */
#top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 7;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.1rem 1.6rem;
  color: #faefe7;
  transition: color .3s linear;
}
#top.is-light:not(.menu-open) { color: var(--navy); }
#top.is-light:not(.menu-open) .top-logo { filter: brightness(0); }
.top-left { display: flex; align-items: center; gap: .9rem; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; justify-self: start; }
.burger { display: grid; gap: .32rem; width: 2rem; }
.burger i { display: block; height: 1px; background: currentColor; }
.top-logo { height: 2.7rem; width: auto; transition: filter .3s linear; }
.top-right { display: flex; justify-content: flex-end; align-items: center; gap: 1.8rem; }
.pill { padding: .5rem 1.1rem; border: 1px solid currentColor; border-radius: 99rem; }

/* Stage */
#scene { height: 950vh; }

.stage {
  position: sticky;
  top: 0;
  height: calc(100lvh - var(--strip));
  overflow: hidden;
  background: var(--navy);
}

.stage > canvas, .plate-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.stage-paper { position: absolute; inset: 0; background: var(--stone); opacity: 0; will-change: opacity; }
#back { z-index: 0; }
.plate-wrap { position: absolute; inset: 0; z-index: 2; overflow: hidden; will-change: transform; }

/* The real files stay painted on their own layers and fade in over the arches, so nothing is swapped mid-scroll. */
.plate, .plate-day { position: absolute; z-index: 1; max-width: none; opacity: 0; will-change: opacity; }
.shade { z-index: 2; }

/* Keeps the lower type readable over the lights, as a dusk falling across the frame. */
.shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--navy) 0%, var(--navy) 24%, rgba(5, 49, 66, 0) 40%),
    linear-gradient(0deg, var(--navy) 0%, var(--navy) 15%, rgba(5, 49, 66, 0) 32%),
    linear-gradient(90deg, var(--navy) 0%, var(--navy) 27%, rgba(5, 49, 66, 0) 46%);
  opacity: 0;
}

/* Nothing but the wordmark and the count shows until the loader is set. */
.is-loading #rest { display: none; }
.is-loading:not(.is-go) #top,
.is-loading:not(.is-go) .t-label,
.is-loading:not(.is-go) .t-numbers,
.is-loading:not(.is-go) .t-bottom,
.is-loading:not(.is-go) .domain { visibility: hidden; }

/* Screen 1 */
.t-top, .t-bottom { position: absolute; inset: 0; z-index: 4; color: var(--cream); pointer-events: none; }
.t-bottom a { pointer-events: auto; }

.t-label { position: absolute; left: var(--edge); top: 6.2rem; }

#wordmark {
  position: absolute;
  left: var(--edge);
  top: 8rem;
  font: 400 5.5rem/1 var(--display);
  letter-spacing: .005em;
  white-space: nowrap;
  transform-origin: left top;
}

#wordmark.at-loader {
  top: auto;
  left: 2.2rem;
  bottom: 1.2rem;
  font-size: 9.7rem;
}

.t-numbers {
  position: absolute;
  right: var(--edge);
  top: 7.6rem;
  display: flex;
  gap: 3.4rem;
}
.t-numbers dt { font: 400 3.6rem/1 var(--display); }
.t-numbers dd { margin-top: .6rem; }

.t-tagline {
  position: absolute;
  left: var(--edge);
  bottom: 8.2rem;
  width: 22rem;
  font: 400 3.1rem/1.04 var(--display);
}

.t-facts {
  position: absolute;
  left: var(--edge);
  bottom: 2.6rem;
  display: flex;
  gap: 4.4rem;
}

.t-cta {
  position: absolute;
  right: var(--edge);
  bottom: 2.4rem;
  width: 11rem;
  height: 11rem;
  display: grid;
  place-items: center;
  text-align: center;
}
.t-cta svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.t-cta circle { stroke-width: 1; vector-effect: non-scaling-stroke; }

.loader-note { position: absolute; z-index: 4; color: var(--cream); top: 6.2rem; }
.loader-left { left: 2.2rem; }
.loader-right { right: 2.2rem; }

/* Screen 2 */
.domain { position: absolute; inset: 0; z-index: 4; pointer-events: none; color: var(--navy); }

.domain h2 {
  position: absolute;
  left: var(--edge);
  top: 6.4rem;
  width: 13ch;
  font: 400 4.9rem/1.03 var(--display);
  letter-spacing: -.005em;
}

.domain-side { position: absolute; right: var(--edge); top: 6.9rem; width: 23rem; }
.domain-read { font-size: 1.22rem; line-height: 1.38; }
.domain-near { margin-top: 1.6rem; display: grid; gap: .45rem; }


/* Menu */
#menu {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .4rem;
  padding: 5rem var(--edge) 3rem;
  background: var(--navy);
  color: var(--cream);
}
#menu[hidden] { display: none; }
#menu a { font: 400 5rem/1.1 var(--display); width: max-content; transition: opacity .4s; }
#menu:hover a { opacity: .3; }
#menu a:hover { opacity: 1; }

/* Sections */
.stone { background: var(--stone); color: var(--navy); }
.navy { background: var(--navy); color: var(--cream); }
.block { padding: 11rem var(--edge); }
#rest h2 { font: 400 6.2rem/1.03 var(--display); letter-spacing: -.005em; }
.as-title { font: 400 2.4rem/1.1 var(--display); margin-bottom: 1.2rem; }
.split { display: grid; grid-template-columns: 7fr 4fr; gap: 6rem; align-items: start; }
.lead { font-size: 1.4rem; line-height: 1.38; }
.figures { display: grid; grid-template-columns: 1fr 1fr 1.4fr 1.3fr; gap: 2rem; margin-top: 8rem; padding-top: 2rem; border-top: 1px solid currentColor; }
.figures dt { font: 400 4.6rem/1 var(--display); white-space: nowrap; }
.figures dd { margin-top: .9rem; }

.stack { position: relative; background: var(--stone); }
.stack-card { position: sticky; top: 0; height: calc(100lvh - var(--strip)); overflow: hidden; }
.stack-card img { display: block; }
.stack-card img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

.statement-wrap { padding-block: 12rem; }
.statement-label { margin-bottom: 2rem; }
.statement { font: 400 4.4rem/1.1 var(--display); max-width: 21em; }

#interieur { height: 620vh; }
.gallery-stage { position: sticky; top: 0; height: calc(100lvh - var(--strip)); overflow: hidden; display: flex; align-items: flex-end; padding-bottom: 3.5rem; }
#rest .gallery-title { position: absolute; left: var(--edge); right: var(--edge); top: 5.6rem; font-size: 4.6rem; white-space: nowrap; transform-origin: left top; z-index: 0; }
.gallery-track { position: relative; z-index: 1; display: flex; align-items: center; gap: 9vw; padding-inline: 100vw 30vw; width: max-content; }
.card { flex: none; width: 42vw; margin: 0; will-change: transform; }
.card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
figcaption { padding-top: .7rem; }

.types { width: 100%; border-collapse: collapse; }
.types th, .types td { padding-block: .9rem; border-top: 1px solid currentColor; font-weight: 400; text-align: left; transition: opacity .4s; }
.types tr:last-child th, .types tr:last-child td { border-bottom: 1px solid currentColor; }
.types td { text-align: right; white-space: nowrap; }
.types:hover tr { opacity: .28; }
.types tr { transition: opacity .35s; }
.types tr:hover { opacity: 1; }

.marquee { overflow: hidden; white-space: nowrap; padding-block: 1rem; }
.marquee-track { display: inline-flex; font: 400 9rem/1.1 var(--display); will-change: transform; }

.pair { display: grid; grid-template-columns: 5fr 7fr; gap: 1.5rem; margin-top: 8rem; align-items: end; }
.pair figure { margin: 0; overflow: hidden; }
.pair img { width: 100%; height: auto; will-change: transform; }

/* One full-bleed stage for the whole day: the sun crosses the render's own sky. */
#nuit { height: 590vh; }
.night-stage { position: sticky; top: 0; height: calc(100lvh - var(--strip)); overflow: hidden; background: var(--navy); }
.night-stage img { position: absolute; max-width: none; opacity: 0; will-change: opacity; }
.night-stage canvas { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; display: block; }
#sun-arc { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; color: var(--cream); pointer-events: none; will-change: opacity; }
#sun-arc path { stroke-width: 1; pointer-events: stroke; cursor: grab; }
#sun-dot { position: absolute; z-index: 4; left: 0; top: 0; width: 0; height: 0; color: var(--cream); cursor: grab; touch-action: none; will-change: transform, opacity; }
#sun-dot::before { content: ""; position: absolute; left: -.9rem; top: -.9rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: currentColor; }
#sun-dot::after { content: ""; position: absolute; left: -2.4rem; top: -2.4rem; width: 4.8rem; height: 4.8rem; border-radius: 50%; }
#sun-dot.is-dragging { cursor: grabbing; }
.night-shade { z-index: 2; }
#rest .night-title { position: absolute; z-index: 3; left: var(--edge); top: 6.2rem; width: 15em; font-size: 4rem; line-height: 1.06; color: var(--cream); }

#contact { padding-bottom: 1.6rem; }
.docs-title { margin-top: 3rem; }
.docs { display: grid; gap: .4rem; }
.docs a { text-decoration: underline; text-underline-offset: .2em; }
.enquiry label { display: block; margin-bottom: 1.3rem; }
.enquiry input { display: block; width: 100%; height: 2.5rem; margin-top: .3rem; background: transparent; border: 0; border-bottom: 1px solid currentColor; color: inherit; font: inherit; }
.enquiry p { font-size: .9rem; }
.enquiry p a { text-decoration: underline; text-underline-offset: .2em; }
.footer-mark { margin-top: 8rem; font: 400 9.1rem/1 var(--display); white-space: nowrap; text-align: center; }

/* The strip switches in one step, so the label always keeps full contrast. */
#strip {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10;
  height: var(--strip);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--stone);
  color: var(--navy);
  font: 400 12px/1 var(--text);
  transition: background-color .35s linear, color .35s linear;
}
#strip.is-night { background: var(--navy); color: var(--cream); }
#sun-name, #sun-hint { position: absolute; top: 50%; transform: translateY(-50%); visibility: hidden; }
#sun-name { left: var(--edge); }
#sun-hint { right: var(--edge); }
#strip.has-sun #sun-name, #strip.has-sun #sun-hint { visibility: visible; }

.is-plain #rest { display: block; }
.is-plain #interieur, .is-plain #nuit { height: auto; }
.is-plain .gallery-stage, .is-plain .night-stage, .is-plain .stack-card { position: static; height: auto; overflow: visible; display: block; }
.is-plain #rest .gallery-title, .is-plain #rest .night-title { position: static; white-space: normal; margin: 1.5rem var(--edge); }
.is-plain .gallery-track { display: grid; width: auto; gap: 1.5rem; padding: 2rem var(--edge); }
.is-plain .card { width: 100%; }
.is-plain .night-stage img, .is-plain .plate-day { position: static; opacity: 1; width: 100%; height: auto; margin-bottom: .5rem; }
.is-plain #sun-arc, .is-plain #sun-dot, .is-plain #sun-name, .is-plain #sun-hint, .is-plain .night-stage canvas, .is-plain .night-shade { display: none; }

/* No WebGL or reduced motion: the real image and all copy, with no staging. */
.is-plain #scene { height: auto; }
.is-plain .stage { position: static; height: auto; overflow: visible; padding-top: 5rem; background: var(--navy); }
.is-plain .stage canvas, .is-plain .shade, .is-plain .loader-note { display: none; }
.is-plain .plate-wrap, .is-plain .t-top, .is-plain .t-bottom, .is-plain .domain { position: static; }
.is-plain .plate { position: static; opacity: 1; width: 100%; height: auto; }
.is-plain #wordmark, .is-plain .t-label, .is-plain .t-numbers, .is-plain .t-tagline, .is-plain .t-facts, .is-plain .t-cta,
.is-plain .domain h2, .is-plain .domain-side { position: static; margin: 1.5rem var(--edge); width: auto; }
.is-plain .t-top, .is-plain .t-bottom { padding-block: 1rem; }
.is-plain .domain { background: var(--stone); padding-block: 3rem; }

@media (max-width: 767px) {
  /* 16px at a 390 window. */
  html { font-size: calc(100vw / 24.375); }
  :root { --edge: 1.25rem; }

  #top { padding: .9rem 1.25rem; }
  .top-right .pill { display: none; }
  .top-logo { height: 2.4rem; }

  .t-label { top: 5rem; }
  #wordmark { top: 6.3rem; font-size: 3.05rem; line-height: 1.02; white-space: normal; }
  #wordmark span { display: block; }
  #wordmark.at-loader { left: 1.25rem; bottom: 1.2rem; font-size: 3.3rem; }

  .t-numbers { left: var(--edge); right: auto; top: 13.2rem; gap: 1.6rem; }
  .t-numbers dt { font-size: 2.7rem; }

  .shade {
    background:
      linear-gradient(180deg, var(--navy) 0%, var(--navy) 34%, rgba(5, 49, 66, 0) 44%),
      linear-gradient(0deg, var(--navy) 0%, var(--navy) 30%, rgba(5, 49, 66, 0) 44%);
  }

  .t-tagline { bottom: 8.6rem; width: 15rem; font-size: 2.2rem; }
  .t-facts { bottom: 1.4rem; flex-direction: column; gap: .5rem; }
  .t-facts br { display: none; }
  .t-facts li:nth-child(n+2) { display: none; }
  .t-cta { width: 6.6rem; height: 6.6rem; bottom: 1.2rem; }
  .t-cta span { font-size: .5rem; }

  .loader-note { top: 5rem; }
  .loader-left { left: 1.25rem; }
  .loader-right { right: 1.25rem; }

  #menu a { font-size: 3.1rem; }
  .block { padding: 5.5rem var(--edge); }
  #rest h2 { font-size: 3.2rem; }
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .lead { font-size: 1.1rem; }
  .figures { grid-template-columns: 1fr 1fr; margin-top: 3.5rem; gap: 2rem 1rem; }
  .figures dt { font-size: 2.3rem; }
  .statement-wrap { padding-block: 5.5rem; }
  .statement { font-size: 2.2rem; }
  #interieur { height: auto; }
  .gallery-stage { position: static; height: auto; display: block; overflow: visible; padding-block: 5rem 2rem; }
  #rest .gallery-title { position: static; font-size: 3.2rem; white-space: normal; margin: 0 var(--edge) 2.5rem; }
  .gallery-track { display: grid; width: auto; gap: 2rem; padding: 0 var(--edge); }
  .card { width: 100%; }
  .card img { aspect-ratio: 4 / 3; }
  .stack-card img { object-position: 55% center; }
  .marquee-track { font-size: 4rem; }
  .pair { grid-template-columns: 1fr; margin-top: 3rem; }
  .as-title { font-size: 1.9rem; }
  #rest .night-title { font-size: 2.5rem; top: 6.2rem; right: var(--edge); width: auto; }
  #sun-name, #sun-hint { display: none; }
  .footer-mark { font-size: 2.3rem; margin-top: 4rem; }

  .domain h2 { top: 5rem; width: auto; right: var(--edge); font-size: 3.1rem; }
  .domain-side { left: var(--edge); right: var(--edge); top: 15.4rem; width: auto; }
  .domain-read { font-size: 1.02rem; }
  .domain-near { display: none; }
}