:root {
  --blue: #3a5bd9;
  --green: #2e9e6b;
  --yellow: #f5b62a;
  --red: #f2543d;
  --ink: #1f1b16;
  --cream: #f6efe4;
  --stone: #e4dccd;
  --white: #fff;
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --gutter: clamp(20px, 4.5vw, 72px);
  --ease: cubic-bezier(.3, .9, .3, 1);
  --f: 1; /* print progress of the active pill, set by story.js */
}

/* One surface per beat. Ink on yellow and red, white on blue and green. */
body {
  --bg: var(--cream); --fg: var(--ink); --soft: rgba(31, 27, 22, .75);
  --btn-bg: var(--ink); --btn-fg: var(--white);
  --dim: var(--stone); --lit: var(--ink);
}
body[data-beat="1"] { --bg: var(--yellow); }
body[data-beat="2"] { --bg: var(--red); }
body[data-beat="1"], body[data-beat="2"] { --soft: rgba(31, 27, 22, .82); --dim: rgba(31, 27, 22, .18); }
body[data-beat="3"] { --bg: var(--green); }
body[data-beat="4"] { --bg: var(--blue); }
body[data-beat="3"], body[data-beat="4"] {
  --fg: var(--white); --soft: rgba(255, 255, 255, .92);
  --btn-bg: var(--white); --btn-fg: var(--ink);
  --dim: rgba(255, 255, 255, .35); --lit: var(--white);
}
body[data-beat="5"] {
  --bg: var(--ink); --fg: var(--white); --soft: rgba(255, 255, 255, .75);
  --btn-bg: var(--yellow); --btn-fg: var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.55;
}
a { color: inherit; }
p { margin: 0; text-wrap: pretty; }
h1, h2 { margin: 0; font-weight: 800; line-height: .92; letter-spacing: -.05em; text-wrap: balance; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 8px; }

.btn {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .5s var(--ease), color .5s var(--ease), transform .18s ease;
}
.btn:hover { transform: translateY(-3px); }
.btn--white { background: var(--white); color: var(--ink); }
.btn--quiet { background: var(--dim); color: var(--fg); }
.btn--small { height: 42px; padding: 0 20px; font-size: 15px; }

/* Nav sits inside the pinned stage and takes the current beat's colours. */
.nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px var(--gutter);
  color: var(--fg);
  transition: color .5s var(--ease);
}
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.05em;
  text-decoration: none;
}
.nav__links { display: flex; gap: 28px; font-weight: 600; font-size: 15px; }
.nav__links a { text-decoration: none; }
.nav__links a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* Four-pill E. --u is one bar height. */
.mark, .e {
  display: grid;
  flex: none;
  grid-template-columns: repeat(3, var(--u));
  grid-template-rows: var(--u) calc(var(--u) * 1.6) var(--u);
  gap: calc(var(--u) * .27);
}
.mark { --u: 8px; }
.mark i, .e a { border-radius: 999px; background: var(--dim); transition: background .5s var(--ease); }
.mark i:nth-child(1), .e a:nth-child(1) { grid-column: 1 / 4; }
.mark i:nth-child(4), .e a:nth-child(4) { grid-column: 1 / 4; }

/* Master-brand beats: all four colours. */
body:is([data-beat="0"], [data-beat="5"], [data-beat="6"]) :is(.mark i, .e a):nth-child(1) { background: var(--yellow); }
body:is([data-beat="0"], [data-beat="5"], [data-beat="6"]) :is(.mark i, .e a):nth-child(2) { background: var(--red); }
body:is([data-beat="0"], [data-beat="5"], [data-beat="6"]) :is(.mark i, .e a):nth-child(3) { background: var(--green); }
body:is([data-beat="0"], [data-beat="5"], [data-beat="6"]) :is(.mark i, .e a):nth-child(4) { background: var(--blue); }
/* Product beats: only that product's pill is lit. */
body[data-beat="1"] .mark i:nth-child(1), body[data-beat="2"] .mark i:nth-child(2),
body[data-beat="3"] .mark i:nth-child(3), body[data-beat="4"] .mark i:nth-child(4) { background: var(--lit); }

/* The story: a tall track with one pinned stage. */
.track { position: relative; height: calc(7 * 100svh); }
.anchor { position: absolute; left: 0; width: 1px; height: 1px; }
.stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  transition: background .6s var(--ease), color .5s var(--ease);
}

