:root{
  --white:#ffffff;
  --black:#101010;
  --red:#ed1c24;
  --line:rgba(16,16,16,.22);
  --soft:#f3f3f1;
}

*{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  min-width:320px;
  overflow-x:hidden;
  background:var(--white);
  color:var(--black);
  font-family:'Manrope',Arial,sans-serif;
  font-weight:600;
}

a{color:inherit}

::selection{
  background:var(--red);
  color:var(--white);
}

.site-header{
  min-height:86px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  padding:18px clamp(22px,4vw,64px);
  border-bottom:1px solid var(--black);
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.12em;
}

.brand{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

.brand img{
  display:block;
  width:30px;
  height:30px;
  object-fit:contain;
}

.edition{justify-self:center}

.jump-link{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease,color .2s ease;
}

.jump-link:hover{color:var(--red);border-color:var(--red)}

.hero{
  min-height:calc(100svh - 86px);
  padding:clamp(42px,6vw,88px) clamp(22px,4vw,64px) 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  border-bottom:1px solid var(--black);
}

.hello{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.14em;
}

.hello span{
  display:block;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--red);
  animation:pulse 1.8s ease-in-out infinite;
}

@keyframes pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(.7);opacity:.45}
}

.hero h1{
  align-self:center;
  width:100%;
  max-width:1500px;
  font-size:clamp(48px,9.1vw,148px);
  line-height:.82;
  letter-spacing:-.075em;
  font-weight:800;
  text-align:center;
  text-transform:uppercase;
  padding:5vh 0 2.25vh;
}

.hero h1 span{display:block}

.hero h1 .name{
  font-size:.49em;
  line-height:1.15;
  letter-spacing:-.055em;
  text-transform:none;
  font-weight:600;
}

.hero h1 .role{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:.14em;
  white-space:nowrap;
}

.hero h1 em{
  color:var(--red);
  font-family:'Instrument Serif',Georgia,serif;
  font-weight:400;
  font-style:italic;
  letter-spacing:-.04em;
  text-transform:none;
}

.hero h1 b{
  font-size:.46em;
  letter-spacing:-.02em;
}

.hero h1 .producer{
  margin-top:.08em;
  font-size:.72em;
  line-height:.9;
  text-align:center;
  letter-spacing:-.065em;
}

.tagline{
  width:100%;
  max-width:none;
  font-size:clamp(11px,2.65vw,42px);
  line-height:1.04;
  letter-spacing:-.04em;
  font-weight:500;
  text-align:center;
  white-space:nowrap;
}

.tagline em{
  color:var(--red);
  font-family:'Instrument Serif',Georgia,serif;
  font-size:1.16em;
  font-weight:400;
}

.hero-scroll{
  align-self:flex-end;
  width:124px;
  height:124px;
  margin-top:auto;
  border:1px solid var(--black);
  border-radius:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  text-decoration:none;
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:.1em;
  transition:background .25s ease,color .25s ease,transform .25s ease;
}

.hero-scroll span:last-child{font-size:20px}

.hero-scroll:hover{
  color:var(--white);
  background:var(--red);
  border-color:var(--red);
  transform:rotate(-8deg);
}

.work{
  padding:70px clamp(22px,4vw,64px) clamp(70px,9vw,130px);
}

.section-label{
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding-bottom:18px;
  border-bottom:1px solid var(--black);
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.14em;
}

.work-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-left:1px solid var(--black);
}

.work-card{
  position:relative;
  min-height:min(48vw,650px);
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto 1fr auto;
  padding:clamp(24px,3vw,46px);
  border-right:1px solid var(--black);
  border-bottom:1px solid var(--black);
  text-decoration:none;
  isolation:isolate;
  transition:color .3s ease,background .3s ease;
}

.work-card::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:auto 0 0;
  height:0;
  background:var(--red);
  transition:height .5s cubic-bezier(.77,0,.18,1);
}

.work-card:hover{
  color:var(--white);
  background:var(--red);
}

.work-card:hover::before{height:100%}

.work-number,
.work-type{
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:.13em;
}

.work-type{justify-self:end}

.work-card h2{
  grid-column:1/-1;
  align-self:center;
  font-size:clamp(52px,8.2vw,124px);
  line-height:.78;
  letter-spacing:-.075em;
  text-transform:uppercase;
}

.work-card--static h2{
  font-family:'Instrument Serif',Georgia,serif;
  font-style:italic;
  font-weight:400;
  text-transform:none;
  letter-spacing:-.055em;
}

.work-arrow{
  grid-column:2;
  align-self:end;
  justify-self:end;
  font-size:clamp(34px,4vw,60px);
  line-height:1;
  transition:transform .3s ease;
}

.work-card:hover .work-arrow{transform:rotate(45deg)}

.cta{
  background:var(--red);
  color:var(--white);
  min-height:78vh;
  padding:clamp(70px,10vw,150px) clamp(22px,4vw,64px);
  display:grid;
  align-content:center;
  justify-items:center;
  text-align:center;
}

.wrap > .cta{
  position:relative;
  left:50%;
  width:100vw;
  max-width:none;
  transform:translateX(-50%);
}

.cta-kicker{
  margin-bottom:28px;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.16em;
}

.cta h2{
  font-size:clamp(54px,10vw,156px);
  line-height:.83;
  letter-spacing:-.075em;
  text-transform:uppercase;
}

