/* =========================================================
   HERO BRIDGE
========================================================= */

.hero-bridge {
  height:
    120px;

  background:
    var(--surface-primary);
}



/* =========================================================
   EDITORIAL
========================================================= */

.editorial {
  position:
    relative;

  overflow:
    hidden;

  background:
    var(--surface-primary);

  padding:
    120px 0 180px;
}



/* =========================================================
   INTRO
========================================================= */

.editorial-intro {
  width:
    calc(100% - 160px);

  max-width:
    1400px;

  margin:
    0 auto 140px;
}

.editorial-eyebrow {
  margin-bottom:
    var(--space-sm);
}

.editorial-title {
  max-width:
    8ch;
}



/* =========================================================
   IMMERSIVE
========================================================= */

.immersive {
  position:
    relative;

  width:
    calc(100% - 80px);

  height:
    88vh;

  margin:
    0 auto 140px;

  overflow:
    hidden;

  background:
    var(--surface-dark);
}



/* =========================================================
   IMMERSIVE MODIFIERS
========================================================= */

.immersive--rounded {
  border-radius:
    36px;
}

.immersive--fullscreen {
  width:
    100%;

  height:
    100vh;

  border-radius:
    0;

  margin-bottom:
    0;
}



/* =========================================================
   IMMERSIVE IMAGE
========================================================= */

.immersive img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  display:
    block;
}



/* =========================================================
   IMMERSIVE OVERLAY
========================================================= */

.immersive::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      to top,
      rgba(15,17,58,0.28) 0%,
      rgba(15,17,58,0.10) 34%,
      rgba(15,17,58,0.02) 56%,
      transparent 74%
    );

  pointer-events:
    none;
}



/* =========================================================
   IMMERSIVE CONTENT
========================================================= */

.immersive-content {
  position:
    absolute;

  left:
    clamp(32px, 6vw, 72px);

  bottom:
    clamp(32px, 6vw, 72px);

  z-index:
    5;

  max-width:
    420px;
}



/* =========================================================
   IMMERSIVE TITLE
========================================================= */

.immersive-title {
  margin-top:
    0;

  margin-bottom:
    18px;
}



/* =========================================================
   SPLIT
========================================================= */

.split {
  width:
    calc(100% - 160px);

  max-width:
    1400px;

  margin:
    0 auto 180px;

  display:
    grid;

  grid-template-columns:
    1fr
    0.9fr;

  gap:
    100px;

  align-items:
    center;
}



/* =========================================================
   SPLIT MODIFIER
========================================================= */

.split--reverse {
  grid-template-columns:
    0.9fr
    1fr;
}



/* =========================================================
   SPLIT MEDIA
========================================================= */

.split-media {
  position:
    relative;

  height:
    76vh;

  overflow:
    hidden;

  border-radius:
    32px;
}

.split-media img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  display:
    block;
}



/* =========================================================
   SPLIT CONTENT
========================================================= */

.split-content {
  max-width:
    520px;
}



/* =========================================================
   SPLIT TITLE
========================================================= */

.split-title {
  margin-bottom:
    24px;
}


/* =========================================================
   STORY
========================================================= */

.story-section {
  min-height: 100vh;

  padding:
    clamp(180px, 22vh, 260px)
    var(--section-padding-x)
    var(--space-7xl);

  display:
    flex;

  align-items:
    center;
}

.story-inner {
  max-width:
    1100px;
}

.story-lines {
  display:
    flex;

  flex-direction:
    column;

  gap:
    var(--space-2xl);
}

.story-boom {
  min-height:
    100vh;

  padding:
    clamp(180px, 22vh, 260px)
    var(--section-padding-x)
    var(--space-7xl);

  display:
    flex;

  align-items:
    center;
}

.story-boom h2 + h2 {
  margin-top:
    var(--space-md);
}



/* =========================================================
   STORY BACKGROUNDS
========================================================= */

.story-section--intro {
  background:
    var(--light);
}

.story-lines {
  background:
    #f2f2f0;
}

.story-boom {
  background:
    #ebeae7;
}

.story-section--connected {
  background:
    linear-gradient(
      180deg,
      #ebeae7 0%,
      var(--light) 100%
    );
}



/* =========================================================
   CONNECTED
========================================================= */

