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

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

body{
  margin:0;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  background:#f4f2ee;
  color:#111;
  font-family:Arial,Helvetica,sans-serif;
}

main,
section{
  max-width:100%;
}


/* ==================================================
   NAVIGATION
================================================== */

.nav{
  position:fixed;
  z-index:30;
  top:0;
  left:0;
  width:100%;

  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  padding:38px 5.2vw;

  transition:color .35s ease;
}

.brand{
  color:inherit;
  text-decoration:none;
  letter-spacing:.26em;
  transition:color .35s ease;
}

.brand b{
  display:block;
  font-size:16px;
  font-weight:500;
}

.brand small{
  display:block;
  margin-top:10px;

  font-size:7px;
  letter-spacing:.38em;
}

.nav nav{
  display:flex;
  align-items:center;
  gap:34px;
}

.nav nav a,
.nav nav button{
  color:inherit !important;
  background:none;
  border:0;

  font-size:10px;
  letter-spacing:.18em;
  text-decoration:none;

  cursor:pointer;

  transition:color .35s ease;
}

.nav nav button{
  padding:0;
  opacity:.45;
}

.nav nav button.active{
  opacity:1;
}

.nav nav i{
  height:28px;
  border-left:1px solid currentColor;
  opacity:.35;
}

.menu{
  display:none;

  width:28px;
  height:20px;

  padding:0;
  border:0;
  background:none;

  color:inherit !important;

  transition:color .35s ease;
}

.menu span{
  display:block;
  margin:6px 0;

  border-top:1px solid currentColor;

  transition:border-color .35s ease;
}


/* ==================================================
   HERO + DARK PANELS
================================================== */

.hero,
.panel{
  position:relative;

  height:100svh;
  min-height:680px;

  overflow:hidden;
}

.hero{
  background:#f4f2ee;
}

.hero-image{
  position:absolute;
  top:0;
  right:0;

  width:68%;
  height:100%;

  background-image:url('tart-original.PNG');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;

  transition:opacity .35s ease;
}


/* HERO CONTROLS */

.pager{
  position:absolute;
  left:5.2vw;
  bottom:7.5vh;

  display:flex;
  align-items:center;
  gap:24px;

  font-size:10px;
  letter-spacing:.16em;
}

.pager b{
  position:relative;

  display:block;
  width:130px;

  border-top:1px solid #b9b5af;
}

.pager em{
  position:absolute;
  top:-1px;
  left:0;

  width:25%;

  border-top:1px solid #111;

  transition:width .35s ease;
}

.arrows{
  position:absolute;
  right:5.2vw;
  bottom:6.3vh;
}

.arrows button{
  margin-left:18px;

  border:0;
  background:none;

  color:#111;
  font-size:29px;
  font-weight:200;

  cursor:pointer;
}


/* ==================================================
   PANEL BACKGROUNDS
================================================== */

.panel{
  color:#fff;
}

.panel .bg{
  position:absolute;
  inset:0;

  background-size:cover;
  background-position:center;

  transform:scale(1.01);
}

.work .bg{
  background-image:url('cacao-cut.jpg');
  background-position:center;
}

.about .bg{
  background-image:url('portrait-original.jpg');
  background-position:center 32%;
}

.contact .bg{
  background-image:url('spiral-original.jpg');
  background-position:center;
}


/* OVERLAYS */

.veil{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(13,8,5,.80) 0%,
      rgba(13,8,5,.57) 38%,
      rgba(13,8,5,.10) 72%
    );
}

.about .veil{
  background:
    linear-gradient(
      90deg,
      rgba(12,9,8,.78),
      rgba(12,9,8,.45) 42%,
      rgba(12,9,8,.08) 76%
    );
}

.contact .veil{
  background:
    linear-gradient(
      90deg,
      rgba(17,8,5,.83),
      rgba(17,8,5,.54) 44%,
      rgba(17,8,5,.18)
    );
}


/* ==================================================
   PANEL COPY
================================================== */

.copy{
  position:absolute;
  z-index:2;

  top:20%;
  left:5.2vw;

  max-width:620px;
}

.copy>span{
  font-size:9px;
  letter-spacing:.3em;
}

.copy h1{
  margin:28px 0 30px;

  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(48px,5.1vw,78px);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.025em;
}

.copy p{
  max-width:570px;
  margin:0 0 16px;

  font-size:14px;
  line-height:1.72;
}


/* ==================================================
   WORK SERVICES
================================================== */

.services{
  margin-top:35px;
  border-top:1px solid rgba(255,255,255,.42);
}

.services a{
  display:grid;
  grid-template-columns:205px 1fr;
  gap:20px;

  padding:14px 0;

  color:#fff;
  text-decoration:none;

  border-bottom:1px solid rgba(255,255,255,.27);

  transition:padding .2s ease;
}

.services a:hover{
  padding-left:7px;
}

.services b{
  font-size:12px;
  font-weight:500;
}

.services small{
  font-size:11px;
  opacity:.75;
}


/* ==================================================
   ABOUT / DUTCH PASTRY TEAM
================================================== */

