/* Reative. Tokens first, then the page's own markup. Nothing here restyles a
   [data-sc-*] mechanism. */
:root {
  --sc-canvas:      #0E0D0C;
  --sc-surface:     #181614;
  --sc-ink:         #F4F1EA;
  --sc-ink-soft:    #A8A196;
  --sc-accent:      #FFD23F;
  --sc-accent-ink:  #141311;
  --sc-font-display: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-shadow-color: 30 20% 3%;
  --sc-r-sm: 4px; --sc-r-md: 8px; --sc-r-lg: 14px;

  /* film grounds, for the rail and anything that quotes a scene */
  --g-cobalt: #2140F0; --g-mustard: #F2B705; --g-red: #A8220E;
  --g-forest: #0F5C3A; --g-mint: #3FE3C3; --g-dark: #141311;
  --strip-w: 62px;
}
.sc-display { font-weight: 700; font-stretch: 112%; }
.sc-display--xl { font-weight: 800; font-stretch: 118%; letter-spacing: -0.04em; }
.sc-display--md { font-stretch: 108%; }
.sc-lede { font-family: var(--sc-font-display); font-weight: 500; font-stretch: 104%; }
main { position: relative; }

/* ---------------------------------------------------------------- chrome */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sc-5) var(--sc-gutter);
  padding-right: calc(var(--sc-gutter) + var(--strip-w));
  pointer-events: none;
  mix-blend-mode: difference; color: #fff;
}
.bar > * { pointer-events: auto; }
.bar__mark {
  font-family: var(--sc-font-display); font-weight: 800; font-stretch: 120%;
  font-size: var(--sc-t-lg); letter-spacing: -0.03em; text-decoration: none;
}
.bar__cta {
  font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm);
  text-decoration: none; padding: 0.55em 1em; border: 1.5px solid currentColor; border-radius: var(--sc-r-pill);
  transition: transform var(--sc-d-fast) var(--sc-ease-out), background var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .bar__cta:hover { background: #fff; color: #000; }
}
.bar__cta:active { transform: translateY(1px); }

