/* THE JOURNEY — page-specific styles */

.orange{color:var(--orange)!important}

.journey{
  overflow:hidden;
  background:var(--navy)
}

.journey-hero{
  min-height:100vh;
  padding:150px 7vw 8vw;
  display:flex;
  align-items:flex-end;
  position:relative;
  border-top:0;
  background:
    linear-gradient(90deg,rgba(5,14,22,.98),rgba(5,14,22,.72) 48%,rgba(5,14,22,.25)),
    linear-gradient(0deg,rgba(5,14,22,.95),transparent 55%),
    url("../img/journey-hero.jpg") center/cover no-repeat
}

.journey-hero-inner{
  width:100%;
  max-width:1400px;
  margin:0 auto
}

.journey-hero h1{
  margin:24px 0 55px;
  font-size:clamp(5rem,13vw,13rem);
  line-height:.78;
  letter-spacing:-.085em
}

.journey-hero-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:50px;
  max-width:900px
}

.journey-hero-bottom p{
  margin:0;
  font-size:clamp(1.2rem,2.2vw,2.2rem);
  line-height:1;
  letter-spacing:-.03em
}

.journey-hero-bottom p:last-child{
  color:var(--orange)
}


.journey-origin{
  padding:10vw 7vw 0
}

.journey-label{
  color:var(--muted)
}

.origin-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8vw;
  margin-top:5vw;
  align-items:end
}

.origin-grid .year{
  font-size:clamp(7rem,17vw,17rem);
  line-height:.72;
  letter-spacing:-.09em
}

.origin-grid h2{
  margin:35px 0 0;
  font-size:clamp(3.5rem,8vw,8rem);
  line-height:.82;
  letter-spacing:-.07em
}

.origin-copy{
  max-width:560px;
  padding-bottom:10px
}

.place-name{
  font-family:"DM Mono",monospace;
  color:var(--orange);
  font-size:.7rem;
  letter-spacing:.1em;
  margin-bottom:30px
}

.origin-copy p{
  font-size:clamp(1.15rem,1.9vw,1.7rem);
  line-height:1.35;
  margin:0 0 15px
}

.origin-copy p:last-child{
  color:var(--orange)
}


.journey-photo,
.greece-image,
.bonaire-image,
.xpro-image{
  position:relative;
  overflow:hidden;
  background:#0b2230 center/cover no-repeat
}

.journey-photo{
  height:min(55vw,720px);
  margin-top:8vw;
  background-image:url("../img/journey-heerenveen.jpg")
}

.photo-note{
  position:absolute;
  top:24px;
  left:24px;
  z-index:2;
  color:var(--orange);
  font-size:.62rem;
  letter-spacing:.08em
}

.photo-placeholder{
  position:absolute;
  left:24px;
  bottom:24px;
  color:rgba(242,238,229,.16);
  font-size:clamp(2.5rem,7vw,8rem);
  line-height:.78;
  letter-spacing:-.08em
}


.journey-club{
  padding:12vw 7vw
}

.club-top{
  display:flex;
  justify-content:space-between;
  gap:30px;
  border-top:1px solid var(--line);
  padding-top:16px
}

.club-status{
  color:var(--muted);
  text-align:right
}

.club-statement{
  display:grid;
  grid-template-columns:7fr 4fr;
  gap:8vw;
  margin-top:7vw;
  align-items:end
}

.club-statement h2{
  margin:0;
  font-size:clamp(5rem,12vw,12rem);
  line-height:.74;
  letter-spacing:-.09em
}

.club-statement p{
  max-width:500px;
  font-size:clamp(1.15rem,2vw,1.7rem);
  line-height:1.35;
  margin:0 0 18px
}

.club-statement p:last-child{
  color:var(--orange)
}

.club-record{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:9vw;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}

.record-item{
  min-height:170px;
  padding:22px 18px 25px 0;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  justify-content:space-between
}

.record-item:not(:first-child){
  padding-left:22px
}

.record-item:last-child{
  border-right:0
}

.record-item .mono{
  color:var(--muted);
  font-size:.6rem
}

.record-item strong{
  font-size:clamp(1.5rem,2.6vw,2.6rem);
  letter-spacing:-.05em
}


/* =========================================================
   GREECE
   ========================================================= */

.journey-greece{
  padding:0;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  background:var(--cream);
  color:var(--navy)
}

