/* Recipe page (2026-11 redesign): green hero band, a short "why it works" article with
   an On-this-page rail, then the recipe card. Plain CSS on the shared ck- tokens
   (static/css/ck-frame-v20261103.css); every class is prefixed ck-r- so it cannot meet
   the Tailwind classes other templates still use. */

.ck-r { font-family: var(--ck-body); color: var(--ck-fg); background: var(--ck-bg); }
.ck-r a { color: var(--ck-sage-ink); }

/* ---- Hero ------------------------------------------------------------------ */
.ck-r-hero { background: var(--ck-sage); color: var(--ck-on-dark); }
.ck-r-hero .ck-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center;
  padding-top: 28px; padding-bottom: 28px; }
.ck-r-crumbs { font-size: 13px; color: var(--ck-on-dark2); margin-bottom: 10px; }
.ck-r-crumbs a { color: var(--ck-on-dark); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255,255,255,.4); }
.ck-r-tag { font: 500 12px var(--ck-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ck-on-dark2); margin-bottom: 6px; }
.ck-r-hero h1 { font: 400 clamp(32px, 4.5vw, 48px)/1.08 var(--ck-display); margin: 0 0 12px; text-wrap: balance; color: var(--ck-on-dark); }
.ck-r-desc { font-size: 17px; line-height: 1.55; max-width: 62ch; margin: 0 0 12px; color: var(--ck-on-dark2); }
.ck-r-byline { font-size: 14px; color: var(--ck-on-dark2); margin-bottom: 16px; }
.ck-r-byline a { color: var(--ck-on-dark); }
.ck-r-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.ck-r-cta .ck-btn-line { background: transparent; color: var(--ck-on-dark); border-color: rgba(255,255,255,.45); }
.ck-r-cta .ck-btn-line:hover { background: rgba(255,255,255,.08); }
.ck-r-photo { margin: 0; width: 300px; }
.ck-r-photo img { display: block; width: 300px; height: 300px; object-fit: cover; border-radius: 14px;
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.6); max-width: 100%; }

/* ---- Article + rail --------------------------------------------------------- */
.ck-r-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 40px; padding-top: 28px; padding-bottom: 40px; }
.ck-r-article { min-width: 0; max-width: 760px; }
.ck-r-read { font-size: 14px; color: var(--ck-fg3); margin: 0 0 6px; }
/* 2026-11-03 review: recipe first; one-line why, the science after the card. */
.ck-r-why1 { font-size: 16px; line-height: 1.6; margin: 4px 0 18px; max-width: 68ch; }
.ck-r-why1 a { white-space: nowrap; }
.ck-r-science { margin-top: 32px; padding-top: 8px; border-top: 2px solid var(--ck-line); }
.ck-r-sciencehead { font: 500 12px var(--ck-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ck-fg3); margin: 12px 0 0; }
.ck-r-sec { padding: 18px 0; border-bottom: 1px solid var(--ck-line); }
.ck-r-sec h2 { font: 400 28px/1.2 var(--ck-display); margin: 0 0 12px; text-wrap: balance; }
.ck-r-sec p { line-height: 1.6; }
.ck-r-fine { font-size: 13px; color: var(--ck-fg3); line-height: 1.5; }


.ck-r-team { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 10px; }
.ck-r-team li { border: 1px solid var(--ck-line); border-radius: 12px; padding: 12px 14px; background: var(--ck-card); }
.ck-r-fthead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; }
.ck-r-fthead b { font-size: 16px; }
.ck-r-fthead span { font-size: 13px; color: var(--ck-fg3); }
.ck-r-ftrow { display: grid; grid-template-columns: 120px minmax(0, 1fr) 120px; gap: 10px; align-items: center; font-size: 13px; }
.ck-r-ftrow + .ck-r-ftrow { margin-top: 5px; }
.ck-r-ftrow small { color: var(--ck-fg3); font-size: 13px; }
.ck-r-ftrow i { display: block; height: 8px; border-radius: 4px;
  background: linear-gradient(var(--ck-sage-ink), var(--ck-sage-ink)) left / var(--w) 100% no-repeat, rgba(45,42,38,.08); }
