/* CompKitchen warm look (visual round 2, 2026-11-11). Loaded by base.html AFTER the
   frame and each page's own stylesheet, so it re-themes the whole site from one file:
   cream body, the audit's tokens, terracotta pill buttons, cream page bands instead of
   the dark-green one, no monospace small caps on consumer pages, Fraunces headings.
   Pine stays for the brand, links and the footer. Remove this file to roll back. */
:root {
  --ck-bg: #FBF6EE; --ck-band: #F6EFE4; --ck-tint: #F7E3D7; --ck-card: #FFFFFF;
  --ck-fg: #2B2522; --ck-fg2: #5A4E47; --ck-fg3: #6B6058;
  --ck-copper: #B4532F; --ck-copper-ink: #93411F;
  --ck-cran: #9E2F3A; --ck-honey: #F3C969; --ck-sage-tint: #E3ECE4; --ck-blush: #F7E3D7;
  --ck-display: 'Fraunces', 'DM Serif Display', Georgia, 'Times New Roman', serif;
}
html, body { background: var(--ck-bg); }
body { color: var(--ck-fg); }

/* Buttons: pills, terracotta for the main action. */
.ck-btn { border-radius: 99px; }
.ck-btn-copper { background: var(--ck-copper); border-color: var(--ck-copper); color: #fff; }
.ck-btn-copper:hover { background: var(--ck-copper-ink); color: #fff; }

/* Page bands (about, faq, privacy, recipes, ingredients, surprises ...): cream with a
   cranberry rule instead of the dark-green block. */
.ck-p-band { background: linear-gradient(135deg, #F6DCDD 0%, #FBF6EE 62%); color: var(--ck-fg); border-bottom: 6px solid var(--ck-cran); }
.ck-p .ck-p-band a, .ck-p-band a { color: var(--ck-fg); text-decoration-color: rgba(43,37,34,.35); }
.ck-p-crumbs { color: var(--ck-fg2); }
.ck-p-eyebrow { font: 600 14px var(--ck-body); letter-spacing: 0; text-transform: none; color: var(--ck-cran); }
.ck-p-band h1 { font-weight: 600; color: var(--ck-fg); }
.ck-p-lead { color: var(--ck-fg2); }
.ck-p-band .ck-btn-line { color: var(--ck-fg); border-color: rgba(43,37,34,.35); background: rgba(255,255,255,.6); }
.ck-p-band .ck-btn-line:hover { background: #fff; }
.ck-p-band .ck-btn-sage, .ck-p-band .ck-btn-copper { color: #fff; }

/* Menus: section labels in plain type, not monospace capitals. */
.ck-dd-h, .ck-mobile-h { font-family: var(--ck-body); font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ck-cran); }

/* Footer: the light vector logo replaces the PNG with its white box. */
.ck-foot-brand img { background: transparent; height: 52px; width: auto; margin-left: -6px; }

/* Every dark-green hero becomes a warm band. Their text rules read --ck-on-dark /
   --ck-on-dark2, so redefining those two inside the band flips them to ink; the few
   hard-coded whites are overridden below. */
.ck-lp-hero, .ck-a-band, .ck-r-hero, .ck-t-wb, .ck-p-band {
  --ck-on-dark: #2B2522; --ck-on-dark2: #5A4E47;
  background: linear-gradient(135deg, #F6DCDD 0%, #FBF6EE 62%); color: #2B2522; border-bottom: 6px solid var(--ck-cran);
}
.ck-lp-hero h1, .ck-a-band h1, .ck-r-hero h1, .ck-p-band h1 { color: #2B2522; font-weight: 600; }
.ck-lp-hero a:not(.ck-btn) { color: #2B2522; text-decoration-color: rgba(43,37,34,.35); }
.ck-lp-hero :focus-visible { outline-color: #2F5349; }
.ck-lp-hero .ck-lp-stats b { color: #2B2522; }
.ck-lp-hero .ck-lp-stats { border-top-color: rgba(43,37,34,.15); }
.ck-lp-eyebrow, .ck-a-tag, .ck-r-tag, .ck-t-eyebrow { font: 600 14px var(--ck-body); letter-spacing: 0; text-transform: none; color: var(--ck-cran); }
.ck-r-crumbs a, .ck-a-crumbs a { text-decoration-color: rgba(43,37,34,.35); }
.ck-r-cta .ck-btn-line, .ck-lp-hero .ck-btn-line, .ck-a-band .ck-btn-line { color: #2B2522; border-color: rgba(43,37,34,.35); background: rgba(255,255,255,.6); }
.ck-a-band .ck-a-bandchips a { border-color: rgba(43,37,34,.3); }
.ck-a-band .ck-a-bandchips a[aria-current] { background: #2F5349; color: #fff; }
/* Recipe search band: its button and hub chips were drawn for a dark background. */
.ck-b-search button { background: var(--ck-copper); border-color: var(--ck-copper); color: #fff; border-radius: 99px; }
.ck-b-search button:hover { background: var(--ck-copper-ink); }
.ck-b-hub { border-top-color: rgba(43,37,34,.15); }
.ck-p .ck-b-hub a { color: #2B2522; border-color: rgba(43,37,34,.25); background: rgba(255,255,255,.6); }
.ck-p .ck-b-hub a:hover { background: #fff; }
.ck-p .ck-b-hub a[aria-current="page"] { background: #2F5349; color: #fff; border-color: #2F5349; }
/* A-Z letter tabs and pagers: plain type on consumer pages. */
.ck-p .ck-b-az a, .ck-b-pager a, .ck-b-pager span { font-family: var(--ck-body); }

/* Drawn recipe icons where a recipe has no photo (templates/_recipe_icon.html). */
.ck-ricon { display: block; width: 100%; height: 100%; }
.ck-r-iconfig { display: grid; place-items: center; background: #fff; border-radius: 50%; box-shadow: 0 4px 18px rgba(43,37,34,.10); aspect-ratio: 1 / 1; padding: 13%; }
.ck-b-ithumb { display: inline-grid; place-items: center; background: #fff; border-radius: 12px; padding: 5px; box-sizing: border-box; flex: none; }
.ck-i-rcicon { display: grid; place-items: center; background: #FBF6EE; aspect-ratio: 4 / 3; padding: 14%; }
@media (max-width: 700px) { .ck-r-iconfig { max-width: 150px; } }

/* Homepage (B4): warm hero; "For teams and schools" fold-out for the pro lanes. */
.ckh .hero { --on-dark: #2B2522; --on-dark2: #5A4E47; background: linear-gradient(135deg, #F6DCDD 0%, #FBF6EE 62%); color: #2B2522; border-bottom: 6px solid var(--ck-cran); }
.ckh .hero a { color: #2B2522; }
.ckh .hero h1 { color: #2B2522; font-family: var(--ck-display); font-weight: 600; }
.ckh .hero-sub, .ckh .try { color: #5A4E47; }
.ckh .hero .btn-copper { background: var(--ck-copper); border-color: var(--ck-copper); color: #fff; border-radius: 99px; }
.ckh .hero input[type=text] { border: 1.5px solid rgba(43,37,34,.2); border-radius: 99px; }
.ckh .hero-nl { border-top-color: rgba(43,37,34,.15); }
.ckh .hero-nl input[type=email] { background: #fff; color: #2B2522; border-color: rgba(43,37,34,.25); }
.ckh .hero-nl input::placeholder { color: #8C847C; }
.ckh .hero-nl .btn { color: #2B2522; border-color: rgba(43,37,34,.35); }
.ckh .lanes-home { grid-template-columns: minmax(0, 560px); }
.ckh details.teams { margin-top: 18px; border: 1.5px solid rgba(47,83,73,.3); border-radius: 16px; background: #fff; padding: 0 18px; }
.ckh details.teams > summary { cursor: pointer; list-style: none; min-height: 56px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 0; font: 600 20px var(--ck-display); color: #2F5349; }
.ckh details.teams > summary::-webkit-details-marker { display: none; }
.ckh details.teams > summary::after { content: "\25B8"; font-size: 16px; }
.ckh details.teams[open] > summary::after { content: "\25BE"; }
.ckh details.teams > summary small { font: 400 14px var(--ck-body); color: #5A4E47; }
.ckh details.teams[open] { padding-bottom: 18px; }
.ckh .eyebrow { font-family: var(--ck-body); font-weight: 700; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ck-cran); }

/* Pricing (B5): "See everything included" and "For teams and schools" fold-outs. */
.ck-lp-more { margin: 4px 0 12px; }
.ck-lp-more > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-weight: 700; color: #2F5349; list-style: none; }
.ck-lp-more > summary::-webkit-details-marker { display: none; }
.ck-lp-more > summary::after { content: " \25B8"; margin-left: 6px; }
.ck-lp-more[open] > summary::after { content: " \25BE"; }
.ck-lp-teams { margin: 36px 0 0; border: 1.5px solid rgba(47,83,73,.3); border-radius: 16px; background: #fff; padding: 0 20px; }
.ck-lp-teams > summary { cursor: pointer; list-style: none; min-height: 60px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 16px 0; font: 600 22px var(--ck-display); color: #2F5349; }
.ck-lp-teams > summary::-webkit-details-marker { display: none; }
.ck-lp-teams > summary::after { content: "\25B8"; font-size: 16px; }
.ck-lp-teams[open] > summary::after { content: "\25BE"; }
.ck-lp-teams > summary small { font: 400 15px var(--ck-body); color: #5A4E47; }
.ck-lp-teams[open] { padding-bottom: 20px; }
.ck-lp-teams .ck-lp-plans { margin-top: 12px; }

/* B6: surprises pair marks, popular ingredients grid, flavor-map fold-out. */
.ck-b-sp-mark { width: 46px; height: 30px; flex: none; align-self: center; }
.ck-ig-pop { padding: 26px 0 6px; }
.ck-ig-pop h2 { font: 600 24px var(--ck-display); margin: 0 0 12px; }
.ck-ig-pop ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ck-ig-pop a { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 14px; border-radius: 14px; background: var(--t); color: #2B2522; font-weight: 700; text-decoration: none; }
.ck-ig-pop a:hover { box-shadow: 0 0 0 2px var(--c); }
.ck-ig-pop i { width: 26px; height: 26px; border-radius: 50%; background: var(--c); flex: none; }
.fm-how > summary { cursor: pointer; list-style: none; }
.fm-how > summary::-webkit-details-marker { display: none; }
.fm-how > summary::after { content: " \25B8"; }
.fm-how[open] > summary::after { content: " \25BE"; }
.ck-l-eyebrow { font-family: var(--ck-body); font-weight: 700; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ck-cran); }
.ck-l-ph, .ck-l-tbtn, .ck-b-sp-n { font-family: var(--ck-body); letter-spacing: 0; text-transform: none; }
.ck-l-ph { font-weight: 700; font-size: 15px; }

/* B7: chart text. Nothing on screen under 13px in the compare and ingredient mini
   charts; labels wrap instead of being cut with an ellipsis ("blackbe...", the
   clipped first bar label); no monospace or capitals in chart labels. */
.ck-c-cx, .ck-i-cx, .ck-c-card .ck-c-fine, .ck-c-tkey, .ck-i-gemtag, .ck-i-ghint, .ck-i-ocz, .ck-i-pc summary small { font-size: 13px; }
.ck-c-dvhead, .ck-c-card .ck-c-dvhead, .ck-i-dvhead, .ck-i-pt th { font-size: 13px; text-transform: none; letter-spacing: 0; white-space: normal; }
.ck-c-card .ck-c-dv b, .ck-i-card .ck-i-dv b, .ck-c-th { font-size: 13px; }
.ck-c-dv em, .ck-c-cr em, .ck-i-dvr em { font-family: var(--ck-body); font-size: 13px; }
.ck-c-th { grid-template-columns: max-content minmax(56px, 1fr); }
.ck-c-th span { overflow: visible; text-overflow: clip; white-space: nowrap; line-height: 1.2; }
.ck-i-dv b { overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.15; }
.ck-i-strip .ck-i-dvlist { padding-top: 4px; }
/* The bars card is the only visible ingredient chart now: let it show every row
   instead of clipping the first and last into a 150px window. */
.ck-i-cb:has(> .ck-i-mb) { height: auto; overflow: visible; }
.ck-r-note { margin: 0 0 12px; padding: 8px 14px; border-radius: 12px; background: #fff; border-left: 4px solid var(--ck-cran); color: #2B2522; font-size: 15px; max-width: 62ch; }

/* Recipe search rows (Mark, 11 Nov: identical "Apple Pie" rows looked off): the main
   ingredients and whether there is a method, so same-titled recipes differ at a glance. */
.ck-b-row-ing { display: block; font-size: 15px; color: #2B2522; margin: 2px 0; }
.ck-b-mtag { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 99px; font: 600 13px var(--ck-body); vertical-align: 2px;
             background: #EFEBE6; color: #5A4E47; }
.ck-b-mtag.is-on { background: #E3ECE4; color: #23402F; }