/* Search-friendly, editorial FAQ */
.faqSection {
  position: relative;
  grid-template-columns: minmax(310px, .72fr) minmax(0, 1.28fr);
  gap: 9vw;
  padding: 145px 9vw 155px;
  background:
    radial-gradient(circle at 10% 5%, rgba(197, 161, 99, .13), transparent 25%),
    #f8f4ed;
}

.faqSection::before {
  content: "FAQ";
  position: absolute;
  left: 2vw;
  bottom: 18px;
  font: 400 150px/.75 Georgia, serif;
  color: rgba(84, 22, 34, .025);
}

.faqHeading { position: sticky; top: 120px; align-self: start; }
.faqHeading h2 { letter-spacing: -.04em; }

.faqHeading > p:not(.eyebrow) {
  max-width: 430px;
  margin-bottom: 30px;
}

.faqKeywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 430px;
}

.faqKeywords span {
  padding: 10px 12px;
  border: 1px solid rgba(84, 22, 34, .16);
  background: rgba(255, 255, 255, .38);
  color: #745d50;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.faqList { counter-reset: faq; border-top-color: rgba(84, 22, 34, .26); }
.faqList details { counter-increment: faq; transition: background .25s ease; }
.faqList details[open] { background: rgba(255, 255, 255, .42); }

.faqList summary {
  padding: 28px 62px 28px 48px;
  font-size: clamp(18px, 1.55vw, 23px);
  line-height: 1.35;
  transition: color .25s ease, padding-left .25s ease;
}

.faqList summary::before {
  content: counter(faq, decimal-leading-zero);
  position: absolute;
  left: 4px;
  top: 33px;
  color: #a18465;
  font: 600 7px/1 Arial, sans-serif;
  letter-spacing: .15em;
}

.faqList details[open] summary { color: var(--wine); padding-left: 54px; }

.faqList summary i {
  top: 24px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(84, 22, 34, .18);
  border-radius: 50%;
  font-size: 18px;
}

.faqList details[open] summary i { background: var(--wine); color: #f4dfb8; }

.faqList details p {
  max-width: 760px;
  padding: 0 62px 31px 54px;
  font-size: 15.5px;
  line-height: 1.85;
  color: #66584f;
}

.faqList details p strong { color: #4f1722; font-weight: 600; }

@media (max-width: 900px) {
  .faqSection { grid-template-columns: 1fr; gap: 58px; padding: 100px 24px 110px; }
  .faqHeading { position: static; }
}

@media (max-width: 560px) {
  .faqList summary { padding: 24px 46px 24px 36px; }
  .faqList summary::before { left: 0; top: 29px; }
  .faqList details[open] summary { padding-left: 40px; }
  .faqList summary i { right: 0; top: 20px; }
  .faqList details p { padding: 0 8px 28px 40px; font-size: 14.5px; }
}