:root {
  --ink: #171714;
  --muted: #5c5b55;
  --paper: #f8f7f2;
  --white: #ffffff;
  --line: #d8d7d0;

  --coral: #ef624f;
  --cobalt: #2851d9;
  --sun: #f4c62e;
  --leaf: #168564;
  --plum: #762b73;
  --orange: #ef7c2d;

  --reveal: 0;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Scroll distance drives the colour reveal via JS -> --reveal custom property */
.scroll-spacer {
  height: 60vh;
}

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(4, auto);
  align-content: center;
  row-gap: clamp(0.5rem, 2vh, 1.5rem);
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.eyebrow      { grid-row: 1; }
.headline     { grid-row: 2; }
.subline      { grid-row: 3; }
.mark         { grid-row: 4; }
.object-wrap  { grid-row: 1 / 5; }

/* Dominant saturated field */
.field {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.field--a {
  background: var(--coral);
}

.field--b {
  background: var(--cobalt);
  clip-path: polygon(0 0, calc(var(--reveal) * 100%) 0, calc(var(--reveal) * 100%) 100%, 0 100%);
  transition: clip-path 60ms linear;
}

.object-wrap {
  grid-column: 6 / 13;
  grid-row: 1 / 5;
  position: relative;
  z-index: 1;
  justify-self: end;
  align-self: center;
  height: min(82vh, 780px);
  width: auto;
}

.object {
  height: 100%;
  width: auto;
  display: block;
  filter: drop-shadow(0 30px 40px rgba(23, 23, 20, 0.25));
}

.o-shadow { fill: rgba(23, 23, 20, 0.18); }
.o-base   { fill: var(--ink); }
.o-stem   { fill: var(--ink); }
.o-ring   { fill: none; stroke: var(--sun); stroke-width: 14; }
.o-dome   { fill: var(--sun); }
.o-core   { fill: var(--paper); }

.eyebrow {
  grid-column: 1 / 6;
  z-index: 2;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--paper);
  mix-blend-mode: difference;
}

.headline {
  grid-column: 1 / 9;
  z-index: 2;
  margin: 0;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-size: clamp(3.2rem, 12vw, 9.5rem);
  color: var(--paper);
  mix-blend-mode: difference;
  text-transform: uppercase;
}

.headline span {
  display: block;
}

.subline {
  grid-column: 1 / 6;
  z-index: 2;
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--paper);
  mix-blend-mode: difference;
  max-width: 26ch;
}

.mark {
  grid-column: 1 / 6;
  z-index: 2;
  margin: clamp(1.5rem, 4vh, 3rem) 0 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  mix-blend-mode: difference;
}

@media (max-width: 720px) {
  .stage {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto repeat(4, auto);
    padding: 4vh clamp(1.25rem, 5vw, 2rem);
  }

  .object-wrap {
    grid-column: 1 / 7;
    grid-row: 1;
    justify-self: center;
    align-self: auto;
    height: min(38vh, 340px);
    width: auto;
  }

  .eyebrow  { grid-column: 1 / 7; grid-row: 2; }
  .headline {
    grid-column: 1 / 7;
    grid-row: 3;
    font-size: clamp(2.6rem, 15vw, 4.2rem);
  }
  .subline { grid-column: 1 / 7; grid-row: 4; }
  .mark    { grid-column: 1 / 7; grid-row: 5; }

  .scroll-spacer {
    height: 30vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .field--b {
    transition: none;
  }
}