.ck-r-ftrow i.ck-r-cop { background: linear-gradient(var(--ck-copper-soft), var(--ck-copper-soft)) left / var(--w) 100% no-repeat, rgba(45,42,38,.08); }
.ck-r-ftrow em { font-style: normal; color: var(--ck-fg2); text-align: right; font-variant-numeric: tabular-nums; }
.ck-r-ftnote { margin: 8px 0 0; font-size: 13px; color: var(--ck-fg2); }

.ck-r-roles { margin: 0; display: grid; gap: 8px; }
.ck-r-roles div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; }
.ck-r-roles dt { font-weight: 600; }
.ck-r-roles dd { margin: 0; color: var(--ck-fg2); line-height: 1.5; }
.ck-r-callout { background: #FFF5EB; border-left: 4px solid var(--ck-copper-soft); border-radius: 8px; padding: 14px 16px; line-height: 1.6; }
.ck-r-callout p { margin: 0; }
.ck-r-ai { font-size: 13px; color: var(--ck-fg3); margin: 14px 0 0; }

.ck-r-rail { position: relative; }
.ck-r-toc { position: sticky; top: 84px; border: 1px solid var(--ck-line); border-radius: 14px; padding: 14px 16px; background: var(--ck-card); }
.ck-r-toc b { display: block; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ck-fg3); margin-bottom: 8px; }
.ck-r-toc ol { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.ck-r-toc a { text-decoration: none; }
.ck-r-toc a:hover { text-decoration: underline; }
.ck-r-toc .ck-btn { width: 100%; }

/* ---- Recipe card ------------------------------------------------------------ */
.ck-r-card { margin-top: 26px; border: 1px solid var(--ck-line); border-radius: 18px; background: var(--ck-card); overflow: hidden; scroll-margin-top: 80px; }
.ck-r-cardhead { background: #FFFAF5; padding: 18px 22px; border-bottom: 1px solid var(--ck-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; align-items: baseline; }
.ck-r-cardhead h2 { font: 400 30px/1.15 var(--ck-display); margin: 0; }
.ck-r-cardhead span { color: var(--ck-fg3); font-size: 14px; }
.ck-r-cardbody { padding: 18px 22px 22px; display: grid; gap: 22px; }
.ck-r-cardbody h3 { font: 600 13px var(--ck-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ck-fg3); margin: 0 0 10px; }
.ck-r-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.ck-r-details div { background: #FFFAF5; border-radius: 10px; padding: 10px 12px; }
.ck-r-details small { display: block; font-size: 12px; color: var(--ck-fg3); }
.ck-r-details b { font-size: 15px; }
.ck-r-ing { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ck-r-ing label { display: flex; gap: 10px; align-items: flex-start; padding: 7px 4px; border-radius: 8px; cursor: pointer; line-height: 1.45; }
.ck-r-ing label:hover { background: #FFFAF5; }
.ck-r-ing input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ck-sage); flex: none; }
.ck-r-ing input:checked + span { color: var(--ck-fg3); text-decoration: line-through; }
.ck-r-stage + .ck-r-stage { margin-top: 16px; }
.ck-r-stage h4 { font: 600 16px var(--ck-body); margin: 0 0 8px; }
.ck-r-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: s var(--start, 0); }
.ck-r-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; line-height: 1.6; counter-increment: s; }
.ck-r-steps li::before { content: counter(s); width: 26px; height: 26px; border-radius: 50%; background: #E9F1ED; color: var(--ck-sage-ink);
  font: 600 13px var(--ck-body); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.ck-r-steps p { margin: 0; }
.ck-r-nogo { color: var(--ck-fg2); }
.ck-r-nut { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; text-align: center; }
.ck-r-nut div { background: #FFFAF5; border-radius: 10px; padding: 10px 6px; }
.ck-r-nut b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.ck-r-nut small { font-size: 12px; color: var(--ck-fg3); }
.ck-r-nut-more summary { cursor: pointer; font-size: 13px; color: var(--ck-fg3); margin-top: 8px; }
.ck-r-nut-more table { width: 100%; font-size: 13px; border-collapse: collapse; margin-top: 6px; }
.ck-r-nut-more td, .ck-r-nut-more th { padding: 4px 6px 4px 0; text-align: left; border-top: 1px solid var(--ck-line); font-weight: 400; }
.ck-r-nut-more td:last-child, .ck-r-nut-more th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.ck-r-source { font-size: 14px; color: var(--ck-fg2); background: #FFFAF5; border-radius: 10px; padding: 12px 14px; line-height: 1.55; }
.ck-r-source p { margin: 4px 0 0; font-size: 13px; color: var(--ck-fg3); }

/* ---- After the card --------------------------------------------------------- */
.ck-r-more { padding: 22px 0 0; }
.ck-r-more h2 { font: 400 24px/1.2 var(--ck-display); margin: 0 0 12px; }
.ck-r-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ck-r-chips a { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--ck-line); background: var(--ck-card); text-decoration: none; color: var(--ck-fg); font-size: 14px; }
.ck-r-chips a:hover { border-color: var(--ck-sage-ink); }

@media (max-width: 960px) {
  .ck-r-layout { grid-template-columns: minmax(0, 1fr); }
  .ck-r-rail { display: none; }
}
@media (max-width: 720px) {
  .ck-r-hero .ck-wrap { grid-template-columns: minmax(0, 1fr); }
  .ck-r-photo { width: 200px; order: -1; }
  .ck-r-photo img { width: 200px; height: 200px; }
  .ck-r-ftrow { grid-template-columns: 96px minmax(0, 1fr) 96px; }
  .ck-r-roles div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ck-r-nut { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck-r-cardhead, .ck-r-cardbody { padding-left: 16px; padding-right: 16px; }
}
@media print {
  .ck-top, .ck-foot, .ck-r-hero .ck-r-cta, .ck-r-rail, .ck-r-article > .ck-r-sec, .ck-r-more, .ck-r-signup { display: none !important; }
  .ck-r-hero { background: none; color: #000; }
  .ck-r-hero h1, .ck-r-desc, .ck-r-byline, .ck-r-tag, .ck-r-crumbs { color: #000; }
  .ck-r-card { border: 0; }
}
@media (prefers-reduced-motion: reduce) { .ck-r * { transition: none !important; scroll-behavior: auto !important; } }

/* .ck-r a (link colour) outranks the frame's .ck-btn-* colours; restate them for buttons. */
.ck-r a.ck-btn-copper, .ck-r a.ck-btn-sage { color: #FFFFFF; }

/* Swaps: fit with the rest of the dish, the original marked. */
.ck-r-swaps { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.ck-r-swaps li { display: grid; grid-template-columns: 140px minmax(0, 1fr) 150px; gap: 12px; align-items: center; font-size: 15px; }
.ck-r-swaps i { display: block; height: 10px; border-radius: 5px;
  background: linear-gradient(var(--ck-sage-ink), var(--ck-sage-ink)) left / var(--w) 100% no-repeat, rgba(45,42,38,.08); }
.ck-r-swaps small { color: var(--ck-fg3); font-size: 13px; }
.ck-r-swaps .ck-r-base i { background: linear-gradient(var(--ck-copper-soft), var(--ck-copper-soft)) left / var(--w) 100% no-repeat, rgba(45,42,38,.08); }
.ck-r-swaps .ck-r-base b::after { content: " (original)"; font-weight: 400; color: var(--ck-fg3); }
.ck-r-chips small { color: var(--ck-fg3); margin-left: 4px; }
.ck-r-like { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ck-r-like a { display: grid; gap: 4px; text-decoration: none; color: var(--ck-fg); }
.ck-r-like img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; max-width: 100%; }
.ck-r-like b { font-size: 15px; line-height: 1.3; }
.ck-r-like small { color: var(--ck-fg3); font-size: 13px; }
@media (max-width: 720px) {
  .ck-r-swaps li { grid-template-columns: 100px minmax(0, 1fr); }
  .ck-r-swaps small { grid-column: 2; }
  .ck-r-like { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Swap rows carry a label, not a bar: the fits differ by a few hundredths, and bars
   that all reach 95-100% said nothing. */
.ck-r-swaps li { grid-template-columns: 160px auto; justify-content: start; }
.ck-r-vs { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: rgba(45,42,38,.06); color: var(--ck-fg2); }
.ck-r-vs-fits-better { background: #E9F1ED; color: var(--ck-sage-ink); font-weight: 600; }
.ck-r-vs-the-original { background: #FFF5EB; color: var(--ck-copper-ink); }
.ck-r-roles dt small { font-weight: 400; color: var(--ck-fg3); font-size: 12px; }
.ck-r-histnote { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: #FFF5EB; border-left: 3px solid var(--ck-copper-soft); font-size: 14px; color: var(--ck-fg2); line-height: 1.5; }