/* ============================================================
   PHURRBA ABOUT PAGE
   Inspired by editorial / cinematic biography layout
   ============================================================ */


:root{

  --about-navy:#081827;

  --about-dark:#292929;

  --about-gold:#d6b56e;

  --about-gold-light:#e5c985;

  --about-white:#f7f7f5;

  --about-grey:#666b73;

  --about-light-grey:#d7d9dc;

}



/* ============================================================
   BASE
   ============================================================ */

.about-page{

  margin:0;

  background:#fff;

  color:#292929;

  font-family:var(--sans);

}


.about-page img{

  display:block;

  max-width:100%;

}


.about-page main{

  overflow:hidden;

}



/* ============================================================
   HEADER
   ============================================================ */

.about-header{

  background:transparent;

  border:0;

}


.about-header.scrolled{

  background:rgba(8,24,39,.96);

  backdrop-filter:blur(14px);

}



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

.about-hero{

  position:relative;

  width:100%;

  height:780px;

  overflow:hidden;

  background:var(--about-dark);

}



/* DARK HALF */

.about-hero__dark{

  position:absolute;

  inset:0 auto 0 0;

  width:29%;

  background:#303030;

}



/* GOLD HALF */

.about-hero__gold{

  position:absolute;

  top:0;

  right:0;

  bottom:0;

  width:71%;

  background:var(--about-gold);

}



/* ============================================================
   HUGE NAME
   ============================================================ */

.about-hero__name{

  position:absolute;

  top:145px;

  left:5.7%;

  right:3%;

  z-index:2;

  overflow:hidden;

  white-space:nowrap;

  pointer-events:none;

}


.about-hero__name span{

  display:block;

  font-family:var(--sans);

  font-size:clamp(110px,12vw,205px);

  font-weight:800;

  line-height:.85;

  letter-spacing:-10px;

  color:rgba(255,255,255,.42);

}



/* ============================================================
   HERO PERSON
   ============================================================ */

.about-hero__person{

  position:absolute;

  z-index:4;

  bottom:0;

  left:7%;

  width:min(570px,39vw);

  height:710px;

  overflow:hidden;

  display:flex;

  align-items:flex-end;

  justify-content:center;

}


.about-hero__person img{

  width:100%;

  height:100%;

  object-fit:contain;

  object-position:center bottom;

  filter:grayscale(1);

}



/* ============================================================
   HERO COPY
   ============================================================ */

.about-hero__copy{

  position:absolute;

  z-index:6;

  left:57%;

  top:415px;

  width:440px;

  color:white;

}


.about-hero__copy h1{

  margin:0;

  font-family:var(--sans);

  font-size:35px;

  font-style:italic;

  font-weight:800;

  line-height:1.25;

  text-transform:uppercase;

}


.about-hero__copy p{

  width:390px;

  margin:25px 0 0;

  font-size:18px;

  line-height:1.6;

  color:rgba(255,255,255,.88);

}


.about-hero__copy a{

  display:flex;

  align-items:center;

  gap:20px;

  width:max-content;

  margin-top:30px;

  color:#fff;

  text-decoration:none;

  font-size:12px;

  font-weight:700;

}


.about-hero__copy a i{

  display:block;

  width:35px;

  height:1px;

  background:#fff;

}



/* ============================================================
   SOCIAL BAR
   ============================================================ */

.about-social-bar{

  position:absolute;

  z-index:10;

  bottom:0;

  left:43%;

  height:55px;

  display:flex;

  align-items:stretch;

}


.about-social-bar a{

  min-width:55px;

  padding:0 18px;

  display:flex;

  align-items:center;

  justify-content:center;

  background:var(--about-navy);

  color:#fff;

  text-decoration:none;

  font-size:9px;

  font-weight:700;

  letter-spacing:.12em;

}


.about-social-bar a:nth-child(2){

  background:var(--about-gold);

  color:var(--about-navy);

}


.about-social-bar a:nth-child(3){

  background:#fff;

  color:var(--about-navy);

}



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

