.story-nav {
  --chapter-progress: 0;
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.5rem;
  padding: 1rem clamp(1rem, 2vw, 2rem);
  color: var(--paper);
  background: rgb(10 13 14 / 88%);
  border-bottom: 1px solid rgb(237 243 243 / 16%);
}

.story-nav__list { display: flex; gap: clamp(.3rem, .55vw, .72rem); list-style: none; padding: 0; }
.story-nav a { color: inherit; text-decoration: none; font: 700 clamp(.65rem, .72vw, .78rem)/1 RobotoCondensed, sans-serif; }
.story-nav a[aria-current='true'] { color: var(--moss); }

.story-nav__motion {
  position: absolute;
  left: clamp(11rem, 18vw, 20rem);
  right: clamp(1rem, 2vw, 2rem);
  bottom: -.08rem;
  height: .9rem;
  pointer-events: none;
}
.story-nav__motion-track,
.story-nav__motion-progress {
  position: absolute;
  left: 0;
  bottom: .38rem;
  height: 2px;
}
.story-nav__motion-track { width: 100%; background: rgb(237 243 243 / 18%); }
.story-nav__motion-progress {
  width: calc(var(--chapter-progress) * 100%);
  background: var(--moss);
  transition: width 520ms var(--ease-impact);
}
.story-nav__motion-stone {
  position: absolute;
  left: calc(var(--chapter-progress) * (100% - .875rem));
  bottom: 0;
  width: .875rem;
  aspect-ratio: 1;
  border-radius: 44% 56% 48% 52%;
  background: var(--moss);
  border: 2px solid var(--ink);
  transform: rotate(calc(var(--chapter-progress) * 720deg));
  transition:
    left 520ms var(--ease-impact),
    transform 520ms var(--ease-impact);
}

.logo-crop { display: block; position: relative; width: 9rem; height: 2.4rem; overflow: hidden; background: var(--ink); }
.logo-crop img { position: absolute; width: 30.3rem; max-width: none; left: -19.9rem; top: -4.8rem; }

.chapter h1 { font-size: var(--display); max-width: 12ch; }
.chapter h2 { font-size: var(--title); max-width: 11ch; }
.chapter__lead { margin-top: var(--space-3); }

.chapter--hero { display: flex; flex-direction: column; justify-content: flex-end; }
.chapter--hero .eyebrow { position: absolute; top: 6rem; left: 6vw; color: var(--moss); }
.chapter--hero h1 { position: relative; z-index: 2; }
.chapter--hero .chapter__lead { margin-left: 45%; border-top: 2px solid var(--moss); padding-top: 1rem; }
.rolling-mark { position: absolute; inset: 22% 0 auto; height: 7rem; border-bottom: 1px solid rgb(237 243 243 / 38%); }
.rolling-mark__stone { position: absolute; left: 0; bottom: .9rem; }
.rolling-mark__trace { position: absolute; left: 0; bottom: 0; height: .75rem; background: var(--moss); }

#why-no-moss { display: grid; grid-template-columns: 1.05fr .95fr; grid-template-rows: auto 1fr; gap: var(--space-3); }
#why-no-moss .eyebrow { grid-column: 1 / -1; }
#why-no-moss h2 { align-self: end; }
#why-no-moss .chapter__lead { align-self: end; border-left: 5px solid var(--moss); padding-left: var(--space-2); }
.monster-peek { position: absolute; right: -6vw; top: 2vh; width: min(47vw, 48rem); transform: rotate(-8deg); }
.monster-peek img { width: 100%; }

#urban-outdoor { display: flex; flex-direction: column; justify-content: flex-end; color: var(--paper); }
#urban-outdoor .chapter__background { object-position: 50% 42%; }
#urban-outdoor .eyebrow { color: var(--moss); }
#urban-outdoor .chapter__lead { margin-left: min(45%, 38rem); border-top: 1px solid; padding-top: var(--space-2); }

.chapter--venue h2 { margin-top: var(--space-2); }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.metrics > div { border-top: 1px solid; padding-top: var(--space-1); }
.metrics dt { margin-bottom: .7rem; }
.metrics dd { font: 900 clamp(1.8rem, 3.3vw, 4.2rem)/.95 RobotoCondensed, SourceHan, sans-serif; letter-spacing: -.04em; }
.media-grid { display: grid; grid-template-columns: 1.25fr .9fr 1fr; gap: .7rem; margin-top: var(--space-3); }
.media-grid img { width: 100%; height: clamp(11rem, 25vw, 27rem); object-fit: cover; }
.media-grid img:nth-child(2) { object-position: 62% 50%; }

.chapter--campaign { display: grid; grid-template-columns: .8fr 1.2fr; grid-template-rows: auto auto 1fr; column-gap: var(--space-4); }
.chapter--campaign .eyebrow { grid-column: 1 / -1; color: var(--moss); }
.chapter--campaign h2 { grid-column: 1; margin-top: var(--space-2); }
.chapter--campaign .chapter__lead { grid-column: 1; margin-top: var(--space-2); }
.campaign-video { position: absolute; right: 0; top: 0; width: 46%; height: 100%; object-fit: cover; }
.poster-strip { position: absolute; right: 3vw; bottom: 3vh; z-index: 2; display: flex; align-items: flex-end; gap: .65rem; }
.poster-strip img { width: clamp(4.8rem, 7vw, 7rem); aspect-ratio: 3/4; object-fit: cover; border: 2px solid var(--paper); }
.poster-strip img:nth-child(2) { transform: translateY(-1.1rem); }

