/* Shared web fonts. The requested ranges cover every weight/style used here;
   display=swap keeps text visible while the files arrive. */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400..800;1,14..32,400..800&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

/* ===================================
   THE RABBIT HUTCH — Main Stylesheet
   (e6 — editorial weight for the Story Library: a subtle
    "start here" spotlight on the featured story, and a
    kicker style for the section eyebrow. Stories are the
    moat; this gives them importance, not decoration.)
   =================================== */

/* --- Resets & Base --- */
*, *::before, *::after { box-sizing: border-box; }

/* ===================================
   COLOR SYSTEM
   One place to change a color and have it
   ripple through the whole site. Everything
   below this block references these tokens
   instead of hard-coded hex values.
   =================================== */
:root {
  color-scheme: light dark;

  /* Shared typography: consistent web fonts first, resilient local fallbacks. */
  --font-heading: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', Arial, sans-serif;

  /* LIGHT PALETTE — warm ivory and woodland green.
     Main logo: #344c28. Dark-background logo: #c1d1a3.
     Keep green-main for accents; use green-ink for readable text. */
  --green-main: #70824b;
  --green-hover: #4b6135;
  --green-deep: #42572e;
  --green-ink: #344c28;
  --green-ink-hover: #263a1d;
  --green-badge-bg: #e8ecd9;
  --text-dark: #1f2a10;
  --text-body: #30332b;
  --text-soft: #51564a;
  --text-muted: #616455;
  --bg-page: #ede9df;
  --bg-card: #fcfaf4;
  --bg-soft: #eeeee0;
  --bg-raised: #fffdf8;
  --oat-hay: #a88d55;
  --blueberry-dusk: #355e84;
  --border-soft: #dedbcb;
  --border-accent: #9b9f7d;
  --card-border: #d8d8c5;
  --card-shadow: 0 2px 5px rgba(72,54,28,0.09);
  --card-shadow-hover: 0 8px 20px rgba(72,54,28,0.14);
  --featured-edge: rgba(198,154,53,0.70);
  --featured-ring: rgba(198,154,53,0.20);
  --hay-chip: #e8ecd9;
  --hay-chip-warm: #f1e9d8;
  --caution-accent: #70824b;
  /* Caution bunny: cream disc, tonal ring a few steps deeper than the disc so
     the edge stays defined against the caution box without a hard outline.
     Alternates in the same family: sage #c6d2ac, pale yellow #f4d183,
     mint #c7dacb, oat #e9dccb. */
  --caution-art-bg: #f3e3c5;
  --caution-art-ink: #344c28;
  --caution-art-ring: #e2cfa9;
  /* "Coming" and "sponsor" pills: text-dark on oat-hay measures ~4.7:1 in
     light mode, technically AA, but reads muddy next to the page's cream
     tones. Borrow the caution bunny's cream disc instead (~12:1) — same
     family, easier to read. Dark mode already looks right on oat-hay, so
     that value is kept as-is below. */
  --badge-tan-bg: var(--caution-art-bg);
  --footer-bg: #191d17;
  --footer-accent: #c1d1a3;

  /* DARK PALETTE — define each value here once.
     The theme selectors below only map these values, so the device's
     automatic theme and the reader's manual choice cannot drift apart. */
  --dark-green-main: #a5b77e;
  --dark-green-ink: #c1d1a3;
  --dark-green-ink-hover: #dae7c3;
  --dark-green-badge-bg: #a5b77e;
  --dark-text-body: #f0efe4;
  --dark-text-soft: #d0d2c3;
  --dark-text-muted: #bdc2ae;
  --dark-bg-page: #191d17;
  --dark-bg-card: #242b21;
  --dark-bg-soft: #30392a;
  --dark-bg-raised: #35402e;
  --dark-oat-hay: #c7b077;
  --dark-border-soft: #56604b;
  --dark-border-accent: #97a57a;
  --dark-card-border: #56604b;
  --dark-card-shadow: 0 2px 8px rgba(0,0,0,0.35);
  --dark-card-shadow-hover: 0 8px 22px rgba(0,0,0,0.45);
  --dark-featured-edge: rgba(214,178,92,0.55);
  --dark-featured-ring: rgba(214,178,92,0.22);
  --dark-hay-chip: #39452f;
  --dark-hay-chip-warm: #413e2d;
  --dark-caution-accent: #a5b77e;
  /* Muted gold reads warm on the dark caution box without the glare of the
     old cream disc. Alternate: sage #d6e0be. */
  --dark-caution-art-bg: #eebd63;
  --dark-caution-art-ink: #344c28;
  --dark-caution-art-ring: #dfae52;
}

html { font-size: 17px; } /* rem base — scales all rem values site-wide */

body {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.6;
  background-color: var(--bg-page);
  color: var(--text-body);
}

/* Page titles, section headings, and card titles share the editorial face.
   Libre Baskerville is taller than the former Georgia face, so its shared
   line-height leaves comfortable room when a heading wraps. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.3;
}

/* Controls and compact informational labels retain the reading/UI face. */
button, input, select, textarea,
.name-count {
  font-family: var(--font-body);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul { list-style: none; padding: 0; margin: 0; }

a { text-decoration: none; color: var(--green-ink); }
a:hover { text-decoration: underline; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0,0,0,0);
  overflow: hidden;
}

/* --- Site Wrapper (White Card) --- */
.site-wrapper {
  width: 90%;
  max-width: 1200px;
  margin: 20px auto;
  background-color: var(--bg-card);
  padding: 0;
  box-shadow: 0 0 12px rgba(0,0,0,0.07);
}

/* ===================================
   HEADER
   =================================== */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 30px;
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border-soft);
}

.header-left a { display: inline-flex; }

.logo { width: 200px; height: auto; }
/* Real color exports, selected by the same theme rules as the page.
   Display:none keeps the inactive image out of the accessibility tree. */
.logo--dark { display: none; }


nav ul {
  display: flex;
  gap: 24px;
}
nav ul li { list-style-type: none; }   /* Safari nav>ul bullet bug fix — needs explicit li reset, inheritance isn't enough */

nav a {
  color: var(--text-body);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: color 0.2s ease;
}

nav a:hover,
nav a:focus {
  color: var(--green-ink);
  text-decoration: none;
}

/* ===================================
   HERO SECTION (Static Image)
   =================================== */
#hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  /*
   * Cancel the shared `section` padding — without this, the
   * hero photo sits inset from the wrapper and the text overlay
   * gradient paints the padding area grey.
   */
  padding: 0;
  /* Slim brand accent line beneath the hero */
  border-bottom: 4px solid var(--green-main);
}

.hero-image {
  width: 100%;
  height: 480px;
  object-fit: cover;
  /* 25% keeps the top of the rabbit's head in frame on wide screens
     (hero-lop-eared-rabbit-2752x1572-e2.jpg) */
  object-position: center 25%;
  display: block;
}

.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  /* Dark overlay for text readability */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15) 0%,
    rgba(0,0,0,0.45) 100%
  );
}

.hero-content h1 {
  color: #fff;
  font-size: 2.8rem;
  /* Two balanced lines on desktop instead of one edge-to-edge line
     across the rabbit's face */
  max-width: 22ch;
  margin: 0 auto 12px;
  text-wrap: balance;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.hero-content p {
  color: rgba(255,255,255,0.9);
  font-size: 1.15rem;
  margin: 0 0 24px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.hero-buttons {
  display: flex;
  gap: 16px;
}

/* Desktop and tablet: sit the text low so the rabbit's face stays clear.
   Phones (600px and under) keep the centered block. */
@media (min-width: 601px) {
  .hero-content {
    justify-content: flex-end;
    padding-bottom: 36px;
  }
}

/* ===================================
   BUTTONS
   =================================== */
.btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 2px solid rgba(255,255,255,0.8);
  background-color: rgba(255,255,255,0.2);
  color: #fff;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
}

.btn:hover,
.btn:focus {
  background-color: #fff;
  color: var(--green-deep);
  border-color: #fff;
  text-decoration: none;
}

.btn:focus {
  outline: 2px dashed var(--green-main);
  outline-offset: 4px;
}

/*
 * Donate button — solid green variant.
 * Uses --green-deep at rest so white text clears the WCAG AA bar
 * (~8:1). Hover uses the corresponding deep olive tone.
 */
.btn-donate {
  background-color: var(--green-deep);
  color: #fff;
  border-color: var(--green-deep);
}

.btn-donate:hover,
.btn-donate:focus {
  background-color: var(--green-hover);
  border-color: var(--green-hover);
  color: #fff;
}

/* ===================================
   SHARED SECTION STYLES
   =================================== */
section {
  padding: 50px 30px;
}

section h2 {
  text-align: center;
  font-size: 2.05rem;
  color: var(--green-ink);
  margin: 0 0 12px;
}

/* Page titles on about / contact / privacy / stories carry the section-heading
   look while being the page's single <h1>. Deliberately a class rather than
   widening the rule above to `section h1, section h2`: that would set
   text-align directly on the element, overriding the left alignment that
   .hay-guide, .feature-article and .bunny-names article heads pass down to
   their .article-title by inheritance, swinging those split-hero titles
   to center. */
.page-title {
  text-align: center;
  font-size: 2.05rem;
  color: var(--green-ink);
  margin: 0 0 12px;
}

.section-intro {
  text-align: center;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto 36px;
}

/* Editorial kicker (eyebrow) above a section title. It encodes a real
   fact — that these stories are original & illustrated — so it earns
   its place instead of just decorating. Kept quiet (muted, letter-
   spaced) so the green title below stays the hero. */
.library-kicker {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  margin: 0 0 6px;
}

/* ===================================
   ARTICLES SECTION
   =================================== */
#articles {
  background-color: var(--bg-card);
}

/*
 * Grid: 4 cols → 2 cols → 1 col
 * Uses fixed breakpoints to avoid the awkward 3+1 layout.
 */
.article-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.article-grid article {
  background-color: var(--bg-soft);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.article-grid article:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
}

.article-grid a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.article-grid a:hover { text-decoration: none; }

.article-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.article-grid h3 {
  margin: 12px 16px 6px;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--green-ink);
}

.article-grid p {
  margin: 0 16px 8px;
  font-size: 0.9rem;
  color: var(--text-soft);
}

/* ===================================
   STORIES SECTION
   =================================== */
#stories {
  background-color: var(--bg-soft);
}

.stories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.story-card {
  position: relative;
  background-color: var(--bg-raised);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.story-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
}

/*
 * Featured story — the one we quietly suggest readers start with.
 * Not a ribbon, not a giant badge: a soft green ring + a greener edge
 * so the eye lands here first. Visitors won't consciously notice; they
 * just click it more. Scales to "one featured among many" as the
 * library fills out.
 */
.story-card.featured {
  border-color: var(--featured-edge);
  box-shadow: 0 0 0 2px var(--featured-ring), var(--card-shadow);  /* If Gold Glow is wanted, swap this: box-shadow: 0 0 0 2px var(--featured-ring), 0 8px 22px -4px rgba(198,154,53,0.38), var(--card-shadow); */
}

.story-card.featured:hover {
  box-shadow: 0 0 0 2px var(--featured-ring), var(--card-shadow-hover); /* If Gold Glow is wanted, swap this: box-shadow: 0 0 0 2px var(--featured-ring), 0 8px 22px -4px rgba(198,154,53,0.38), var(--card-shadow); */
}

.story-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.story-card a:hover { text-decoration: none; }

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

.story-card h3 {
  margin: 12px 16px 6px;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--green-ink);
}

.story-card p {
  margin: 0 16px 8px;
  font-size: 0.95rem;
  color: var(--text-soft);
}

/* Story badges use a dedicated soft green fill for strong text contrast. */
.story-badge {
  display: inline-block;
  margin: 12px 16px 0;
  background-color: var(--green-badge-bg);
  color: var(--text-dark);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/*
 * Card call-to-action — a small text link at the base of story and article
 * cards. It lives inside the existing <a> (no nested anchors), so it inherits
 * the card's hover lift. Exists purely to give readers a visible invitation;
 * not every visitor recognises that a whole card is clickable.
 */
.card-cta {
  display: block;
  margin: 0 16px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--green-ink);
  letter-spacing: 0.02em;
}
.story-card a:hover .card-cta,
.article-grid a:hover .card-cta {
  text-decoration: underline;
}

