.article-hero {
  min-height: 600px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background-position: center;
  background-size: cover;
}

.article-hero-inner {
  width: 100%;
  max-width: 1160px;
  margin: auto;
  padding: 120px 30px 95px;
}

.article-hero h1 {
  max-width: 940px;
}

.article-hero .lead {
  max-width: 760px;
}

.article-meta {
  margin-top: 25px;
  color: #ddd7cb;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.article-shell {
  display: grid;
  grid-template-columns: minmax(0, 760px) 250px;
  gap: 75px;
  max-width: 1120px;
  margin: auto;
  padding: 90px 30px 110px;
}

.article-body {
  font-family: Georgia, serif;
  font-size: 17px;
  line-height: 1.88;
}

.article-body > p:first-child {
  color: var(--forest);
  font: 500 25px/1.55 var(--serif);
}

.article-body h2 {
  margin: 62px 0 18px;
  color: var(--forest);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.05;
}

.article-body h3 {
  margin: 35px 0 10px;
  color: var(--forest);
  font-size: 27px;
}

.article-body a {
  color: var(--dark-gold);
  border-bottom: 1px solid #ceb98f;
}

.article-body ul,
.article-body ol {
  padding-left: 23px;
}

.article-body li {
  margin-bottom: 9px;
}

.answer-box,
.safety-box {
  margin: 38px 0;
  padding: 27px 30px;
  background: var(--cream);
  border-left: 3px solid var(--gold);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.75;
}

.answer-box strong,
.safety-box strong {
  display: block;
  margin-bottom: 7px;
  color: var(--forest);
  font-family: var(--serif);
  font-size: 24px;
}

.safety-box {
  background: #edf0ec;
  border-color: var(--forest);
}

.article-sidebar {
  align-self: start;
  position: sticky;
  top: 25px;
  padding: 25px;
  background: var(--cream);
  font-size: 11px;
}

.article-sidebar h2 {
  margin: 0 0 16px;
  color: var(--forest);
  font-size: 27px;
}

.article-sidebar ol {
  margin: 0;
  padding-left: 18px;
}

.article-sidebar li {
  margin-bottom: 10px;
}

.article-sidebar a:hover {
  color: var(--dark-gold);
}

.source-list {
  margin-top: 45px;
  padding-top: 28px;
  border-top: 1px solid var(--stone);
  font-family: var(--sans);
  font-size: 11px;
}

.source-list h2 {
  margin-top: 0;
  font-size: 30px;
}

.source-list li {
  margin-bottom: 11px;
}

.article-faq {
  margin-top: 65px;
  padding-top: 10px;
  border-top: 1px solid var(--stone);
}

.article-faq details {
  padding: 18px 0;
  border-bottom: 1px solid var(--stone);
  font-family: var(--sans);
}

.article-faq summary {
  cursor: pointer;
  color: var(--forest);
  font-weight: 700;
}

.article-faq details p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.journal-hero {
  padding: 105px 30px;
  color: #fff;
  background: linear-gradient(90deg, rgba(14,30,24,.92), rgba(14,30,24,.45)), url("../images/couple-country-lane.png") center / cover;
}

.journal-hero-inner,
.journal-grid {
  max-width: 1120px;
  margin: auto;
}

.journal-hero h1 {
  max-width: 800px;
}

.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 85px 30px 110px;
}

.article-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 0 15px 40px rgba(25,38,32,.08);
}

.article-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.article-card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 25px;
}

.article-card h2 {
  margin: 9px 0 13px;
  color: var(--forest);
  font-size: 31px;
  font-weight: 600;
  line-height: 1.05;
}

.article-card p {
  color: var(--muted);
  font-size: 12px;
}

.article-card .text-link {
  margin-top: auto;
  align-self: flex-start;
}

@media (max-width: 900px) {
  .article-shell { grid-template-columns: 1fr; }
  .article-sidebar { position: static; order: -1; }
  .journal-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .article-hero { min-height: 580px; }
  .article-hero-inner { padding: 95px 20px 70px; }
  .article-shell { padding: 65px 22px 85px; }
  .article-body { font-size: 16px; }
  .article-body h2 { font-size: 35px; }
  .journal-grid { grid-template-columns: 1fr; padding: 60px 20px 85px; }
}