:root{
  --cream:#F7F5EF;
  --ink:#2F2926;
  --olive:#53544B;
  --line-dark:rgba(47,41,38,0.18);
  --line-cream:rgba(247,245,239,0.35);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'EB Garamond', serif;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}

.label{
  font-family:'Raleway',sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.8125rem;
  font-weight:500;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(24px,9.6vw,98px);}
.section{padding:6.5rem 0;}
.center{text-align:center;}

/* HEADER */
header{
  position:relative;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.75rem 6vw;
}
header .wordmark{
  font-family:'EB Garamond', serif;
  font-size:1.375rem;
  font-weight:500;
  letter-spacing:.05em;
  text-transform:uppercase;
}
header nav{display:flex;align-items:center;gap:2.4rem;}
header nav .nav-top,
header nav .nav-social,
header nav .nav-foot{display:none;}
header nav .nav-links{display:flex;align-items:center;gap:2.4rem;}
header nav .nav-links a.nav-home{display:none;}
header nav a{
  font-family:'Raleway',sans-serif;
  font-size:.875rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.82;
  transition:opacity .2s ease;
}
header nav a:hover,
header nav a[aria-current="page"]{opacity:1;}
.nav-toggle{display:none;background:none;border:none;font-size:1.4rem;cursor:pointer;color:inherit;}

header.header-light{
  background:var(--cream);
  color:var(--ink);
  border-bottom:1px solid var(--line-dark);
}
header.header-overlay{
  position:absolute;
  top:0;left:0;right:0;
  background:transparent;
  color:#fff;
}

@media (max-width:860px){
  header nav{
    position:fixed;top:0;right:0;bottom:0;
    width:75vw;max-width:320px;
    background:var(--ink);
    color:var(--cream);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:0;
    transform:translateX(100%);
    transition:transform .35s ease;
    z-index:200;
    overflow-y:auto;
  }
  header nav.open{transform:translateX(0);}

  header nav .nav-top{
    display:flex;
    justify-content:flex-end;
    padding:1.75rem 1.75rem 1.25rem;
  }
  header nav .nav-close{
    background:none;
    border:none;
    color:var(--cream);
    font-family:'Raleway',sans-serif;
    font-size:.75rem;
    font-weight:500;
    letter-spacing:.12em;
    text-transform:uppercase;
    opacity:.85;
    cursor:pointer;
    transition:opacity .2s ease;
  }
  header nav .nav-close:hover{opacity:1;}

  header nav .nav-links{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:1.15rem;
    padding:1rem 1.75rem 1.5rem;
    border-top:1px solid var(--line-cream);
    border-bottom:1px solid var(--line-cream);
  }
  header nav .nav-links a.nav-home{display:block;}
  header nav a{color:var(--cream);opacity:.85;}
  header nav .nav-links a{
    font-family:'EB Garamond', serif;
    font-size:1.3rem;
    font-weight:500;
    letter-spacing:.04em;
    text-transform:uppercase;
  }

  header nav .nav-social{
    display:flex;
    justify-content:space-between;
    gap:1rem;
    padding:1.25rem 1.75rem;
    border-bottom:1px solid var(--line-cream);
  }
  header nav .nav-social a{font-size:.6875rem;letter-spacing:.1em;}

  header nav .nav-foot{
    display:block;
    margin-top:auto;
    padding:1.25rem 1.75rem calc(1.75rem + env(safe-area-inset-bottom, 0px));
    text-align:center;
    flex-shrink:0;
  }
  header nav .nav-mono{width:92px;height:auto;aspect-ratio:600/733;object-fit:contain;margin:0 auto .75rem;opacity:.9;}
  header nav .nav-foot p{
    font-family:'Raleway',sans-serif;
    font-size:.6875rem;
    letter-spacing:.05em;
    line-height:1.7;
    opacity:.8;
  }

  .nav-toggle{display:block;}
  header.header-overlay .nav-toggle{color:#fff;}
}

/* HERO (home) */
.hero{
  position:relative;
}
.hero img{
  width:100%;
  height:auto;
  aspect-ratio:5696/2998;
  object-fit:cover;
  object-position:center;
}

/* Page intro heading block (interior pages) */
.page-head{padding-top:4.5rem;padding-bottom:1rem;}
.section-after-head{padding-top:2rem;padding-bottom:2.5rem;}
.section-after-head.no-cta{padding-bottom:4.5rem;}
.page-head .eyebrow-italic{
  font-style:italic;
  font-weight:500;
  font-size:1.5rem;
  margin-top:.5rem;
  display:block;
}
.page-head .body-copy{max-width:none;margin-top:1.75rem;}
h1.heading-xl,
h2.heading-xl{
  font-weight:500;
  font-size:clamp(2.25rem,4vw,2.875rem);
  letter-spacing:.01em;
}
.body-copy{
  font-family:'Poppins', sans-serif;
  font-weight:300;
  font-size:1.0625rem;
  line-height:1.8;
  max-width:900px;
}
.section .body-copy{margin-top:1.75rem;}

/* Home intro split */
.split{
  display:grid;
  grid-template-columns:0.93fr 1fr;
  gap:4.5rem;
  align-items:center;
}
.split .framed{
  border:1px solid var(--line-dark);
  padding:.5rem;
}
.split .framed img{
  aspect-ratio:784/796;
  object-fit:cover;
  width:100%;
  height:100%;
}
.split h1{
  font-weight:500;
  font-size:clamp(2rem,3.2vw,2.625rem);
  line-height:1.25;
}
.split .body-copy{margin-top:1.5rem;font-size:1.125rem;}

/* Studio: Led By */
.founder-grid{
  display:grid;
  grid-template-columns:0.88fr 1fr;
  gap:4.5rem;
  align-items:start;
}
.founder-name{
  font-style:italic;
  font-size:1.4rem;
  margin-top:2.5rem;
  margin-bottom:1.5rem;
}
.founder-bio p{
  font-family:'Poppins', sans-serif;
  font-weight:300;
  font-size:1.0625rem;
  line-height:1.8;
  margin-bottom:1.4rem;
}
.founder-bio p:last-child{margin-bottom:0;}
.founder-photo{
  border:1px solid var(--line-dark);
  padding:.5rem;
}
.founder-photo img{aspect-ratio:848/986;object-fit:cover;object-position:50% 25%;width:100%;height:100%;}
.founder-bio-full{
  font-family:'Poppins', sans-serif;
  font-weight:300;
  font-size:1.0625rem;
  line-height:1.8;
  margin-top:2.5rem;
}

/* Services */
.services-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 4.5rem;
  margin-top:1rem;
}
.service-block{margin-top:3.25rem;}
.service-block:first-child{margin-top:0;}
.service-block h3{
  font-style:italic;
  font-weight:500;
  font-size:1.6rem;
  margin-bottom:1.1rem;
}
.service-block p{
  font-family:'Poppins', sans-serif;
  font-weight:300;
  font-size:1.0625rem;
  line-height:1.8;
}
.services-grid .framed{
  border:1px solid var(--line-dark);
  padding:.5rem;
  margin-top:2rem;
}
.services-grid .framed img{
  aspect-ratio:886/963;
  object-fit:cover;
  width:100%;
  height:100%;
}

