/* ==========================================================================
   BAKEIDOO — brand layer v1 (Concept A + selective Concept C)
   Loaded LAST in <head> on public pages. Overrides page-level inline CSS.
   To roll back: remove the <link> to this file (or run rollback script).
   ========================================================================== */

/* ---- 1. Design tokens (html:root beats any plain :root, regardless of order) */
html:root {
  --bk-raspberry: #C51F50;
  --bk-burgundy:  #A91842;   /* hover / dark raspberry */
  --bk-deep:      #64253E;   /* deep berry, sparingly */
  --bk-blush:     #F5B8CA;
  --bk-pink-light:#FCECF1;
  --bk-warm:      #FFF8FA;
  --bk-white:     #FFFFFF;
  --bk-ink:       #454047;
  --bk-muted:     #777078;
  --bk-line:      #E9DDE2;
  --bk-dark:      #64253E;

  --bk-serif: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --bk-sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --bk-r-sm: 4px;
  --bk-r-md: 8px;
  --bk-shadow: 0 1px 2px rgba(69,64,71,.06), 0 8px 24px rgba(69,64,71,.06);
  --bk-focus: 0 0 0 3px rgba(197,31,80,.28);

  /* remap the legacy variables used all over the inline CSS */
  --bg: var(--bk-warm);
  --card: var(--bk-white);
  --text: var(--bk-ink);
  --muted: var(--bk-muted);
  --line: var(--bk-line);
  --accent: var(--bk-raspberry);
  --accent-2: var(--bk-burgundy);
  --soft: var(--bk-warm);
  --shadow: var(--bk-shadow);
}

/* ---- 2. Global ------------------------------------------------------------ */
html body {
  background: var(--bk-warm);
  color: var(--bk-ink);
  font-family: var(--bk-sans);
  -webkit-font-smoothing: antialiased;
}
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible {
  outline: 2px solid var(--bk-raspberry);
  outline-offset: 2px;
  box-shadow: var(--bk-focus);
}
html body ::selection { background: var(--bk-blush); color: var(--bk-ink); }

/* serif only for the wordmark and page-level editorial headlines */
html body h1.logo,
html body .wrap > h1,
html body .page .title {
  font-family: var(--bk-serif);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--bk-ink);
}
html body .logo::after { display: none !important; }   /* remove flour-smear decoration */

/* ---- 3. Top bar: About pill + language switch ----------------------------- */
html body .about-top-pill {
  border-radius: var(--bk-r-sm);
  border: 1px solid var(--bk-ink);
  background: transparent;
  box-shadow: none;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--bk-ink);
}
html body .about-top-pill:hover { background: var(--bk-ink); color: #fff; border-color: var(--bk-ink); }

html body .lang {
  background: transparent;
  border: 0;
  box-shadow: none;
  gap: 2px;
}
html body .lang a {
  border-radius: var(--bk-r-sm);
  color: var(--bk-muted);
  font-weight: 700;
  letter-spacing: .06em;
  background: transparent;
}
html body .lang a.active,
html body .lang a:hover { background: var(--bk-raspberry); color: #fff; }

/* ---- 4. Hero --------------------------------------------------------------- */
html body main.page > .hero { background: transparent; border: 0; box-shadow: none; }
html body .hero-copy { position: relative; }
html body h1.logo {
  font-size: clamp(52px, 9vw, 104px);
  line-height: .95;
  margin-bottom: 14px;
}
html body h1.logo::before {           /* raspberry bar accent */
  content: "";
  display: block;
  width: 56px; height: 4px;
  background: var(--bk-raspberry);
  margin-bottom: 18px;
}
html body .tagline {
  font-family: var(--bk-sans);
  font-style: normal;
  color: var(--bk-muted);
  font-size: clamp(16px, 2vw, 20px);
  letter-spacing: .01em;
}
html body .hero-photo {
  border-radius: var(--bk-r-sm);
  box-shadow: none;
  border: 0;
}

/* ---- 5. "Recently added" — dark editorial band (Concept C) ----------------- */
html body section.latest { background: transparent; }
html body .b34-latest {
  background: var(--bk-dark);
  border-radius: var(--bk-r-sm);
  padding: 28px 0 26px;
  margin-left: 0; margin-right: 0;
  color: #fff;
}
html body .b34-title {
  color: #fff;
  font-family: var(--bk-serif);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -.005em;
  padding: 0 24px;
}
html body .b34-window::before { background: linear-gradient(90deg, var(--bk-dark), rgba(255,255,255,0)) !important; }
html body .b34-window::after  { background: linear-gradient(270deg, var(--bk-dark), rgba(255,255,255,0)) !important; }
html body .b34-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--bk-r-sm) !important;
  box-shadow: none !important;
  color: #fff !important;
}
html body .b34-card img { border-radius: var(--bk-r-sm); }
html body .b34-card-title {
  color: #fff !important;
  font-family: var(--bk-sans);
  font-weight: 600;
  letter-spacing: .01em;
}
html body .b34-card:hover .b34-card-title { color: var(--bk-blush) !important; }