.about-story{

  position:relative;

  min-height:930px;

  background:#fff;

  padding:90px 8% 100px;

  overflow:hidden;

}


.about-story__inner{

  width:min(1250px,100%);

  margin:0 auto;

  display:grid;

  grid-template-columns:
    .8fr
    1.35fr;

  gap:125px;

  align-items:start;

}



/* ============================================================
   VERTICAL LABEL
   ============================================================ */

.about-story__vertical{

  position:absolute;

  left:34px;

  top:150px;

  display:flex;

  align-items:center;

  gap:20px;

  writing-mode:vertical-rl;

  color:#313131;

  font-size:10px;

  font-weight:700;

  letter-spacing:.24em;

}


.about-story__vertical::before{

  content:"";

  width:1px;

  height:52px;

  background:var(--about-gold);

}



/* ============================================================
   SECTION LABEL
   ============================================================ */

.about-section-label{

  display:flex;

  align-items:center;

  gap:17px;

}


.about-section-label > span{

  width:30px;

  height:2px;

  background:var(--about-gold);

}


.about-section-label h2{

  margin:0;

  font-family:var(--sans);

  font-size:30px;

  font-weight:800;

  letter-spacing:.17em;

  color:#5b5f65;

}



/* ============================================================
   ABOUT COPY
   ============================================================ */

.about-story__copy{

  padding-top:20px;

}


.about-story__text{

  width:290px;

  margin:38px 0 0 48px;

}


.about-story__text p{

  margin:0;

  font-size:14px;

  line-height:1.65;

  color:#5e6166;

}


.about-story__text p + p{

  margin-top:20px;

}



/* ============================================================
   ABOUT VISUAL
   ============================================================ */

.about-story__visual{

  position:relative;

  min-height:690px;

}


.about-story__photo{

  position:absolute;

  z-index:3;

  top:-60px;

  left:35px;

  width:440px;

  height:650px;

  background:#f1f1f1;

  overflow:hidden;

}


.about-story__photo img{

  width:100%;

  height:100%;

  object-fit:contain;

  object-position:center bottom;

  filter:grayscale(1);

}



/* ============================================================
   DOTS
   ============================================================ */

.about-story__dots{

  position:absolute;

  z-index:1;

  top:-42px;

  left:600px;

  width:260px;

  display:grid;

  grid-template-columns:repeat(4,1fr);

  row-gap:22px;

  color:#d5d6d7;

  font-size:18px;

  text-align:center;

}



/* ============================================================
   SIGNATURE
   ============================================================ */

.about-signature{

  position:absolute;

  z-index:5;

  left:-100px;

  top:355px;

  width:470px;

  font-family:"Homemade Apple",cursive;

  font-size:62px;

  line-height:1;

  color:var(--about-gold);

  transform:rotate(-8deg);

}



/* ============================================================
   CAREER
   ============================================================ */

.about-career{

  position:relative;

  min-height:900px;

  padding:25px 7% 0;

  background:#fff;

  overflow:hidden;

}


.about-career__inner{

  width:min(1310px,100%);

  min-height:900px;

  margin:0 auto;

  display:grid;

  grid-template-columns:
    1.15fr
    .85fr;

  gap:120px;

  align-items:end;

}



/* ============================================================
   CAREER PERSON
   ============================================================ */

.career-person{

  position:relative;

  align-self:end;

  width:650px;

  height:770px;

  margin-left:-50px;

}


.career-person img{

  width:100%;

  height:100%;

  object-fit:contain;

  object-position:center bottom;

  filter:grayscale(1);

}



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

.career-content{

  align-self:center;

  padding-top:60px;

}


.career-content blockquote{

  position:relative;

  margin:0 0 70px;

  font-family:var(--sans);

  font-size:44px;

  font-weight:800;

  line-height:1.25;

  color:#646973;

}


.career-content blockquote > span{

  position:absolute;

  top:-23px;

  left:-32px;

  font-family:Georgia,serif;

  font-size:55px;

  line-height:1;

  color:#646973;

}


.career-copy{

  width:305px;

  margin-left:55px;

}