/* ---------------------------------------------------------------- the strip */
.strip {
  position: fixed; right: 12px; top: 50%; translate: 0 -50%; z-index: var(--sc-z-chrome);
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 9px;
  background:
    radial-gradient(circle, var(--sc-ink) 1.4px, transparent 1.9px) 2px 6px / 6px 11px repeat-y,
    radial-gradient(circle, var(--sc-ink) 1.4px, transparent 1.9px) right 2px top 6px / 6px 11px repeat-y,
    var(--sc-surface);
  border-radius: var(--sc-r-sm);
  box-shadow: var(--sc-e2), var(--sc-edge);
}
.strip__head {
  position: absolute; left: 0; right: 0; height: 2px; background: var(--sc-accent);
  top: var(--strip-head, 12px); transition: opacity var(--sc-d-base) var(--sc-ease-out);
  opacity: var(--strip-head-on, 1); pointer-events: none;
}
.strip__frame {
  display: block; width: 44px; height: 44px; padding: 0; border: 0; background: var(--sc-canvas);
  border-radius: 2px; overflow: hidden; cursor: pointer; position: relative;
  transition: transform var(--sc-d-fast) var(--sc-ease-out);
}
.strip__frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.28); transition: filter 900ms var(--sc-ease-out); }
.strip__frame.is-developed img { filter: none; }
.strip__frame.is-current { outline: 2px solid var(--sc-accent); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .strip__frame:hover { transform: scale(1.06); } }
.strip__frame:active { transform: scale(0.97); }
.strip__frame:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- the film */
.hero__copy { max-width: min(40rem, 46vw); }
.hero .sc-display--xl { font-size: clamp(2.4rem, 1.3rem + 4.4vw, 5.8rem); }
.hero .sc-display--lg { font-size: clamp(2rem, 1.2rem + 3.4vw, 4.6rem); }
.hero__copy.is-light { color: var(--sc-ink); }
.hero__copy.is-dark  { color: #141311; }
.hero__copy--lead { left: var(--sc-gutter); bottom: clamp(3rem, 12vh, 8rem); }
.hero__copy--top  { left: var(--sc-gutter); top: clamp(6rem, 18vh, 12rem); }
.hero__copy--mid  { left: var(--sc-gutter); top: 50%; translate: 0 -50%; }
.hero__copy--finale {
  inset-inline: auto; left: 50%; top: 23%; translate: -50% -50%; text-align: center;
  max-width: min(60rem, 80vw);
}
.hero__copy--finale .sc-display--xl { font-size: clamp(2.4rem, 1.4rem + 4.6vw, 5.6rem); }
.hero__name {
  font-family: var(--sc-font-display); font-weight: 600; font-stretch: 110%;
  font-size: var(--sc-t-sm); letter-spacing: 0.02em; margin: 0 0 var(--sc-4);
  opacity: 0.86;
}
.hero__sub {
  font-size: var(--sc-t-lg); line-height: 1.4; margin: var(--sc-5) 0 0; max-width: 34ch; text-wrap: pretty;
  font-family: var(--sc-font-display); font-weight: 500; font-stretch: 104%;
}
.hero__rule { border: 0; height: 3px; background: currentColor; width: 7rem; margin: 0 0 var(--sc-5); }
.hero .sc-display { text-shadow: none; }

/* scene 3: tracking contracts as the line lands. --sc-p is published on the act. */
.hero__copy--s3 { --k3: clamp(0, calc((var(--sc-p, 0) - 0.36) / 0.09), 1); }
.hero__track { letter-spacing: calc(var(--k3) * -0.035em + (1 - var(--k3)) * 0.14em); }
/* scene 5: the block slides in from the left with the runner */
.hero__copy--s5 { --k5: clamp(0, calc((var(--sc-p, 0) - 0.705) / 0.07), 1); }
.hero__slide { transform: translate3d(calc((1 - var(--k5)) * -14vw), 0, 0); }
/* scene 6: settles from a hair smaller */
.hero__copy--s6 { --k6: clamp(0, calc((var(--sc-p, 0) - 0.9) / 0.08), 1); }
.hero__scale { transform: scale(calc(0.94 + 0.06 * var(--k6))); transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce) {
  .hero__track { letter-spacing: var(--sc-track-tight); }
  .hero__slide, .hero__scale { transform: none; }
  /* The poster (scene one, cobalt) holds for the whole act: every block reads
     as white type on the flat cobalt left of the character. */
  .hero__copy.is-dark { color: var(--sc-ink); }
  .hero__copy--finale { left: var(--sc-gutter); top: auto; bottom: clamp(3rem, 12vh, 8rem); translate: 0 0; text-align: left; max-width: min(40rem, 46vw); }
  .hero__copy--finale .sc-display--xl { font-size: clamp(2.4rem, 1.3rem + 4.4vw, 5.8rem); }
}

/* ---------------------------------------------------------------- manifesto */
.argument__stage { display: grid; place-items: center; padding-inline: var(--sc-gutter); }
.argument__line {
  grid-area: 1 / 1; max-width: 30ch; text-align: center;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.6rem); line-height: 1.22; letter-spacing: -0.02em;
}
.argument__line--turn { max-width: 34ch; }
.argument__em { color: var(--sc-accent); }