/* ---- 6. Search ------------------------------------------------------------- */
html body .search {
  background: var(--bk-white);
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-r-md);
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
html body .search:focus-within { border-color: var(--bk-raspberry); box-shadow: var(--bk-focus); }
html body .search input { background: transparent; color: var(--bk-ink); font-family: var(--bk-sans); }
html body .search input::placeholder { color: #8d8a87; }
html body .search input:focus-visible { outline: 0; box-shadow: none; }

/* ---- 7. Category filters --------------------------------------------------- */
html body .filter {
  background: var(--bk-white);
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-r-md);
  color: var(--bk-ink);
  box-shadow: none;
  font-weight: 600;
  font-family: var(--bk-sans);
}
html body .filter:hover { border-color: var(--bk-raspberry); color: var(--bk-raspberry); }
html body .filter.active {
  background: var(--bk-raspberry);
  border-color: var(--bk-raspberry);
  color: #fff;
}

/* ---- 8. Recipe cards (homepage, index, category) --------------------------- */
html body .recipe-card,
html body .card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
html body .recipe-card:hover,
html body .card:hover { transform: none; box-shadow: none; }
html body .recipe-card img,
html body .card img {
  border-radius: var(--bk-r-sm);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  display: block;
  transition: opacity .2s ease;
}
html body .recipe-card:hover img,
html body .card:hover img { opacity: .92; }
html body .recipe-body,
html body .card-body { padding: 12px 2px 4px; background: transparent; }
html body .recipe-body h3,
html body .card h3 {
  font-family: var(--bk-sans);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -.005em;
  color: var(--bk-ink);
}
html body .recipe-card h3 a:hover,
html body .card h3 a:hover { color: var(--bk-raspberry); }
html body .recipe-meta,
html body .card small,
html body .card p {
  color: var(--bk-muted);
  font-size: 13px;
  letter-spacing: .02em;
}

