:root{
  --paper:#fbf7f0;
  --cream:#f4ede2;
  --ink:#2f291f;
  --muted:#706557;
  --olive:#746b43;
  --line:#ded4c6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Cormorant Garamond", Georgia, serif;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.site-header{
  min-height:92px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:44px;
  padding:0 6vw;
  border-bottom:1px solid rgba(222,212,198,.25);
  background:rgba(251,247,240,.94);
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter:blur(8px);
}
.nav-left,.nav-right{
  display:flex;
  gap:40px;
  font:500 12px "DM Sans",sans-serif;
  letter-spacing:.09em;
}
.nav-right{justify-content:flex-end}
.header-wordmark{
  font-size:24px;
  letter-spacing:.18em;
  white-space:nowrap;
}

.hero{
  min-height:74vh;
  display:grid;
  grid-template-columns:27% 46% 27%;
  align-items:stretch;
  overflow:hidden;
  background:#fffdf8;
}
.hero-image{
  background-size:cover;
  background-position:center;
  min-height:74vh;
}
.hero-left{
  background-image:
    linear-gradient(to right,rgba(251,247,240,.02),rgba(251,247,240,.12)),
    url("assets/hero-left.jpg");
}
.hero-right{
  background-image:
    linear-gradient(to left,rgba(251,247,240,.02),rgba(251,247,240,.10)),
    url("assets/hero-right.jpg");
}
.hero-logo-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:42px 1.2vw 52px;
  background:
    radial-gradient(circle at center,
      rgba(255,253,248,.99) 0%,
      rgba(255,253,248,.98) 61%,
      rgba(255,253,248,.84) 80%,
      rgba(255,253,248,.18) 100%);
}
.primary-logo{
  width:min(720px,96%);
  max-height:640px;
  object-fit:contain;
  mix-blend-mode:multiply;
}