/* ---------------------------------------------------------------- cast */
.cast { padding-top: calc(var(--sc-section) * 0.85); }
.cast__title { margin-bottom: var(--sc-8); }
.cast__list { list-style: none; margin: 0; padding: 0; }
.cast__row {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--sc-5); row-gap: var(--sc-2);
  align-items: start; padding-block: var(--sc-7); border-top: 1px solid var(--sc-hairline);
}
.cast__img { grid-column: 1 / span 3; grid-row: 1 / span 3; width: 100%; height: auto; border-radius: var(--sc-r-md); box-shadow: var(--sc-e2); }
.cast__name { grid-column: 5 / span 5; grid-row: 1; margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-stretch: 112%; font-size: var(--sc-t-xl); letter-spacing: -0.025em; line-height: 1.05; }
.cast__value { grid-column: 10 / span 3; grid-row: 1; margin: 0; justify-self: end; text-align: right; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm); color: var(--sc-accent); letter-spacing: 0.02em; align-self: center; }
.cast__line { grid-column: 5 / span 7; grid-row: 2; margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); max-width: 52ch; text-wrap: pretty; }
.cast__row--alt .cast__img { grid-column: 10 / span 3; }
.cast__row--alt .cast__name { grid-column: 1 / span 5; }
.cast__row--alt .cast__value { grid-column: 7 / span 2; justify-self: start; text-align: left; }
.cast__row--alt .cast__line { grid-column: 1 / span 7; }

/* ---------------------------------------------------------------- the rail */
.make__stage { display: flex; align-items: center; }
.make__rail { gap: var(--sc-5); padding-inline: var(--sc-gutter); align-items: stretch; }
.make__intro, .make__outro { flex: 0 0 auto; width: clamp(18rem, 32vw, 30rem); display: flex; flex-direction: column; justify-content: flex-end; padding-block: var(--sc-6); }
.make__intro .sc-body { margin-top: var(--sc-5); }
.make__outro { justify-content: center; padding-left: var(--sc-6); width: clamp(18rem, 30vw, 28rem); }
.make__item {
  flex: 0 0 auto; width: clamp(17rem, 26vw, 24rem); aspect-ratio: 4 / 5;
  border-radius: var(--sc-r-lg); padding: var(--sc-6);
  display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: var(--sc-e3);
}
.make__h { margin: 0; font-family: var(--sc-font-display); font-weight: 800; font-stretch: 118%; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); letter-spacing: -0.035em; line-height: 0.95; }
.make__p { margin: var(--sc-4) 0 0; font-size: var(--sc-t-base); line-height: 1.5; max-width: 30ch; opacity: 0.9; text-wrap: pretty; }
.make__item--cobalt  { background: var(--g-cobalt);  color: var(--sc-ink); }
.make__item--mustard { background: var(--g-mustard); color: #141311; }
.make__item--red     { background: var(--g-red);     color: var(--sc-ink); }
.make__item--forest  { background: var(--g-forest);  color: var(--sc-ink); }
.make__item--mint    { background: var(--g-mint);    color: #141311; }
/* staggered settle driven from the act's --sc-p: cards arrive like a drawer being pulled */
@media (prefers-reduced-motion: no-preference) {
  .make__item { --i: 1; --arr: clamp(0, calc((var(--sc-p, 0) - var(--i) * 0.11) / 0.14), 1);
    opacity: calc(0.55 + 0.45 * var(--arr)); transform: translate3d(0, calc((1 - var(--arr)) * 2.5rem), 0); }
  .make__item--cobalt { --i: 0; --arr: 1; }
  .make__item--mustard { --i: 1; } .make__item--red { --i: 2; } .make__item--forest { --i: 3; } .make__item--mint { --i: 4; }
  .make__outro { --arr: clamp(0, calc((var(--sc-p, 0) - 0.62) / 0.14), 1); opacity: calc(0.4 + 0.6 * var(--arr)); }
}
@media (prefers-reduced-motion: reduce) {
  .make__rail { scroll-padding-inline: var(--sc-gutter); }
}

/* ---------------------------------------------------------------- process */
.run { padding-bottom: calc(var(--sc-section) * 0.8); }
.run__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--sc-5); row-gap: var(--sc-7); }
.run__title { grid-column: 1 / span 12; margin-bottom: var(--sc-4); }
.run__step { grid-column: span 4; padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline-strong); }
.run__when { margin: 0 0 var(--sc-3); font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm); color: var(--sc-accent); }
.run__h { margin: 0 0 var(--sc-3); font-family: var(--sc-font-display); font-weight: 700; font-stretch: 112%; font-size: var(--sc-t-xl); letter-spacing: -0.025em; }