/* ---- 9. Pagination --------------------------------------------------------- */
html body .pagination a,
html body .pagination span {
  border-radius: var(--bk-r-sm);
  border: 1px solid var(--bk-line);
  background: var(--bk-white);
  color: var(--bk-ink);
}
html body .pagination a:hover { border-color: var(--bk-raspberry); color: var(--bk-raspberry); }
html body .pagination .current { background: var(--bk-raspberry); border-color: var(--bk-raspberry); color: #fff; }

/* ---- 10. Empty / lead / back ------------------------------------------------ */
html body .empty { background: var(--bk-white); border: 1px dashed var(--bk-line); border-radius: var(--bk-r-sm); color: var(--bk-muted); }
html body .lead { color: var(--bk-muted); }
html body .back, html body .back-link { color: var(--bk-raspberry); font-weight: 700; }

/* ---- 11. Academy teaser (editorial dark block, Concept C) ------------------ */
html body .academy-teaser {
  background: var(--bk-dark);
  border: 0;
  border-radius: var(--bk-r-sm);
  box-shadow: none;
  color: #fff;
}
html body .academy-teaser h2 {
  font-family: var(--bk-serif); font-style: normal; font-weight: 600; color: #fff;
}
html body .academy-teaser p { color: rgba(255,255,255,.72); }
html body .academy-teaser-item {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--bk-r-sm);
  color: #fff;
  box-shadow: none;
}
html body .academy-teaser-item:hover { border-color: var(--bk-blush); background: rgba(255,255,255,.10); }
html body .academy-teaser-cta { color: var(--bk-blush); font-weight: 700; }
html body .academy-teaser-cta:hover { color: #fff; }

/* ---- 12. Footer / social --------------------------------------------------- */
html body .bd-social-footer { background: transparent; border-top: 1px solid var(--bk-line); color: var(--bk-muted); }
html body .bd-social-footer a { color: var(--bk-ink); }
html body .bd-social-footer a:hover { color: var(--bk-raspberry); }

/* ---- 13. Cookie box -------------------------------------------------------- */
html body .bd-cookie-btn { border-radius: var(--bk-r-sm); font-weight: 700; }
html body .bd-cookie-accept { background: var(--bk-raspberry); border-color: var(--bk-raspberry); color: #fff; }
html body .bd-cookie-decline { background: transparent; color: var(--bk-ink); border: 1px solid var(--bk-line); }

/* ---- 14. Recipe detail ----------------------------------------------------- */
html body .recipe .eyebrow, html body .page .eyebrow {
  color: var(--bk-raspberry); text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: 12px;
}
html body .recipe h1, html body .hero-copy h1:not(.logo) {
  font-family: var(--bk-serif); font-style: normal; font-weight: 600; letter-spacing: -.01em; color: var(--bk-ink);
}
html body .hero-img, html body .hero-img-wrap, html body .photo-gallery img,
html body .gallery-thumb-btn, html body .linked-card, html body .linked-card-img {
  border-radius: var(--bk-r-sm);
}
html body .section { background: var(--bk-white); border: 1px solid var(--bk-line); border-radius: var(--bk-r-sm); box-shadow: none; }
html body .section-title {
  font-family: var(--bk-sans); font-style: normal; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  font-size: 13px; color: var(--bk-raspberry);
}
html body .pill { background: var(--bk-white); border: 1px solid var(--bk-line); border-radius: var(--bk-r-sm); color: var(--bk-ink); }
html body .step .num, html body .steps .num { background: var(--bk-raspberry); color: #fff; border-radius: var(--bk-r-sm); }
html body .note { background: var(--bk-warm); border: 1px solid var(--bk-line); border-left: 4px solid var(--bk-raspberry); border-radius: var(--bk-r-sm); }
html body .warning-note { border-left-color: var(--bk-burgundy); }
html body .linked-card { background: var(--bk-white); border: 1px solid var(--bk-line); box-shadow: none; }
html body .linked-card:hover { border-color: var(--bk-raspberry); }
html body .linked-card-title { font-family: var(--bk-sans); font-weight: 700; color: var(--bk-ink); }

/* ---- 15. About ------------------------------------------------------------- */
html body .body-card { background: var(--bk-white); border: 1px solid var(--bk-line); border-radius: var(--bk-r-sm); box-shadow: none; }
html body .pull { border-left: 4px solid var(--bk-raspberry); font-family: var(--bk-serif); font-style: normal; color: var(--bk-ink); }
html body .avatar { border-radius: var(--bk-r-sm); }
html body .contact-link { color: var(--bk-raspberry); font-weight: 700; }

/* ---- 16. Mobile ------------------------------------------------------------ */
@media (max-width: 640px) {
  html body h1.logo { font-size: clamp(44px, 14vw, 64px); }
  html body .b34-latest { border-radius: 0; }
  html body .b34-title { padding: 0 16px; }
  html body .filter { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html body * { transition: none !important; animation-duration: .01ms !important; }
}

/* ---- 17. Overrides for legacy !important rules in page CSS ------------------ */
html body .recipe-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
html body .recipe-card:hover { transform: none !important; box-shadow: none !important; border-color: transparent !important; }
html body .recipe-card img { border-radius: var(--bk-r-sm) !important; background: var(--bk-line) !important; }
html body .recipe-card a { color: var(--bk-ink) !important; }
html body .recipe-card h2, html body .recipe-card h3, html body .recipe-card .recipe-title,
html body .recipe-card .card-title, html body .recipe-card a:not(:has(img)) {
  color: var(--bk-ink) !important; font-weight: 700 !important; font-size: 17px !important;
}
html body .recipe-card h3 a:hover { color: var(--bk-raspberry) !important; }
html body main.page > .hero, html body .latest { border-radius: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
html body .hero-photo { border-radius: var(--bk-r-sm) !important; }
html body .tagline { font-style: normal !important; }
html body .filter { box-shadow: none !important; }
html body .bd-cookie-box {
  border-radius: var(--bk-r-sm); background: var(--bk-white); border: 1px solid var(--bk-line);
  color: var(--bk-ink); box-shadow: 0 12px 40px rgba(69,64,71,.18);
}
html body .bd-cookie-title, html body .bd-cookie-text { color: var(--bk-ink); }
html body .bd-social-btn {
  border-radius: var(--bk-r-sm); background: var(--bk-white); border: 1px solid var(--bk-line);
  color: var(--bk-ink); box-shadow: none;
}
html body .bd-social-btn:hover { background: var(--bk-raspberry); border-color: var(--bk-raspberry); color: #fff; }
html body .bd-social-label { font-family: var(--bk-serif); font-style: normal; color: var(--bk-ink); }
html body .bd-social-copyright { color: var(--bk-muted); }
html body .b34-title { text-transform: none; letter-spacing: -.005em; font-size: clamp(24px, 3vw, 32px); }
@media (max-width: 900px) { html body .hero-photo { border-radius: var(--bk-r-sm) !important; } }
html body .academy-teaser-cta { border-radius: var(--bk-r-sm) !important; background: var(--bk-raspberry) !important; color: #fff !important; }
html body .academy-teaser-cta:hover { background: var(--bk-burgundy) !important; color: #fff !important; }

/* ==========================================================================
   v2 refinements — bolder raspberry, photo-led editorial layout
   ========================================================================== */
html { border-top: 6px solid var(--bk-raspberry); }
html body { background: var(--bk-white); }

/* Hero: solid raspberry panel + big photo (Concept A) */
html body main.page { max-width: 1240px; }
html body main.page > .hero { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: 0; min-height: 520px; background: var(--bk-raspberry) !important; border-radius: 0 !important; overflow: hidden; }
html body .hero-copy { background: var(--bk-raspberry); padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; }
html body h1.logo { color: #fff; font-size: clamp(56px, 8vw, 112px); font-weight: 700; }
html body h1.logo::before { background: var(--bk-blush); width: 72px; height: 5px; }
html body .tagline { color: rgba(255,255,255,.92); font-size: clamp(18px, 2vw, 22px); font-weight: 500; line-height: 1.5; }
html body .hero-photo { border-radius: 0 !important; min-height: 520px; }
@media (max-width: 900px) {
  html body main.page > .hero { grid-template-columns: 1fr; min-height: 0; }
  html body .hero-photo { order: -1; min-height: 260px; height: 260px; border-radius: 0 !important; }
  html body .hero-copy { padding: 32px 22px 36px; }
  html body h1.logo { font-size: clamp(48px, 15vw, 72px); }
}

/* top links sit on white above hero */
html body .about-top-pill { background: #fff; border-color: var(--bk-line); }

/* Featured band: the ONE dark section on the homepage */
html body .b34-latest { margin-top: 0; padding: 36px 0 32px; }
html body .b34-title { font-size: clamp(28px, 3.4vw, 40px); color: #fff; }
html body .b34-title::after { content: ""; display: block; width: 48px; height: 4px; background: var(--bk-raspberry); margin-top: 12px; }

/* Search: large, prominent, raspberry button feel */
html body .search { border: 2px solid var(--bk-ink); border-radius: 0; min-height: 60px; margin-top: 40px; }
html body .search input { font-size: 18px; }
html body .search:focus-within { border-color: var(--bk-raspberry); }

/* Filters: text tabs with raspberry underline instead of pills */
html body .filters, html body nav.filters { gap: 4px 22px; justify-content: flex-start; border-bottom: 1px solid var(--bk-line); padding-bottom: 0; }
html body .filter { background: transparent !important; border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; padding: 12px 2px; color: var(--bk-ink); font-weight: 700; letter-spacing: .02em; }
html body .filter:hover { color: var(--bk-raspberry); border-bottom-color: var(--bk-blush) !important; }
html body .filter.active { color: var(--bk-raspberry) !important; border-bottom-color: var(--bk-raspberry) !important; background: transparent !important; }

/* Recipe grid: editorial mosaic — big lead image + portrait crops */
html body .recipes-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  grid-auto-flow: dense;
  gap: 36px 24px !important;
  margin-top: 36px;
}
html body .recipes-grid .recipe-card:first-child { grid-column: span 2; grid-row: span 2; }
html body .recipes-grid .recipe-card { display: flex; flex-direction: column; }
html body .recipes-grid .recipe-card > a { display: block; overflow: hidden; border-radius: var(--bk-r-sm); flex: 1 1 auto; }
html body .recipes-grid .recipe-card img { aspect-ratio: 4 / 5 !important; height: 100% !important; transition: transform .5s ease; }
html body .recipes-grid .recipe-card:first-child img { aspect-ratio: auto !important; min-height: 100%; }
html body .recipes-grid .recipe-card:hover img { transform: scale(1.03); opacity: 1; }
html body .recipe-body { display: flex; flex-direction: column; padding: 14px 0 0; }
html body .recipe-body .recipe-meta { order: -1; color: var(--bk-raspberry); font-weight: 800; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
html body .recipes-grid .recipe-body h3 { font-size: 19px !important; font-weight: 800 !important; line-height: 1.2; }
html body .recipes-grid .recipe-card:first-child .recipe-body h3 { font-size: clamp(24px, 2.6vw, 34px) !important; letter-spacing: -.01em; }
@media (max-width: 900px) { html body .recipes-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 28px 14px !important; } }
@media (max-width: 480px) {
  html body .recipes-grid .recipe-card:first-child { grid-column: span 2; grid-row: auto; }
  html body .recipes-grid .recipe-card:first-child img { aspect-ratio: 4 / 3 !important; }
  html body .recipes-grid .recipe-body h3 { font-size: 16px !important; }
}

/* Listing pages (index, category) share the same language */
html body .grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; gap: 36px 24px; }
html body .card { max-width: none; }
html body .card img { aspect-ratio: 4 / 5; }
html body .card h3 { font-weight: 800; font-size: 19px; }
html body .wrap > h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 700; }
html body .wrap > h1::before { content: ""; display: block; width: 56px; height: 4px; background: var(--bk-raspberry); margin-bottom: 16px; }

/* Pagination: raspberry */
html body .pagination .current { background: var(--bk-raspberry); }

/* Academy: light, so only one dark section on the page */
html body .academy-teaser { background: var(--bk-warm) !important; color: var(--bk-ink); border-top: 4px solid var(--bk-raspberry) !important; border-radius: 0 !important; }
html body .academy-teaser h2 { color: var(--bk-ink); }
html body .academy-teaser p { color: var(--bk-muted); }
html body .academy-teaser-item { background: #fff; border: 1px solid var(--bk-line); color: var(--bk-ink); }
html body .academy-teaser-item:hover { border-color: var(--bk-raspberry); background: #fff; }
html body .academy-teaser-cta { background: var(--bk-raspberry) !important; color: #fff !important; }

/* Footer: raspberry social buttons */
html body .bd-social-btn { background: var(--bk-raspberry); border-color: var(--bk-raspberry); color: #fff; }
html body .bd-social-btn:hover { background: var(--bk-burgundy); border-color: var(--bk-burgundy); }
html body .bd-social-footer { background: var(--bk-warm); }
html body .bd-social-btn { background: #fff; border: 2px solid var(--bk-raspberry); color: var(--bk-raspberry); }
html body .bd-social-btn:hover { background: var(--bk-raspberry); color: #fff; }

/* ---- Hero photograph (no baked-in text; headline is real HTML) -------------
   Originals hero_bread.jpg / hero_mobile.jpg are kept untouched in static/img. */
html body .hero-photo {
  background-image: url("/static/img/hero_bakeidoo.jpg") !important;
  background-size: cover !important;
  background-position: 82% 55% !important;
  background-repeat: no-repeat !important;
}
@media (max-width: 900px) {
  html body .hero-photo {
    background-image: url("/static/img/hero_bakeidoo_mobile.jpg") !important;
    background-position: 62% 50% !important;
    min-height: 300px; height: 300px;
  }
}
@media (max-width: 480px) {
  html body .hero-photo { background-position: 58% 50% !important; height: 280px; min-height: 280px; }
}
@media (max-width: 900px) {   /* language switch stays readable when it overlaps the photo */
  html body .lang { background: rgba(255,255,255,.92); padding: 3px; border-radius: var(--bk-r-sm); }
}

/* ==========================================================================
   v4 — shorter hero, more breathing room, light "Recently added" band
   ========================================================================== */
html body main.page > .hero { min-height: 430px; }
html body .hero-photo { min-height: 430px; }
html body .hero-copy { padding: 64px 60px 64px 64px; }
html body h1.logo { margin: 0 0 22px; line-height: 1; }
html body h1.logo::before { margin-bottom: 26px; }
html body .tagline { max-width: 420px; line-height: 1.65; }
@media (max-width: 1100px) { html body .hero-copy { padding: 48px 36px 48px 40px; } }
@media (max-width: 900px) {
  html body main.page > .hero { min-height: 0; }
  html body .hero-photo { min-height: 300px; height: 300px; }
  html body .hero-copy { padding: 36px 24px 40px; }
  html body h1.logo { margin-bottom: 16px; }
  html body h1.logo::before { margin-bottom: 20px; }
}
@media (max-width: 480px) { html body .hero-photo { min-height: 280px; height: 280px; } }

/* Recently added: very light pink, raspberry heading, no black */
html body .b34-latest {
  background: var(--bk-pink-light, #FCECF1);
  color: var(--bk-ink);
  border-top: 4px solid var(--bk-raspberry);
  border-radius: 0;
  padding: 32px 0 30px;
}
html body .b34-title { color: var(--bk-raspberry); }
html body .b34-title::after { background: var(--bk-blush); }
html body .b34-window::before { background: linear-gradient(90deg, #FCECF1, rgba(252,236,241,0)) !important; }
html body .b34-window::after  { background: linear-gradient(270deg, #FCECF1, rgba(252,236,241,0)) !important; }
html body .b34-card { color: var(--bk-ink) !important; }
html body .b34-card img { border-radius: var(--bk-r-sm); }
html body .b34-card-title { color: var(--bk-ink) !important; font-weight: 700; }
html body .b34-card:hover .b34-card-title { color: var(--bk-raspberry) !important; }

/* ==========================================================================
   v5 — hero ~13% lower, white "Recently added", floating controls clear content
   ========================================================================== */
html body main.page > .hero { min-height: 372px; }
html body .hero-photo { min-height: 372px; }
html body .hero-copy { padding: 52px 56px 52px 64px; }
html body h1.logo { font-size: clamp(52px, 7.4vw, 100px); }
@media (max-width: 1100px) { html body .hero-copy { padding: 40px 32px 40px 40px; } }
@media (max-width: 900px) {
  html body .hero-photo { min-height: 260px; height: 260px; }
  html body .hero-copy { padding: 30px 24px 34px; }
}
@media (max-width: 480px) { html body .hero-photo { min-height: 244px; height: 244px; } }

/* Recently added: white, raspberry top border + heading, pink accent line only */
html body .b34-latest { background: var(--bk-white); border-top: 4px solid var(--bk-raspberry); box-shadow: none; }
html body .b34-title::after { background: var(--bk-blush); }
html body .b34-window::before { background: linear-gradient(90deg, #fff, rgba(255,255,255,0)) !important; }
html body .b34-window::after  { background: linear-gradient(270deg, #fff, rgba(255,255,255,0)) !important; }
html body .b34-card { background: var(--bk-white) !important; }

/* long titles wrap instead of clipping */
html body .b34-card-title { overflow-wrap: anywhere; word-break: normal; hyphens: auto; }
html body .recipe-body h3, html body .card h3 { overflow-wrap: anywhere; }

/* keep the last content clear of the floating helper button */
html body { padding-bottom: 88px; }
@media (max-width: 640px) { html body { padding-bottom: 84px; } }

/* ---- Floating assistant: smooth vertical move + compact (avatar only) ------ */
html body #b34-helper { transition: bottom .25s ease; }
html body #b34-helper.bk-compact .bakeidoo-helper-overlap-bubble { display: none !important; }
html body #b34-helper .bakeidoo-helper-overlap-bubble {
  background: var(--bk-white) !important; border: 1.6px solid var(--bk-raspberry) !important;
  color: var(--bk-ink) !important; box-shadow: 0 8px 20px rgba(69,64,71,.12) !important;
}
html body #b34-open { border: 3px solid var(--bk-raspberry); }
@media (prefers-reduced-motion: reduce) { html body #b34-helper { transition: none; } }

/* About page hero: light, with raspberry top rule (the raspberry hero panel is homepage-only) */
html body main.page > .hero:not(:has(> .hero-copy)) { background: var(--bk-pink-light); border-top: 4px solid var(--bk-raspberry); border-radius: var(--bk-r-sm); box-shadow: none; }
html body main.page > .hero:not(:has(> .hero-copy)) { background: var(--bk-pink-light) !important; min-height: 0 !important; display: block !important; }
html body .page .hero .title { color: var(--bk-raspberry); }
html body .page .hero .lede { color: var(--bk-ink); }
html body .page .hero .eyebrow { color: var(--bk-deep); }

/* ---- Assistant panel (desktop/tablet): never taller than the window; the results scroll inside ---- */
@media (min-width: 761px) {
  html body #b34-helper-panel.open {
    display: flex !important; flex-direction: column !important; overflow: hidden !important;
    max-height: calc(100vh - 130px) !important; max-height: calc(100dvh - 130px) !important;
  }
  html body #b34-helper-panel .b34-helper-head { flex: 0 0 auto !important; }
  html body #b34-helper-panel .b34-helper-body {
    flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important;
    overflow-y: auto !important; overscroll-behavior: contain;
  }
  html body #b34-helper-panel #b34-results { max-height: none !important; overflow: visible !important; }
  /* label next to the avatar stays visible on desktop (compact mode is for phones only) */
  html body #b34-helper.bk-compact .bakeidoo-helper-overlap-bubble { display: block !important; }
}

/* ---- Photos: soft rounded corners, equal-size cards (no enlarged first card) ---- */
html:root { --bk-r-photo: 20px; }
html body .recipes-grid .recipe-card:first-child,
html body .recipes-grid .recipe-card:first-child:nth-child(n) { grid-column: auto !important; grid-row: auto !important; }
html body .recipes-grid .recipe-card:first-child img { aspect-ratio: 4 / 5 !important; min-height: 0 !important; }
html body .recipes-grid .recipe-card:first-child .recipe-body h3 { font-size: 19px !important; letter-spacing: 0; }
@media (max-width: 480px) {
  html body .recipes-grid .recipe-card:first-child { grid-column: auto !important; }
  html body .recipes-grid .recipe-card:first-child img { aspect-ratio: 4 / 5 !important; }
  html body .recipes-grid .recipe-body h3 { font-size: 16px !important; }
}
html body .recipes-grid .recipe-card > a,
html body .recipes-grid .recipe-card img,
html body .card > a, html body .card img,
html body .b34-card, html body .b34-card img,
html body .hero-img-wrap, html body .hero-img,
html body .gallery-thumb-btn, html body .gallery-thumb-btn img,
html body .linked-card-img, html body .linked-card > a > img,
html body .b34-result img,
html body .hero-photo { border-radius: var(--bk-r-photo) !important; }
html body .hero-photo { overflow: hidden; }
html body .recipes-grid .recipe-card > a, html body .hero-img-wrap, html body .card > a { overflow: hidden; }
html body .recipe .hero-img-wrap, html body .recipe .hero-img, html body .hero-img-wrap .hero-img,
html body .recipe .gallery-thumb-btn, html body .recipe .gallery-thumb-btn img,
html body .recipe .linked-card-img, html body .recipe .linked-card > a > img,
html body .recipe .photo-gallery img { border-radius: var(--bk-r-photo) !important; }