/* V4: one moon carries the whole page. Everything is staged in a fixed viewport and driven by scroll. */
:root {
  --ink: #141920;
  --camel: #C0A273;
  --coral: #FF6258;
  --paper: #F6F2EA;
  --pad: clamp(24px, 3.9vw, 56px);
  --sans: "Neuzeit S LT Std", "Albert Sans", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; }
html { background: var(--ink); }
body {
  background: var(--ink); color: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- CTA system ---------- */
.cta {
  display: inline-flex; align-items: center; gap: 14px;
  height: 64px; padding: 0 30px 0 34px; border-radius: 999px;
  background: var(--coral); color: var(--ink);
  font-weight: 700; font-size: 18px; letter-spacing: -0.01em; white-space: nowrap;
  transition: background-color .25s ease, color .25s ease;
}
.cta svg { width: 20px; height: 20px; transition: transform .25s ease; }
.cta:hover { background: var(--paper); }
.cta:hover svg { transform: translateX(5px); }
.cta--quiet {
  height: 46px; padding: 0 22px; background: transparent; color: inherit;
  font-weight: 500; font-size: 15px; box-shadow: inset 0 0 0 1px var(--camel);
}
.cta--quiet:hover { background: var(--camel); color: var(--ink); }
.cta--ink { background: var(--ink); color: var(--paper); }
.cta--ink:hover { background: var(--paper); color: var(--ink); }

/* ---------- header ---------- */
.hd {
  position: fixed; z-index: 20; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 30px var(--pad) 0;
  color: var(--paper);
  transition: color .5s ease;
}
.hd__logo img { height: 26px; width: auto; transition: filter .5s ease; }
.hd__nav { display: flex; align-items: center; gap: 40px; font-size: 15px; font-weight: 500; }
.hd.is-ink { color: var(--ink); }
.hd.is-ink .hd__logo img { filter: brightness(0) saturate(100%) invert(8%) sepia(13%) saturate(1200%) hue-rotate(176deg); }
.hd.is-ink .cta--quiet { box-shadow: inset 0 0 0 1px var(--ink); }
.hd.is-ink .cta--quiet:hover { background: var(--ink); color: var(--paper); }

/* ---------- stage ---------- */
.stage { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.stage .is-live { pointer-events: auto; }
.runway { height: 1400vh; }

.grain {
  position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: .1; mix-blend-mode: soft-light;
  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%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- the moon ---------- */
.moon { position: absolute; z-index: 2; left: 0; top: 0; width: 100px; height: 100px; will-change: transform, width, height; }
.moon__disc { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: var(--camel); will-change: transform; }
.moon__disc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.moon__ring { position: absolute; left: -22%; top: -22%; width: 144%; height: 144%; overflow: visible; opacity: 0; will-change: transform, opacity; }
.moon__ring text { font-family: var(--sans); font-weight: 800; font-size: 62px; letter-spacing: -1.6px; fill: var(--paper); }
.moon__ring text.is-ours { fill: var(--camel); }

/* ---------- 01 the question ---------- */
.q {
  position: absolute; z-index: 3; left: 0; right: 0; top: 0;
  font-weight: 800;
  font-size: min(17.2vw, 25.5vh);
  line-height: .86; letter-spacing: -0.047em;
  text-align: center;
  will-change: transform, opacity;
}
.q__layer { display: block; }
.q__layer span { display: block; white-space: nowrap; }
.q__paper { color: var(--paper); }
.q__ink { position: absolute; inset: 0; color: var(--ink); clip-path: circle(0px at 50% 50%); }

.foot {
  position: absolute; z-index: 4; left: var(--pad); right: var(--pad); bottom: clamp(28px, 4.6vh, 44px);
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.foot__lede { max-width: 22em; font-size: 19px; line-height: 1.45; color: var(--camel); }

/* ---------- 02 the table ---------- */
.word {
  position: absolute; z-index: 3; left: 0; right: 0; top: 70vh; height: 1em;
  font-weight: 800; font-size: min(12vh, 9.4vw); line-height: 1; letter-spacing: -0.045em;
  text-align: center; opacity: 0;
}
.word span { position: absolute; left: 0; right: 0; top: 0; white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.word .is-ours { color: var(--camel); }
.note {
  position: absolute; z-index: 3; left: 0; right: 0; top: calc(70vh + min(12vh, 9.4vw) + 1.2vh);
  text-align: center;
  font-family: "Caveat", cursive; font-weight: 600; font-style: normal; font-size: min(4.6vh, 3.4vw); line-height: 1;
  color: var(--coral); opacity: 0;
}
.note i { display: inline-block; font-style: normal; transform: rotate(-2.5deg); }

.say {
  position: absolute; z-index: 3; left: 50vw; right: var(--pad); top: 50%;
  transform: translateY(-50%);
  will-change: transform, opacity;
}
.say__title { font-weight: 800; font-size: min(8.5vw, 15vh); line-height: .88; letter-spacing: -0.044em; color: var(--camel); }
.say__title span { display: block; overflow: hidden; white-space: nowrap; padding-bottom: .12em; margin-bottom: -.12em; }
.say__title i { display: block; font-style: normal; transform: translateY(108%); will-change: transform; }
.say__body { margin-top: 5.2vh; opacity: 0; }
.say__body p { max-width: 24em; font-size: 21px; line-height: 1.5; color: rgba(246, 242, 234, .8); margin-bottom: 30px; }

/* ---------- 03 what we bring ---------- */
.bring { position: absolute; z-index: 3; left: var(--pad); width: 46vw; top: 50%; height: 0; }
.bring__lead {
  position: absolute; left: 0; bottom: 22.5vh;
  font-weight: 800; font-size: min(3.6vh, 2.5vw); letter-spacing: -0.02em; color: var(--camel);
  opacity: 0; white-space: nowrap;
}
.bring__item { position: absolute; left: 0; right: 0; top: -19vh; opacity: 0; will-change: transform, opacity; }
.bring__item h3 { font-weight: 800; font-size: min(13.5vh, 7.6vw); line-height: .9; letter-spacing: -0.044em; }
.bring__item p { max-width: 20em; margin-top: 3.4vh; font-size: 21px; line-height: 1.5; color: rgba(246, 242, 234, .8); }

/* ---------- 04 our way ---------- */
.tale {
  position: absolute; z-index: 3; left: 14vw; right: 14vw; top: 45vh;
  font-weight: 800; font-size: min(5.6vh, 3.5vw); line-height: 1.1; letter-spacing: -0.034em;
  text-align: center; opacity: 0;
}
.tale .wd { opacity: .13; }

/* ---------- 05 morning ---------- */
.dawn {
  position: absolute; z-index: 5; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--ink); text-align: center; opacity: 0;
}
.dawn__line { font-weight: 800; font-size: min(14.5vh, 9.2vw); line-height: .88; letter-spacing: -0.046em; margin-top: -8vh; }
.dawn__line span { display: block; white-space: nowrap; }
.dawn .cta { margin-top: 6vh; }
.dawn__mark {
  position: absolute; left: var(--pad); right: var(--pad); bottom: -6.2vw; width: calc(100% - 2 * var(--pad)); height: auto;
  filter: brightness(0); opacity: .1;
}

/* ---------- review-only switcher (not part of the design) ---------- */
.proto {
  position: fixed; z-index: 50; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: rgba(20, 25, 32, .72); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(246, 242, 234, .16);
  font-size: 12px; font-weight: 500; letter-spacing: .02em;
}
.proto a { padding: 7px 14px; border-radius: 999px; color: rgba(246, 242, 234, .7); }
.proto a.is-on { background: var(--paper); color: var(--ink); }

/* Desktop is the target for this round. Below is only a safety net. */
@media (max-width: 900px) {
  .hd__nav { display: none; }
  .bring__lead { bottom: 20.5vh; }
  .foot { flex-direction: column; align-items: flex-start; gap: 16px; }
  .foot__lede { font-size: 16px; }
  .cta { height: 56px; font-size: 16px; padding: 0 22px 0 24px; }
  .say { left: var(--pad); top: auto; bottom: 9vh; transform: none; }
  .say__title { font-size: 12.5vw; }
  .say__body p, .bring__item p { font-size: 17px; }
  .bring { width: auto; right: var(--pad); top: 70vh; }
  .bring__item h3 { font-size: 11vw; }
  .bring__lead { font-size: 4.4vw; }
  .tale { left: var(--pad); right: var(--pad); font-size: 6vw; top: 40vh; }
  .dawn__line { font-size: 13vw; }
}