.team-note{
  position:relative;

  max-width:570px;

  margin-top:32px;
  padding-top:24px;

  border-top:1px solid rgba(255,255,255,.35);
}

.team-note>span{
  display:block;

  font-size:9px;
  letter-spacing:.28em;
}

.team-note p{
  margin-top:14px;

  font-size:12px;
  line-height:1.65;

  opacity:.85;
}

.team-logo{
  width:150px;
  max-width:100%;
  height:auto;

  margin:0 0 18px;

  background:transparent;
}


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

.contact .copy{
  top:17%;
  max-width:640px;
}

.contact .copy h1{
  margin-bottom:24px;
}

.contact-link{
  display:inline-flex;
  gap:14px;

  margin:9px 0 20px;
  padding-bottom:6px;

  color:#fff;
  text-decoration:none;

  border-bottom:1px solid rgba(255,255,255,.7);

  font-size:12px;
  letter-spacing:.06em;
}

.contact form{
  width:100%;
  max-width:560px;
}

.contact .row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}

.contact input,
.contact textarea{
  width:100%;

  margin-bottom:8px;
  padding:11px 0;

  border:0;
  border-bottom:1px solid rgba(255,255,255,.45);

  background:transparent;
  color:#fff;

  font:inherit;
  font-size:12px;

  outline:none;
}

.contact textarea{
  height:66px;
  resize:none;
}

.contact input::placeholder,
.contact textarea::placeholder{
  color:rgba(255,255,255,.62);
}

.contact form button{
  margin-top:12px;
  padding:0 0 7px;

  border:0;
  border-bottom:1px solid #fff;

  background:none;
  color:#fff;

  font-size:9px;
  letter-spacing:.15em;

  cursor:pointer;
}

.contact form small{
  display:block;

  margin-top:10px;

  font-size:10px;
}


/* ==================================================
   CREATIONS
================================================== */

.creations-section{
  background:#f4f2ee;
  color:#111;

  padding:150px 5.2vw 0;
}

.creations-intro{
  max-width:760px;
  margin-bottom:90px;
}

.creations-intro>span{
  font-size:9px;
  letter-spacing:.3em;
}

.creations-intro h1{
  margin:28px 0;

  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(42px,4.4vw,68px);
  font-weight:400;
  line-height:.95;
  letter-spacing:-.035em;
}

.creations-intro p{
  max-width:520px;

  font-size:14px;
  line-height:1.7;
}


/* ==================================================
   CREATIONS SLIDER
================================================== */

.work-slider{
  margin-top:70px;
  margin-bottom:120px;
}

.work-slide-image{
  position:relative;

  width:100%;
  height:min(72vw,820px);

  overflow:hidden;

  background:#e9e7e2;
}

.work-slide-image img,
.work-slide-image video{
  width:100%;
  height:100%;

  object-fit:cover;
}

.work-slide-image img{
  display:block;
  transition:opacity .25s ease;
}

.work-slide-image video{
  position:absolute;
  inset:0;

  display:none;
}

.work-slide-info{
  display:grid;
  grid-template-columns:1fr auto;
  gap:50px;

  align-items:end;

  padding-top:22px;
}

.work-slide-info>div:first-child>span{
  font-size:9px;
  letter-spacing:.18em;
  opacity:.45;
}

.work-slide-info h2{
  margin:8px 0 7px;

  font-family:Georgia,'Times New Roman',serif;
  font-size:32px;
  font-weight:400;
  line-height:1;
}

.work-slide-info small{
  font-size:10px;
  letter-spacing:.1em;
  opacity:.55;
}

.work-slide-controls{
  display:flex;
  align-items:center;
  gap:22px;
}

.work-slide-count{
  white-space:nowrap;

  font-size:9px;
  letter-spacing:.15em;
}

.work-slide-progress{
  position:relative;

  width:120px;
  height:1px;

  background:rgba(17,17,17,.2);
}

.work-slide-progress span{
  position:absolute;
  top:0;
  left:0;

  width:16.666%;
  height:1px;

  background:#111;

  transition:width .3s ease;
}

.work-slide-arrows{
  display:flex;
  gap:18px;
}

.work-slide-arrows button{
  padding:0;

  border:0;
  background:none;

  color:#111;

  font-size:27px;
  font-weight:200;

  cursor:pointer;
}


/* ==================================================
   COLLABORATIONS PAGE
================================================== */

.collaborations-page{
  position:relative;

  min-height:100svh;

  padding:140px 5.2vw 55px;

  display:flex;
  flex-direction:column;

  background:#f4f2ee;
  color:#111;
}

.collaborations-copy{
  max-width:680px;
}

.collaborations-copy>span,
.collaboration-logos>span{
  display:block;

  font-size:9px;
  letter-spacing:.3em;
}

.collaborations-copy h1{
  margin:28px 0;

  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(48px,5vw,76px);
  font-weight:400;
  line-height:1;
  letter-spacing:-.03em;
}

.collaborations-copy p{
  max-width:560px;

  font-size:14px;
  line-height:1.7;
}

.collaboration-logos{
  margin-top:auto;
  padding-top:60px;
}

