/* Feature article layout — the approved magazine treatment, made reusable.

   hay-guide.css and bunny-names.css were written one page at a time, so every
   new article started from the plain template and drifted. This file is the
   same proven pattern with page-neutral names, so any standard article can opt
   in instead of growing another stylesheet.

   To use it, add class="feature-article" to the <html> element and link this
   file AFTER rh-styles-e6.css. All colors come from the shared tokens, so both
   themes and the reader's manual toggle keep working with no extra work.

   Pages using it: articles/timothy-hay.html.
   hay-guide and bunny-names keep their own files — they carry components this
   layout does not have (the fiber chart, the searchable names directory). */

.feature-article .site-wrapper { max-width: 1280px; box-shadow: 0 4px 28px #302b1810; }
.feature-article main > section { padding: 44px clamp(20px, 4vw, 60px) 56px; }
.feature-article .article-page { max-width: 1160px; }

/* A hub converted to the feature layout should let its browsing grid use the
   same full-width canvas as the split hero. Plain hubs keep the shared
   .hub-grid max-width of 1000px from rh-styles-e6.css. */
.feature-article .hub-grid { max-width: none; }

/* ---- Split hero: the intro sits beside the cover instead of under it ---- */
.feature-article .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;
}
.feature-article .article-eyebrow { margin-bottom: 16px; }
.feature-article .article-eyebrow a {
  color: var(--green-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--border-accent);
}
.feature-article .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;
}
.feature-article .article-meta { font-size: 0.84rem; }
.feature-article .article-meta::after { display: none; }
.feature-article .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;
}
.feature-article .article-cover {
  width: 100%;
  height: 100%;
  min-height: 440px;
  /* A long title makes the text column tall, and without a cap the cover
     stretches with it and crops down to an extreme close-up. */
  max-height: 560px;
  max-width: none;
  aspect-ratio: auto;
  object-fit: cover;
  /* Art direction per page: set --cover-position on the img when the subject
     is off-center, e.g. style="--cover-position: 32% center". */
  object-position: var(--cover-position, center);
  margin: 0;
  border: 0;
  border-radius: 14px;
  box-shadow: none;
}

/* ---- Reading column with room for full-width components beside it ----
   Prose stays in the middle track at a comfortable measure; anything marked
   .feature-wide spans the whole page. */
.feature-article .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;
}
.feature-article .article-body > * { grid-column: 2; min-width: 0; }
.feature-article .article-body > .feature-wide { grid-column: 1 / -1; }
.feature-article .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;
}
.feature-article .article-body > h2 {
  border-top: 1px solid var(--card-border);
  padding-top: 28px;
  margin: 30px 0 18px;
  scroll-margin-top: 24px;
}
.feature-article .article-tldr {
  border: 1px solid var(--card-border);
  background: var(--bg-soft);
  border-radius: 10px;
  padding: 26px clamp(22px, 3.5vw, 44px);
  margin: 0;
}
.feature-article .article-tldr h2 {
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 1.65rem;
  margin: 0 0 12px;
}
.feature-article .article-tldr p { font-size: 1.0625rem; line-height: 1.75; max-width: 100ch; }

/* Short guides move straight from the full-width Quick Answer into prose.
   Restore the same breathing room that longer guides receive from feature-nav. */
.feature-article .article-tldr.feature-wide + p { margin-top: 28px; }

/* ---- Illustration chip: the shared surface behind every drawing ---- */
.feature-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 can paint a hairline of the chip
     color back over its own edges in dark mode — see the note below. */
  --chip-bg: var(--hay-chip);
  background: var(--chip-bg);
  color: var(--green-ink);
}
.feature-chip--warm { --chip-bg: var(--hay-chip-warm); }
.feature-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 makes 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) {
  .feature-article:not([data-theme="light"]) .feature-illustration {
    stroke: var(--chip-bg);
    stroke-width: 0.6px;
    vector-effect: non-scaling-stroke;
  }
}
.feature-article[data-theme="dark"] .feature-illustration {
  stroke: var(--chip-bg);
  stroke-width: 0.6px;
  vector-effect: non-scaling-stroke;
}

