/* =========================================================================
   Budget Plates - Premium homepage layer ("The Honest Ledger")
   Loaded ONLY by index.html, after styles.css. Every other page is untouched.
   Design thesis: the site's ownable premium device is real grocery math.
   The hero receipt and the ledger indexes are the signature; everything
   else stays quiet (cream field, ink type, green reserved for money and
   interaction, tomato reserved for kickers, butter demoted to dark bands).
   ========================================================================= */

:root {
  --hairline: rgba(38, 34, 28, 0.18);
  --hairline-soft: rgba(38, 34, 28, 0.10);
  /* Money ink: a darkened shade of the brand green (#06C167 family) for
     SMALL price text on cream surfaces. The brand green stays on badges and
     buttons; this shade exists because #05A257 at 1rem bold is 2.9-3.2:1
     against the creams and fails WCAG AA. #03763F is 5.0:1+ everywhere. */
  --money: #03763F;
  /* Methodology interlude surface (tokens keep the legacy --espresso name).
     A refined near-black, consistent with the newsletter/footer dark surfaces
     (canvas #090909, surface #141414) while staying its own editorial card.
     Text stays a warm light gray so the band keeps warmth against the black;
     the gold checkmarks/accents (--butter) carry the warmth. */
  --espresso: #111111;
  --espresso-line: rgba(255, 255, 255, 0.16);
  --espresso-mute: #C6B9A5;
}

/* Focus rings: the brand green is only 2.25:1 against cream, below the 3:1
   non-text minimum. Use money ink on light surfaces and keep the bright
   green on the dark bands where it is the higher-contrast choice. */
.home-v2 :focus-visible { outline-color: var(--money); }
.home-v2 .hp-sub :focus-visible,
.home-v2 .hp-colo :focus-visible,
.home-v2 .newsletter :focus-visible,
.home-v2 .site-footer :focus-visible,
.home-v2 .feature-card :focus-visible,
.home-v2 .topbar :focus-visible { outline-color: var(--green); }

/* Skip link: CSS-only reveal (works without the inline JS handlers) and an
   ink fill so the label is readable while focused. */
.home-v2 > a.btn--green[href="#main"] { background: var(--ink); color: var(--surface-2); box-shadow: none; }
.home-v2 > a.btn--green[href="#main"]:focus { left: 8px !important; top: 8px !important; }

/* Live status regions stay in the accessibility tree from page load; when
   empty they take no vertical space. */
.home-v2 .form-note:empty { margin-top: 0; }

/* ----- Page-level rhythm ------------------------------------------------- */
.home-v2 .section { padding-block: clamp(2.2rem, 4.2vw, 3.5rem); }
.home-v2 .section--tight { padding-block: clamp(1.4rem, 2.6vw, 2rem); }

/* Section headings: bigger, calmer. The butter rule becomes an ink hairline
   (title, hairline fills, price floor, See all) so the yellow stops
   competing with the photography; the eyebrow keeps the tomato kicker. */
.home-v2 .rule-head { align-items: flex-end; gap: 1.2rem; margin-bottom: clamp(1.3rem, 2.4vw, 1.9rem); }
.home-v2 .rule-head::after { height: 1px; background: var(--hairline); border-radius: 0; order: 1; align-self: flex-end; margin-bottom: 0.85rem; }
.home-v2 .rule-head .hp-floor { order: 2; margin-bottom: 0.35rem; }
.home-v2 .rule-head .link-more { order: 3; margin-bottom: 0.3rem; }
.home-v2 .rule-head h2 { font-size: clamp(1.65rem, 3.2vw, 2.4rem); font-weight: 700; letter-spacing: -0.032em; }
.home-v2 .rule-head .eyebrow { margin-bottom: 0.35rem; }
.home-v2 .link-more { font-size: 0.92rem; }

/* Kickers: the base tomato is 3.9:1 on cream at this size; the deep shade
   passes AA (5.4:1) and keeps the same warmth. Dark bands keep butter. */
.home-v2 .eyebrow { color: var(--red-deep); }
.home-v2 .eyebrow::before { background: var(--red-deep); }
.home-v2 .hp-colophon .eyebrow { color: var(--butter); }
.home-v2 .hp-colophon .eyebrow::before { background: var(--butter); }