/* ---------------------------------------------------------------- close */
.close__stage { display: grid; place-items: center; padding-inline: var(--sc-gutter); background: var(--sc-canvas); }
.close__copy { text-align: center; max-width: min(56rem, 84vw); display: flex; flex-direction: column; align-items: center; }
.close__copy .sc-display--xl { font-size: clamp(2.4rem, 1.4rem + 5vw, 6.4rem); }
.close__cta {
  display: inline-block; margin-top: var(--sc-7);
  font-family: var(--sc-font-display); font-weight: 700; font-stretch: 110%; font-size: var(--sc-t-lg);
  color: var(--sc-accent-ink); background: var(--sc-accent); text-decoration: none;
  padding: 0.9em 1.7em; border-radius: var(--sc-r-pill); box-shadow: var(--sc-e2);
  transition: box-shadow var(--sc-d-fast) var(--sc-ease-out), filter var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .close__cta:hover { filter: brightness(1.06); box-shadow: var(--sc-e3); } }
.close__cta:active { filter: brightness(0.96); }
.close__meta { margin-top: var(--sc-8); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.close__meta a { color: var(--sc-ink); }

/* ---------------------------------------------------------------- phone */
@media (max-width: 860px) {
  :root { --strip-w: 0px; }
  .bar { padding: var(--sc-4) var(--sc-gutter); }
  /* the strip becomes a horizontal filmstrip along the bottom edge */
  .strip {
    top: auto; bottom: 10px; right: 50%; translate: 50% 0;
    flex-direction: row; gap: 5px; padding: 8px 10px;
    background:
      radial-gradient(circle, var(--sc-ink) 1.2px, transparent 1.7px) 6px 1px / 10px 5px repeat-x,
      radial-gradient(circle, var(--sc-ink) 1.2px, transparent 1.7px) left 6px bottom 1px / 10px 5px repeat-x,
      var(--sc-surface);
  }
  .strip__head { top: 0; bottom: 0; height: auto; width: 2px; left: var(--strip-head, 10px); right: auto; }
  .strip__frame { width: 34px; height: 34px; }
  /* every scene's copy lives in the bottom band, under the character */
  .hero__copy, .hero__copy--lead, .hero__copy--top, .hero__copy--mid, .hero__copy--finale {
    inset-inline: var(--sc-gutter); left: var(--sc-gutter); right: var(--sc-gutter); top: auto; bottom: 5.4rem;
    translate: 0 0; max-width: none; text-align: left;
  }
  .hero .sc-display--xl, .hero .sc-display--lg, .hero__copy--finale .sc-display--xl { font-size: var(--sc-t-2xl); }
  .hero__sub { font-size: var(--sc-t-base); margin-top: var(--sc-4); }
  .hero__slide { transform: translate3d(calc((1 - var(--k5)) * -10vw), 0, 0); }

  .argument__line { font-size: clamp(1.35rem, 1rem + 2.2vw, 1.8rem); }
  .cast__row, .cast__row--alt { grid-template-columns: 1fr 1fr; row-gap: var(--sc-3); }
  .cast__img, .cast__row--alt .cast__img { grid-column: 1; grid-row: 1 / span 3; }
  .cast__name, .cast__row--alt .cast__name { grid-column: 2; grid-row: 1; }
  .cast__value, .cast__row--alt .cast__value { grid-column: 2; grid-row: 2; justify-self: start; text-align: left; }
  .cast__line, .cast__row--alt .cast__line { grid-column: 1 / -1; grid-row: 4; }
  .make__intro, .make__outro { width: 78vw; }
  .make__item { width: 72vw; }
  .run__step { grid-column: 1 / span 12; }
  .close__stage { padding-bottom: 4rem; }
}