/* ===================================
   ICON SYSTEM (currently unused in article content — see note)
   Line-art icons live in images/icons/sprite.svg and images/icons/_original/.
   Markup, when used: <svg class="rh-icon"><use href="/images/icons/sprite.svg#icon-name"></use></svg>

   Every symbol carries fill="currentColor" and no other fill, so an icon
   takes the colour of the text around it and follows light/dark mode for
   free. Never give an icon a hardcoded colour. Sizing is in em, not px.
   viewBoxes are tight-cropped and NOT square, so width is left auto and
   height does the work — and the viewBox must be repeated on the outer
   <svg>, or width:auto falls back to the SVG default of 300px.

   September 2026 — tried twice on the hay-guide article, reverted both
   times, DO NOT reintroduce either pattern without solving the underlying
   mismatch first:
     1st attempt — small icons beside every h2, every Key Takeaways bullet,
     every card CTA. Reverted: at that size a fine-line-drawn icon renders
     under 1px and looks pale and "weedy" next to bold text. Colour/weight
     cannot fix this; it is a size problem.
     2nd attempt — 3 large (2.6em) bold-stroked icons as "drop caps" beside
     the callout-box paragraphs. Also reverted, for a different reason:
     these icons were drawn to pair with a short caption (1–2 lines) inside
     its own colour-chip container, the way an infographic or flyer uses
     them — see the flyer mock-up Lynn shared for reference. A callout box
     here holds a full paragraph (6–8 lines) of nuanced prose that no
     single pictograph can stand in for, and the icon had no chip/frame of
     its own, so next to a paragraph it read as a stray line drawing
     instead of a badge — again, not fixable by resizing or recolouring.

   These icons are not dead — they're well-made and worth using. But their
   native habitat is short, discrete facts in a repeated grid: a "quick
   facts" strip, a hub-page tile, a stat card — icon + one short caption +
   a colour-chip background, several in a row so the pattern reads as a
   deliberate system. That is a real, different component from anything
   built so far and would need new markup and CSS, not a reuse of .rh-icon
   as it exists here. Do not attach an icon to prose again until that
   component exists.
   =================================== */
.rh-icon {
  height: 1em;
  width: auto;
  flex: none;
  vertical-align: -0.14em;   /* optical baseline sit for inline use */
}

/* ===================================
   STORY PAGE LAYOUT
   =================================== */
/* Uses the e6 :root tokens, so it follows light/dark automatically. */
.story-page { max-width: 680px; margin: 0 auto; }
.story-head {
  display: block;           /* overrides header{display:flex} */
  text-align: center;
  margin: 0 auto 30px;
  padding: 0;
  background: transparent;
  border: none;
}
.story-cover {
  display: block; width: 360px; max-width: 85%; margin: 0 auto 24px;
  border-radius: 12px; border: 1px solid var(--card-border); box-shadow: var(--card-shadow);
}
.story-eyebrow {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem;
  font-weight: 700; color: var(--text-muted); margin: 0 0 4px;
}
.story-title { font-size: 2rem; color: var(--green-ink); margin: 0 0 8px; line-height: 1.22; }
.story-byline { font-style: italic; color: var(--text-soft); margin: 0 0 28px; }
.story-byline::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: var(--border-soft);
  margin: 24px auto 0;
}
.story-body { color: var(--text-body); font-size: 1.075rem; line-height: 1.75; }
.story-body p { margin: 0 0 1.15em; }
.story-body h2.chapter {
  text-align: center; color: var(--green-ink); font-size: 1.3rem; margin: 2em 0 1em;
}
.story-body > p:first-of-type::first-letter {
  font-size: 3.1rem; line-height: 0.9; float: left; padding: 4px 8px 0 0;
  color: var(--green-ink); font-weight: 700;
}
.scene-break { border: 0; text-align: center; margin: 1.8em 0; }
.scene-break::before { content: "\00B7 \00B7 \00B7"; letter-spacing: 0.4em; color: var(--green-ink); font-size: 1.1rem; }
.story-coda { text-align: center; color: var(--text-soft); margin-top: 1.6em; }

/* Drop interior illustrations with this pattern wherever you like inside .story-body:
   <figure class="story-figure"><img src="/images/..." alt="..." /><figcaption>Caption</figcaption></figure> */
.story-figure { margin: 1.6em 0; text-align: center; }
.story-figure img { width: 100%; max-width: 520px; border-radius: 10px; border: 1px solid var(--card-border); box-shadow: var(--card-shadow); }
.story-figure figcaption { color: var(--text-muted); font-size: 0.85rem; margin-top: 8px; }
.story-nav { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 2.6em 0 0; padding-top: 1.4em; border-top: 1px solid var(--card-border); }
.story-nav a { color: var(--green-ink); font-weight: 700; text-decoration: none; }
.story-nav a:hover { text-decoration: underline; }

/* ===================================
   ARTICLE PAGE LAYOUT
   Sibling to STORY PAGE LAYOUT above, same bones
   (centered measure, eyebrow, title, divider) but
   tuned for scannable, practical care guides rather
   than read-aloud narrative: real subheads, a
   quick-answer box up top instead of a drop cap,
   and callouts for tips/cautions/takeaways.
   =================================== */
.article-page { max-width: 680px; margin: 0 auto; }

.article-head {
  display: block;
  text-align: center;
  margin: 0 auto 30px;
  padding: 0;
  background: transparent;
  border: none;
}

/* Horizontal hero image — distinct from the portrait .story-cover,
   since these are real-photo headers, not character illustrations. */
.article-cover {
  display: block;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: 0 auto 24px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

.article-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  margin: 0 0 4px;
}

.article-title { font-size: 2rem; color: var(--green-ink); margin: 0 0 10px; line-height: 1.22; }

.article-meta { font-size: 0.9rem; color: var(--text-soft); margin: 0; }
.article-meta::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: var(--border-soft);
  margin: 24px auto 0;
}
.article-meta .meta-divider { margin: 0 8px; color: var(--text-muted); }

.article-body { color: var(--text-body); font-size: 1.05rem; line-height: 1.75; }
.article-body p { margin: 0 0 1.15em; }

/* text-align: left explicitly overrides the global `section h2 {
   text-align: center }` rule — without it, every heading in here
   would inherit that centering, which reads fine for a page title
   but wrong for scannable body subheads. */
.article-body h2 { color: var(--green-ink); font-size: 1.4rem; margin: 1.7em 0 0.6em; line-height: 1.3; text-align: left; }
.article-body h3 { color: var(--green-ink); font-size: 1.15rem; margin: 1.4em 0 0.5em; text-align: left; }

/* The global `ul { list-style:none }` reset (top of file) is right
   for nav/footer chrome but wrong for prose — restore real bullets
   inside article copy. */