.story-section--connected h2 {
  margin-top:
    var(--space-lg);

  position:
    relative;
}

.story-section--connected h2::after {
  content:
    "";

  display:
    block;

  width:
    120px;

  height:
    3px;

  background:
    var(--gold);

  margin-top:
    32px;
}



/* =========================================================
   EDITORIAL FEATURE
   Founder editorial section
========================================================= */

.editorial-feature {
  position:
    relative;

  overflow:
    hidden;

  background:
    var(--surface-primary);

  padding:
    var(--space-6xl)
    0
    var(--space-7xl);
}


.editorial-feature-inner {
  width:
    calc(100% - var(--space-7xl));

  max-width:
    var(--container-wide);

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    520px;

  gap:
    var(--space-5xl);

  align-items:
    stretch;
}



/* =========================================================
   IMAGE LEFT MODIFIER
========================================================= */

.editorial-feature--image-left .editorial-feature-inner {
  grid-template-columns:
    360px
    minmax(0, 1fr);
}


.editorial-feature--image-left .editorial-feature-content {
  order:
    2;
}


.editorial-feature--image-left .editorial-feature-media {
  order:
    1;
}



/* =========================================================
   CONTENT
========================================================= */

.editorial-feature-content {
  max-width:
    none;
}


.editorial-feature-copy {
  max-width:
    38rem;

  margin-top:
    var(--space-xl);
}


.editorial-feature-copy p {
  margin:
    0 0 var(--space-xl);
}




/* =========================================================
   PROOF
========================================================= */

.proof-section {
  padding:
    var(--space-7xl)
    var(--section-padding-x);
}

.proof-inner {
  max-width:
    920px;

  margin-bottom:
    var(--space-6xl);
}



/* =========================================================
   LAYOUT
========================================================= */

.proof-layout {
  display:
    grid;

  grid-template-columns:
    1.4fr 0.8fr;

  gap:
    var(--space-6xl);

  align-items:
    start;
}



/* =========================================================
   MAIN FACT
========================================================= */

.proof-main {
  max-width:
    620px;
}



/* =========================================================
   SUPPORTING NOTES
========================================================= */

.proof-notes {
  display:
    flex;

  flex-direction:
    column;

  gap:
    var(--space-3xl);

  padding-top:
    var(--space-lg);
}



/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px) {

  .proof-layout {
    grid-template-columns:
      1fr;

    gap:
      var(--space-4xl);
  }

  .proof-notes {
    padding-top:
      0;
  }

}


/* =========================================================
   MEDIA
========================================================= */

.editorial-feature-media {
  align-self:
    stretch;

  width:
    100%;

  max-width:
    520px;

  min-height:
    100%;

  overflow:
    hidden;

  border-radius:
    var(--radius-xl);

  background:
    var(--surface-dark);
}


.editorial-feature-media img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  display:
    block;
}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

  .editorial {
    padding:
      80px 0 120px;
  }


  .editorial-intro {
    width:
      calc(100% - var(--space-xl));

    margin:
      0 auto 72px;
  }


  .immersive {
    width:
      calc(100% - var(--space-xl));

    height:
      72vh;

    margin:
      0 auto 72px;
  }


  .immersive--rounded {
    border-radius:
      28px;
  }


  .immersive-content {
    left:
      24px;

    bottom:
      24px;

    max-width:
      320px;
  }


  .split,
  .split--reverse {
    width:
      calc(100% - var(--space-xl));

    grid-template-columns:
      1fr;

    gap:
      40px;

    margin:
      0 auto 72px;
  }


  .split-media {
    order:
      1;

    height:
      46vh;

    border-radius:
      28px;
  }


  .split-content {
    order:
      2;

    max-width:
      100%;
  }


  .editorial-feature {
    padding:
      var(--space-5xl)
      0
      var(--space-6xl);
  }


  .editorial-feature-inner {
    width:
      calc(100% - var(--space-xl));

    grid-template-columns:
      1fr;

    gap:
      var(--space-3xl);

    align-items:
      start;
  }


  .editorial-feature-copy {
    max-width:
      100%;
  }


  .editorial-feature-media {
    max-width:
      100%;

    min-height:
      auto;
  }


  .editorial-feature--image-left .editorial-feature-content,
  .editorial-feature--image-left .editorial-feature-media {
    order:
      initial;
  }

}