.e {
  --u: min(9.5vw, 11svh);
  --ex: 73%; --ey: 52%; --es: 1;
  position: absolute;
  left: var(--ex);
  top: var(--ey);
  translate: -50% -50%;
  scale: var(--es);
  transition: left .7s var(--ease), top .7s var(--ease), scale .7s var(--ease);
}
body[data-beat="6"] .e { --ex: 50%; --ey: 31%; --es: .72; }
.e a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-weight: 800;
  font-size: calc(var(--u) * .25);
  line-height: 1;
  letter-spacing: -.03em;
  text-decoration: none;
}
.e a:nth-child(1), .e a:nth-child(4) { justify-content: flex-start; padding: 0 calc(var(--u) * .42); font-size: calc(var(--u) * .3); }
.e a:nth-child(1), .e a:nth-child(2) { color: var(--ink); }
.e a:nth-child(3), .e a:nth-child(4) { color: var(--white); }
.e span { position: relative; transition: opacity .4s ease; }
body:not([data-beat="0"]) .e span { opacity: 0; }
/* The print pass: the active pill fills as you scroll into its beat. */
.e a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--lit);
  opacity: 0;
}
.e a:nth-child(1)::after, .e a:nth-child(4)::after { clip-path: inset(0 calc((1 - var(--f)) * 100%) 0 0 round 999px); }
.e a:nth-child(2)::after, .e a:nth-child(3)::after { clip-path: inset(calc((1 - var(--f)) * 100%) 0 0 0 round 999px); }
body[data-beat="1"] .e a:nth-child(1)::after, body[data-beat="2"] .e a:nth-child(2)::after,
body[data-beat="3"] .e a:nth-child(3)::after, body[data-beat="4"] .e a:nth-child(4)::after { opacity: 1; }

.beat {
  position: absolute;
  left: var(--gutter);
  top: 52%;
  width: min(46vw, 640px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  translate: 0 calc(-50% + 24px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease, translate .6s var(--ease);
}
.beat.is-active { opacity: 1; translate: 0 -50%; pointer-events: auto; transition-delay: .12s; }
.beat h1 { font-size: clamp(48px, min(7.6vw, 14svh), 124px); line-height: .88; letter-spacing: -.055em; }
.beat h1 span { display: block; }
.beat h2 { font-size: clamp(36px, min(5.2vw, 10svh), 84px); }
.beat p { font-size: clamp(17px, 1.5vw, 21px); color: var(--soft); max-width: 28em; transition: color .5s var(--ease); }
.beat__name { font-weight: 800; font-size: 24px; line-height: 1; letter-spacing: -.03em; }
.beat__name span { font-weight: 400; }
.beat__spec { font-family: var(--mono); font-weight: 500; font-size: 13px; }
.beat__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.beat--center {
  left: 50%;
  top: 55%;
  width: min(calc(100vw - 2 * var(--gutter)), 780px);
  align-items: center;
  text-align: center;
  translate: -50% 24px;
}
.beat--center.is-active { translate: -50% 0; }
.beat--center .beat__actions { justify-content: center; }

.hint {
  position: absolute;
  left: 50%;
  bottom: 22px;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  transition: opacity .4s ease;
}
.hint::after { content: ''; width: 6px; height: 22px; border-radius: 999px; background: currentColor; animation: nudge 1.6s ease-in-out infinite; }
body:not([data-beat="0"]) .hint { opacity: 0; }
@keyframes nudge { 50% { transform: translateY(6px); } }

/* Footer */
.footer { background: var(--cream); color: var(--ink); }
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px 64px;
  align-items: end;
  padding: clamp(40px, 6vw, 80px) var(--gutter) 28px;
}
.footer__blurb { font-size: clamp(22px, 2.6vw, 36px); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; max-width: 22em; }
.footer__meta { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-weight: 500; font-size: 13px; color: rgba(31, 27, 22, .65); }
.footer__strip { display: grid; grid-template-columns: repeat(4, 1fr); height: 10px; }
.footer__strip i:nth-child(1) { background: var(--blue); }
.footer__strip i:nth-child(2) { background: var(--green); }
.footer__strip i:nth-child(3) { background: var(--yellow); }
.footer__strip i:nth-child(4) { background: var(--red); }

@media (max-width: 820px) {
  .nav__links { display: none; }
  .e { --u: min(15vw, 6.4svh); --ex: 50%; --ey: 27%; }
  body[data-beat="6"] .e { --ex: 50%; --ey: 27%; --es: 1; }
  .beat, .beat--center {
    left: var(--gutter);
    right: var(--gutter);
    top: auto;
    bottom: 84px;
    width: auto;
    gap: 16px;
    translate: 0 24px;
  }
  .beat.is-active, .beat--center.is-active { translate: 0 0; }
  .beat h1 { font-size: clamp(44px, 13.5vw, 64px); }
  .beat h2 { font-size: clamp(34px, 10vw, 48px); }
  .footer__inner { grid-template-columns: 1fr; }
}

/* Without JavaScript the beats simply stack. */
html:not(.js) .track { height: auto; }
html:not(.js) .nav { position: static; padding-inline: 0; }
html:not(.js) .stage { position: static; height: auto; padding: 96px var(--gutter) 48px; }
html:not(.js) .e, html:not(.js) .hint { display: none; }
html:not(.js) .beat { position: static; opacity: 1; translate: none; width: auto; padding-block: 40px; pointer-events: auto; text-align: left; align-items: flex-start; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}