/* In-article prose links — brand green, not browser blue */
.article-body p a,
.article-body li a,
.article-body td a,
.article-body figcaption a,
.hutch-notes a {
  color: var(--green-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--border-accent);
}
.article-body p a:hover,
.article-body li a:hover,
.article-body td a:hover,
.article-body figcaption a:hover,
.hutch-notes a:hover {
  color: var(--green-ink-hover);
  text-decoration-color: currentColor;
}

.article-body ul,
.article-body ol { margin: 0 0 1.15em; padding-left: 1.3em; list-style: revert; }
.article-body li { margin-bottom: 0.5em; }

/* Looser list spacing for items long enough to read like short paragraphs —
   each one gets room to breathe instead of the tighter default rhythm above.
   Site-wide as of September 8, 2026 (formerly food-guides.css's
   .food-plain-list, scoped to just the two food guides). */
.article-body .plain-list li { margin-bottom: 18px; }

/* Dek — the one- or two-sentence promise of the piece, set just under
   the title rule. Optional; delete the paragraph if a piece opens
   straight into prose instead. */
.article-dek { font-size: 1.15rem; font-style: italic; color: var(--text-soft); margin: 1.6em 0 1.6em; }

/* Quick-answer box. Use for "how do I…" / "is X safe" style guides
   where a reader may just want the bottom line. Skip it on pieces
   that are more story-like explainers (e.g. "Understanding Bunny
   Behavior") where it would front-run the piece. */
.article-tldr {
  background-color: var(--bg-soft);
  border: 1px solid var(--card-border);
  border-left: 4px solid var(--green-main);
  border-radius: 8px;
  padding: 18px 20px;
  margin: 0 0 1.8em;
}
.article-tldr h2 {
  font-family: var(--font-body);
  margin: 0 0 8px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--green-ink);
}
.article-tldr p,
.article-tldr li { font-size: 1.0625rem; margin-bottom: 0.4em; }
.article-tldr p:last-child,
.article-tldr li:last-child { margin-bottom: 0; }

/* Hutch Tip — short, friendly, actionable aside. */
.article-tip {
  background-color: var(--bg-soft);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 1.6em 0;
}
.article-tip strong {
  display: block;
  color: var(--green-ink);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

/* Caution — same family as .article-tip, with a leafy green accent edge.
   It reads as "slow down here" without turning muddy or alarm-red. Use
   for safety-relevant notes (toxic foods, health red flags, etc.). */
.article-caution {
  background-color: var(--bg-soft);
  border: 1px solid var(--card-border);
  border-left: 4px solid var(--caution-accent);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 1.6em 0;
}
.article-caution strong {
  display: block;
  color: var(--green-ink);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

/* Optional illustrated caution: a circular bunny portrait and short label form a
   separate header above the prose. Reuse on care pages with this modifier.
   Uses the host page's theme tokens; ordinary cautions are unaffected. */
.article-caution--illustrated .caution-heading {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--card-border);
}
.article-caution--illustrated .caution-art {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 8em;
  height: 8em;
  padding: 0.8em;
  background: var(--caution-art-bg);
  color: var(--caution-art-ink);
  border: 2px solid var(--caution-art-ring);
  border-radius: 50%;
}
.article-caution--illustrated .caution-illustration {
  display: block;
  height: 6.4em;
  width: auto;
  max-width: 100%;
  fill: currentColor;
}
.article-caution--illustrated .caution-heading strong {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  line-height: 1.28;
  text-transform: none;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.article-caution--illustrated .caution-subtitle {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-soft);
  margin: 0;
}
.article-caution--illustrated > p:last-child { margin-bottom: 0; }
@media (max-width: 480px) {
  .article-caution--illustrated .caution-heading { gap: 16px; }
  .article-caution--illustrated .caution-art { width: 7em; height: 7em; padding: 0.6em; }
  .article-caution--illustrated .caution-heading strong { font-size: 1.4rem; }
  .article-caution--illustrated .caution-subtitle { font-size: 0.85rem; }
}
/* Small phones: side by side, the bunny portrait leaves the heading about
   100px, so longer words spill out of the box. Stack the portrait above. */
@media (max-width: 370px) {
  .article-caution--illustrated .caution-heading { flex-direction: column; align-items: flex-start; gap: 14px; }
  .article-caution--illustrated .caution-art { width: 5.5em; height: 5.5em; padding: 0.5em; }
}

/* Reuses the story-figure pattern for in-body photos. */
.article-figure { margin: 1.8em 0; text-align: center; }
.article-figure img {
  width: 100%;
  max-width: 520px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}
.article-figure figcaption { color: var(--text-muted); font-size: 0.85rem; margin-top: 8px; }

/* Closing summary box. */
.article-takeaways {
  background-color: var(--bg-soft);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 22px 24px;
  margin: 2em 0;
}
.article-takeaways h2 { margin: 0 0 10px; color: var(--green-ink); font-size: 1.1rem; }
.article-takeaways ul { margin: 0; padding-left: 1.2em; list-style: revert; }
.article-takeaways li { margin-bottom: 0.5em; }

/* Quiet closing nudge toward Support/Subscribe — deliberately not a
   paywall or upsell; matches the "free, with optional support" voice
   used in #support on the homepage. */
.article-support-note { text-align: center; color: var(--text-soft); font-size: 0.95rem; margin: 2.2em 0 0; }
.article-support-note a { color: var(--green-ink); font-weight: 600; }
.article-support-note a:hover { color: var(--green-ink-hover); }

.article-nav { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 2em 0 0; padding-top: 1.4em; border-top: 1px solid var(--card-border); }
.article-nav a { color: var(--green-ink); font-weight: 700; text-decoration: none; }
.article-nav a:hover { text-decoration: underline; }

/*
 * Sponsor slot on narrow single-column pages (articles, and story
 * pages if this pattern gets adopted there too). Deliberately reuses
 * .sponsor-card as-is — same badge, same copy pattern, same visual
 * language as the homepage's #sponsor — so a sponsor looks like one
 * consistent placement across the whole site rather than two
 * different ad treatments. This class only supplies the vertical
 * rhythm the homepage's <section> padding would otherwise provide;
 * .sponsor-card itself needs no page-specific overrides.
 */
.page-sponsor { margin: 2.6em 0; }

@media (max-width: 600px) {
  .article-title { font-size: 1.6rem; }
  .article-body { font-size: 1rem; }
  .article-dek { font-size: 1.05rem; }
}

/* ===================================
   GALLERY SECTION
   =================================== */
#gallery {
  background-color: var(--bg-card);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.gallery-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  transition: transform 0.25s ease;
}

