:root{
  --black:#000;
  --white:#fff;
  --red:#e00000;
  --green:#00cf6a;
  --purple:#8b4dff;
  --yellow:#ffe75a;
  --orange:#ff7a00;
  --gray:#8f8f8f;

  --font-head:"Archivo Black", Impact, Arial Black, sans-serif;
  --font-body:Georgia, "Times New Roman", serif;
}

*{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
  background:#000;
  color:#fff;
}

body{
  font-family:var(--font-body);
  overflow-x:hidden;
}

a{
  color:#fff;
  text-decoration:none;
}

a:hover{ text-decoration:underline; }

.screen{
  width:1365px;
  height:768px;
  margin:0 auto;
  background:#000;
  position:relative;
  overflow:hidden;
}

/* SCREEN 1 */

.screen-one{
  display:grid;
  grid-template-columns:682px 683px;
  grid-template-rows:705px 63px;
}

.bio-side{
  padding:50px 52px 0 100px;
}

.contact{
  text-align:right;
  font-size:20px;
  line-height:1.35;
  font-weight:700;
  margin-bottom:28px;
}

.contact a{ text-decoration:underline; }

.photo-side{
  padding-top:54px;
  padding-left:0;
}

.photo-side h1{
  margin:0 0 19px;
  font-family:var(--font-head);
  font-size:39px;
  line-height:1;
  letter-spacing:0.04em;
  color:#fff;
  text-shadow:2px 0 #64e6ff, -2px 0 #ff52c8;
}

.photo-side img{
  width:550px;
  height:532px;
  object-fit:cover;
  object-position:center top;
  filter:grayscale(100%);
  display:block;
}

.work-banner{
  grid-column:1 / 3;

  color:#fff;

  font-family:var(--font-head);
  font-size:56px;
  line-height:1;

  padding-left:80px;
  padding-top:20px;

  text-decoration:underline;
  text-underline-offset:7px;

  background:none;
}

/* TIMELINE */

.timeline{
  position:relative;
  padding-left:31px;
}

.timeline::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:20px;
  width:4px;
  background:#fff;
  border-radius:20px;
}

.timeline p,
.timeline a{
  display:block;
  position:relative;
  margin:0 0 31px;
  font-weight:700;
  color:#fff;
}

.timeline p::before,
.timeline a::before{
  content:"";
  position:absolute;
  left:-37px;
  top:3px;
  width:15px;
  height:15px;
  border:4px solid #fff;
  background:#000;
  border-radius:50%;
}

.bio-timeline p{
  font-size:15px;
  line-height:1.42;
  max-width:510px;
  margin-bottom:25px;
}

/* WORK TYPOGRAPHY */

.work-block h2,
.prism-label{
  margin:0 0 12px;
  font-family:var(--font-head);
  font-size:35px;
  line-height:1;
  letter-spacing:0.035em;
}

.work-timeline{
  padding-left:18px;
}

.work-timeline::before{
  left:-3px;
  top:8px;
  bottom:30px;
}

.work-timeline a{
  font-family:var(--font-head);
  font-size:28px;
  line-height:1.36;
  letter-spacing:0.005em;
  margin-bottom:78px;
  max-width:1120px;
}

.work-timeline a::before{
  left:-29px;
  top:2px;
}

/* SCREEN 2 */

.screen-two{
  padding:76px 0 0 81px;
}

.screen-two .work-block{
  width:1110px;
}

.intercept{
  margin-top:74px;
}

.prism-label{
  position:absolute;
  left:81px;
  bottom:0;
}

/* SCREEN 3 */

.screen-three{
  padding:20px 0 0 81px;
}

.prism-block,
.documented-block{
  width:1120px;
}

.documented-block{
  margin-top:53px;
}

.documented-block h2{
  margin-left:4px;
  margin-bottom:15px;
}

.screen-three .work-timeline a{
  margin-bottom:88px;
}

/* SCREEN 4 */

.screen-four{
  padding:116px 0 0 97px;
}

.reuters-block{
  width:1120px;
}

.reuters-block h2{
  margin-bottom:34px;
}

.reuters-block .work-timeline a{
  margin-bottom:84px;
}

/* COLORS */

.green{ color:var(--green); }
.purple{ color:var(--purple); }
.yellow{ color:var(--yellow); }
.orange{ color:var(--orange); }
.gray{ color:var(--gray); }

/* RESPONSIVE */

@media(max-width:1365px){
  .screen{
    width:100%;
  }
}

@media(max-width:900px){
  .screen{
    width:100%;
    height:auto;
    min-height:100vh;
    overflow:visible;
  }

  .screen-one{
    display:flex;
    flex-direction:column;
  }

  .bio-side,
  .photo-side,
  .screen-two,
  .screen-three,
  .screen-four{
    padding:36px 24px;
  }

  .contact{
    text-align:left;
  }

  .photo-side img{
    width:100%;
    height:auto;
  }

  .photo-side h1{
    font-size:32px;
  }

  .work-banner{
  position:relative;

  width:100vw;

  left:50%;
  margin-left:-50vw;

  height:63px;

  background:#e00000;

  color:#fff;

  font-family:var(--font-head);
  font-size:56px;
  line-height:63px;

  padding-left:80px;

  text-decoration:underline;
  text-underline-offset:7px;
}

  .work-block,
  .screen-two .work-block,
  .prism-block,
  .documented-block,
  .reuters-block{
    width:100%;
  }

  .work-timeline a{
    font-size:24px;
    margin-bottom:40px;
  }

  .prism-label{
    position:static;
    margin-top:40px;
  }
}