/* The hero feature title is an h2 (heading outline: h1 then h2), styled to
   match the h3 the card uses everywhere else. */
.home-v2 .feature-card__body h2 {
  color: #fff;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  margin-top: 0.3rem;
  letter-spacing: -0.018em;
  font-weight: 750;
  line-height: 1.04;
}

/* Real price floor for a section, set like a ledger entry */
.hp-floor {
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.hp-floor b { color: var(--money); font-family: var(--display); font-weight: 700; }
@media (max-width: 640px) { .hp-floor { display: none; } }

/* =========================================================================
   HERO - type-led column, one decisive photo, the receipt as proof
   ========================================================================= */
.hp-hero { padding-block: clamp(0.8rem, 1.4vw, 1.1rem) 0; }
.hp-hero__grid { display: grid; gap: clamp(1.1rem, 2.2vw, 1.6rem); row-gap: 0.75rem; }
@media (min-width: 920px) {
  .hp-hero__grid {
    grid-template-columns: 1.02fr 0.98fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "copy feature"
      "receipt feature";
    column-gap: clamp(2rem, 4vw, 3.4rem);
  }
  .hp-hero__copy { grid-area: copy; }
  .hp-hero__feature { grid-area: feature; }
  .hp-receipt { grid-area: receipt; align-self: end; }
}

.hp-hero__copy { display: flex; flex-direction: column; align-items: flex-start; }
/* Phase 3D1: the H1 is now the descriptive promise (8 words), so it gets one size
   step less than the old 4-word line, a slightly wider measure, and balanced
   wrapping - three tidy lines at every width instead of a shout. */
.hp-hero__copy h1 {
  font-size: clamp(2.05rem, 3.6vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.04;
  margin-top: 0.6rem;
  max-width: 17ch;
  text-wrap: balance;
}
.hp-hero__copy h1 em { font-style: italic; font-weight: 600; color: var(--red); }
/* The human promise, set as a bold lede between the H1 and the mechanism. */
.hp-hero__lede {
  margin-top: 0.9rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.12rem, 1.7vw, 1.3rem);
  line-height: 1.3;
  color: var(--ink);
  max-width: 34ch;
  text-wrap: balance;
}
.hp-hero__sub {
  margin-top: 0.6rem;
  max-width: 56ch;
  font-size: clamp(0.98rem, 1.3vw, 1.06rem);
  line-height: 1.55;
  color: var(--ink-soft);
}
.hp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1rem; margin-top: 1.15rem; }
.hp-hero__plan { margin-left: 0.2rem; }

/* --- Phase 3D1: Find dinner fast - six constraint chips, registry counts --- */
.hp-fast {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.7rem;
  margin-top: 1.1rem;
}
.hp-fast__chip {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-height: 64px;                     /* comfortably past the 44px floor */
  justify-content: center;
  padding: 0.75rem 0.95rem;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: border-color 0.18s ease-out, transform 0.18s ease-out;
}
.hp-fast__chip:hover { border-color: var(--money); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .hp-fast__chip, .hp-fast__chip:hover { transition: none; transform: none; }
}
.hp-fast__label { font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.hp-fast__count { font-size: 0.82rem; font-weight: 600; color: var(--money); font-variant-numeric: tabular-nums; }

/* --- Phase 3D1.1: the Dinner Ideas collection banner - the section's dominant,
   image-led card. Full-width split card: photo left, pitch right; stacks
   image-first on mobile. One image, lazy (below the fold), fixed dimensions. --- */
.hp-di-banner {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--ink);
  margin-bottom: clamp(0.9rem, 1.8vw, 1.25rem);
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s ease;
}
.hp-di-banner:hover { transform: translateY(-3px); box-shadow: var(--shadow-md, var(--shadow-sm)); }
@media (prefers-reduced-motion: reduce) {
  .hp-di-banner, .hp-di-banner:hover { transition: none; transform: none; }
}
@media (min-width: 720px) {
  .hp-di-banner { grid-template-columns: 1.1fr 1fr; }
}
.hp-di-banner__media { display: block; position: relative; min-height: 220px; }
.hp-di-banner__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
@media (max-width: 719px) {
  .hp-di-banner__media { min-height: 0; }
  .hp-di-banner__media img { position: static; aspect-ratio: 3 / 2; height: auto; }
}
.hp-di-banner__body {
  /* Phase 3D1.2A: the decorative outlined numeral is gone; the body centers its
     stack vertically so the text block reads balanced at every banner height. */
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 0.55rem;
  padding: clamp(1.2rem, 2.6vw, 2rem) clamp(1.2rem, 2.6vw, 2.2rem);
}
.hp-di-banner__body h3 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1.1; letter-spacing: -0.03em;
  max-width: 14ch; text-wrap: balance;
}
.hp-di-banner__body p {
  font-size: clamp(0.95rem, 1.3vw, 1.02rem);
  line-height: 1.55; color: var(--ink-soft); max-width: 44ch;
}
.hp-di-banner__cta { margin-top: 0.5rem; }