.career-copy .about-section-label{

  margin-bottom:32px;

}


.career-copy .about-section-label h2{

  font-size:22px;

}


.career-copy p{

  margin:0;

  font-size:14px;

  line-height:1.65;

  color:#5e6166;

}


.career-copy p + p{

  margin-top:18px;

}



/* ============================================================
   CAREER DATE
   ============================================================ */

.career-date{

  position:absolute;

  right:30px;

  bottom:140px;

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:10px;

  font-size:9px;

  font-weight:700;

  letter-spacing:.2em;

  writing-mode:vertical-rl;

}


.career-date i{

  width:1px;

  height:50px;

  background:var(--about-gold);

}



/* ============================================================
   CAREER DECORATIVE DOTS
   ============================================================ */

.career-dots{

  position:absolute;

  color:#dadbdd;

  font-size:18px;

  line-height:2;

  letter-spacing:8px;

}


.career-dots--left{

  left:14px;

  top:60px;

}


.career-dots--right{

  right:25px;

  top:75px;

}



/* ============================================================
   FILMOGRAPHY
   ============================================================ */

.about-film{

  position:relative;

  width:100%;

  padding:45px 0;

  background:var(--about-gold);

  overflow:hidden;

}


.about-film__inner{

  width:100%;

  min-height:510px;

  display:grid;

  grid-template-columns:
    40%
    60%;

}



/* ============================================================
   FILM LEFT
   ============================================================ */

.about-film__content{

  position:relative;

  display:grid;

  grid-template-columns:
    80px
    1fr;

  padding:55px 30px 45px 35px;

  color:#fff;

}


.about-film__side{

  display:flex;

  flex-direction:column;

  align-items:center;

  padding-top:10px;

}


.about-film__side span{

  width:1px;

  height:48px;

  background:#fff;

}


.about-film__side p{

  margin-top:20px;

  writing-mode:vertical-rl;

  transform:rotate(180deg);

  font-size:9px;

  font-weight:700;

  letter-spacing:.2em;

  line-height:1.5;

}


.about-film__copy{

  max-width:430px;

}


.about-film__copy h2{

  margin:0;

  font-family:var(--sans);

  font-size:24px;

  font-weight:800;

  letter-spacing:.18em;

}


.film-project{

  display:flex;

  align-items:center;

  gap:17px;

  margin-top:50px;

}


.film-project__icon{

  width:28px;

  font-size:25px;

}


.film-project h3{

  margin:0;

  font-size:16px;

  font-weight:700;

}


.film-project span{

  display:block;

  margin-top:3px;

  font-size:10px;

}


.film-description{

  width:330px;

  margin-top:28px;

  font-size:11px;

  line-height:1.7;

  color:rgba(255,255,255,.9);

}


.film-controls{

  margin-top:70px;

  display:flex;

  align-items:center;

  gap:12px;

  font-size:9px;

  font-weight:600;

}


.film-controls > i{

  display:block;

  width:45px;

  height:1px;

  background:rgba(255,255,255,.7);

}


.film-controls button{

  margin-left:18px;

  padding:0;

  border:0;

  background:transparent;

  color:#fff;

  font:inherit;

  cursor:pointer;

}


.film-controls button + span{

  margin-left:-8px;

}



/* ============================================================
   FILM VIDEO
   ============================================================ */

.about-film__video{

  position:relative;

  height:510px;

  overflow:hidden;

}


.about-film__video img{

  width:100%;

  height:100%;

  object-fit:cover;

  filter:grayscale(1);

}


.about-film__video::after{

  content:"";

  position:absolute;

  inset:0;

  background:rgba(0,0,0,.15);

}



/* ============================================================
   PLAY BUTTON
   ============================================================ */

.film-play{

  position:absolute;

  z-index:5;

  top:50%;

  left:50%;

  width:82px;

  height:82px;

  transform:translate(-50%,-50%);

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:50%;

  background:rgba(8,24,39,.86);

  color:#fff;

  text-decoration:none;

  box-shadow:
    0 0 0 14px rgba(255,255,255,.18);

  transition:
    transform .3s ease,
    background .3s ease;

}


