/* Hay-guide editorial layout and typography.
   All light/dark palette values now live in rh-styles-e6.css.
   The original SVG artwork remains unchanged. */
.hay-guide .site-wrapper { max-width: 1280px; box-shadow: 0 4px 28px #302b1810; }
.hay-guide main > section { padding: 44px clamp(20px, 4vw, 60px) 56px; }
.hay-guide .article-page { max-width: 1160px; }
.hay-guide .article-head {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
  text-align: left;
  margin-bottom: 40px;
}
.hay-guide .article-eyebrow { margin-bottom: 16px; }
.hay-guide .article-eyebrow a {
  color: var(--green-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--border-accent);
}
.hay-guide .article-title {
  font-family: var(--font-heading);
  font-size: clamp(2.3rem, 3.5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-wrap: balance;
  margin-bottom: 22px;
}
.hay-guide .article-meta { font-size: 0.84rem; }
.hay-guide .article-meta::after { display: none; }
.hay-guide .article-dek {
  font-family: var(--font-heading);
  color: var(--text-body);
  font-size: 1.18rem;
  line-height: 1.65;
  font-style: normal;
  margin: 24px 0 0;
}
.hay-guide .article-cover {
  width: 100%;
  height: 100%;
  min-height: 440px;
  max-width: none;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 64% center;
  margin: 0;
  border: 0;
  border-radius: 14px;
  box-shadow: none;
}
.hay-guide .article-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 760px) minmax(0, 1fr);
  max-width: none;
  font-size: 1.0625rem;
  line-height: 1.8;
}
.hay-guide .article-body > * { grid-column: 2; min-width: 0; }
.hay-guide .article-body > .hay-wide { grid-column: 1 / -1; }
.hay-guide .article-body h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.55rem, 2.2vw, 1.85rem);
  letter-spacing: -0.01em;
  line-height: 1.34;
  text-wrap: balance;
}
.hay-guide .article-body > h2 {
  border-top: 1px solid var(--card-border);
  padding-top: 28px;
  margin: 30px 0 18px;
  scroll-margin-top: 24px;
}
.hay-guide .article-tldr {
  border: 1px solid var(--card-border);
  background: var(--bg-soft);
  border-radius: 10px;
  padding: 26px clamp(22px, 3.5vw, 44px);
  margin: 0;
}
.hay-guide .article-tldr h2 {
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 1.65rem;
  margin: 0 0 12px;
}
.hay-guide .article-tldr p { font-size: 1rem; line-height: 1.75; max-width: 100ch; }

/* Large artwork with its own surface and a short caption.
   These drawings never serve as inline bullets or heading ornaments. */
.hay-guide .hay-guide-nav { margin: 30px 0 42px; }
.hay-guide .hay-guide-nav h2 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 18px;
  color: var(--text-soft);
}
.hay-guide .hay-guide-nav ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.hay-guide .hay-guide-nav li { margin: 0; }
.hay-guide .hay-guide-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  height: 100%;
  color: var(--green-ink);
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
}
.hay-guide .hay-art-chip {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 9.5em;
  padding: 1.25em;
  border-radius: 10px;
  /* Exposed as a variable so the artwork inside can paint a hairline of the
     chip color back over its own edges in dark mode. */
  --chip-bg: var(--hay-chip);
  background: var(--chip-bg);
  color: var(--green-ink);
}
.hay-guide .hay-guide-nav li:nth-child(even) .hay-art-chip { --chip-bg: var(--hay-chip-warm); }
.hay-guide .hay-illustration {
  display: block;
  flex: 0 0 auto;
  height: 6.5em;
  width: auto;
  max-width: 100%;
  fill: currentColor;
}
/* The artwork is filled line art, so it carries the same geometry in both
   themes. Pale ink on a dark chip optically blooms, though, which is why the
   icons read as outlined and heavier after dark. Painting a hairline of the
   chip color over the edges trims that bloom back so the perceived stroke
   weight matches the light-mode drawing. Kept in screen pixels via
   non-scaling-stroke so it holds at every icon size. */
@media (prefers-color-scheme: dark) {
  .hay-guide:not([data-theme="light"]) .hay-illustration {
    stroke: var(--chip-bg);
    stroke-width: 0.6px;
    vector-effect: non-scaling-stroke;
  }
}
.hay-guide[data-theme="dark"] .hay-illustration {
  stroke: var(--chip-bg);
  stroke-width: 0.6px;
  vector-effect: non-scaling-stroke;
}
.hay-guide .hay-nav-title { margin-top: 5px; text-wrap: balance; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--border-accent); }
.hay-guide .hay-nav-description { color: var(--text-soft); font-weight: 400; font-size: 0.86rem; line-height: 1.45; }
.hay-guide .hay-guide-nav a:hover .hay-nav-title { text-decoration-color: currentColor; }
.hay-guide .hay-guide-nav a:hover .hay-art-chip { box-shadow: inset 0 0 0 2px var(--green-ink); }
.hay-guide :is(a, button, input, [tabindex]):focus-visible { outline: 3px solid var(--green-ink); outline-offset: 5px; }
.hay-guide footer :is(a, button, input):focus-visible { outline-color: var(--footer-accent); }