#island-keeps-changing { display: flex; flex-direction: column; justify-content: center; }
#island-keeps-changing h2 { color: var(--moss); margin-top: var(--space-2); }
.value-list, .capability-list, .cta-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-4); }
.value-list article, .capability-list article, .cta-paths article { border-top: 1px solid; padding-top: var(--space-2); }
.value-list h3, .capability-list h3, .cta-paths h3 { margin: .8rem 0 .65rem; font-size: clamp(1.35rem, 2vw, 2.4rem); }
.value-list p, .capability-list p, .cta-paths p { max-width: 24rem; }

.chapter--event { color: var(--paper); }
.chapter--event .chapter__background { object-position: center; }
.chapter--event .eyebrow { color: var(--moss); }
.chapter--event h2 { margin-top: var(--space-2); max-width: none; font-family: RobotoCondensed, SourceHan, sans-serif; }
.chapter--event h2 span:last-child { color: var(--moss); }
.event-facts { display: flex; flex-wrap: wrap; gap: .55rem; list-style: none; padding: 0; margin-top: var(--space-3); }
.event-facts li { border: 1px solid currentColor; padding: .45rem .72rem; font-weight: 500; }
.event-filmstrip { position: absolute; right: 4vw; bottom: 4vh; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; width: min(45rem, 52vw); }
.event-filmstrip img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 2px solid var(--paper); }
.event-filmstrip img:nth-child(2) { transform: translateY(-1rem); }

#what-we-create { display: flex; flex-direction: column; justify-content: center; }
#what-we-create .capability-list article:nth-child(2) { border-color: var(--climb-blue); }
#what-we-create .capability-list article:nth-child(3) { border-color: var(--moss); }

.chapter--cta { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; gap: var(--space-2) var(--space-4); }
.chapter--cta .eyebrow, .chapter--cta h2 { grid-column: 1; }
.chapter--cta h2 { color: var(--moss); }
.chapter--cta .cta-paths { grid-column: 1; grid-template-columns: 1fr; margin-top: var(--space-2); gap: .8rem; }
.chapter--cta .cta-paths article { display: grid; grid-template-columns: 10rem 1fr; align-items: baseline; }
.chapter--cta .cta-paths h3 { margin: 0; font-size: 1.2rem; }
.qr-grid { grid-column: 2; grid-row: 1 / -1; align-self: center; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.qr-grid figure { border-top: 1px solid var(--paper); padding-top: var(--space-2); }
.qr-crop { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; background: white; }
.qr-crop img { position: absolute; max-width: none; }
.qr-crop--wechat img { width: 132%; left: -16%; top: -38%; }
.qr-crop--xhs img { width: 420%; left: -290%; top: -440%; }
.qr-grid figcaption { margin-top: 1rem; }
.qr-grid figcaption strong { color: var(--moss); font-size: 1.15rem; }
.qr-grid figcaption span { margin-top: .3rem; color: var(--muted); }

@media (max-width: 900px) {
  .story-nav__list { display: none; }
  .story-nav__motion { display: none; }
  .chapter { min-height: auto; padding: 6rem 1.2rem 4rem; }
  .chapter::before { font-size: 10rem; }
  .chapter--hero { min-height: 100svh; }
  .chapter--hero .chapter__lead, #urban-outdoor .chapter__lead { margin-left: 0; }
  #why-no-moss { display: block; min-height: 48rem; }
  #why-no-moss h2 { margin-top: var(--space-3); }
  #why-no-moss .chapter__lead { margin-top: var(--space-3); max-width: 62%; }
  .monster-peek { width: 75vw; top: auto; bottom: -2rem; right: -20vw; }
  #urban-outdoor { min-height: 85svh; }
  .metrics, .value-list, .capability-list, .cta-paths { grid-template-columns: 1fr; }
  .media-grid { grid-template-columns: 1fr; }
  .media-grid img { height: auto; aspect-ratio: 4/3; }
  .chapter--campaign { display: block; }
  .campaign-video { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 3/4; margin-top: var(--space-3); }
  .poster-strip { position: relative; inset: auto; overflow-x: auto; margin-top: 1rem; padding: 1rem 0; }
  .poster-strip img { width: 7rem; flex: 0 0 auto; }
  .event-filmstrip { position: relative; inset: auto; width: 100%; margin-top: var(--space-3); }
  .chapter--event { min-height: 58rem; }
  .chapter--cta { display: block; }
  .chapter--cta .cta-paths article { grid-template-columns: 8rem 1fr; }
  .qr-grid { grid-template-columns: 1fr 1fr; margin-top: var(--space-4); }
}

@media (max-width: 560px) {
  .chapter h1 { font-size: clamp(3.2rem, 15vw, 5.1rem); }
  .chapter h2 { font-size: clamp(3rem, 14vw, 5rem); }
  .chapter--hero .eyebrow { left: 1.2rem; }
  #why-no-moss .chapter__lead { max-width: 100%; }
  .monster-peek { opacity: .42; }
  .chapter--event { min-height: 66rem; }
  .event-filmstrip { grid-template-columns: 1fr 1fr; }
  .event-filmstrip img:last-child { display: none; }
  .qr-grid { grid-template-columns: 1fr; }
  .qr-grid figure { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; align-items: center; }
  .qr-grid figcaption { margin-top: 0; }
}