.greece-image{
  min-height:62vw;
  background-image:url("/img/journey-dive2gether.jpg");
  background-position:center;
  background-size:cover;
}

/* Subtle FURTHER color grade */
.greece-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(8,22,31,.18);
  pointer-events:none;
  z-index:1;
}

.greece-copy{
  padding:8vw 7vw;
  display:flex;
  flex-direction:column;
  justify-content:center
}

.greece-location{
  margin:4vw 0 2vw;
  display:flex;
  flex-direction:column;
  gap:8px
}

.greece-location .mono{
  color:#59676d;
  font-size:.62rem
}

.greece-location strong{
  font-size:1.4rem;
  letter-spacing:-.03em
}

.greece-copy h2{
  margin:0 0 3vw;
  font-size:clamp(4rem,8vw,8rem);
  line-height:.76;
  letter-spacing:-.08em
}

.greece-copy p{
  max-width:520px;
  font-size:clamp(1.15rem,1.8vw,1.55rem);
  line-height:1.4;
  margin:0 0 15px
}

.absurd-record{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:rgba(7,21,34,.2);
  margin-top:5vw
}

.absurd-record div{
  background:var(--cream);
  padding:20px 18px 24px;
  min-height:130px;
  display:flex;
  flex-direction:column;
  justify-content:space-between
}

.absurd-record .mono{
  color:#59676d;
  font-size:.58rem
}

.absurd-record strong{
  font-size:1.35rem
}


.journey-2016{
  padding:12vw 7vw
}

.job-grid{
  display:grid;
  grid-template-columns:7fr 4fr;
  gap:10vw;
  margin-top:6vw
}

.job-copy h2{
  margin:0 0 5vw;
  font-size:clamp(4.5rem,10vw,10rem);
  line-height:.76;
  letter-spacing:-.085em
}

.job-copy p{
  max-width:620px;
  font-size:clamp(1.2rem,2.1vw,1.9rem);
  line-height:1.25;
  margin:0 0 13px
}

.job-copy p:last-child{
  color:var(--orange)
}

.job-aside{
  display:flex;
  flex-direction:column;
  justify-content:flex-end
}

.job-file{
  border-top:1px solid var(--line);
  padding:20px 0 24px;
  display:flex;
  flex-direction:column;
  gap:25px
}

.job-file .mono{
  color:var(--muted);
  font-size:.6rem
}

.job-file strong{
  font-size:clamp(1.5rem,3vw,3rem);
  line-height:.9;
  letter-spacing:-.05em
}


.journey-bonaire{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:55vw;
  background:#0d2435
}

.bonaire-image{
  min-height:55vw;
  background-image:url("https://images.unsplash.com/photo-1655753257542-afb503e1904f?auto=format&fit=crop&w=1000&q=82")
}

.bonaire-copy{
  padding:8vw 7vw;
  display:flex;
  flex-direction:column;
  justify-content:center
}

.bonaire-copy h2{
  font-size:clamp(5rem,12vw,12rem);
  line-height:.72;
  letter-spacing:-.09em;
  margin:2vw 0 4vw
}

.bonaire-copy p{
  max-width:560px;
  font-size:clamp(1.2rem,2.1vw,1.8rem);
  line-height:1.25;
  margin:0 0 15px
}

.between{
  margin-top:7vw;
  padding-top:18px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:20px
}

.between .mono{
  font-size:.58rem
}


.journey-xpro{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  background:var(--navy2)
}

.xpro-copy{
  padding:9vw 7vw;
  display:flex;
  flex-direction:column;
  justify-content:center
}

.xpro-copy h2{
  margin:2vw 0 4vw;
  font-size:clamp(3.5rem,8vw,8rem);
  line-height:.76;
  letter-spacing:-.08em
}

.xpro-copy p{
  max-width:500px;
  font-size:clamp(1.2rem,2vw,1.7rem);
  line-height:1.3;
  margin:0 0 14px
}

.xpro-note{
  border-top:1px solid var(--line);
  margin-top:6vw;
  padding-top:18px;
  display:flex;
  flex-direction:column;
  gap:20px
}

.xpro-note .mono{
  font-size:.6rem;
  color:var(--muted)
}

.xpro-note strong{
  font-size:1.5rem;
  letter-spacing:-.04em
}