/* Portfolio */
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2.5rem;
  margin-top:3rem;
}
.portfolio-item .framed{
  border:1px solid var(--line-dark);
  padding:.5rem;
  position:relative;
  overflow:hidden;
}
.portfolio-item .framed img{
  aspect-ratio:4/5;
  object-fit:cover;
  width:100%;
  height:100%;
  transition:opacity .3s ease;
}
.portfolio-item .framed:hover img{
  opacity:.5;
}
.portfolio-item .coming-soon{
  position:absolute;
  inset:.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-style:italic;
  font-size:1.375rem;
  color:var(--ink);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
.portfolio-item .framed:hover .coming-soon{
  opacity:1;
}
.portfolio-item figcaption{
  font-style:italic;
  font-size:1.375rem;
  text-align:center;
  margin-top:1.25rem;
}

/* CTA block */
.cta{
  text-align:center;
  padding-top:2rem;
  padding-bottom:5rem;
}
.cta h2{
  font-weight:500;
  font-size:clamp(2rem,3.4vw,2.5rem);
}
.cta p{
  font-family:'Poppins', sans-serif;
  font-weight:300;
  font-size:1.0625rem;
  line-height:1.8;
  max-width:820px;
  margin:1.5rem auto 0;
}
.btn{
  display:inline-block;
  margin-top:2.25rem;
  padding:.9rem 2.5rem;
  border:1px solid var(--ink);
  font-family:'EB Garamond', serif;
  font-size:1.0625rem;
  transition:background-color .2s ease, color .2s ease;
}
.btn:hover{background:var(--ink);color:var(--cream);}

/* Contact / Inquiry form */
.contact-form{
  margin-top:3rem;
  padding-top:2.5rem;
  border-top:1px solid var(--line-dark);
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 4rem;
  margin-bottom:2.75rem;
}
.form-row-full{grid-template-columns:1fr;}
.form-field label{
  font-family:'EB Garamond', serif;
  font-size:1.125rem;
  display:block;
  margin-bottom:1.1rem;
}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  background:none;
  border:none;
  border-bottom:1px solid var(--line-dark);
  color:var(--ink);
  font-family:'EB Garamond', serif;
  font-size:1.0625rem;
  padding:.5rem 0;
  outline:none;
  transition:border-color .2s ease;
  -webkit-appearance:none;
  appearance:none;
  border-radius:0;
}
.form-field textarea{resize:none;min-height:7rem;}
.form-field select{cursor:pointer;}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{border-color:var(--ink);}
.form-field input[type="date"]::-webkit-calendar-picker-indicator{opacity:.6;cursor:pointer;}
.select-field{position:relative;}
.select-field::after{
  content:"";
  position:absolute;right:.2rem;top:.9rem;
  width:8px;height:8px;
  border-right:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  transform:rotate(45deg);
  pointer-events:none;
  opacity:.6;
}
.submit-btn{
  display:block;
  margin:0 auto 3.5rem;
  background:none;
  border:1px solid var(--ink);
  padding:.9rem 2.75rem;
  font-family:'EB Garamond', serif;
  font-size:1.0625rem;
  cursor:pointer;
  color:var(--ink);
  transition:background-color .2s ease, color .2s ease;
}
.submit-btn:hover{background:var(--ink);color:var(--cream);}