.film-play:hover{

  transform:
    translate(-50%,-50%)
    scale(1.08);

  background:#081827;

}


.film-play span{

  margin-left:4px;

  font-size:20px;

}



/* ============================================================
   CONTACT STRIP
   ============================================================ */

.about-contact-strip{

  padding:30px 0;

  background:#fff;

  border-bottom:1px solid #eee;

}


.about-contact-strip__inner{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:40px;

}


.about-contact-strip__inner > div{

  display:flex;

  align-items:center;

  gap:7px;

  font-size:10px;

}


.about-contact-strip__inner > div span{

  font-weight:700;

}


.about-contact-strip__inner > div a{

  color:var(--about-gold);

  font-weight:600;

  text-decoration:none;

}


.about-contact-strip nav{

  display:flex;

  gap:55px;

}


.about-contact-strip nav a{

  color:#313131;

  text-decoration:none;

  font-size:10px;

  font-weight:600;

}



/* ============================================================
   FOOTER
   ============================================================ */

.about-footer{

  padding:23px 0;

  background:#fafafa;

}


.about-footer__inner{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;

}


.about-footer__inner > span{

  font-size:9px;

  color:#aaa;

}


.about-footer__social{

  display:flex;

  gap:22px;

}


.about-footer__social a{

  color:#333;

  text-decoration:none;

  font-size:9px;

  font-weight:600;

}



/* ============================================================
   LARGE DESKTOP
   ============================================================ */

@media(min-width:1600px){


  .about-hero{

    height:860px;

  }


  .about-hero__person{

    left:8%;

    width:590px;

    height:785px;

  }


  .about-hero__copy{

    top:465px;

    left:58%;

  }


  .about-story{

    min-height:1000px;

    padding-top:110px;

  }


  .about-story__inner{

    max-width:1380px;

  }


  .about-story__photo{

    width:490px;

    height:710px;

  }


  .about-career__inner{

    max-width:1400px;

  }


  .career-person{

    width:700px;

    height:820px;

  }


}



/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:1100px){


  .about-hero{

    height:720px;

  }


  .about-hero__name{

    left:4%;

    top:150px;

  }


  .about-hero__name span{

    letter-spacing:-5px;

  }


  .about-hero__person{

    left:4%;

    width:46vw;

    height:630px;

  }


  .about-hero__copy{

    left:55%;

    top:380px;

    width:38%;

  }


  .about-hero__copy p{

    width:auto;

  }


  .about-story{

    padding-inline:7%;

  }


  .about-story__inner{

    grid-template-columns:
      .8fr
      1fr;

    gap:50px;

  }


  .about-story__photo{

    width:370px;

    height:570px;

  }


  .about-signature{

    left:-40px;

    font-size:50px;

  }


  .about-career__inner{

    gap:40px;

  }


  .career-person{

    width:500px;

    height:680px;

    margin-left:-20px;

  }


  .career-content blockquote{

    font-size:27px;

  }


  .about-film__inner{

    grid-template-columns:
      45%
      55%;

  }


}



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

