/* Mobile is intentionally composed as its own experience. */
.shell { width: calc(100% - 32px); }

.nav { height: 68px; }
.brand { font-size: 14px; letter-spacing: .17em; }
.brand img { width: 27px; height: 27px; }
.menu { width: 44px; height: 44px; padding: 10px; margin-right: -10px; }
.menu span { width: 22px; margin-left: auto; }
.nav.nav-open nav {
  top: 68px;
  padding: 28px 16px 32px;
  gap: 0;
  border-bottom: 1px solid var(--line);
}
.nav.nav-open nav a {
  min-height: 52px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
}

.hero { height: 740px; min-height: 740px; }
.hero:after {
  background: linear-gradient(180deg, rgba(5,6,7,.12), rgba(5,6,7,.84) 60%, #050607 92%);
}
.hero-grid { opacity: .55; }
.hero-copy,
.hero-copy.reveal,
.hero-copy.visible {
  width: 100%;
  top: 43%;
  transform: translateY(-50%);
}
.eyebrow { font-size: 8px; letter-spacing: .17em; white-space: nowrap; }
h1 { font-size: clamp(48px, 13.4vw, 54px); line-height: .86; letter-spacing: -.06em; }
h1 em { margin-left: 0; -webkit-text-stroke-width: 1px; }
.lede { margin: 26px 0 25px; max-width: 350px; font-size: 15px; line-height: 1.55; }
.hero-actions { gap: 16px; }
.button { min-height: 52px; padding: 15px 18px; }
.text-link { min-height: 40px; display: inline-flex; align-items: center; }
.scroll-cue { bottom: 22px; }

.section { padding-block: 80px; }
.kicker { font-size: 9px; }

.film { padding-top: 86px; padding-bottom: 84px; }
.film-heading {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-bottom: 34px;
}
.film-heading h2 { font-size: 54px; line-height: .9; }
.film-heading > p {
  justify-self: start;
  max-width: 330px;
  font-size: 15px;
  line-height: 1.55;
}
.film-stage { padding: 0 9px 9px 0; }
.film-depth { inset: 9px 0 0 9px; }
.film-portal { transform: none; box-shadow: 0 24px 55px #000; }
.film-portal .play { width: 82px; height: 82px; }
.film-portal .play span { font-size: 17px; }
.film-portal .play b { font-size: 8px; margin-top: 4px; }
.film-portal .play small { font-size: 8px; }
.film-portal > p { left: 12px; bottom: 10px; font-size: 8px; }
.film-index { display: none; }

.manifesto { gap: 24px; }
.manifesto > div { grid-template-columns: 1fr; gap: 22px; }
.manifesto h2 { font-size: 45px; line-height: 1; }
.manifesto div p { font-size: 15px; line-height: 1.65; }

.ventures { padding-block: 84px; }
.ventures:before { display: none; }
.section-head { margin-bottom: 38px; }
.section-head h2 { font-size: 45px; line-height: 1; }
.section-head > p { margin: 20px 0 0; font-size: 15px; }
.venture-grid { gap: 14px; }
.venture,
.venture-large,
.venture-wide { height: 350px; border-radius: 2px; }
.venture-top { top: 19px; }
.venture-bottom { bottom: 20px; }
.venture-top,
.venture-bottom { left: 18px; right: 18px; }
.venture-bottom h3 { font-size: 28px; }
.venture-bottom p { font-size: 13px; line-height: 1.45; }

.approach { gap: 44px; }
.approach h2 { font-size: 49px; }
.approach-intro > p { font-size: 15px; }
.steps article { grid-template-columns: 45px 1fr; gap: 10px; padding: 28px 0; }
.steps article:hover { padding-left: 0; }
.steps h3 { font-size: 23px; }
.steps p { font-size: 14px; line-height: 1.55; }

.founder { gap: 48px; padding-top: 80px; }
.founder-photo img { height: 450px; }
.founder-copy blockquote { font-size: 42px; margin: 21px 0 26px; }
.founder-copy > p:not(.kicker) { font-size: 15px; }

.cta { width: calc(100% - 24px); padding: 66px 18px; }
.cta h2 { font-size: 51px; }
.cta > p { font-size: 15px; margin: 24px auto; }

footer { gap: 48px; padding-top: 68px; }
.footer-links { gap: 28px; }
.legal { gap: 12px; }