.collaboration-logo-frame{
  width:190px;
  height:105px;

  margin-top:18px;

  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.collaboration-logo-frame img{
  display:block;

  width:auto;
  height:auto;

  max-width:100%;
  max-height:100%;

  object-fit:contain;

  transition:opacity .45s ease;
}


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

@media(max-width:800px){

  /* NAV */

  .nav{
    padding:25px 22px;
  }

  .brand b{
    font-size:13px;
  }

  .brand small{
    font-size:6px;
  }

  .menu{
    display:block;
  }

  .nav nav{
    position:absolute;
    top:70px;
    right:18px;

    display:none;
    flex-direction:column;
    align-items:flex-end;
    gap:20px;

    padding:25px 24px;

    background:rgba(244,242,238,.96);
    color:#111;
  }

  .nav.open nav{
    display:flex;
  }

  .nav nav i{
    display:none;
  }


  /* HERO */

  .hero,
  .panel{
    min-height:700px;
  }

  .hero-image{
    top:0;

    width:100%;
    height:100%;

    background-size:cover;
    background-position:62% center;
  }

  .pager{
    left:22px;
    bottom:5vh;
  }

  .arrows{
    right:22px;
    bottom:3.8vh;
  }


  /* PANEL BACKGROUNDS */

  .panel .bg{
    background-position:center;
  }

  .work .bg{
    background-position:58% center;
  }

  .about .bg{
    background-position:62% center;
  }

  .contact .bg{
    background-position:56% center;
  }

  .veil,
  .about .veil,
  .contact .veil{
    background:
      linear-gradient(
        90deg,
        rgba(12,7,5,.84),
        rgba(12,7,5,.38)
      );
  }


  /* GENERAL COPY */

  .copy{
    top:18%;
    left:22px;
    right:22px;

    width:auto;
    max-width:none;
  }

  .copy p{
    max-width:96%;

    font-size:13px;
    line-height:1.62;
  }


  /* MOBILE TITLES */

  #about h1,
  #work h1,
  #creations h1{
    font-size:28px !important;
    line-height:1.05;
    letter-spacing:-.03em;
  }

  #creations h1{
    white-space:nowrap;
  }

  #contact h1{
    font-size:24px !important;
    line-height:1.08;
    letter-spacing:-.03em;
    white-space:normal;
  }


  /* WORK SERVICES */

  .services{
    margin-top:24px;
  }

  .services a{
    grid-template-columns:1fr;

    gap:4px;
    padding:10px 0;
  }


  /* ABOUT / DUTCH PASTRY TEAM */

  .team-note{
    position:relative;

    margin-top:28px;
    padding-top:25px;
    padding-bottom:70px;
  }

  .team-note>span{
    margin-bottom:18px;
  }

  .team-note p{
    margin:0;

    font-size:13px;
    line-height:1.55;
  }

  .team-logo{
    position:absolute;
    right:0;
    bottom:10px;

    width:90px;
    height:auto;

    margin:0;
  }


  /* CREATIONS */

  .creations-section{
    padding:110px 22px 0;
  }

  .creations-intro{
    margin-bottom:60px;
  }


  /* CREATIONS SLIDER */

  .work-slider{
    margin-top:55px;
    margin-bottom:85px;
  }

  .work-slide-image{
    height:auto;
    aspect-ratio:4/5;
  }

  .work-slide-info{
    display:block;

    padding-top:17px;
  }

  .work-slide-info h2{
    font-size:28px;
  }

  .work-slide-controls{
    width:100%;

    margin-top:25px;
  }

  .work-slide-progress{
    flex:1;
  }

  .work-slide-arrows{
    margin-left:auto;
  }


  /* COLLABORATIONS */

  .collaborations-page{
    min-height:100svh;

    padding:125px 40px 38px;
  }

  .collaborations-copy h1{
    margin:25px 0 30px;

    font-size:36px;
    line-height:1;
  }

  .collaborations-copy p{
    font-size:13px;
    line-height:1.55;
  }

  .collaboration-logos{
    margin-top:auto;
    padding-top:45px;
  }

  .collaboration-logos>span{
    font-size:8px;
  }

  .collaboration-logo-frame{
    width:90px;
    height:55px;

    margin-top:12px;
  }


  /* CONTACT
     Full bleed across complete phone width
  */

  #contact,
  .contact{
    position:relative;

    width:100vw;
    max-width:none;

    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);

    overflow:hidden;
  }

  .contact .bg,
  #contact .bg,
  .contact .veil,
  #contact .veil{
    position:absolute;
    inset:0;

    width:100%;
  }

  .contact .copy,
  #contact .copy{
    top:16%;

    left:40px;
    right:40px;

    width:auto;
    max-width:none;
  }

  .contact form,
  #contact form{
    width:100%;
    max-width:100%;
  }

  .contact .row{
    grid-template-columns:1fr;
    gap:0;
  }

  .contact textarea{
    height:58px;
  }

  .contact input,
  .contact textarea,
  #contact input,
  #contact textarea{
    width:100%;
    max-width:100%;
  }
}