/* Public Hero book pages (/hero/<book>, 11 Nov 2026). The page is the About page's layout (about.css);
   only what's new is here, on the house recipes: glass over the parchment, the gold primary button,
   serif section titles, links #8b7355. Generated by scripts/build-hero-pages.mjs. */
.hb-top { display: flex; gap: 24px; align-items: flex-start; margin: 4px 0 36px; }
.hb-cover {
  width: 150px; height: auto; flex: none; border-radius: var(--border-radius-md, 10px);
  box-shadow: 0 4px 16px rgba(120, 100, 70, 0.18);
}
.page-hero-book .about-lead { margin: 0 0 18px; }
.hb-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 8px; }
.hb-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 22px;
  border-radius: var(--border-radius-md, 10px); background: linear-gradient(135deg, #b8860b 0%, #8b6914 100%);
  color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; transition: filter 0.2s;
}
.hb-btn:hover { filter: brightness(1.06); color: #fff; text-decoration: none; }
.hb-cta-note { font-size: 13.5px; color: var(--color-text-secondary); }

.hb-units { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
/* Folded rows, the FAQ's pattern: transparent at rest, glass when hovered or open; chevron; 44px rows. */
.hb-unit { border: 1px solid rgba(160, 140, 110, 0.2); border-radius: var(--border-radius-lg, 14px); background: transparent; transition: all 0.25s ease; }
.hb-unit:hover, .hb-unit[open] {
  background: rgba(255, 250, 240, 0.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-color: rgba(160, 140, 110, 0.35);
}
.hb-unit summary {
  display: flex; align-items: baseline; gap: 12px; min-height: 44px; box-sizing: border-box; padding: 12px 16px;
  cursor: pointer; list-style: none;
}
.hb-unit summary::-webkit-details-marker { display: none; }
.hb-unit summary::before {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-right: 2px; position: relative; top: -2px;
  border-right: 2px solid #8b7355; border-bottom: 2px solid #8b7355; transform: rotate(-45deg); transition: transform 0.2s ease;
}
.hb-unit[open] summary::before { transform: rotate(45deg); }
.hb-unit summary:focus-visible { outline: 2px solid #667eea; outline-offset: 2px; border-radius: var(--border-radius-lg, 14px); }
.hb-unit-label { flex: 0 0 84px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #b8860b; white-space: nowrap; }
.hb-unit-title { flex: 1 1 auto; font-family: var(--font-serif), Georgia, serif; font-weight: 600; font-size: 16px; line-height: 1.4; color: #6b5a3e; }
.page-hero-book .hb-unit-topic { margin: 0; padding: 0 16px 14px 135px; font-size: 14.5px; line-height: 1.6; color: var(--color-text-secondary); }

.hb-quote { margin: 14px 0 0; padding: 14px 18px; border-left: 3px solid rgba(184, 134, 11, 0.45); background: rgba(255, 250, 240, 0.35); border-radius: 0 var(--border-radius-md, 10px) var(--border-radius-md, 10px) 0; }
.hb-quote blockquote { margin: 0; font-family: var(--font-serif), Georgia, serif; font-style: italic; font-size: 16.5px; line-height: 1.6; color: #3d3225; }
.hb-quote figcaption { margin-top: 6px; font-size: 12.5px; color: var(--color-text-tertiary); }

.page-hero-book .about-content > .hb-cta { margin-top: 8px; }
.hb-others { margin: 18px 0 0; font-size: 14px; color: var(--color-text-secondary); }
.hb-others a, .page-hero-book .about-section a { color: #8b7355; font-weight: 600; }
.hb-others a:hover, .page-hero-book .about-section a:hover { color: #6b5a3e; }

@media (max-width: 640px) {
  .hb-top { flex-direction: column; align-items: center; gap: 16px; }
  .hb-cover { width: 120px; }
  .hb-cta { justify-content: center; }
  .hb-cta .hb-btn { width: 100%; }
  .hb-unit summary { flex-wrap: wrap; row-gap: 2px; }
  .hb-unit-label { flex-basis: auto; }
  .hb-unit-title { flex-basis: 100%; padding-left: 21px; }
  .page-hero-book .hb-unit-topic { padding: 0 16px 14px 37px; }
}