.mua-qua {
  --paper:#fafaf7;
  --ink:#242f2b;
  --accent:#a53632;
  --line:#cad0c9;
  --display:Bricolage
}

.mua-qua .site-header {
  border-bottom:1px solid var(--line)
}

.editorial-hero {
  padding:42px 56px 72px
}

.hero-title {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:35px
}

.hero-title h1 {
  font-size:clamp(60px,7.8vw,122px);
  line-height:1;
  letter-spacing:-.065em
}

.hero-title p {
  width:260px;
  font-size:16px;
  margin:0 0 9px
}

.hero-layout {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:6.5vw;
  align-items:center
}

.hero-layout figure {
  height:515px;
  overflow:hidden
}

.hero-layout figure img {
  height:100%;
  object-position:center 57%
}

.hero-article {
  padding-right:30px
}

.hero-article .category {
  color:var(--accent);
  margin-bottom:22px
}

.hero-article h2 {
  font-size:clamp(36px,4.4vw,67px);
  letter-spacing:-.035em;
  margin-bottom:24px
}

.hero-article>p:not(.category) {
  max-width:330px;
  font-size:15px
}

.harvest-section {
  padding:55px 0 90px;
  border-top:1px solid var(--line)
}

.harvest-section h2 {
  font-size:clamp(36px,4vw,62px)
}

.harvest-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:28px;
  margin-bottom:38px;
  align-items:start
}

.harvest-card:nth-child(2) {
  padding-top:70px
}

.harvest-card:nth-child(3) {
  padding-top:140px
}

.harvest-card img {
  aspect-ratio:1;
  object-fit:cover
}

.harvest-card:first-child img {
  aspect-ratio:4/5
}

.harvest-card .category {
  margin:23px 0 9px;
  color:var(--accent)
}

.harvest-card h3 {
  font-family:Bricolage;
  font-size:26px;
  letter-spacing:-.025em
}

.harvest-card p:last-child {
  font-size:14px;
  margin-top:8px
}

.editorial-story {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  background:#e9ede5
}

.story-copy {
  padding:80px 11%
}

.story-copy h2 {
  margin:27px 0
}

.story-copy p:not(.category) {
  font-size:15px;
  max-width:390px
}

.editorial-story>img {
  height:100%;
  min-height:630px
}

.table-note {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:30px 10%;
  padding:90px 0
}

.table-note h2 {
  grid-row:span 2
}

.table-note p {
  margin:0;
  max-width:440px
}

.table-note>a {
  justify-self:start;
  align-self:start
}

.mua-qua .site-footer {
  background:#233c30;
  color:#fbfbf4;
  --line:#627164;
  --accent:#e6bd87;
  --focus:#ffcc84
}

.mua-qua .footer-heading h2 {
  font-family:Bricolage
}

@media(max-width:1000px) {
  .editorial-hero {
    padding:35px 32px 60px
  }
  .hero-layout {
    gap:40px;
    grid-template-columns:1.15fr 1fr
  }
  .hero-layout figure {
    height:480px
  }
  .hero-article {
    padding:0
  }
  .hero-title h1 {
    font-size:80px
  }
  .hero-title p {
    width:210px;
    font-size:14px
  }
  .hero-article h2 {
    font-size:45px
  }
  .harvest-grid {
    gap:20px
  }
  .harvest-card h3 {
    font-size:22px
  }
  .story-copy {
    padding:55px 10%
  }
  .editorial-story>img {
    min-height:600px
  }
  .table-note {
    column-gap:40px
  }
}

@media(max-width:600px) {
  .editorial-hero {
    padding:28px 20px 44px
  }
  .hero-title {
    display:block;
    margin-bottom:25px
  }
  .hero-title h1 {
    font-size:clamp(42px,13.5vw,72px);
    letter-spacing:-.06em
  }
  .hero-title p {
    width:auto;
    max-width:285px;
    margin-top:18px;
    font-size:14px
  }
  .hero-layout {
    display:flex;
    flex-direction:column;
    gap:29px;
    align-items:stretch
  }
  .hero-layout figure {
    height:370px
  }
  .hero-article h2 {
    font-size:45px
  }
  .hero-article h2 br {
    display:none
  }
  .hero-article .category {
    margin-bottom:13px
  }
  .hero-article>p:not(.category) {
    max-width:none
  }
  .harvest-section {
    padding:40px 0 55px
  }
  .harvest-grid {
    display:block;
    margin-bottom:20px
  }
  .harvest-card {
    padding:0!important;
    margin-bottom:34px
  }
  .harvest-card img,.harvest-card:first-child img {
    aspect-ratio:6/5
  }
  .harvest-card .category {
    margin-top:19px
  }
  .harvest-card h3 {
    font-size:28px
  }
  .editorial-story {
    display:flex;
    flex-direction:column-reverse
  }
  .editorial-story>img {
    min-height:0;
    height:300px
  }
  .story-copy {
    padding:38px 20px 45px
  }
  .table-note {
    display:block;
    padding:55px 0
  }
  .table-note p {
    margin:25px 0 10px
  }
}