.guide-container {
  width: calc(100% - var(--gutter) - var(--gutter));
  max-width: 1440px;
  margin-inline: auto;
}

.producer-guide-band {
  background: #eef1f0;
  color: #202724;
  padding: 80px 0;
}

.producer-guide-band .section-label {
  color: #8b392a;
}

.producer-guide-intro {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: end;
}

.producer-guide-intro h2 {
  font-size: 36px;
  line-height: 1.15;
  margin: 0;
}

.producer-guide-intro p {
  margin: 0;
  max-width: 600px;
  color: #56605d;
  font-size: 17px;
  line-height: 1.65;
}

.producer-guide-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 36px;
}

.producer-guide-grid a {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  min-height: 234px;
  border: 1px solid #cdd3d0;
  border-radius: 4px;
  background: #fff;
  transition: border-color 160ms ease, background 160ms ease;
}

.producer-guide-grid a:hover,
.producer-guide-grid a:focus-visible {
  border-color: #944332;
  background: #f8fbfa;
}

.producer-guide-grid span {
  color: #944332;
  font-size: 13px;
  font-weight: 750;
}

.producer-guide-grid strong {
  font-size: 21px;
  line-height: 1.25;
}

.producer-guide-grid small {
  color: #59635f;
  font-size: 15px;
  line-height: 1.6;
}

.guide-page {
  background: #f4f5f4;
  color: #252c28;
  color-scheme: light;
}

.guide-page *,
.producer-guide-band * {
  letter-spacing: 0;
}

.guide-page h1,
.guide-page h2 {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

.guide-hero {
  position: relative;
  isolation: isolate;
  min-height: min(680px, calc(100svh - 140px));
  display: flex;
  align-items: end;
  padding: 142px 0 64px;
  color: #fff;
  background: #282f30;
}

.guide-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.guide-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(12, 22, 24, .83), rgba(12, 22, 24, .3));
}

.guide-back {
  display: inline-block;
  color: #f0c89d;
  font-size: 14px;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.guide-hero h1 {
  margin: 22px 0;
  max-width: 960px;
  font-size: 56px;
  line-height: 1.08;
}

.guide-lead {
  max-width: 760px;
  font-size: 19px;
  line-height: 1.6;
  color: #e3e6e4;
  margin: 0 0 28px;
}

.guide-edition {
  background: #e7ece9;
  border-bottom: 1px solid #d2dad5;
  padding: 26px 0;
}

.guide-edition .guide-container {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 32px;
}

.guide-edition strong {
  font-size: 14px;
  color: #475d52;
}

.guide-edition p {
  margin: 0;
  max-width: 960px;
  color: #505d56;
  font-size: 15px;
  line-height: 1.6;
}

.guide-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  padding: 24px 0;
  border-bottom: 1px solid #d2d8d4;
}

.guide-topics a {
  padding: 8px 0;
  font-size: 15px;
  color: #526258;
}

.guide-topics a[aria-current],
.guide-topics a:hover {
  color: #963e2c;
  text-decoration: underline;
  text-underline-offset: 8px;
}

.guide-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 72px;
  align-items: start;
  padding-block: 64px 80px;
}

.guide-sidebar {
  position: sticky;
  top: 100px;
  max-height: calc(100svh - 130px);
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 20px;
}

.guide-sidebar summary {
  cursor: pointer;
  font-size: 15px;
  font-weight: 750;
  padding-bottom: 16px;
}

.guide-sidebar nav {
  display: grid;
  gap: 12px;
}

.guide-sidebar a {
  color: #526056;
  font-size: 14px;
  line-height: 1.5;
}

.guide-sidebar a:hover,
.guide-sidebar a:focus-visible {
  color: #963e2c;
  text-decoration: underline;
}

.guide-related {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid #d2d8d4;
}

.guide-related strong {
  font-size: 15px;
}

.guide-content {
  min-width: 0;
  max-width: 980px;
}

.guide-intro h2 {
  margin: 0 0 28px;
  font-size: 32px;
  line-height: 1.2;
}

.guide-content p,
.guide-content li {
  font-size: 17px;
  line-height: 1.8;
  color: #515a54;
}