.gallery-grid img:hover {
  transform: scale(1.03);
}

/* ===================================
   SPONSOR SLOT
   One hand-picked sponsor per page.
   Native card styled to match the
   site's article/story cards.
   =================================== */
#sponsor {
  background-color: var(--bg-card);
  padding-top: 0;   /* Gallery above shares the white bg */
}

.sponsor-card {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  background-color: var(--bg-soft);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: 10px;
  padding: 36px 28px 28px;
  text-align: center;
}

/*
 * Sponsor badge — dark text on the caution bunny's cream tone (~12:1 in
 * light mode). White on light khaki was only ~2.1:1, and dark text on
 * khaki itself read as muddy next to the page's cream tones; the cream
 * disc color reads clearly as a badge instead. Dark mode keeps oat-hay,
 * which already looks right there — see --badge-tan-bg.
 */
.sponsor-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background-color: var(--badge-tan-bg);
  color: var(--text-dark);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sponsor-card h2 {
  font-size: 1.3rem;
  color: var(--green-ink);
  margin: 0 0 10px;
}

.sponsor-card p {
  font-size: 0.95rem;
  color: var(--text-soft);
  max-width: 460px;
  margin: 0 auto 16px;
}

.sponsor-card .sponsor-link {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--green-ink);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sponsor-card .sponsor-link:hover {
  color: var(--green-ink-hover);
}

/* ===================================
   SUPPORT SECTION
   =================================== */
#support {
  background-color: var(--bg-card);
}

#support > h2 { margin-bottom: 8px; }
#support > .section-intro { margin-bottom: 40px; }

.support-row {
  display: flex;
  gap: 24px;
  margin-bottom: 30px;
}

.support-col {
  flex: 1 1 0;
  min-width: 0;
}

/* Text column */
.support-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.donation-suggestions {
  columns: 2;
  column-gap: 20px;
}

.donation-suggestions li {
  margin-bottom: 6px;
  font-size: 0.9rem;
  color: var(--text-soft);
  break-inside: avoid;
}

/* Image column with stats overlay */
.support-image {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.support-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stats-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 0;
}

/* Deeper, more opaque green over the photo for crisp white numbers */
.stat {
  flex: 1;
  background-color: rgba(95, 114, 40, 0.92);
  padding: 14px 10px;
  text-align: center;
  color: #fff;
}

.stat-number {
  display: block;
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.1;
}

.stat-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.9;
}

/* Testimonial box */
.testimonial-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--blueberry-dusk);
  color: #fff;
  padding: 30px;
  border-radius: 8px;
}

.testimonial-stars {
  font-size: 1.3rem;
  margin-bottom: 12px;
  color: #e8c75f; /* possible star color choices softest #e8c75f; soft #f4d06f; brightest #ffd54f; */
}

.testimonial-box blockquote {
  margin: 0;
}

.testimonial-box blockquote p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 16px;
  font-style: italic;
}

.testimonial-box blockquote footer {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  padding: 0;
  color: #fff;
}

.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.5);
}

.testimonial-box cite {
  font-style: normal;
  font-weight: 600;
  font-size: 0.9rem;
}

/* ===================================
   ABOUT PAGE PHOTO
   =================================== */

/* about page photo (small, left of text) */
.about-photo {
  float: left;
  width: 150px;            /* small width (keeps aspect ratio) */
  height: auto;
  margin: 4px 16px 12px 0;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}