.xpro-image{
  min-height:55vw;
  background-image:url("../img/journey-xprodiver.jpg")
}


.journey-now{
  padding:12vw 7vw
}

.now-head{
  display:flex;
  justify-content:space-between;
  gap:30px;
  border-top:1px solid var(--line);
  padding-top:16px
}

.now-head .mono:last-child{
  color:var(--muted)
}

.journey-now>h2{
  margin:6vw 0 8vw;
  font-size:clamp(6rem,16vw,16rem);
  line-height:.7;
  letter-spacing:-.095em
}

.now-grid{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:8vw;
  align-items:start
}

.now-intro p{
  max-width:540px;
  font-size:clamp(1.25rem,2.1vw,1.9rem);
  line-height:1.25;
  margin:0 0 18px
}

.now-intro p:last-child{
  color:var(--orange)
}

.milestones{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line)
}

.milestone{
  min-height:190px;
  background:var(--navy);
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between
}

.milestone .mono{
  color:var(--orange);
  font-size:.65rem
}

.milestone strong{
  font-size:clamp(1.4rem,2.5vw,2.5rem);
  line-height:.88;
  letter-spacing:-.05em
}


.journey-closing{
  min-height:70vh;
  padding:12vw 7vw 8vw;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:
    linear-gradient(0deg,rgba(5,14,22,.96),rgba(5,14,22,.15)),
    url("../img/journey-closing.jpg") center/cover no-repeat
}

.journey-closing h2{
  margin:8vw 0;
  font-size:clamp(4.5rem,11vw,11rem);
  line-height:.74;
  letter-spacing:-.09em
}

.closing-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px
}

.closing-number{
  display:flex;
  flex-direction:column
}

.closing-number .number{
  font-size:clamp(5rem,13vw,13rem);
  line-height:.7;
  letter-spacing:-.09em
}

.closing-number .mono{
  margin-top:25px
}

.closing-bottom p{
  margin:0;
  color:var(--orange);
  font-size:clamp(2rem,4vw,4rem);
  letter-spacing:-.05em
}


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

@media(max-width:800px){

  .journey-hero{
    min-height:90vh;
    padding:130px 6vw 12vw
  }

  .journey-hero h1{
    font-size:20vw
  }

  .journey-hero-bottom{
    display:block
  }

  .journey-hero-bottom p{
    margin-top:18px
  }

  .origin-grid,
  .job-grid,
  .journey-greece,
  .journey-bonaire,
  .journey-xpro,
  .now-grid,
  .club-statement{
    grid-template-columns:1fr
  }

  .origin-grid .year{
    font-size:30vw
  }

  .origin-copy{
    margin-top:5vw
  }

  .journey-photo{
    height:75vw
  }

  .club-statement h2{
    font-size:22vw;
    margin-bottom:8vw
  }

  .club-record{
    grid-template-columns:1fr 1fr
  }

  .record-item:nth-child(2){
    border-right:0
  }

  .record-item:nth-child(3),
  .record-item:nth-child(4){
    border-top:1px solid var(--line)
  }

  .journey-greece{
    display:flex;
    flex-direction:column
  }

  .greece-image{
    min-height:75vw
  }

  .greece-copy{
    padding:12vw 7vw
  }

  .greece-copy h2{
    font-size:20vw
  }

  .bonaire-image,
  .xpro-image{
    min-height:70vw
  }

  .journey-bonaire{
    display:flex;
    flex-direction:column
  }

  .journey-xpro{
    display:flex;
    flex-direction:column-reverse
  }

  .journey-now>h2{
    font-size:24vw
  }

  .journey-closing{
    min-height:75vh
  }

  .journey-closing h2{
    font-size:18vw
  }

  .closing-bottom{
    display:block
  }

  .closing-bottom p{
    margin-top:55px
  }
}


@media(max-width:500px){

  .club-record,
  .milestones,
  .absurd-record{
    grid-template-columns:1fr
  }

  .record-item,
  .record-item:not(:first-child){
    border-right:0;
    border-bottom:1px solid var(--line);
    padding-left:0
  }

  .record-item:last-child{
    border-bottom:0
  }

  .milestone{
    min-height:150px
  }

  .between{
    display:block
  }

  .between .mono{
    display:block;
    margin-bottom:10px
  }
}