.spacer-note{
  padding:105px 20px;
  text-align:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.spacer-note p{
  max-width:780px;
  margin:0 auto;
  font-size:35px;
  font-style:italic;
  color:var(--muted);
}

.feature-section{
  width:min(1180px,88vw);
  margin:0 auto;
  padding:125px 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:115px;
  align-items:center;
  border-bottom:1px solid var(--line);
}
.feature-section.reverse .feature-photo{order:2}
.feature-section.reverse .feature-copy{order:1}
.feature-photo{
  background:#f1e9de;
  overflow:hidden;
}
.feature-photo img{
  width:100%;
  height:auto;
  aspect-ratio: 1.45 / 1;
  object-fit:cover;
  object-position:center;
}
.feature-copy span,
.comments-copy>span{
  display:block;
  margin-bottom:20px;
  font:500 12px "DM Sans",sans-serif;
  letter-spacing:.18em;
  color:var(--olive);
}
.feature-copy h2,
.comments-copy h2{
  margin:0 0 26px;
  font-size:clamp(38px,4vw,58px);
  line-height:1.04;
  font-weight:500;
}
.feature-copy p,
.comments-copy>p{
  max-width:570px;
  margin:0 0 32px;
  font-size:20px;
  line-height:1.58;
  color:#554a3d;
}
.button{
  display:inline-block;
  padding:14px 22px;
  border:1px solid var(--olive);
  font:500 11px "DM Sans",sans-serif;
  letter-spacing:.14em;
}
.button:hover{
  background:var(--olive);
  color:#fff;
}

.comments-section{
  width:min(1180px,88vw);
  margin:0 auto;
  padding:130px 0 120px;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:110px;
  align-items:start;
}
.coffee-photo img{
  width:100%;
  height:480px;
  object-fit:cover;
}
.comment-form{margin-top:36px}
.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.comment-form input,
.comment-form textarea{
  width:100%;
  border:1px solid var(--line);
  background:#fffdfa;
  padding:15px 16px;
  font:400 14px "DM Sans",sans-serif;
  color:var(--ink);
}
.comment-form textarea{
  min-height:155px;
  margin-top:16px;
  resize:vertical;
}
.comment-form button{
  width:100%;
  margin-top:16px;
  border:0;
  background:var(--olive);
  color:#fff;
  padding:16px;
  font:500 12px "DM Sans",sans-serif;
  letter-spacing:.15em;
  cursor:pointer;
}
.message{
  min-height:22px;
  margin:10px 0 0;
  color:var(--muted);
  font-size:14px;
}

footer{
  display:grid;
  grid-template-columns:1.2fr .8fr 1fr 1fr;
  gap:48px;
  align-items:center;
  padding:58px 8vw 0;
  border-top:1px solid var(--line);
  background:#f7f1e8;
}
.footer-brand img{
  width:235px;
  max-height:145px;
  object-fit:contain;
  mix-blend-mode:multiply;
}
.footer-links,.footer-social,.footer-contact{
  display:flex;
  flex-direction:column;
  gap:9px;
  font:500 11px "DM Sans",sans-serif;
  letter-spacing:.06em;
}
.footer-links strong,.footer-social strong,.footer-contact strong{
  margin-bottom:4px;
  letter-spacing:.1em;
}
.social-icons{
  display:flex;
  gap:15px;
  align-items:center;
  margin:3px 0;
  font-size:22px;
}
.social-icons a{
  line-height:1;
}
.copyright{
  grid-column:1/-1;
  margin:38px -8vw 0;
  padding:12px 20px;
  text-align:center;
  background:var(--olive);
  color:#fff;
  font:500 10px "DM Sans",sans-serif;
  letter-spacing:.13em;
}

@media(max-width:920px){
  .site-header{
    grid-template-columns:1fr;
    padding:22px;
    gap:16px;
    text-align:center;
    position:static;
  }
  .nav-left,.nav-right{
    justify-content:center;
    flex-wrap:wrap;
    gap:22px;
  }
  .hero{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .hero-image{display:none}
  .hero-logo-wrap{padding:55px 14px 70px}
  .spacer-note{padding:75px 20px}
  .spacer-note p{font-size:29px}
  .feature-section,.comments-section{
    grid-template-columns:1fr;
    gap:42px;
    padding:80px 0;
  }
  .feature-section.reverse .feature-photo,
  .feature-section.reverse .feature-copy{order:initial}
  .feature-photo img,.coffee-photo img{height:350px}
  .field-row{grid-template-columns:1fr}
  footer{
    grid-template-columns:1fr 1fr;
    text-align:center;
  }
  .footer-brand{
    grid-column:1/-1;
  }
  .footer-brand img{margin:auto}
  .footer-links,.footer-social,.footer-contact{align-items:center}
  .social-icons{justify-content:center}
}
@media(max-width:560px){
  .feature-section,.comments-section{width:92vw}
  .feature-photo img,.coffee-photo img{height:300px}
  .feature-copy h2,.comments-copy h2{font-size:38px}
  .feature-copy p,.comments-copy>p{font-size:18px}
  footer{grid-template-columns:1fr}
}

/* Current clean social brand icons */
.social-icons{
  display:flex;
  align-items:center;
  gap:18px;
  margin:6px 0 4px;
}
.social-icons a{
  width:23px;
  height:23px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--ink);
  transition:opacity .2s ease, transform .2s ease;
}
.social-icons a:hover{
  opacity:.65;
  transform:translateY(-1px);
}
.social-icons svg{
  width:22px;
  height:22px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.social-icons svg .fill,
.social-icons a[aria-label="Pinterest"] svg path,
.social-icons a[aria-label="Facebook"] svg path{
  fill:currentColor;
  stroke:none;
}

.shop-links{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}
.text-shop-link,
.storefront-link{
  font:500 11px/1.45 "DM Sans",sans-serif;
  letter-spacing:.06em;
  color:var(--olive);
  text-decoration:none;
}
.text-shop-link:hover,
.storefront-link:hover{ text-decoration:underline; }
.storefront-link{ color:var(--muted); }