/* ---- "In this guide" section links ---- */
.feature-nav { margin: 30px 0 42px; }
.feature-article .feature-nav h2 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 0;
  padding: 0;
  margin: 0 0 14px;
}
.feature-article .feature-nav ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.feature-article .feature-nav li { margin: 0; }
/* Two classes on purpose: the shared `.article-body li a` rule underlines every
   in-article list link, and a single-class selector here would lose to it and
   underline the card captions. This is gotcha #2 in the production plan. */
.feature-article .feature-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;
}
.feature-article .feature-nav-title {
  margin-top: 5px;
  /* Even out two-line titles so the arrow never sits alone on a line */
  text-wrap: balance;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--border-accent);
}
.feature-article .feature-nav-description { color: var(--text-soft); font-weight: 400; font-size: 0.86rem; line-height: 1.45; }
.feature-article .feature-nav a:hover .feature-nav-title { text-decoration-color: currentColor; }
.feature-article .feature-nav a:hover .feature-chip { box-shadow: inset 0 0 0 2px var(--green-ink); }

/* ---- Numbered cards, for ordered comparisons the prose would flatten ---- */
.feature-article .feature-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 8px 0 34px;
  padding: 0;
  list-style: none;
}
.feature-article .feature-cards li {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 24px 26px 26px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--bg-card);
}
.feature-card-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4em;
  height: 2.4em;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--hay-chip);
  color: var(--green-ink);
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}
.feature-article .feature-cards li:nth-child(even) .feature-card-num { background: var(--hay-chip-warm); }
.feature-article .feature-cards strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--green-ink);
  margin-bottom: 8px;
}
.feature-article .feature-cards p { font-size: 0.95rem; line-height: 1.65; margin: 0; }

/* ---- Shared odds and ends ---- */
.feature-article .article-figure { width: 100%; max-width: 960px; justify-self: center; margin: 26px 0 34px; }
.feature-article .article-figure img { max-width: none; box-shadow: none; }
.feature-article .article-figure figcaption { max-width: 760px; margin: 12px auto 0; line-height: 1.6; text-align: left; }
.feature-article :is(.article-tip, .article-caution, .article-takeaways, .experience-box) { padding: 26px 28px; margin: 24px 0; }
.feature-article :is(.article-tip, .article-caution, .experience-box) > p:last-child { margin-bottom: 0; }
.feature-article .article-takeaways h2 { font-size: 1.65rem; }
.feature-article .article-signup h2 { font-size: 1.65rem; }
.feature-article .article-signup input[type="email"] { min-width: 0; flex: 1; }
.feature-article :is(a, button, input, [tabindex]):focus-visible { outline: 3px solid var(--green-ink); outline-offset: 5px; }
.feature-article footer :is(a, button, input):focus-visible { outline-color: var(--footer-accent); }

/* ---- Tablet ---- */
@media (max-width: 900px) {
  .feature-article .article-head { grid-template-columns: 1fr; gap: 26px; }
  .feature-article .article-cover { min-height: 0; aspect-ratio: 16 / 9; }
  .feature-article .article-body { display: block; max-width: 760px; margin: 0 auto; }
  .feature-article .feature-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-article .feature-cards { grid-template-columns: 1fr; gap: 16px; }
}

/* ---- Phone ---- */
@media (max-width: 600px) {
  /* Keep the shared theme button inside the narrow feature-page header.
     The base mobile nav is wider than the space left beside the 44px button. */
  .feature-article body > .site-wrapper > header { position: relative; }
  .feature-article .header-right { justify-content: center; }
  .feature-article .theme-toggle { position: absolute; top: 12px; right: 12px; }
  .feature-article main > section { padding: 30px 20px 40px; }
  .feature-article .feature-chip { min-height: 8em; padding: 1em 0.65em; }
  .feature-article .feature-illustration { height: 5.6em; }
  .feature-article .article-tldr { padding: 22px 20px; }
  .feature-article .feature-cards li { padding: 20px 20px 22px; }
}

/* ---- Small phone (matches the Hay Guide card menu) ---- */
@media (max-width: 360px) {
  .feature-article .feature-nav ul { column-gap: 12px; }
  .feature-article .feature-nav a { font-size: 0.94rem; }
}