/* stack the photo above text on narrow viewports */
@media (max-width: 600px) {
  .about-photo {
    float: none;
    margin: 0 0 12px 0;
    width: 120px;         /* a slightly larger, centered photo on mobile */
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===================================
   FOOTER
   =================================== */
footer {
  background-color: var(--footer-bg);
  color: #ccc;
  padding: 40px 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.footer-left,
.footer-center,
.footer-right {
  flex: 1 1 200px;
}

footer h3 {
  margin: 0 0 12px;
  font-size: 1.1rem;
  color: var(--footer-accent);
}

footer p {
  margin: 0 0 8px;
  font-size: 0.9rem;
}

/* Brighter green link tone on the dark footer */
footer a {
  color: var(--footer-accent);
}

footer a:hover { color: #c3d98a; }

/* Footer nav links */
.footer-links li {
  margin-bottom: 8px;
  font-size: 0.9rem;
}

/* Slim full-width bar below the columns */
.footer-bottom {
  flex-basis: 100%;
  border-top: 1px solid #3a3a3a;
  margin-top: 6px;
  padding-top: 20px;
  text-align: center;
}

.footer-bottom p {
  margin: 0;
  font-size: 0.85rem;
  color: #999;
}

footer label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.9rem;
}

footer form {
  display: flex;
  gap: 0;
}

footer form input[type="email"] {
  flex: 1;
  padding: 10px 12px;
  border: none;
  border-radius: 5px 0 0 5px;
  font-size: 0.9rem;
}

footer form button {
  padding: 10px 16px;
  border: none;
  border-radius: 0 5px 5px 0;
  background-color: var(--green-deep);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

footer form button:hover,
footer form button:focus {
  background-color: var(--green-hover);
}

.email-privacy-note-footer {
  font-size: 0.75rem;
  color: #999;
  margin-top: 8px;
  font-style: italic;
}

/*
 * MailerLite embedded form integration.
 * MailerLite's snippet wraps the actual <input>/<button> in several
 * layout divs (its own styling system). We don't want that look —
 * we want our existing footer-form styling (the green button, the
 * joined input/button row) to apply instead.
 *
 * `display: contents` makes each wrapper div invisible to layout
 * (its children become children of its parent) while keeping the
 * element itself in the DOM — which MailerLite's script still needs
 * to find the form and fire the success redirect. The end result:
 * the <form> becomes a direct child of .footer-right, and our
 * `footer form` / `footer form input[type="email"]` / `footer form
 * button` rules above apply exactly as they did for the old form.
 */
.footer-right .ml-form-embedContainer,
.footer-right .ml-form-align-center,
.footer-right .ml-form-embedWrapper,
.footer-right .ml-form-embedBody,
.footer-right .ml-form-formContent,
.footer-right .ml-form-fieldRow,
.footer-right .ml-field-group,
.footer-right .ml-form-embedSubmit {
  display: contents;
}

.footer-right .ml-form-embedContent {
  display: block;
}

.footer-right .ml-form-embedContent h3 {
  margin: 0 0 12px;
}

.footer-right .ml-form-embedContent p {
  margin: 0 0 8px;
}

/* ===================================
   RESPONSIVE — Tablet (≤ 900px)
   =================================== */
@media (max-width: 900px) {
  /* Articles & Gallery: 4 → 2 columns */
  .article-grid,
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-image { height: 380px; }
  .hero-content h1 { font-size: 2.2rem; }

  /* Support rows stack */
  .support-row { flex-direction: column; }

  /* In first row, move the image above the text */
  .support-row:first-of-type .support-image { order: -1; }

  /*
   * Fix for vanishing images when rows stack:
   * flex-basis 0 + overflow:hidden lets the image column
   * collapse to zero height in a column layout. Size the
   * stacked columns from their content instead, and let
   * the images set their own height (capped so an 800x800
   * square doesn't swallow a phone screen).
   */
  .support-col { flex: 1 1 auto; }

  .support-image img {
    height: auto;
    max-height: 440px;
  }

  .donation-suggestions { columns: 2; }
}

/* ===================================
   RESPONSIVE — Mobile (≤ 600px)
   =================================== */
@media (max-width: 600px) {
  /* Header stacks */
  header {
    flex-direction: column;
    gap: 12px;
    padding: 12px 20px;
  }

  .logo { width: 170px; }

  nav ul { gap: 16px; }
  nav a { font-size: 0.85rem; }

  /* Hero stacks: photo on top so the rabbit stays visible, text on a
     logo-green band below (fixed hex so it holds in dark mode too) */
  .hero-image { height: 230px; }
  .hero-content {
    position: static;
    background: #344c28;
    padding: 24px 20px 28px;
  }
  .hero-content h1 { font-size: 1.7rem; }
  .hero-buttons .btn-donate { border-color: rgba(255,255,255,0.35); }
  .hero-content p { font-size: 0.95rem; }
  .hero-buttons { flex-direction: column; gap: 10px; }
  .btn { padding: 10px 24px; font-size: 0.9rem; }

  /* Sections tighten up */
  section { padding: 36px 20px; }
  section h2 { font-size: 1.7rem; }
  /* Mirrors section h2 above - see the .page-title note near the base rule. */
  .page-title { font-size: 1.7rem; }

  /* Articles & Gallery: 2 → 1 column */
  .article-grid,
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  /* Stories: 2 → 1 column */
  .stories-grid { grid-template-columns: 1fr; }

  /* Donation suggestions: single column on small screens */
  .donation-suggestions { columns: 1; }

  /* Footer stacks */
  footer {
    flex-direction: column;
    gap: 24px;
    padding: 30px 20px;
  }

  footer form {
    flex-direction: column;
    gap: 8px;
  }

  footer form input[type="email"] { border-radius: 5px; }
  footer form button { border-radius: 5px; }
}



/* Apply the shared dark palette for either automatic or manual choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --green-main: var(--dark-green-main);
    --green-ink: var(--dark-green-ink);
    --green-ink-hover: var(--dark-green-ink-hover);
    --green-badge-bg: var(--dark-green-badge-bg);
    --text-body: var(--dark-text-body);
    --text-soft: var(--dark-text-soft);
    --text-muted: var(--dark-text-muted);
    --bg-page: var(--dark-bg-page);
    --bg-card: var(--dark-bg-card);
    --bg-soft: var(--dark-bg-soft);
    --bg-raised: var(--dark-bg-raised);
    --oat-hay: var(--dark-oat-hay);
    --border-soft: var(--dark-border-soft);
    --border-accent: var(--dark-border-accent);
    --card-border: var(--dark-card-border);
    --card-shadow: var(--dark-card-shadow);
    --card-shadow-hover: var(--dark-card-shadow-hover);
    --featured-edge: var(--dark-featured-edge);
    --featured-ring: var(--dark-featured-ring);
    --hay-chip: var(--dark-hay-chip);
    --hay-chip-warm: var(--dark-hay-chip-warm);
    --caution-accent: var(--dark-caution-accent);
    --caution-art-bg: var(--dark-caution-art-bg);
    --caution-art-ink: var(--dark-caution-art-ink);
    --caution-art-ring: var(--dark-caution-art-ring);
    --badge-tan-bg: var(--dark-oat-hay);
  }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --green-main: var(--dark-green-main);
  --green-ink: var(--dark-green-ink);
  --green-ink-hover: var(--dark-green-ink-hover);
  --green-badge-bg: var(--dark-green-badge-bg);
  --text-body: var(--dark-text-body);
  --text-soft: var(--dark-text-soft);
  --text-muted: var(--dark-text-muted);
  --bg-page: var(--dark-bg-page);
  --bg-card: var(--dark-bg-card);
  --bg-soft: var(--dark-bg-soft);
  --bg-raised: var(--dark-bg-raised);
  --oat-hay: var(--dark-oat-hay);
  --border-soft: var(--dark-border-soft);
  --border-accent: var(--dark-border-accent);
  --card-border: var(--dark-card-border);
  --card-shadow: var(--dark-card-shadow);
  --card-shadow-hover: var(--dark-card-shadow-hover);
  --featured-edge: var(--dark-featured-edge);
  --featured-ring: var(--dark-featured-ring);
  --hay-chip: var(--dark-hay-chip);
  --hay-chip-warm: var(--dark-hay-chip-warm);
  --caution-accent: var(--dark-caution-accent);
  --caution-art-bg: var(--dark-caution-art-bg);
  --caution-art-ink: var(--dark-caution-art-ink);
  --caution-art-ring: var(--dark-caution-art-ring);
  --badge-tan-bg: var(--dark-oat-hay);
}

html[data-theme="light"] {
  color-scheme: light;
}

/* ===================================
   SHARED CHROME ADDITIONS (e6.1)
   Theme toggle, skip link, hubs,
   experience boxes, related reading,
   Vet Notes cards, comparison tables.
   =================================== */

.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 1000;
  padding: 8px 14px;
  background: var(--green-deep);
  color: #fff;
  font-weight: 700;
  border-radius: 6px;
}
.skip-link:focus {
  top: 12px;
  outline: 2px dashed var(--green-main);
  outline-offset: 3px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.theme-toggle {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  background: var(--bg-soft);
  color: var(--green-ink);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.theme-toggle:hover,
.theme-toggle:focus {
  background: var(--bg-raised);
  border-color: var(--green-main);
  outline: none;
}
.theme-toggle:focus-visible {
  outline: 2px dashed var(--green-main);
  outline-offset: 3px;
}
.theme-toggle svg { width: 20px; height: 20px; display: block; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .logo--light { display: none; }
html[data-theme="dark"] .logo--dark { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
  :root:not([data-theme="light"]) .logo--light { display: none; }
  :root:not([data-theme="light"]) .logo--dark { display: block; }
}

/* Shared message panel — 404, thank-you, subscribe-thanks */
.message-panel {
  max-width: 640px;
  margin: 60px auto;
  padding: 48px 32px;
  background-color: var(--bg-card);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: 12px;
  text-align: center;
}
.message-panel h1 {
  color: var(--green-ink);
  font-size: 2rem;
  margin: 0 0 14px;
}
.message-panel p { color: var(--text-soft); }
@media (max-width: 600px) {
  .message-panel { margin: 36px auto; padding: 32px 20px; }
  .message-panel h1 { font-size: 1.6rem; }
}

nav a[aria-current="page"] {
  color: var(--green-ink);
}

/* From-the-hutch house note — optional, concrete, and content-led. */
.experience-box {
  background-color: var(--bg-soft);
  border: 1px solid var(--card-border);
  border-left: 4px solid var(--blueberry-dusk);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 1.6em 0;
}
.experience-box strong {
  display: block;
  color: var(--blueberry-dusk);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
html[data-theme="dark"] .experience-box strong {
  color: #8cb4d4;
}

/* In-article MailerLite signup */
.article-signup {
  background-color: var(--bg-soft);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 22px 24px;
  margin: 2em 0;
  text-align: center;
}
.article-signup h2 {
  margin: 0 0 8px;
  text-align: center;
}
.article-signup p {
  margin: 0 0 14px;
  color: var(--text-soft);
}
.article-signup form {
  display: flex;
  gap: 0;
  max-width: 440px;
  margin: 0 auto;
}
.contact-form input,
.contact-form select,
.contact-form textarea,
.name-search input,
.article-signup input[type="email"] {
  background-color: var(--bg-raised);
  color: var(--text-body);
  border-color: var(--card-border);
}

.article-signup button[type="submit"] {
  padding: 10px 16px;
  border: none;
  border-radius: 0 5px 5px 0;
  background-color: var(--green-deep);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.article-signup button[type="submit"]:hover {
  background-color: var(--green-hover);
}
.article-signup .email-privacy-note-footer {
  margin-top: 10px;
}

.related-reading {
  margin: 2em 0 0;
  padding-top: 1.2em;
  border-top: 1px solid var(--card-border);
}
.related-reading h2 {
  font-size: 1.15rem;
  margin: 0 0 14px;
}
.related-reading ul {
  display: block;           /* override nav ul { display: flex } from global nav rule */
  list-style: none;
  padding: 0;
  margin: 0;
}
.related-reading li {
  margin: 0 0 1em;
  line-height: 1.45;
}
.related-reading a {
  color: var(--green-ink);
  font-weight: 600;
  text-transform: none;     /* override nav a { text-transform: uppercase } */
  letter-spacing: 0;        /* override nav a letter-spacing */
  font-size: 1rem;
}
.related-reading a:hover {
  text-decoration: underline;
}
.read-desc {
  display: block;
  font-size: 0.9rem;
  color: var(--text-soft);
  margin-top: 3px;
}

.article-sources {
  margin: 2em 0 0;
  padding-top: 1.2em;
  border-top: 1px solid var(--card-border);
  font-size: 0.92rem;
  color: var(--text-soft);
}
.article-sources h2 {
  font-size: 1.1rem;
  margin: 0 0 10px;
}
.article-sources ul { margin: 0; }
.article-sources a { color: var(--green-ink); font-weight: 600; }

.article-disclaimer {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 1.6em 0 0;
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4em;
  font-size: 0.95rem;
}
.article-body th,
.article-body td {
  border: 1px solid var(--card-border);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.article-body th {
  background: var(--bg-soft);
  color: var(--green-ink);
  font-weight: 700;
}
.article-body caption {
  caption-side: bottom;
  text-align: left;
  color: var(--text-muted);
  font-size: 0.85rem;
  padding-top: 8px;
}

/* -----------------------------------------------
   Fiber comparison chart (hay-guide.html)
   Uses existing color tokens — works in light and dark automatically.
   Bar scale: 20–40% crude fiber = 0–100% of track width.
   ----------------------------------------------- */
.fiber-chart { margin: 1.5em 0 1.8em; }
.fiber-chart table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 0.75em;
  font-size: 0.9rem;
}
.fiber-chart th,
.fiber-chart td {
  border: 1px solid var(--card-border);
  padding: 9px 12px;
  text-align: left;
  vertical-align: middle;
}
.fiber-chart th {
  background: var(--bg-soft);
  color: var(--green-ink);
  font-weight: 700;
}
.fiber-chart caption {
  caption-side: bottom;
  text-align: left;
  color: var(--text-muted);
  font-size: 0.82rem;
  padding-top: 6px;
}
.th-sub {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-muted);
}
.fiber-track {
  position: relative;
  height: 8px;
  background: var(--bg-soft);
  border-radius: 4px;
  margin-bottom: 4px;
  border: 1px solid var(--card-border);
}
.fiber-range {
  position: absolute;
  top: -1px;
  height: 8px;
  border-radius: 4px;
  background: var(--green-main);
}
.alfalfa-bar { background: var(--oat-hay); }
.fiber-pct {
  font-size: 0.82rem;
  color: var(--text-soft);
}
.fiber-chart tr.alfalfa-row td {
  color: var(--text-muted);
  font-style: italic;
}
.contrast-tag {
  display: inline-block;
  font-size: 0.7rem;
  background: var(--bg-soft);
  color: var(--text-muted);
  padding: 1px 5px;
  border-radius: 3px;
  font-style: normal;
  margin-left: 4px;
  vertical-align: middle;
  border: 1px solid var(--card-border);
}
.fiber-terms {
  font-size: 0.87rem;
  color: var(--text-soft);
  border-left: 3px solid var(--border-accent);
  padding-left: 0.85em;
  margin: 0;
  line-height: 1.6;
}
@media (max-width: 600px) {
  .fiber-chart table { display: block; overflow-x: auto; font-size: 0.82rem; }
}

/* Hub pages */
.hub-intro {
  max-width: 680px;
  margin: 0 auto 36px;
  text-align: center;
  color: var(--text-soft);
}
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}
.hub-card {
  background: var(--bg-raised);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hub-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
}
.hub-card a {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  height: 100%;
}
.hub-card a:hover { text-decoration: none; }
.hub-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.hub-card h3 {
  margin: 14px 16px 6px;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--green-ink);
}
.hub-card p {
  margin: 0 16px 16px;
  font-size: 0.92rem;
  color: var(--text-soft);
  flex: 1;
}
.hub-card.is-coming {
  opacity: 0.92;
}
.hub-card.is-coming:hover { transform: none; }
.coming-badge {
  display: inline-block;
  margin: 0 16px 14px;
  align-self: flex-start;
  background: var(--badge-tan-bg);
  color: var(--text-dark);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.live-badge {
  display: inline-block;
  margin: 0 16px 14px;
  align-self: flex-start;
  background: var(--green-badge-bg);
  color: var(--text-dark);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0 auto 32px;
  padding: 0;
  list-style: none;
  max-width: 760px;
}
.category-pills a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 30px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--green-ink);
  background: var(--bg-soft);
  border: 1px solid var(--card-border);
}
.category-pills a:hover,
.category-pills a[aria-current="page"] {
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: #fff;
  text-decoration: none;
}

/* Vet Notes */
.vet-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  align-items: start;
  background: var(--bg-soft);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 18px 20px;
  margin: 1.4em 0;
}
.vet-card img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--card-border);
}
.vet-card h3 { margin: 0 0 4px; color: var(--green-ink); text-align: left; }
.vet-card .vet-cred { font-size: 0.88rem; color: var(--text-soft); margin: 0 0 8px; }
.vet-card p { margin: 0; }
.vet-empty {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  /* Prevent any remaining page-level spill from creating a second viewport
     scrollbar. Components that intentionally scroll horizontally keep their
     own overflow container below this boundary. */
  html, body, .site-wrapper { overflow-x: hidden; }
  .header-right { width: 100%; justify-content: space-between; }
  /* Keep the top-level theme control inside the phone viewport. The nav and
     fixed 44px button otherwise combine to create a small page-wide spill. */
  body > .site-wrapper > header { position: relative; }
  body > .site-wrapper > header .header-right { justify-content: center; }
  body > .site-wrapper > header .theme-toggle { position: absolute; top: 12px; right: 12px; }
  .article-signup form { flex-direction: column; gap: 8px; }
  .article-signup input[type="email"],
  .article-signup button[type="submit"] { border-radius: 5px; width: 100%; }
  .vet-card { grid-template-columns: 1fr; }
  .article-body table { font-size: 0.85rem; display: block; overflow-x: auto; }
}

/* Small phones (360px and under): the four-link site menu otherwise runs
   past the header padding to the card edge. Scoped to the site header so
   footer and in-article navs are untouched; the Hay Guide's own, more
   specific header rules still win on that page. */
@media (max-width: 360px) {
  body > .site-wrapper > header nav ul { gap: 10px; }
  body > .site-wrapper > header nav a { font-size: 0.8rem; letter-spacing: 0.01em; }
}

/* Notes from the Hutch — firsthand observations on hub pages */
.hutch-notes {
  max-width: 780px;
  margin: 48px auto 0;
}
.hutch-notes h2 {
  text-align: center;
  margin: 0 0 8px;
}
.hutch-notes .hub-intro {
  margin-bottom: 24px;
}

/* "See everything" link at the foot of a homepage teaser section */
.section-more {
  text-align: center;
  margin: 28px 0 0;
}
.section-more a {
  color: var(--green-ink);
  font-weight: 700;
  text-decoration: none;
}
.section-more a:hover { text-decoration: underline; }

/* Story Library — what the series are, and what's coming */
.library-series {
  max-width: 800px;
  margin: 44px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--card-border);
}
.library-series h3 {
  text-align: center;
  color: var(--green-ink);
  font-size: 1.15rem;
  margin: 0 0 14px;
}
.library-series p {
  color: var(--text-soft);
  margin: 0 0 1em;
  line-height: 1.7;
}
.library-series strong { color: var(--text-body); }
.library-coming {
  font-style: italic;
  margin-bottom: 0 !important;
}
.library-series + .article-signup {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Coming Next — the story being written, revealed cover-first */
.coming-next {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  align-items: start;   /* top-align the cover; the text column is taller */
  max-width: 800px;
  margin: 40px auto 0;
  padding: 26px;
  background: var(--bg-raised);
  border: 1px solid var(--featured-edge);
  box-shadow: 0 0 0 2px var(--featured-ring), var(--card-shadow);
  border-radius: 10px;
}
.coming-next img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  box-shadow: var(--card-shadow);
}
.coming-next .coming-badge {
  margin: 0 0 10px;
  display: inline-block;
}
.coming-next h3 {
  margin: 0 0 2px;
  font-size: 1.3rem;
  color: var(--green-ink);
  text-align: left;
}
.coming-next-series {
  margin: 0 0 12px !important;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.coming-next p { color: var(--text-soft); line-height: 1.7; margin: 0 0 0.9em; }
.coming-next p:last-child { margin-bottom: 0; font-style: italic; }
.coming-next p.coming-next-hook {
  margin: 1.15em 0 0 !important;
  color: var(--green-ink) !important;
  font-style: normal;
  font-weight: 650;
}

/*
 * The tapping. Three short lines that make the reader hear the title before
 * they read the plot. The stagger is doing real work: each line steps further
 * in, so the sound reads as something building rather than repeating — which
 * is exactly what it turns out to be.
 */
.tap-lines {
  color: var(--text-body) !important;
  font-style: italic;
  letter-spacing: 0.05em;
  line-height: 1.65 !important;
  margin: 0 0 1.05em !important;
}
.tap-lines span { display: block; }
.tap-lines span:nth-child(2) { padding-left: 1.4em; }
.tap-lines span:nth-child(3) { padding-left: 2.8em; }

@media (max-width: 640px) {
  .coming-next {
    grid-template-columns: 1fr;
    gap: 20px;
    justify-items: center;
    text-align: center;
  }
  .coming-next img { max-width: 220px; }
  /* Headings stay centered under the cover; the prose goes back to
     left-aligned — centered body copy is hard work at this width. */
  .coming-next p { text-align: left; }
}