.hg-article-main {
  background: var(--cream);
  color: var(--ink);
}

.hg-article {
  width: min(100% - 40px, 1180px);
  margin-inline: auto;
}

.hg-article-hero {
  padding-block: 48px 52px;
}

.hg-article-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 46px;
  color: var(--muted);
  font: 700 .72rem/1.4 var(--sans);
  letter-spacing: .02em;
}

.hg-article-breadcrumb a:hover,
.hg-article-backlink:hover { color: var(--gold); }

.hg-article-kicker,
.hg-article-number {
  margin: 0 0 12px;
  color: var(--gold);
  font: 700 .72rem/1.4 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hg-article-hero h1 {
  max-width: 920px;
  margin: 0;
  font: 500 clamp(2.6rem, 4vw, 3.45rem)/1.02 var(--serif);
  letter-spacing: 0;
}

.hg-article-deck {
  max-width: 720px;
  margin: 22px 0 34px;
  color: var(--muted);
  font: 400 clamp(1rem, 1.35vw, 1.15rem)/1.65 var(--sans);
}

.hg-article-hero-image {
  margin: 0;
}

.hg-article-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: cover;
  object-position: center;
  border-radius: 7px;
}

.hg-article-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 720px);
  gap: clamp(40px, 8vw, 120px);
  justify-content: center;
  padding-bottom: 96px;
}

.hg-article-toc {
  align-self: start;
  position: sticky;
  top: 24px;
  display: grid;
  gap: 10px;
  padding-top: 6px;
  font: .76rem/1.45 var(--sans);
}

.hg-article-toc p {
  margin: 0 0 8px;
  color: var(--ink);
  font: 500 1.2rem/1.1 var(--serif);
}

.hg-article-toc a { color: var(--muted); }
.hg-article-toc a:hover { color: var(--gold); }

.hg-article-content {
  min-width: 0;
  font: 400 1rem/1.75 var(--sans);
}

.hg-article-content > p { margin: 0 0 1.2rem; }

.hg-article-lead {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.48rem;
  line-height: 1.45;
}

.hg-article-section {
  margin-top: 76px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.hg-article-section-alt {
  padding: 30px clamp(20px, 4vw, 46px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.hg-article-section h2,
.hg-article-closing h2,
.hg-article-products h2,
.hg-article-faq h2 {
  margin: 0 0 20px;
  font: 500 clamp(1.9rem, 3vw, 2.55rem)/1.08 var(--serif);
  letter-spacing: 0;
}

.hg-article-section p { margin: 0 0 18px; }

.hg-article-note {
  margin-top: 26px;
  padding: 18px 20px 16px;
  border-left: 2px solid var(--gold);
  background: rgba(243, 236, 223, .62);
}

.hg-article-note h3 {
  margin: 0 0 5px;
  color: var(--gold);
  font: 700 .72rem/1.4 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hg-article-note p { margin: 0; color: var(--muted); }

.hg-article-note-curated {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 24px;
  align-items: center;
}

.hg-article-note-curated .hg-article-curated-disclosure {
  grid-column: 1 / -1;
}

.hg-article-note.hg-article-note-curated .hg-article-curated-image {
  margin: 0;
  justify-self: end;
}

@media (max-width: 600px) {
  .hg-article-note-curated { grid-template-columns: minmax(0, 1fr); }
  .hg-article-note-curated .hg-article-curated-image { justify-self: center; }
}

.hg-article-note .hg-article-curated-image {
  display: block;
  width: min(100%, 300px);
  margin: 22px auto 16px;
}

.hg-article-note .hg-article-curated-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.hg-article-note .hg-article-curated-disclosure {
  font: 400 .78rem/1.6 var(--sans);
  color: var(--muted);
}

.hg-article-closing,
.hg-article-products,
.hg-article-faq {
  margin-top: 86px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.hg-article-closing { padding-bottom: 14px; }

.hg-article-products {
  padding: 32px clamp(20px, 4vw, 42px);
  background: var(--plum);
  color: var(--paper);
  border-radius: 7px;
}

.hg-article-products h2 { color: var(--paper); }
.hg-article-products .hg-article-kicker { color: var(--gold-light); }
.hg-article-products p { max-width: 680px; margin: 0 0 14px; color: rgba(255,253,249,.78); }

.hg-article-faq details {
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.hg-article-faq details:last-of-type { border-bottom: 1px solid var(--line); }

.hg-article-faq summary {
  cursor: pointer;
  padding-right: 28px;
  color: var(--ink);
  font: 500 1.2rem/1.25 var(--serif);
}

.hg-article-faq details p { max-width: 650px; margin: 14px 0 0; color: var(--muted); }

.hg-article-backlink {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  margin-top: 42px;
  color: var(--plum);
  font: 700 .76rem/1.4 var(--sans);
  letter-spacing: .05em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .hg-article-layout { grid-template-columns: 1fr; gap: 24px; }
  .hg-article-toc { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px 0; border-block: 1px solid var(--line); }
  .hg-article-toc p { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .hg-article { width: min(100% - 32px, 1180px); }
  .hg-article-hero { padding-block: 30px 36px; }
  .hg-article-breadcrumb { margin-bottom: 30px; }
  .hg-article-hero h1 { font-size: 2.45rem; }
  .hg-article-deck { margin-block: 16px 24px; font-size: 1rem; }
  .hg-article-hero-image img { max-height: 235px; }
  .hg-article-layout { padding-bottom: 62px; }
  .hg-article-lead { font-size: 1.3rem; }
  .hg-article-section { margin-top: 54px; }
  .hg-article-section-alt { padding: 22px 18px; }
  .hg-article-closing, .hg-article-products, .hg-article-faq { margin-top: 60px; }
  .hg-article-faq summary { font-size: 1.1rem; }
}