/* --- Phase 3D1: the browse module's ledger of remaining hubs --- */
.hp-browse-more {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 2rem;
}
.hp-browse-more li { border-bottom: 1px dashed var(--border); }
.hp-browse-more a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.62rem 0.15rem;            /* row height ~44px touch target */
  text-decoration: none;
  font-weight: 600;
  color: var(--ink);
}
.hp-browse-more a:hover { color: var(--money); }
.hp-browse-more .c { font-size: 0.8rem; font-weight: 600; color: var(--ink-faint); white-space: nowrap; }

/* --- The receipt: the featured recipe costed line by line, all real ---- */
.hp-receipt {
  position: relative;
  margin-top: clamp(1.1rem, 2vw, 1.5rem);
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow-sm);
  padding: 0.9rem 1.1rem 0.85rem;
}
/* Torn receipt edge: the signature detail. Pure CSS sawtooth in the card
   color, sitting just under the bottom edge. */
.hp-receipt::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 8px;
  background:
    linear-gradient(-135deg, var(--card) 5.5px, transparent 0) 0 0 / 14px 8px repeat-x,
    linear-gradient(135deg, var(--card) 5.5px, transparent 0) 7px 0 / 14px 8px repeat-x;
  filter: drop-shadow(0 2px 2px rgba(38, 34, 28, 0.08));
}
@media (min-width: 920px) { .hp-receipt { margin-top: 0; max-width: 30rem; } }
.hp-receipt__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px dashed var(--hairline);
}
.hp-receipt__head .k {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.hp-receipt__head a {
  font-family: var(--display); font-weight: 700; font-size: 0.98rem;
  letter-spacing: -0.01em; color: var(--ink);
  border-bottom: 1.5px solid var(--hairline);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.hp-receipt__head a:hover { color: var(--money); border-color: var(--green); }
.hp-receipt ul { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.26rem; }
.hp-receipt li { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.85rem; color: var(--ink-soft); }
.hp-receipt li .dots { flex: 1; border-bottom: 1.5px dotted var(--hairline); transform: translateY(-0.22em); min-width: 1.2rem; }
.hp-receipt li .pr { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.hp-receipt__total {
  margin-top: 0.65rem; padding-top: 0.6rem;
  border-top: 1.5px solid var(--ink);
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem;
  font-size: 0.87rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.hp-receipt__total b {
  display: inline-flex; align-items: center;
  font-family: var(--display); font-weight: 800; font-size: 1.28rem;
  letter-spacing: -0.02em; color: var(--money); white-space: nowrap;
}
/* Echo of the plate badge on the photo beside it: same green, same promise */
.hp-receipt__total .dot {
  flex: 0 0 auto;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--green-badge);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(38, 34, 28, 0.3);
  margin-right: 0.45rem;
}
.hp-receipt__note {
  margin-top: 0.35rem;
  font-size: 0.7rem;
  color: var(--ink-faint);
}

/* --- Featured photo card (reuses .feature-card markup) ------------------ */
.hp-hero__feature { display: block; }
.home-v2 .hp-hero__feature .feature-card { min-height: 340px; height: 100%; max-height: none; }
@media (min-width: 920px) { .home-v2 .hp-hero__feature .feature-card { min-height: 440px; } }
/* The planner strip previously forced padding-top: 0.6rem via #id specificity to hold the
   whole strip inside a 1440x900 fold. That fixed value never scaled, so the receipt->planner
   gap stayed 9.6px at every breakpoint while planner->search used the 1.4-2rem scale: the
   rhythm read as tight and lopsided. It now inherits .home-v2 .section--tight, so both gaps
   track one scale (32px desktop / 22.4px mobile). Trade-off accepted: at exactly 1440x900 the
   strip's bottom ~20px falls past the fold (it stays ~84% visible). */

/* =========================================================================
   EMAIL STRIP - the planner signup, kept in reach of the fold
   ========================================================================= */
.hp-sub {
  background: var(--charcoal);
  color: var(--charcoal-text);
  border: 1px solid var(--charcoal-line);
  border-radius: var(--radius-lg);
  padding: 1rem clamp(1.1rem, 2.4vw, 1.6rem);
  display: grid;
  gap: 0.9rem 2rem;
  align-items: center;
}
@media (min-width: 880px) { .hp-sub { grid-template-columns: 1.2fr 1fr; } }
.hp-sub h2 { font-size: clamp(1.1rem, 1.9vw, 1.4rem); font-weight: 700; letter-spacing: -0.022em; color: #fff; }
.hp-sub p { color: var(--charcoal-mute); font-size: 0.87rem; line-height: 1.5; margin-top: 0.25rem; max-width: 56ch; }
.hp-sub form {
  display: flex; gap: 0.4rem;
  background: var(--charcoal-surf);
  border: 1px solid var(--charcoal-line);
  /* the 8px control + 0.32rem padding, so the nest stays concentric */
  border-radius: 12px;
  padding: 0.32rem;
}
.hp-sub input[type=email] {
  flex: 1; min-width: 0;
  padding: 0.66rem 1.05rem;
  border-radius: var(--radius-btn);   /* pairs with the 8px "Get My Free Plan" button */
  border: 2px solid transparent;
  background: rgba(255,255,255,0.97);
  color: var(--ink);
  outline: none;
}
.hp-sub input[type=email]:focus { border-color: var(--green); }
.hp-sub .btn { box-shadow: none; white-space: nowrap; }
@media (max-width: 479px) {
  .hp-sub form { flex-direction: column; border-radius: var(--radius); }
  .hp-sub .btn { justify-content: center; }
}
.hp-sub .form-note--ok { color: #3ee08f; }
.hp-sub .form-note--err { color: #ff8a80; }

/* =========================================================================
   CATEGORY TILES - real counts, photographic, quiet
   ========================================================================= */
.hp-cats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
}
@media (min-width: 640px) { .hp-cats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .hp-cats { grid-template-columns: repeat(6, 1fr); } }
.hp-cat {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(38,34,28,0.04);
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s cubic-bezier(0.22,1,0.36,1), border-color 0.25s ease;
}
.hp-cat:hover { transform: translateY(-3px); box-shadow: 0 12px 26px -12px rgba(38,34,28,0.24); border-color: var(--border-strong); }
.hp-cat__thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.hp-cat__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1); }
.hp-cat:hover .hp-cat__thumb img { transform: scale(1.05); }
.hp-cat__body { padding: 0.6rem 0.75rem 0.7rem; display: flex; flex-direction: column; gap: 0.08rem; }
.hp-cat__name { font-family: var(--display); font-weight: 700; font-size: 0.96rem; letter-spacing: -0.015em; transition: color 0.15s ease; }
.hp-cat__count { font-size: 0.75rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.hp-cat:hover .hp-cat__name { color: var(--green-deep); }

/* =========================================================================
   FEATURE-LEAD GRID - one oversized module + cards + a see-all tile
   ========================================================================= */
.hp-lead { display: grid; gap: clamp(0.9rem, 1.8vw, 1.25rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) {
  .hp-lead { grid-template-columns: repeat(4, 1fr); }
  .hp-lead > .hp-lead__big { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 899px) { .hp-lead > .hp-lead__big { grid-column: span 2; } }
.hp-lead__big .feature-card { min-height: 320px; height: 100%; max-height: none; }
.hp-lead__big .feature-card__body h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }

/* See-all tile that completes the grid instead of leaving an empty cell */
.hp-more-tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.15rem 1.2rem;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), border-color 0.25s ease, background 0.25s ease;
}
.hp-more-tile:hover { transform: translateY(-4px); border-color: var(--border-strong); background: var(--card); }
/* hover lifts --surface-2 -> --card (white). The old cream-2 -> cream-3 shift is gone:
   both collapse to --surface-2, so the delta had to move up the ladder, not sideways. */
.hp-more-tile .n { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 3vw, 2.6rem); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.hp-more-tile .t { display: block; font-size: 0.94rem; font-weight: 600; color: var(--ink-soft); line-height: 1.35; margin-top: 0.4rem; max-width: 16ch; }
.hp-more-tile .f { display: block; font-size: 0.82rem; color: var(--ink-faint); margin-top: 0.55rem; font-variant-numeric: tabular-nums; }
.hp-more-tile .link-more { margin-top: auto; }

/* =========================================================================
   LEDGER INDEX - dotted leaders + tabular prices; the anti-thumbnail-wall
   ========================================================================= */
.hp-index { display: grid; grid-template-columns: 1fr; gap: 0 clamp(1.8rem, 4.5vw, 3.6rem); }
@media (min-width: 780px) { .hp-index--2col { grid-template-columns: 1fr 1fr; } }
.hp-index li { border-bottom: 1px solid var(--hairline-soft); }
.hp-index a {
  display: flex; align-items: baseline; gap: 0.6rem;
  padding: 0.8rem 0.15rem;
  border-radius: 6px;
  transition: background 0.15s ease;
}
.hp-index a:hover { background: rgba(255,255,255,0.72); }
.hp-index .t {
  font-family: var(--display); font-weight: 650; font-size: 1.02rem;
  letter-spacing: -0.015em; line-height: 1.2;
  transition: color 0.15s ease;
}
.hp-index a:hover .t { color: var(--money); }
.hp-index .dots { flex: 1; border-bottom: 1.5px dotted var(--hairline); transform: translateY(-0.24em); min-width: 1.4rem; }
.hp-index .m { font-size: 0.78rem; color: var(--ink-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hp-index .p {
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  color: var(--money); white-space: nowrap; font-variant-numeric: tabular-nums;
  text-align: right;
}
.hp-index .p small { font-family: var(--body); font-size: 0.7rem; font-weight: 500; color: var(--ink-faint); margin-left: 0.14em; }
@media (max-width: 560px) { .hp-index .m { display: none; } }

/* XL variant - the "cheapest plates" closer, price set like a headline */
.hp-index--xl a { padding: 0.9rem 0.15rem; align-items: center; }
.hp-index--xl .t { font-size: clamp(1.12rem, 2.3vw, 1.6rem); font-weight: 700; letter-spacing: -0.025em; }
.hp-index--xl .p { font-size: clamp(1.25rem, 2.5vw, 1.8rem); font-weight: 800; letter-spacing: -0.02em; }
.hp-index--xl .p small { font-size: 0.78rem; }
.hp-index--xl .m { font-size: 0.84rem; }

/* Index band - page-neutral field for the back-page index (was a cream-2 tint; it carries
   white recipe cards, which read better on the neutral). Hairlines delimit it. */
.hp-band { background: var(--page); border-block: 1px solid var(--border); }
.hp-band__gap { height: clamp(1.8rem, 3.6vw, 3rem); }

/* The index wall: four compact hub columns (the anti-card-wall) */
.hp-wall { display: grid; gap: 1.8rem clamp(1.8rem, 4vw, 3.4rem); grid-template-columns: 1fr; }
@media (min-width: 700px) { .hp-wall { grid-template-columns: 1fr 1fr; } }
.hp-wall__col { display: flex; flex-direction: column; }
.hp-wall__col h3 {
  font-size: 1.12rem; font-weight: 700; letter-spacing: -0.02em;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid var(--ink);
}
.hp-wall__col .hp-index a { padding-block: 0.62rem; }
.hp-wall__col .link-more { margin-top: 0.7rem; font-size: 0.88rem; }

/* Kitchen favorite: the one quiet affiliate line near the footer */
.hp-fave {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.9rem;
  padding: 0.9rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.hp-fave .k {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-faint);
  white-space: nowrap;
}
.hp-fave a { color: var(--money); font-weight: 600; border-bottom: 1.5px solid var(--hairline); }
.hp-fave a:hover { border-color: var(--money); }
.hp-fave__disc { font-size: 0.76rem; color: var(--ink-faint); flex-basis: 100%; }

/* Chicken tail index under the lead grid */
.hp-tail { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.hp-tail__head {
  font-family: var(--body);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}

/* =========================================================================
   COLOPHON - the methodology interlude. A rounded near-black card inside the
   cream page: an editorial moment on the same dark surface family as the
   newsletter and footer, so it reads as one website. Warm light-gray text and
   gold accents keep it from going cold.
   ========================================================================= */
.hp-colo {
  background: var(--espresso);
  color: #fff;
  border: 1px solid var(--espresso-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3.4vw, 2.6rem);
}
.hp-colo .eyebrow { color: var(--butter); }
.hp-colo .eyebrow::before { background: var(--butter); }
.hp-colo__grid { display: grid; gap: clamp(1.6rem, 3.4vw, 3rem); }
@media (min-width: 880px) { .hp-colo__grid { grid-template-columns: 0.94fr 1.06fr; } }
.hp-colo h2 { color: #fff; font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 700; letter-spacing: -0.03em; margin-top: 0.5rem; }
.hp-colo h3 { font-size: 1.18rem; color: #fff; letter-spacing: -0.02em; }
.hp-colo .lead p { color: var(--espresso-mute); margin-top: 0.8rem; max-width: 54ch; line-height: 1.6; }
.hp-colo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; margin-top: 1.2rem; }
.hp-colo .btn--ink { background: #fff; color: var(--ink); }
.hp-colo .btn--ink:hover { background: var(--surface-2); }
.hp-colo .link-more { color: var(--green); }   /* Phase 4A0.2: var(--money) is 3.30:1 on
                                                   this band's near-black background and
                                                   fails WCAG AA; var(--green) is 7.94:1
                                                   here. var(--money) is for light surfaces
                                                   only - see its definition in styles.css. */
.hp-colo__intro { color: var(--espresso-mute); font-size: 0.9rem; margin-top: 0.5rem; }
.hp-colo__rules { display: flex; flex-direction: column; margin-top: 0.5rem; }
.hp-colo__rules li {
  display: flex; gap: 0.8rem; align-items: flex-start;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--espresso-line);
  color: var(--espresso-mute); font-size: 0.92rem; line-height: 1.5;
}
.hp-colo__rules li:last-child { border-bottom: none; padding-bottom: 0.2rem; }
.hp-colo__rules b { color: #fff; font-weight: 650; }
.hp-colo__rules .no { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 0.18rem; color: var(--butter); }
.hp-colo__rules .no svg { width: 17px; height: 17px; }
.hp-colo__trust {
  margin-top: clamp(1.3rem, 2.4vw, 1.8rem);
  padding-top: 1.15rem;
  border-top: 1px solid var(--espresso-line);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem 1.5rem;
}
@media (min-width: 760px) { .hp-colo__trust { grid-template-columns: repeat(4, 1fr); } }
.hp-colo__trust .item { display: flex; align-items: flex-start; gap: 0.6rem; }
.hp-colo__trust .ic { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--espresso-line); display: grid; place-items: center; }
.hp-colo__trust .ic svg { width: 15px; height: 15px; color: var(--butter); }
.hp-colo__trust b { display: block; font-family: var(--display); font-weight: 650; font-size: 0.92rem; color: #fff; line-height: 1.25; }
.hp-colo__trust span.d { font-size: 0.76rem; color: var(--espresso-mute); }

/* =========================================================================
   TOOLS BAND - planner, dinner ideas, generator, resources in one place
   ========================================================================= */
.hp-tools { display: grid; grid-template-columns: 1fr; gap: 0.9rem; }
@media (min-width: 640px) { .hp-tools { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .hp-tools { grid-template-columns: repeat(4, 1fr); } }
/* Generator-led variant: the Random Food Generator takes the feature slot */
@media (min-width: 640px) { .hp-tools--led { grid-template-columns: 1fr 1fr; } .hp-tools--led .hp-tool--rfg { grid-column: span 2; } }
@media (min-width: 1040px) { .hp-tools--led { grid-template-columns: 1.5fr 1fr 1fr; } .hp-tools--led .hp-tool--rfg { grid-column: auto; } }
.hp-tool--rfg {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.hp-tool--rfg .k { color: var(--red-deep); }
.hp-tool--rfg h3 { font-size: 1.35rem; }
.hp-tool--rfg:hover h3 { color: var(--money); }
.hp-tool__cta { margin-top: 0.7rem; align-self: flex-start; }
.hp-tool--rfg:hover .hp-tool__cta { transform: translateY(-2px); box-shadow: 0 6px 0 var(--green-deep); }
.hp-tool {
  display: flex; flex-direction: column; gap: 0.45rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.3rem 1.25rem;
  box-shadow: 0 1px 2px rgba(38,34,28,0.04);
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s cubic-bezier(0.22,1,0.36,1), border-color 0.25s ease;
}
.hp-tool:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -14px rgba(38,34,28,0.24); border-color: var(--border-strong); }
.hp-tool .k { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--red-deep); }
.hp-tool h3 { font-size: 1.16rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; transition: color 0.15s ease; }
.hp-tool p { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5; flex: 1; }
.hp-tool .link-more { font-size: 0.88rem; margin-top: 0.4rem; }
.hp-tool:hover h3 { color: var(--money); }

/* =========================================================================
   EDITORIAL CALLOUT - replaces the loud butter banner, copy preserved
   ========================================================================= */
.hp-callout {
  border-block: 1px solid var(--border);
  padding-block: clamp(2.2rem, 4.5vw, 3.2rem);
  display: grid; gap: 1.2rem 3rem; align-items: center;
}
@media (min-width: 820px) { .hp-callout { grid-template-columns: 1fr auto; } }
.hp-callout h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 750; letter-spacing: -0.035em; }
.hp-callout h2 .u {
  background: linear-gradient(var(--butter), var(--butter)) no-repeat left 0 bottom 0.12em / 100% 0.34em;
  padding-inline: 0.04em;
}
.hp-callout p { margin-top: 0.6rem; max-width: 56ch; color: var(--ink-soft); }

/* =========================================================================
   Card refinements (homepage only) - calmer chrome, photography first
   ========================================================================= */
.home-v2 .recipe-card { box-shadow: 0 1px 2px rgba(38,34,28,0.04); }
.home-v2 .recipe-card:hover { box-shadow: 0 2px 4px rgba(38,34,28,0.05), 0 16px 34px -16px rgba(38,34,28,0.22); }
.home-v2 .card-grid--dense .recipe-card__title { font-size: 1.06rem; letter-spacing: -0.018em; }
.home-v2 .grid-3 .recipe-card__title { font-size: 1.18rem; }
.home-v2 .feature-card__body h3 { font-weight: 750; }

/* =========================================================================
   Motion - one system: small rise on reveal, existing hover language.
   styles.css already forces .reveal visible under prefers-reduced-motion
   and gates hiding behind html.js; this only tunes distance and adds a
   gentle per-cell stagger inside grids (capped well under 300ms).
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  html.js .home-v2 .reveal { transform: translateY(12px); transition-duration: 0.55s; }
  html.js .home-v2 .reveal.in { transform: none; }
  html.js .home-v2 .card-grid .reveal:nth-child(2),
  html.js .home-v2 .hp-lead .reveal:nth-child(2),
  html.js .home-v2 .hp-cats .reveal:nth-child(2),
  html.js .home-v2 .hp-tools .reveal:nth-child(2) { transition-delay: 0.06s; }
  html.js .home-v2 .card-grid .reveal:nth-child(3),
  html.js .home-v2 .hp-lead .reveal:nth-child(3),
  html.js .home-v2 .hp-cats .reveal:nth-child(3),
  html.js .home-v2 .hp-tools .reveal:nth-child(3) { transition-delay: 0.12s; }
  html.js .home-v2 .card-grid .reveal:nth-child(4),
  html.js .home-v2 .hp-lead .reveal:nth-child(4),
  html.js .home-v2 .hp-cats .reveal:nth-child(4),
  html.js .home-v2 .hp-tools .reveal:nth-child(4) { transition-delay: 0.18s; }
  html.js .home-v2 .hp-cats .reveal:nth-child(5) { transition-delay: 0.24s; }
  html.js .home-v2 .hp-cats .reveal:nth-child(6) { transition-delay: 0.3s; }
}