@media(max-width:700px){


  /* HERO */

  .about-hero{

    height:790px;

  }


  .about-hero__dark{

    width:100%;

    height:42%;

  }


  .about-hero__gold{

    top:42%;

    width:100%;

    height:58%;

  }


  .about-hero__name{

    top:130px;

    left:20px;

    width:calc(100% - 40px);

  }


  .about-hero__name span{

    font-size:80px;

    letter-spacing:-5px;

  }


  .about-hero__person{

    left:50%;

    bottom:0;

    width:330px;

    height:610px;

    transform:translateX(-50%);

  }


  .about-hero__copy{

    z-index:9;

    left:25px;

    top:515px;

    width:calc(100% - 50px);

  }


  .about-hero__copy h1{

    font-size:20px;

  }


  .about-hero__copy p{

    width:100%;

    max-width:330px;

    margin-top:15px;

    font-size:11px;

  }


  .about-hero__copy a{

    margin-top:17px;

  }


  .about-side-scroll,
  .about-prevnext,
  .about-social-bar{

    display:none;

  }



  /* ABOUT */

  .about-story{

    min-height:0;

    padding:
      65px
      24px
      80px;

  }


  .about-story__vertical{

    display:none;

  }


  .about-story__inner{

    display:flex;

    flex-direction:column;

    gap:70px;

  }


  .about-section-label h2{

    font-size:17px;

  }


  .about-story__text{

    width:auto;

    margin:
      30px
      0
      0
      47px;

  }


  .about-story__text p{

    font-size:12px;

  }


  .about-story__visual{

    min-height:560px;

  }


  .about-story__photo{

    position:relative;

    top:auto;

    left:auto;

    width:90%;

    height:520px;

    margin-left:auto;

  }


  .about-story__dots{

    top:-35px;

    right:-25px;

    left:auto;

    width:170px;

  }


  .about-signature{

    top:385px;

    left:-10px;

    width:auto;

    font-size:43px;

  }



  /* CAREER */

  .about-career{

    min-height:0;

    padding:
      50px
      24px
      0;

  }


  .about-career__inner{

    min-height:0;

    display:flex;

    flex-direction:column-reverse;

    gap:40px;

  }


  .career-content{

    padding:0;

  }


  .career-content blockquote{

    margin:
      0
      0
      60px
      30px;

    font-size:25px;

  }


  .career-copy{

    width:auto;

    margin-left:30px;

  }


  .career-person{

    width:100%;

    height:570px;

    margin:0;

  }


  .career-date,
  .career-dots{

    display:none;

  }



  /* FILM */

  .about-film{

    padding:0;

  }


  .about-film__inner{

    display:flex;

    flex-direction:column;

  }


  .about-film__content{

    grid-template-columns:
      45px
      1fr;

    padding:
      50px
      22px
      55px;

  }


  .about-film__copy h2{

    font-size:20px;

  }


  .film-description{

    width:auto;

    max-width:300px;

  }


  .film-controls{

    margin-top:45px;

  }


  .about-film__video{

    width:100%;

    height:350px;

  }



  /* CONTACT */

  .about-contact-strip__inner{

    flex-direction:column;

    align-items:flex-start;

  }


  .about-contact-strip nav{

    flex-wrap:wrap;

    gap:20px 30px;

  }


  .about-footer__inner{

    flex-direction:column;

    align-items:flex-start;

  }


}



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

@media(max-width:420px){


  .about-hero__name span{

    font-size:68px;

  }


  .about-hero__person{

    width:290px;

  }


  .about-story__photo{

    width:100%;

  }


  .career-person{

    height:510px;

  }


}

/* ============================================================
   ABOUT / CAREER SPACING
   ============================================================ */

.about-story{
  min-height: auto;
  padding-top: 90px;
  padding-bottom: 0;
}

.about-story__visual{
  min-height: 540px;
}

.about-career{
  min-height: auto;
  padding-top: 0;
  margin-top: 100px;
}

.about-career__inner{
  min-height: 760px;
}

/* REMOVE GREY STRIP ABOVE ABOUT IMAGE */

.about-story__photo{
  background: transparent;
}

/* ============================================================
   SOCIAL ICON BAR
   ============================================================ */

.about-social-bar{
  display:flex;
  align-items:stretch;
}

.about-social-bar .follow-label{
  min-width:250px;
  padding:0 30px;
}

.about-social-bar .social-icon{
  width:92px;
  min-width:92px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.about-social-bar .social-icon svg{
  width:24px;
  height:24px;
  fill:currentColor;
}

.about-social-bar .social-icon:nth-child(2){
  background:var(--about-gold);
  color:#081827;
}

.about-social-bar .social-icon:nth-child(3){
  background:#fff;
  color:#081827;
}

.about-social-bar .social-icon:nth-child(4){
  background:#081827;
  color:#fff;
}

.about-social-bar .social-icon{
  transition:opacity .25s ease;
}

.about-social-bar .social-icon:hover{
  opacity:.78;
}