.guide-content p {
  margin: 0 0 20px;
}

.guide-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  border-block: 1px solid #c9d3cc;
  padding-block: 24px;
  margin: 36px 0;
}

.guide-meta-grid strong {
  display: block;
  color: #356951;
  font-size: 27px;
  line-height: 1.25;
  margin-bottom: 12px;
}

.guide-meta-grid span {
  color: #59635c;
  font-size: 14px;
  line-height: 1.6;
}

.guide-callout {
  padding: 8px 0 8px 24px;
  border-left: 3px solid #b7573c;
  margin-bottom: 36px;
}

.guide-callout strong {
  font-size: 16px;
}

.guide-callout p {
  margin: 12px 0 0;
}

.guide-answer {
  border-top: 1px solid #d2d8d4;
  padding: 32px 0;
  scroll-margin-top: 100px;
}

.guide-answer h2 {
  font-size: 25px;
  line-height: 1.3;
  margin: 0 0 18px;
}

.guide-answer p:last-child {
  margin-bottom: 0;
}

.guide-answer ul {
  display: grid;
  gap: 12px;
  padding-left: 22px;
  margin: 20px 0 0;
}

.guide-sources a,
.guide-group-note a {
  color: #326249;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.guide-group-note {
  padding-top: 28px;
  border-top: 2px solid #aabdb0;
}

.guide-group-note > a {
  display: inline-block;
  margin-bottom: 20px;
}

.guide-content .guide-disclaimer {
  font-size: 14px;
  color: #68756d;
}

.guide-contact {
  background: #1e2925;
  color: #fff;
  padding: 56px 0;
}

.guide-contact .guide-container {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  align-items: center;
}

.guide-contact h2 {
  font-size: 32px;
  margin: 0;
}

.guide-contact a {
  display: block;
  font-size: 17px;
  margin: 8px 0;
  text-decoration: underline;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}

.main-nav a[aria-current="page"] {
  color: var(--gold);
}

@media (min-width: 881px) and (max-width: 1120px) {
  .main-nav { gap: 16px; font-size: 13px; }
  .site-header { gap: 16px; padding-inline: 24px; }
}

@media (max-width: 1100px) {
  .producer-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .producer-guide-intro { gap: 32px; }
  .guide-shell { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
  .guide-hero h1 { font-size: 44px; max-width: 820px; }
}

@media (max-width: 880px) {
  .guide-shell { grid-template-columns: 1fr; gap: 36px; padding-block: 36px 56px; }
  .guide-sidebar { position: static; max-height: none; padding: 0 0 24px; border-bottom: 1px solid #d2d8d4; }
  .guide-sidebar .guide-related { display: none; }
  .producer-guide-intro { grid-template-columns: 1fr; gap: 24px; }
  .guide-edition .guide-container { grid-template-columns: 1fr; gap: 12px; }
  .guide-contact .guide-container { align-items: start; flex-direction: column; }
}

@media (max-width: 600px) {
  .guide-container { width: calc(100% - 40px); }
  .guide-hero { min-height: 0; padding: 122px 0 44px; }
  .guide-hero h1 { font-size: 34px; }
  .guide-hero-image { object-position: 60% center; }
  .guide-lead { font-size: 17px; }
  .guide-hero .button { min-width: 0; width: 100%; }
  .guide-topics { column-gap: 24px; }
  .producer-guide-band { padding-block: 56px; }
  .producer-guide-grid { grid-template-columns: 1fr; gap: 12px; }
  .producer-guide-grid a { min-height: 0; padding: 24px; }
  .producer-guide-intro h2, .guide-contact h2 { font-size: 29px; }
  .guide-intro h2 { font-size: 27px; }
  .guide-answer h2 { font-size: 23px; }
  .guide-content p, .guide-content li { font-size: 16px; }
  .guide-meta-grid { grid-template-columns: 1fr; gap: 20px; }
  .guide-meta-grid > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; }
  .guide-meta-grid strong { font-size: 22px; }
}

@media (max-width: 360px) {
  .guide-hero h1 { font-size: 29px; }
  .guide-intro h2 { font-size: 25px; }
  .guide-answer h2 { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .producer-guide-grid a { transition: none; }
}