/* FOOTER */
footer{
  background:var(--olive);
  color:var(--cream);
  padding:3.25rem 6vw 2.75rem;
}
footer .footer-grid{
  max-width:1280px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:3rem;
  flex-wrap:wrap;
}
footer .mono-footer{
  flex:0 0 auto;
  width:92px;
  height:auto;
  aspect-ratio:600/733;
  align-self:center;
}
footer .footer-about h3{
  font-family:'EB Garamond', serif;
  font-weight:500;
  font-size:1.05rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:.75rem;
}
footer .footer-about{
  flex:1 1 320px;
  max-width:480px;
}
footer .footer-about p{
  font-family:'Poppins', sans-serif;
  font-weight:300;
  font-size:.8125rem;
  line-height:1.6;
  opacity:.92;
  max-width:480px;
}
footer .footer-col{flex:0 0 auto;}
footer .footer-about .email{
  display:inline-block;
  margin-top:1rem;
  font-family:'Poppins', sans-serif;
  font-weight:300;
  font-size:.8125rem;
  border-bottom:1px solid var(--line-cream);
}
footer .footer-about .email:hover{border-color:var(--cream);}
footer .footer-col h4{
  font-family:'Raleway',sans-serif;
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:.85rem;
}
footer .footer-col ul li{
  font-family:'EB Garamond', serif;
  font-size:.875rem;
  line-height:1.2;
  margin-bottom:.4rem;
  padding-left:1rem;
  position:relative;
}
footer .footer-col ul li::before{
  content:"-";
  position:absolute;left:0;
  opacity:.7;
}
footer .footer-col ul li a:hover{opacity:.75;}

@media (max-width:960px){
  footer .mono-footer{flex-basis:100%;margin:0 auto 1rem;}
  footer .footer-about{flex-basis:100%;max-width:none;}
}

@media (max-width:820px){
  .split,
  .founder-grid,
  .services-grid{grid-template-columns:1fr;}
  .founder-grid{gap:2rem;}
  .founder-name{margin-bottom:2rem;}
  .founder-photo{max-width:360px;margin:0 auto;order:-1;}
  .services-grid .service-block{margin-top:2.5rem;}
  .services-grid .service-block:first-child{margin-top:0;}
  .services-grid > div + div{margin-top:2.5rem;}
  .services-grid .framed{max-width:420px;margin:2rem auto 0;}
  .portfolio-grid{grid-template-columns:1fr;gap:3rem;}
  .form-row{grid-template-columns:1fr;gap:0;}
  .form-row .form-field{margin-bottom:2rem;}
  footer .footer-grid{flex-direction:column;align-items:center;text-align:center;}
  footer .footer-col ul li{padding-left:0;}
  footer .footer-col ul li::before{display:none;}
  .section{padding:4.5rem 0;}
  .section-after-head{padding-top:1.5rem;padding-bottom:2rem;}
  .cta{padding-top:1.5rem;padding-bottom:3rem;}
  .page-head{padding-top:4rem;}
  .hero{min-height:50vh;}
  .hero img{height:50vh;object-position:center;}
}