.hay-guide .article-body .hay-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 16px 0 32px;
  padding: 0;
  list-style: none;
}
.hay-guide .hay-benefits li {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  text-align: center;
}
.hay-guide .hay-benefits .hay-art-chip { width: 9em; min-height: 9em; margin-bottom: 14px; }
.hay-guide .hay-benefits strong { font-family: var(--font-heading); font-size: 1.4rem; color: var(--green-ink); }
.hay-guide .hay-benefits p { font-size: 0.94rem; line-height: 1.65; max-width: 26ch; margin: 6px auto 0; }

.hay-guide .article-figure { width: 100%; max-width: 960px; justify-self: center; margin: 26px 0 34px; }
.hay-guide .article-figure img { max-width: none; box-shadow: none; }
.hay-guide .article-figure figcaption { max-width: 760px; margin: 12px auto 0; line-height: 1.6; text-align: left; }
.hay-guide .hay-table-scroll { overflow-x: auto; max-width: 100%; margin-bottom: 24px; }
.hay-guide .hay-table-scroll table { display: table; min-width: 650px; margin: 0; font-size: 0.94rem; line-height: 1.6; }
.hay-guide .hay-table-scroll th { font-size: 0.9rem; }
.hay-guide .hay-table-scroll tbody tr:nth-child(even) { background: var(--bg-soft); }
.hay-guide .table-swipe-cue { display: none; }
.hay-guide .fiber-chart { margin: 22px 0; }
.hay-guide .fiber-chart .hay-table-scroll { margin-bottom: 16px; }
.hay-guide .fiber-terms { max-width: 760px; margin: 0 auto; }
.hay-guide .fiber-range { background: var(--green-ink); }
.hay-guide .alfalfa-bar { background: var(--oat-hay); }
.hay-guide :is(.article-tip, .article-caution, .article-takeaways) { padding: 26px 28px; margin: 24px 0; }
.hay-guide :is(.article-tip, .article-caution) > p:last-child { margin-bottom: 0; }
.hay-guide .article-takeaways h2 { font-size: 1.65rem; }
.hay-guide .article-signup h2 { font-size: 1.65rem; }
.hay-guide .article-signup input[type="email"] { min-width: 0; flex: 1; }
.hay-guide .article-signup button { cursor: pointer; }
.hay-guide .article-sources h2, .hay-guide .related-reading h2 { font-size: 1.5rem; }
.hay-guide .page-sponsor { max-width: 760px; margin-inline: auto; }

@media (max-width: 850px) {
  .hay-guide .article-head { grid-template-columns: 1fr; gap: 28px; }
  .hay-guide .article-title { max-width: 17ch; font-size: clamp(2.4rem, 6vw, 3.5rem); }
  .hay-guide .article-cover { min-height: 0; height: auto; aspect-ratio: 16 / 9; }
  .hay-guide .article-dek { max-width: 60ch; }
}

@media (max-width: 600px) {
  .hay-guide .table-swipe-cue {
    display: block;
    margin: 10px 0 8px;
    color: var(--green-ink);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
  }
}

@media (max-width: 600px) {
  .hay-guide .site-wrapper { width: 100%; margin: 0; }
  .hay-guide main > section { padding: 30px 20px 40px; }
  .hay-guide .header-right { gap: 12px; }
  .hay-guide .header-right nav ul { gap: 12px; }
  .hay-guide .header-right nav a { font-size: 0.78rem; }
  .hay-guide .article-dek { font-size: 1.1rem; }
  .hay-guide .article-meta { line-height: 1.9; }
  .hay-guide .article-body { font-size: 1rem; line-height: 1.8; }
  .hay-guide .hay-guide-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .hay-guide .hay-guide-nav a { font-size: 0.94rem; }
  .hay-guide .hay-art-chip { padding: 1em 0.65em; }
  .hay-guide .hay-guide-nav .hay-illustration { height: 7em; }
  .hay-guide .article-body .hay-benefits { grid-template-columns: 1fr; gap: 20px; }
  .hay-guide .hay-benefits li { flex-direction: row; gap: 20px; text-align: left; }
  .hay-guide .hay-benefits .hay-art-chip { width: 8em; min-height: 8em; margin: 0; }
  .hay-guide .hay-benefits p { margin: 6px 0 0; }
  .hay-guide .article-tldr { padding: 22px; }
  .hay-guide :is(.article-tip, .article-caution, .article-takeaways) { padding: 22px; }
  .hay-guide .article-signup { padding: 22px 18px; }
  .hay-guide .article-signup form { flex-direction: column; gap: 10px; }
  .hay-guide .article-signup :is(input[type="email"], button[type="submit"]) { width: 100%; border-radius: 5px; min-height: 44px; }
}

@media (max-width: 360px) {
  .hay-guide main > section { padding-inline: 16px; }
  .hay-guide .hay-guide-nav ul { gap: 22px 12px; }
  .hay-guide .hay-benefits li { gap: 14px; }
  .hay-guide .hay-benefits .hay-art-chip { width: 7.5em; }
  .hay-guide .header-right nav ul { gap: 10px; }
}

@media print {
  .hay-guide .site-wrapper { width: 100%; margin: 0; box-shadow: none; }
  .hay-guide .article-head { grid-template-columns: 1fr; }
  .hay-guide .article-cover { height: auto; min-height: 0; max-height: 300px; }
  .hay-guide .article-body { display: block; }
  .hay-guide .hay-table-scroll { overflow: visible; }
  .hay-guide .hay-table-scroll table { min-width: 0; font-size: 9pt; }
  .hay-guide :is(.hay-guide-nav, .theme-toggle, .article-signup, .page-sponsor) { display: none; }
  .hay-guide .hay-benefits { break-inside: avoid; }
}