.cta-link{
  width:min(620px,100%);
  margin-top:clamp(50px,7vw,90px);
  padding:22px 0;
  border-top:1px solid rgba(255,255,255,.72);
  border-bottom:1px solid rgba(255,255,255,.72);
  display:flex;
  justify-content:space-between;
  align-items:center;
  text-decoration:none;
  text-transform:uppercase;
  font-size:clamp(18px,2vw,28px);
  letter-spacing:-.025em;
  transition:padding .25s ease,background .25s ease;
}

.cta-link:hover{
  padding-left:20px;
  padding-right:20px;
  background:var(--black);
}

.site-footer{
  min-height:84px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  padding:20px clamp(22px,4vw,64px);
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:.12em;
}

.site-footer span:nth-child(2){justify-self:center}
.site-footer a{justify-self:end;text-decoration:none}
.site-footer a:hover{color:var(--red)}

/* Portfolio gallery pages */
.wrap{
  width:min(100%,1440px);
  margin:0 auto;
  padding:0 clamp(22px,4vw,64px);
}

.page-head{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:start;
  gap:30px;
  min-height:28vh;
  padding:32px 0 40px;
  border-bottom:1px solid var(--black);
}

.page-head h1{
  grid-column:1;
  justify-self:start;
  text-align:left;
  font-size:clamp(64px,13vw,190px);
  font-weight:800;
  line-height:.76;
  letter-spacing:-.08em;
  text-transform:uppercase;
}

.page-head h1 em{
  color:var(--red);
  font-family:'Instrument Serif',Georgia,serif;
  font-weight:400;
  text-transform:none;
}

.back{
  grid-column:2;
  grid-row:1;
  justify-self:end;
  flex:none;
  width:116px;
  height:116px;
  border:1px solid var(--black);
  border-radius:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:14px;
  text-decoration:none;
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:.1em;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}

.back:hover{
  color:var(--white);
  background:var(--red);
  border-color:var(--red);
  transform:rotate(-8deg);
}

.lead{
  max-width:760px;
  font-size:clamp(18px,2vw,28px);
  line-height:1.35;
  font-weight:500;
}

.masonry{
  columns:3;
  column-gap:18px;
  padding:40px 0 96px;
}

.piece{
  break-inside:avoid;
  margin-bottom:18px;
  border:1px solid var(--black);
  overflow:hidden;
  background:var(--white);
}

.piece img,
.piece video{
  display:block;
  width:100%;
}

.piece .slot{
  aspect-ratio:var(--ar,4/5);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--black);
  background:var(--soft);
  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.piece figcaption{
  padding:14px 16px;
  border-top:1px solid var(--black);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.piece figcaption small{
  display:block;
  margin-top:4px;
  opacity:.55;
  font-weight:500;
}

.credit{
  min-height:76px;
  border-top:1px solid var(--black);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.1em;
}

.credit .mark{
  display:flex;
  align-items:center;
  gap:10px;
}

.credit .mark img{
  width:22px;
  height:auto;
}

.credit a{text-decoration:none}
.credit a:hover{color:var(--red)}

@media(max-width:900px){
  .hero{
    min-height:auto;
    padding-top:42px;
  }

  .hero h1{
    padding:14vh 0 3vh;
    font-size:clamp(46px,11.5vw,100px);
  }

  .hero h1 .name{padding-left:0}
  .hero h1 .role{white-space:normal;flex-wrap:wrap}
  .hero h1 .producer{text-align:center;padding:0}

  .tagline{max-width:none}

  .hero-scroll{
    margin-top:70px;
    width:96px;
    height:96px;
  }

  .work-grid{grid-template-columns:1fr}
  .work-card{min-height:68vw}
  .masonry{columns:2}
}

@media(max-width:640px){
  .site-header{
    min-height:70px;
    grid-template-columns:1fr auto;
    padding-top:14px;
    padding-bottom:14px;
  }

  .brand span,
  .edition{display:none}

  .hero{
    min-height:calc(100svh - 70px);
    padding-bottom:24px;
  }

  .hero h1{
    align-self:center;
    padding:8vh 0 2vh;
    font-size:clamp(43px,15vw,72px);
    line-height:.88;
  }

  .hero h1 .name{
    margin-bottom:16px;
    font-size:.55em;
  }

  .hero h1 .role{
    display:block;
    line-height:.88;
  }

  .hero h1 b{
    display:inline-block;
    margin-left:.08em;
  }

  .tagline{
    font-size:clamp(27px,8vw,38px);
    line-height:1.02;
  }

  .hero-scroll{
    align-self:flex-end;
    margin-top:38px;
  }

  .work{padding-top:52px;padding-bottom:70px}

  .section-label p:last-child{display:none}

  .work-grid{border-left:0}

  .work-card{
    min-height:112vw;
    border-left:1px solid var(--black);
  }

  .work-card h2{font-size:clamp(62px,22vw,105px)}

  .cta{min-height:70vh}
  .cta h2{font-size:clamp(52px,15vw,86px)}

  .site-footer{
    grid-template-columns:1fr;
    justify-items:start;
    gap:10px;
    padding-top:28px;
    padding-bottom:28px;
  }

  .site-footer span:nth-child(2),
  .site-footer a{justify-self:start}

  .page-head{
    min-height:30vh;
    align-items:start;
    grid-template-columns:1fr auto;
    gap:16px;
    padding-top:22px;
  }

  .back{
    width:78px;
    height:78px;
    font-size:8px;
  }

  .masonry{columns:1}
  .credit{align-items:flex-start;flex-direction:column;padding:22px 0}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hello span{animation:none}
  *,*::before,*::after{transition-duration:.01ms!important}
}

.piece .youtube-short{
  display:block;
  width:100%;
  aspect-ratio:9 / 16;
  border:0;
  background:#000;
}