/* KnowThePepper article layer (UI redesign v2): pepper profile head, quick facts,
   TOC ("On this page"), body column, callouts, tables, FAQ, related cards.
   Loaded after readability.css by the profile template and by templates/partials/article-toc.php
   (so the TOC looks right on every article type that renders it).
   Tokens only (public/assets/css/tokens.css), two widths only: .wrap-wide 1200, .wrap-read 720.
   Comps: art-src/style-refs/ktp-v2/ktp-v2-09, -10, -12, -17. Plan: docs/plans/2026-11-12-ui-redesign-v2.md
   The profile renders under <body class="ktp-v2">, so the legacy readability.css size overrides skip it.
   `!important` appears only where a legacy inline style="" or a legacy rule that still applies to this
   page forces a value (each marked), and on the TOC rules that guide/recipe/substitute/comparison pages
   share while they still load the readability overrides. */

:root {
  --article-hero-overlap: clamp(56px, 12vw, 176px);
  --article-panel-overlap: clamp(56px, 7vw, 96px); /* wide data panel (comparison, substitute) straddles less than a photo */
  --article-hero-gap: clamp(20px, 3vw, 36px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ── Tier variables (set on the [data-tier] wrapper) ── */
[data-tier="mild"]      { --tier: var(--ktp-tier-mild);      --tier-tint: var(--ktp-tier-mild-tint); }
[data-tier="medium"]    { --tier: var(--ktp-tier-medium);    --tier-tint: var(--ktp-tier-medium-tint); }
[data-tier="hot"]       { --tier: var(--ktp-tier-hot);       --tier-tint: var(--ktp-tier-hot-tint); }
[data-tier="extra-hot"] { --tier: var(--ktp-tier-extra-hot); --tier-tint: var(--ktp-tier-extra-hot-tint); }
[data-tier="super-hot"] { --tier: var(--ktp-tier-super-hot); --tier-tint: var(--ktp-tier-super-hot-tint); }

/* ── Head band (blush): breadcrumb, H1, byline ── */
.article-head {
  --pat-clear: 960px; /* slice pattern stays in the side margins, clear of the H1 */
  padding-top: var(--ktp-space-5);
  padding-bottom: var(--article-hero-overlap);
  text-align: center;
}
.article-head--overlap-md { padding-bottom: var(--article-panel-overlap); }
.article-head--plain { padding-bottom: var(--ktp-section-y-sm); }

/* Label above the H1 (a div, never a p: auto ads must not land inside the head) */
.article-head__label {
  margin: var(--ktp-space-4) 0 0;
  color: var(--ktp-muted);
  font-size: var(--ktp-fs-small);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.3;
}
main .article-head__label + .article-head__title { margin-top: var(--ktp-space-2); }

.article-crumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px 10px;
  margin: 0;
  font-size: var(--ktp-fs-small);
  color: var(--ktp-muted);
}
.article-crumbs a {
  color: var(--ktp-muted);
  text-decoration: none;
}
.article-crumbs a:hover { color: var(--ktp-ink); text-decoration: underline; text-underline-offset: 3px; }
.article-crumbs__sep { color: var(--ktp-muted); opacity: .6; }
.article-crumbs__current { color: var(--ktp-ink); }
main .article-crumbs { font-size: var(--ktp-fs-small); } /* above the tokens.css `.breadcrumb` base size */

main .article-head__title {
  margin: var(--ktp-space-4) 0 var(--ktp-space-3);
  font-weight: var(--ktp-fw-display);
  color: var(--ktp-ink);
  text-wrap: balance;
}

/* Byline component (templates/components/byline.php) flattened to one centred muted line */
.article-head .article-byline {
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.article-head .article-byline__avatar { display: none; }
.article-head .article-byline__info {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: .45em;
  color: var(--ktp-muted);
}
.article-head .article-byline__author,
.article-head .article-byline__meta {
  font-size: 1rem;
  color: var(--ktp-muted);
}
.article-head .article-byline__author::after { content: "\00b7"; margin-left: .45em; }
.article-head .article-byline__author a,
.article-head .article-byline__meta a { color: var(--ktp-ink) !important; font-weight: 600 !important; } /* byline.php inline colours */
.article-head .article-byline__meta :where(span, a) { font-size: var(--ktp-fs-ui); } /* the meta box is 1rem; its spans and links render at the UI size */
.article-head .article-byline__meta a { text-decoration: underline; text-decoration-color: var(--ktp-chili-40); text-underline-offset: 3px; }

/* ── Media slot (templates/partials/article-head.php): a wide block that straddles the head band's
   bottom edge. It holds a hero photo (.article-hero, profile) or a data panel (.panel-card, comparison). ── */
.article-media {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--article-hero-gap) - var(--media-overlap, var(--article-hero-overlap)));
  margin-bottom: 0;
}
.article-media--md { --media-overlap: var(--article-panel-overlap); }
.article-media > .article-hero { margin: 0; }

/* ── Hero photo: whole at the file's own ratio, straddling the band edge ── */
.article-hero { margin: 0; }
.article-hero__frame {
  overflow: hidden;
  border-radius: 16px;
  background: var(--ktp-smoke);
  box-shadow: var(--ktp-shadow);
}
.article-hero__frame picture { display: block; width: 100%; height: 100%; }
.article-hero__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* frame ratio equals file ratio, so nothing is cut */
}
.article-hero__frame--contain img { object-fit: contain; } /* near-square or portrait files sit whole on smoke */
.article-hero__credit {
  margin: var(--ktp-space-2) 0 0;
  text-align: center;
  color: var(--ktp-muted);
  font-size: var(--ktp-fs-ui);
}

/* ── Wide panel card: quick facts (profile), verdict panel (comparison); one look for every wide data card ── */
.panel-card,
.profile-facts {
  margin-top: var(--ktp-space-6);
  padding: var(--ktp-space-5) var(--ktp-space-5) var(--ktp-space-6);
  background: var(--ktp-white);
  border: var(--ktp-line);
  border-radius: 16px;
  box-shadow: var(--ktp-shadow);
  box-sizing: border-box;
}
main .profile-facts__title {
  margin: 0 0 var(--ktp-space-4);
  font-family: var(--ktp-font-display);
  font-size: clamp(1.6rem, 3vw, 2.25rem); /* above the tokens.css `p` base size */
  font-weight: var(--ktp-fw-display);
  line-height: 1.1;
  letter-spacing: var(--ktp-tracking-display);
  color: var(--ktp-ink);
}
.article-media > .panel-card { margin-top: 0; }
.profile-facts__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5px;
  margin: 0;
  background: var(--ktp-hairline);
  border-block: 1.5px solid var(--ktp-hairline);
}
.qf-cell {
  margin: 0;
  padding: var(--ktp-space-4) var(--ktp-space-4) var(--ktp-space-4) var(--ktp-space-4);
  background: var(--ktp-white);
}
.qf-cell:last-child:nth-child(3n + 1) { grid-column: span 3; }
.qf-cell:last-child:nth-child(3n + 2) { grid-column: span 2; }
.qf-cell dt {
  margin: 0 0 var(--ktp-space-1);
  color: var(--ktp-muted);
  font-size: var(--ktp-fs-ui);
  line-height: 1.74;
}
.qf-cell dd { margin: 0; line-height: 1.74; }
.qf-cell:first-child .qf-cell__value { font-size: 1.45rem; }
.qf-cell__value {
  display: block;
  font-family: var(--ktp-font-display);
  font-size: 1.2rem;
  font-weight: var(--ktp-fw-number);
  line-height: 1.25;
  color: var(--ktp-ink);
}
.qf-cell dd.qf-cell__value { font-size: var(--ktp-fs-ui); line-height: 1.74; } /* the dd renders at the UI size; spans and em inside keep the display size */
.tier-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--ktp-space-2);
  padding: 3px 12px 3px 10px;
  border-radius: var(--ktp-radius-sm);
  background: var(--tier-tint, var(--ktp-smoke));
  border: 1.5px solid var(--ktp-hairline);
  color: var(--ktp-ink);
  font-size: var(--ktp-fs-small);
  font-weight: 700;
  line-height: 1.4;
}
.tier-chip::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tier, var(--ktp-muted));
}

.profile-facts__scale { margin-top: var(--ktp-space-5); }
.profile-facts__scale-title {
  margin: 0 0 var(--ktp-space-3);
  font-size: var(--ktp-fs-ui);
  color: var(--ktp-ink);
}

/* Log-scale SHU track built on the .range-chart elements (AGENTS.md section 19) */
main .range-chart.range-chart--ramp {
  display: block;
  margin: 0;
  padding: 0 var(--ktp-space-2);
  border: 0;
  border-radius: 0;
  background: none;
}
main .range-chart--ramp .range-chart__row {
  display: block;
  position: relative;
  padding-top: 58px;
}
main .range-chart--ramp .range-chart__row::before { /* pointer from label to the bar */
  content: "";
  position: absolute;
  left: var(--mid);
  top: 44px;
  width: 1.5px;
  height: 18px;
  background: var(--ktp-ink);
}
main .range-chart--ramp .range-chart__label {
  position: absolute;
  top: 0;
  left: var(--mid);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  line-height: 1.3;
  font-weight: 400;
  color: var(--ktp-ink);
}
main .range-chart--ramp .range-chart__label--start { left: 0; transform: none; align-items: flex-start; }
main .range-chart--ramp .range-chart__label--end { left: auto; right: 0; transform: none; align-items: flex-end; }
main .range-chart--ramp .range-chart__label strong { font-weight: 700; }
main .range-chart--ramp .range-chart__value {
  color: var(--ktp-muted);
  font-size: var(--ktp-fs-small);
  text-align: inherit;
}
main .range-chart--ramp .range-chart__track {
  display: block;
  height: 14px;
  border-radius: 7px;
  box-shadow: none;
  background: linear-gradient(90deg,
    var(--ktp-tier-mild) 10%, var(--ktp-tier-medium) 30%, var(--ktp-tier-hot) 50%,
    var(--ktp-tier-extra-hot) 70%, var(--ktp-tier-super-hot) 90%);
}
main .range-chart--ramp .range-chart__row[data-tier] .range-chart__bar {
  top: -4px;
  bottom: -4px;
  min-width: 16px;
  border: 2.5px solid var(--ktp-white);
  border-radius: 999px;
  background: transparent;
  box-shadow: 0 0 0 1.5px var(--ktp-ink);
}
main .range-chart--ramp .range-chart__scale { display: block; }
main .range-chart--ramp .range-chart__scale > * { border-top: 0; padding-top: 0; }
main .range-chart--ramp .range-chart__ticks { display: block; height: 2.9em; margin-top: var(--ktp-space-3); }
main .range-chart--ramp .range-chart__ticks > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--ktp-fs-small);
  line-height: 1.3;
  color: var(--ktp-ink);
}
main .range-chart--ramp .range-chart__ticks > span:first-child { align-items: flex-start; transform: none; }
main .range-chart--ramp .range-chart__ticks > span:last-child { align-items: flex-end; transform: translateX(-100%); }
.range-chart__tick-sub { color: var(--ktp-muted); font-size: 13px; }
main .range-chart--ramp .range-chart__ticks sup { font-size: .7em; line-height: 0; vertical-align: super; }

/* ── Body column: every child is read width; cards and grids are wide ── */
.ktp-article { padding-block: var(--ktp-section-y-sm) var(--ktp-section-y); }
.ktp-article .wrap-wide > * {
  width: min(100%, var(--ktp-w-read));
  margin-inline: auto;
  box-sizing: border-box;
}
.ktp-article .wrap-wide > #related { width: 100%; }
.ktp-article [id] { scroll-margin-top: calc(var(--ktp-header-h) + var(--ktp-space-5)); }

/* Lede (quick summary) */
main .ktp-article .aio-summary-box {
  margin-top: var(--ktp-space-2);
  margin-bottom: var(--ktp-space-6);
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
main .ktp-article .aio-summary-box__text {
  margin: 0 0 var(--ktp-space-4);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ktp-ink);
}
main .ktp-article .aio-summary-box__text strong { color: var(--ktp-ink); }
main .ktp-article .aio-summary-box__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--ktp-fs-small);
  color: var(--ktp-muted);
}
main .ktp-article .aio-summary-box__list li { margin: 0; }

/* H2: tight display face, 56x4 five-segment heat-ramp underline (tier edges, mild to super-hot) */
main .ktp-article .content-section { margin-block: 0 var(--ktp-space-7); }
main .ktp-article .content-section > h2 {
  display: block;
  margin: 0 0 var(--ktp-space-5);
  padding: 0 0 var(--ktp-space-4);
  border: 0;
  color: var(--ktp-ink);
}
main .ktp-article .content-section > h2 { font-size: var(--ktp-fs-h2); line-height: 1.22; letter-spacing: -0.015em; } /* above style.css `.content-section h2` */
@media (max-width: 768px) { main .ktp-article .content-section > h2 { font-size: clamp(1.35rem, 6vw, 1.75rem); } }
main .ktp-article .content-section > h2 { display: block !important; } /* related-visual-grid.php and legacy blocks set inline display:flex */
main .ktp-article .content-section > h2 > svg { display: none; }
main .ktp-article .content-section > h2::after,
main .article-related__title::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-top: var(--ktp-space-3);
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--ktp-tier-mild) 0 10.4px, transparent 10.4px 11.4px,
    var(--ktp-tier-medium) 11.4px 21.8px, transparent 21.8px 22.8px,
    var(--ktp-tier-hot) 22.8px 33.2px, transparent 33.2px 34.2px,
    var(--ktp-tier-extra-hot) 34.2px 44.6px, transparent 44.6px 45.6px,
    var(--ktp-tier-super-hot) 45.6px 56px);
}
main .ktp-article .content-section > p { margin-bottom: 1.1em; }
main .ktp-article .content-section > ul,
main .ktp-article .content-section > ol { margin-bottom: 1.1em; }

/* Prose links also quiet inside table cells and callouts (tokens.css covers p, li, dd, figcaption) */
.ktp-article :where(td, th, strong, em, aside) a:not([class]) {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ktp-chili-40);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.ktp-article :where(td, th, strong, em, aside) a:not([class]):hover { text-decoration-color: var(--ktp-chili); }

/* Flavor tags */
.flavor-tags { display: flex; flex-wrap: wrap; gap: var(--ktp-space-2); margin-top: var(--ktp-space-3); }
main .ktp-article .flavor-tag {
  padding: 3px 12px;
  border: 1.5px solid var(--ktp-hairline);
  border-radius: var(--ktp-radius-sm);
  background: var(--ktp-smoke);
  color: var(--ktp-ink);
  font-size: var(--ktp-fs-small) !important; /* beats style.css `.flavor-tag` 10px !important on phones */
  font-weight: 600;
}

/* Nutrition stats */
.nutrition-stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--ktp-space-3);
  margin: 0 0 var(--ktp-space-5);
  padding: 0;
  background: none;
  border: 0;
}
.nutrition-stat {
  display: block;
  padding: var(--ktp-space-4);
  border: var(--ktp-line);
  border-radius: var(--ktp-radius);
  background: var(--ktp-smoke);
}
.nutrition-stat__value {
  font-family: var(--ktp-font-display);
  font-size: var(--ktp-fs-ui);
  font-weight: var(--ktp-fw-number);
  line-height: 1.1;
  color: var(--ktp-ink);
}
.nutrition-stat__unit { font-size: var(--ktp-fs-ui); font-weight: 600; color: var(--ktp-muted); }
main .ktp-article .nutrition-stat__label { margin-top: var(--ktp-space-1); font-size: var(--ktp-fs-small); color: var(--ktp-muted); line-height: 1.35; }
main .ktp-article .nutrition-stat__sub { display: block; font-size: 14px; }

/* Buying and storage cards */
.buy-store { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ktp-space-4); margin: var(--ktp-space-5) 0; }
.buy-store__card { padding: var(--ktp-space-5); border: var(--ktp-line); border-radius: var(--ktp-radius); background: var(--ktp-white); }
.buy-store__title { margin: 0 0 var(--ktp-space-3); font-family: var(--ktp-font-display); font-size: 1.25rem; font-weight: var(--ktp-fw-display); color: var(--ktp-ink); }
.buy-store__card ul { margin: 0; padding-left: 1.2em; }
main .ktp-article .buy-store__card li { font-size: var(--ktp-fs-small); margin-bottom: .45em; }
.buy-store__note { margin: var(--ktp-space-3) 0 0; font-size: var(--ktp-fs-small); color: var(--ktp-muted); font-style: italic; }

/* ── Callouts (.info-box, comp 10): blush, round icon badge, bold title ── */
main .ktp-article .info-box {
  position: relative;
  margin-block: var(--ktp-space-6);
  padding: var(--ktp-space-4) var(--ktp-space-5) var(--ktp-space-4) 76px;
  border: 0;
  border-radius: var(--ktp-radius);
  background: var(--ktp-blush);
  color: var(--ktp-ink);
  min-height: 56px;
}
main .ktp-article .info-box::before {
  content: "";
  position: absolute;
  left: var(--ktp-space-4);
  top: var(--ktp-space-4);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--ktp-chili);
  /* the white glyph is the ::after below; the badge circle is this element */
}
main .ktp-article .info-box::after {
  content: "";
  position: absolute;
  left: calc(var(--ktp-space-4) + 10px);
  top: calc(var(--ktp-space-4) + 10px);
  width: 24px;
  height: 24px;
  background-color: var(--ktp-white);
  -webkit-mask: var(--info-glyph, url(/assets/images/icons/chili-pepper-icon.webp)) center / contain no-repeat;
  mask: var(--info-glyph, url(/assets/images/icons/chili-pepper-icon.webp)) center / contain no-repeat;
}
main .ktp-article .info-box--note,
main .ktp-article .info-box--tip { --info-glyph: url(/assets/images/icons/chili-pepper-icon.webp); }
main .ktp-article .info-box--warning::before,
main .ktp-article .info-box--danger::before {
  background-color: var(--ktp-ancho);
}
main .ktp-article .info-box--warning,
main .ktp-article .info-box--danger { --info-glyph: url(/assets/images/icons/warning-triangle-icon.webp); }
main .ktp-article .info-box > strong:first-child {
  display: block;
  margin-bottom: var(--ktp-space-1);
  font-family: var(--ktp-font-display);
  font-size: 1.25rem;
  font-weight: var(--ktp-fw-display);
  line-height: 1.25;
  color: var(--ktp-ink);
}
main .ktp-article .info-box p,
main .ktp-article .info-box li { font-size: 17px; line-height: 1.55; color: var(--ktp-ink); }
main .ktp-article .info-box p { margin: 0 0 .6em; }
main .ktp-article .info-box p:last-child { margin-bottom: 0; }
main .ktp-article .info-box ul { margin: .4em 0 0; padding-left: 1.2em; }
main .ktp-article .info-box a { font-size: inherit; }

/* ── Stats box, card grid, checklist (render-supported components, AGENTS.md section 19) ── */
main .ktp-article .stats-box {
  margin-block: var(--ktp-space-6);
  border: var(--ktp-line);
  border-radius: var(--ktp-radius);
  background: var(--ktp-white);
  color: var(--ktp-ink);
}
main .ktp-article .stats-box .stat { border-right: var(--ktp-line); }
main .ktp-article .stats-box .stat:last-child { border-right: 0; }
main .ktp-article .stats-box .stat strong,
main .ktp-article .stats-box > strong { color: var(--ktp-ink); font-weight: var(--ktp-fw-number); }
main .ktp-article .stats-box .stat span { color: var(--ktp-muted); }
main .ktp-article .card-grid { margin-block: var(--ktp-space-6); }
main .ktp-article .card-grid > .card { border: var(--ktp-line); border-radius: var(--ktp-radius); box-shadow: none; background: var(--ktp-white); }
main .ktp-article .checklist { border: var(--ktp-line); border-radius: var(--ktp-radius); background: var(--ktp-smoke); }
main .ktp-article .checklist li::before { color: var(--ktp-ink); }
main .ktp-article .highlight { background: none; font-weight: 700; padding: 0; }
@media (max-width: 768px) {
  main .ktp-article .stats-box .stat { border-right: 0; border-bottom: var(--ktp-line); }
  main .ktp-article .stats-box .stat:last-child { border-bottom: 0; }
}

/* ── Tables: ancho header row, smoke zebra, hairline frame ── */
main .ktp-article .table-scroll {
  margin-block: var(--ktp-space-6);
  margin-inline: auto; /* style.css gives .guide-table-shell negative side margins */
  padding: 0;
  overflow-x: auto;
  border: var(--ktp-line);
  border-radius: var(--ktp-radius);
}
main .ktp-article .table-scroll > table { margin: 0; min-width: 480px; }
/* Scroll cue: while a table has more to scroll on a side, that edge fades out. Scroll-driven, so it only
   exists when the table overflows (a table that fits never animates); the fade follows the scroll position.
   Browsers without scroll-driven animations just show the plain scrolling table. No extra wrapper or JS. */
@property --ktp-fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --ktp-fade-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes ktp-table-cue {
  0%   { --ktp-fade-l: 0px;  --ktp-fade-r: 32px; }
  12%  { --ktp-fade-l: 32px; --ktp-fade-r: 32px; }
  88%  { --ktp-fade-l: 32px; --ktp-fade-r: 32px; }
  100% { --ktp-fade-l: 32px; --ktp-fade-r: 0px; }
}
@supports (animation-timeline: scroll(self inline)) {
  main .ktp-article .table-scroll {
    animation: ktp-table-cue linear both;
    animation-timeline: scroll(self inline);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ktp-fade-l), #000 calc(100% - var(--ktp-fade-r)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--ktp-fade-l), #000 calc(100% - var(--ktp-fade-r)), transparent 100%);
  }
}
@media print { main .ktp-article .table-scroll { animation: none; -webkit-mask-image: none; mask-image: none; } }
main .ktp-article .comparison-table,
main .ktp-article .comp-table,
main .ktp-article table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  border-radius: 0;
  background: var(--ktp-white);
  overflow: visible;
}
main .ktp-article table th,
main .ktp-article table td {
  padding: 11px 16px;
  font-size: 17px; /* above the tokens.css table base size */
  line-height: 1.45;
  text-align: left;
  vertical-align: top;
  color: var(--ktp-ink);
  border: 0;
}
main .ktp-article table thead th,
main .ktp-article table tr:first-child > th:first-child:not(tbody th) {
  background: var(--ktp-ancho);
  color: var(--ktp-on-dark);
  font-weight: 700;
}
main .ktp-article table thead th { border-top: 0; }
main .ktp-article table tbody th { background: transparent; font-weight: 700; }
main .ktp-article table tbody tr:nth-child(even) > * { background: var(--ktp-smoke); }
main .ktp-article table caption {
  caption-side: top;
  padding: var(--ktp-space-3) 16px;
  text-align: left;
  font-family: var(--ktp-font-display);
  font-weight: var(--ktp-fw-display);
  color: var(--ktp-ink);
}
main .ktp-article .comparison-table tbody tr + tr th,
main .ktp-article .comparison-table tbody tr + tr td { border-top: 0; }

/* ── Authored range chart card ── */
main .ktp-article .range-chart:not(.range-chart--ramp) {
  margin-block: var(--ktp-space-6);
  padding: var(--ktp-space-5);
  border: var(--ktp-line);
  border-radius: var(--ktp-radius);
  background: var(--ktp-white);
}
main .ktp-article .range-chart:not(.range-chart--ramp) .range-chart__track {
  background: var(--ktp-smoke);
  box-shadow: none;
}
main .ktp-article .range-chart:not(.range-chart--ramp) .range-chart__label { color: var(--ktp-ink); }
main .ktp-article .range-chart:not(.range-chart--ramp) .range-chart__value { color: var(--ktp-muted); }

/* ── Images, ads, see-also ── */
main .ktp-article .article-inline-image,
main .ktp-article .inpost-image { margin: var(--ktp-space-6) auto !important; } /* ArticleImages inline margin */
main .ktp-article .article-inline-image img,
main .ktp-article .inpost-image img { border-radius: var(--ktp-radius) !important; } /* ArticleImages inline radius */
.ktp-article .ad-container { margin-block: var(--ktp-space-6) !important; } /* ad-slot.php inline margin */

main .ktp-article .ktp-inline-related {
  margin: var(--ktp-space-5) auto;
  padding: var(--ktp-space-3) 0 var(--ktp-space-3) var(--ktp-space-4);
  border-left: 2px solid var(--ktp-hairline);
  color: var(--ktp-muted) !important; /* see-also.php inline tier colour */
}
main .ktp-article .ktp-inline-related__label { color: var(--ktp-muted); letter-spacing: .06em; }
main .ktp-article .ktp-inline-related__link { color: var(--ktp-ink); text-decoration: underline; text-decoration-color: var(--ktp-chili-40); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
main .ktp-article .ktp-inline-related__link:hover { color: var(--ktp-ink); text-decoration-color: var(--ktp-chili); }
main .ktp-article .ktp-inline-related__link span { color: inherit !important; } /* arrow carries an inline tier colour */

/* ── The single article rule: hairline with one small outline icon ── */
.article-rule {
  display: flex;
  align-items: center;
  gap: var(--ktp-space-4);
  margin-block: var(--ktp-space-7) var(--ktp-space-6);
  color: var(--ktp-chili);
}
.article-rule::before,
.article-rule::after { content: ""; flex: 1; height: 1.5px; background: var(--ktp-hairline); }
.article-rule .ktp-icon { flex: none; }

/* ── FAQ: hairline accordion with thin plus icons ── */
.ktp-faq__list { border: var(--ktp-line); border-radius: var(--ktp-radius); overflow: hidden; background: var(--ktp-white); }
main .ktp-faq .faq-item.ktp-faq__item { margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } /* style.css `.faq-item` card box */
main .ktp-faq .ktp-faq__item + .ktp-faq__item { border-top: var(--ktp-line); }
main .ktp-faq .faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ktp-space-4);
  width: 100%;
  margin: 0;
  padding: var(--ktp-space-4) var(--ktp-space-5);
  border: 0;
  background: none;
  color: var(--ktp-ink);
  font-family: var(--ktp-font-display);
  font-size: 18px;
  font-weight: var(--ktp-fw-display);
  line-height: 1.55;
  text-align: left;
  cursor: pointer;
}
main .ktp-faq .faq-question:hover { background: var(--ktp-smoke); }
main .ktp-faq .faq-question:focus-visible { outline: 2px solid var(--ktp-ink); outline-offset: -2px; }
.ktp-faq__plus { flex: none; color: var(--ktp-ink); transition: transform .2s ease; }
.ktp-faq__item.active .ktp-faq__plus { transform: rotate(45deg); }
main .ktp-faq .faq-item.active .faq-question { font-weight: var(--ktp-fw-display); }
main .ktp-faq .faq-answer { padding: 0 var(--ktp-space-5) var(--ktp-space-4); }
main .ktp-faq .faq-question span { font-size: var(--ktp-fs-ui); }
main .ktp-faq .faq-answer p { font-size: 17px; line-height: var(--ktp-lh-body); }
main .ktp-faq .faq-answer a { font-size: var(--ktp-fs-ui); }

/* ── Footer blocks of the legacy partials (inline-styled): sources, feedback, author, E-E-A-T ── */
/* Sources box (templates/partials/sources-box.php): smoke panel, ink text, quiet chili underline on links */
.sources-box__panel {
  padding: var(--ktp-space-5);
  border: var(--ktp-line);
  border-radius: var(--ktp-radius);
  background: var(--ktp-smoke);
}
.sources-box__title {
  display: flex;
  align-items: center;
  gap: var(--ktp-space-2);
  margin-bottom: var(--ktp-space-3);
  font-family: var(--ktp-font-body); /* the box has always rendered in the body face */
  font-size: 1.25rem;
  font-weight: var(--ktp-fw-display);
  line-height: 1.3;
  color: var(--ktp-ink);
}
.sources-box__icon { color: var(--ktp-ink); }
.sources-box__list { margin: 0; padding: 0; list-style: none; }
.sources-box__item { margin-bottom: 6px; }
main .ktp-article .sources-box__link { /* above the profile rule that sizes every link with an inline font-size */
  color: var(--ktp-ink);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
  border-bottom: 1px dashed var(--ktp-chili-40);
}
.sources-box__name { color: var(--ktp-ink); font-size: 14px; font-weight: 500; }
.sources-box__note { margin-top: 4px; color: var(--ktp-muted); font-size: 13px; line-height: 1.55; }
.sources-note { margin: 0; font-size: var(--ktp-fs-small); color: var(--ktp-ink); }
main .ktp-article .sources-note { line-height: var(--ktp-lh-body); } /* above style.css `.content-section p` */
.sources-note--species { margin-top: var(--ktp-space-3); color: var(--ktp-muted); font-style: italic; }
.ktp-article .browse-links { margin-top: var(--ktp-space-6); }

/* ── TOC card (comp 12) ── */
.ktp-toc-wrap { width: min(100%, var(--ktp-w-read)); margin: var(--ktp-space-6) auto var(--ktp-space-7); }
.ktp-toc,
.ktp-toc-sheet {
  background: var(--ktp-white);
  border: var(--ktp-line);
  border-radius: var(--ktp-radius);
  box-shadow: var(--ktp-shadow);
  overflow: hidden;
}
.ktp-toc__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ktp-space-4);
  padding: var(--ktp-space-4) var(--ktp-space-5);
  border-bottom: var(--ktp-line);
}
main .ktp-toc__title {
  margin: 0;
  font-size: var(--ktp-fs-small) !important; /* legacy guide/recipe/substitute/comparison pages render this TOC under readability.css `main p` */
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ktp-ink);
}
main .ktp-toc__meta { margin: 0; font-size: var(--ktp-fs-small) !important; color: var(--ktp-muted); text-align: right; }
.ktp-toc__list { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.ktp-toc__list li { margin: 0; counter-increment: toc; }
.ktp-toc__list li + li { border-top: var(--ktp-line); }
.ktp-toc__link {
  display: flex;
  align-items: center;
  gap: var(--ktp-space-4);
  padding: 13px var(--ktp-space-5);
  color: var(--ktp-ink);
  text-decoration: none !important; /* TOC rows never underline */
  transition: background-color .12s ease;
}
.ktp-toc__link:hover { background: var(--ktp-smoke); color: var(--ktp-ink); }
.ktp-toc__link[aria-current] { background: var(--ktp-blush); }
.ktp-toc__link:focus-visible { outline: 2px solid var(--ktp-ink); outline-offset: -2px; }
.ktp-toc__num {
  flex: none;
  min-width: 2ch;
  font-size: var(--ktp-fs-small);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ktp-muted);
}
.ktp-toc__num::before { content: counter(toc, decimal-leading-zero); }
.ktp-toc__link[aria-current] .ktp-toc__num { color: var(--ktp-ink); }
.ktp-toc__text { flex: 1; min-width: 0; font-size: 1.05rem; line-height: 1.35; color: var(--ktp-ink); }
.ktp-toc__link[aria-current] .ktp-toc__text { font-weight: 600; }
.ktp-toc__chev { flex: none; color: var(--ktp-muted); }

/* Mobile sticky bar + sheet */
.ktp-toc-bar { display: none; }
@media (max-width: 900px) {
  .ktp-toc-bar {
    display: block;
    position: fixed;
    top: var(--ktp-header-h);
    left: 0;
    right: 0;
    z-index: 900;
    background: var(--ktp-white);
    border-bottom: var(--ktp-line);
    box-shadow: var(--ktp-shadow);
    transform: translateY(-110%);
    visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
  }
  .ktp-toc-bar.is-visible { transform: none; visibility: visible; transition: transform .2s ease; }
  .ktp-toc-bar__btn {
    display: flex;
    align-items: center;
    gap: var(--ktp-space-2);
    width: 100%;
    padding: 12px var(--ktp-gutter);
    border: 0;
    background: none;
    color: var(--ktp-ink);
    font: inherit;
    font-size: 18px;
    line-height: 1.55;
    text-align: left;
    cursor: pointer;
  }
  .ktp-toc-bar__btn:focus-visible { outline: 2px solid var(--ktp-ink); outline-offset: -2px; }
  .ktp-toc-bar__label { flex: none; font-weight: 700; font-size: var(--ktp-fs-ui); }
  .ktp-toc-bar__current { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ktp-muted); }
  .ktp-toc-bar__chev { flex: none; transition: transform .2s ease; }
  .ktp-toc-bar.is-open .ktp-toc-bar__chev { transform: rotate(180deg); }
  .ktp-toc-sheet {
    position: absolute;
    top: 100%;
    left: var(--ktp-gutter);
    right: var(--ktp-gutter);
    max-height: calc(100vh - var(--ktp-header-h) - 76px);
    max-height: calc(100dvh - var(--ktp-header-h) - 76px);
    overflow-y: auto;
    margin-top: var(--ktp-space-2);
  }
  .ktp-toc-sheet[hidden] { display: none; }
  .ktp-article [id] { scroll-margin-top: calc(var(--ktp-header-h) + 76px); }
}

/* ── Shared article blocks (comparison pilot; guide, recipe and substitute reuse them) ──
   Wide panel card: .panel-card (above). Stat tiles: .stat-tiles / .stat-tile. Two-lane SHU track:
   .range-chart--lanes. Swap-ratio callout: .info-box--swap. Purposeful card pair: .pair-cards.
   Related-card carousel on a clay band: .article-related + .ktp-carousel. */

/* Stat tiles: value over label, auto-fit grid (same look as the nutrition tiles) */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--ktp-space-3); margin: 0 0 var(--ktp-space-5); padding: 0; }
.stat-tile { display: block; padding: var(--ktp-space-4); border: var(--ktp-line); border-radius: var(--ktp-radius); background: var(--ktp-smoke); }
.stat-tile__value { display: block; font-family: var(--ktp-font-display); font-size: 1.45rem; font-weight: var(--ktp-fw-number); line-height: 1.1; color: var(--ktp-ink); }
.stat-tile__label { display: block; margin-top: var(--ktp-space-1); font-size: var(--ktp-fs-small); line-height: 1.35; color: var(--ktp-muted); }

/* Swap-ratio callout: a .info-box with an ancho swap glyph, a muted label and one big ratio line */
main .ktp-article .info-box--swap::before {
  background-color: var(--ktp-ancho);
}
main .ktp-article .info-box--swap { --info-glyph: url(/assets/images/icons/swap-arrows-icon.webp); }
main .ktp-article .info-box--swap > strong:first-child {
  font-family: var(--ktp-font-body);
  font-size: var(--ktp-fs-small);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ktp-muted);
}
main .ktp-article .info-box--swap .info-box__ratio {
  margin: 0 0 .3em;
  font-family: var(--ktp-font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: var(--ktp-fw-display);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ktp-chili);
}

/* Purposeful card pair: two sides of one decision (two peppers, original and substitute), one card each */
.pair-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ktp-space-4); margin-block: var(--ktp-space-5) var(--ktp-space-6); }
.pair-card { padding: var(--ktp-space-4) var(--ktp-space-5) var(--ktp-space-5); border: var(--ktp-line); border-top: 4px solid var(--tier, var(--ktp-ink)); border-radius: var(--ktp-radius); background: var(--ktp-white); }
.pair-card__name { margin: 0 0 var(--ktp-space-2); font-family: var(--ktp-font-display); font-size: 1.25rem; font-weight: var(--ktp-fw-display); line-height: 1.25; color: var(--ktp-ink); }
main .ktp-article .pair-card p { margin: 0 0 .6em; font-size: 17px; line-height: 1.55; }
main .ktp-article .pair-card p:last-child { margin-bottom: 0; }

/* Two-lane SHU track (comparison, substitute): the .range-chart--ramp track with one lane per pepper,
   a neutral rail and a solid tier-coloured pill, so two labels never collide on one lane. Ticks are
   plain numbers with a mark; phones switch to short ticks (1K, 1M). */
main .range-chart--lanes .range-chart__row { padding-top: 34px; margin-bottom: var(--ktp-space-3); }
main .range-chart--lanes .range-chart__row::before { display: none; }
main .range-chart--lanes .range-chart__label { flex-direction: row; align-items: baseline; gap: .5em; }
main .range-chart--lanes .range-chart__label strong { font-size: var(--ktp-fs-ui); }
main .range-chart--lanes .range-chart__value { font-size: var(--ktp-fs-ui); color: var(--ktp-ink); }
main .range-chart--lanes .range-chart__track { height: 8px; border-radius: 4px; background: var(--ktp-hairline); }
main .range-chart--lanes .range-chart__row[data-tier] .range-chart__bar {
  top: -4px;
  bottom: -4px;
  min-width: 18px;
  border: 0;
  border-radius: 999px;
  background: var(--tier, var(--ktp-muted));
  box-shadow: none;
}
main .range-chart--lanes .range-chart__ticks { height: 2.2em; margin-top: var(--ktp-space-2); border-top: 1.5px solid var(--ktp-muted); }
main .range-chart--lanes .range-chart__ticks > span { flex-direction: column; font-size: var(--ktp-fs-small); }
main .range-chart--lanes .range-chart__ticks > span::before { content: ""; width: 1.5px; height: 7px; margin-bottom: 3px; background: var(--ktp-muted); }
main .range-chart--lanes .range-chart__ticks > span:first-child::before { align-self: flex-start; }
main .range-chart--lanes .range-chart__ticks > span:last-child::before { align-self: flex-end; }
.range-chart__tick-short { display: none; }
@media (max-width: 640px) {
  main .range-chart--lanes .range-chart__row { padding-top: 54px; }
  main .range-chart--lanes .range-chart__label { flex-direction: column; align-items: center; gap: 0; }
  main .range-chart--lanes .range-chart__label--start { align-items: flex-start; }
  main .range-chart--lanes .range-chart__label--end { align-items: flex-end; }
  main .range-chart--lanes .range-chart__value { font-size: var(--ktp-fs-small); color: var(--ktp-muted); }
  .range-chart__tick-long { display: none; }
  .range-chart__tick-short { display: inline; }
  main .range-chart--lanes .range-chart__ticks { height: 1.9em; }
}

/* Related cards on a clay band: wide carousel with round arrows and dots (public/assets/js/article-carousel.js;
   markup in templates/partials/related-carousel.php). The band is entered by .seam--curve. */
.article-related { scroll-margin-top: calc(var(--ktp-header-h) + var(--ktp-space-5)); }
main .article-related__title { margin: 0 0 var(--ktp-space-6); text-align: center; font-weight: 800; }
main .article-related__title::after { margin-inline: auto; }
.ktp-carousel { position: relative; }
@media (min-width: 761px) { .ktp-carousel { padding-inline: 56px; } }
.ktp-track {
  display: flex;
  gap: var(--ktp-space-5);
  margin-inline: -10px;
  padding: 8px 10px 28px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-padding-inline: 10px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.ktp-track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .ktp-track { scroll-behavior: auto; } }
.ktp-track:focus-visible { outline: 2px solid var(--ktp-ink); outline-offset: 2px; }
.ktp-arrow {
  position: absolute;
  top: calc(50% - 38px);
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--ktp-line);
  border-radius: 50%;
  background: var(--ktp-white);
  color: var(--ktp-ink);
  box-shadow: var(--ktp-shadow);
  cursor: pointer;
}
@media (min-width: 761px) { .ktp-arrow { display: flex; } }
.ktp-arrow--prev { left: 0; }
.ktp-arrow--next { right: 0; }
.ktp-arrow:hover:not(:disabled) { border-color: var(--ktp-ancho); }
.ktp-arrow:focus-visible { outline: 2px solid var(--ktp-ink); outline-offset: 2px; }
.ktp-arrow:disabled { opacity: .35; cursor: default; }
.ktp-dots { display: flex; justify-content: center; gap: 2px; min-height: 24px; }
.ktp-dots:empty { display: none; }
.ktp-dot { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.ktp-dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ktp-hairline); box-shadow: inset 0 0 0 1px var(--ktp-muted); }
.ktp-dot[aria-current="true"]::before { background: var(--ktp-chili); box-shadow: none; }
.ktp-dot:focus-visible { outline: 2px solid var(--ktp-ink); outline-offset: 0; border-radius: 50%; }

.ktp-ccard {
  display: flex;
  flex: 0 0 calc((100% - 2 * var(--ktp-space-5)) / 3);
  align-items: center;
  gap: var(--ktp-space-4);
  padding: var(--ktp-space-3);
  border: var(--ktp-line);
  border-radius: 14px;
  background: var(--ktp-white);
  box-shadow: var(--ktp-shadow);
  color: var(--ktp-ink);
  text-decoration: none;
  scroll-snap-align: start;
}
.ktp-ccard:hover { border-color: var(--ktp-ancho); }
.ktp-ccard:focus-visible { outline: 2px solid var(--ktp-ink); outline-offset: 2px; }
.ktp-ccard__media { flex: 0 0 40%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--ktp-radius-sm); background: var(--ktp-smoke); }
.ktp-ccard__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ktp-ccard__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ktp-ccard__label { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; color: var(--ktp-muted); }
.ktp-ccard__title {
  display: -webkit-box;
  overflow: hidden;
  font-family: var(--ktp-font-display);
  font-size: 1.05rem;
  font-weight: var(--ktp-fw-display);
  line-height: 1.25;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
@media (max-width: 1000px) { .ktp-ccard { flex-basis: calc((100% - var(--ktp-space-5)) / 2); } }
@media (max-width: 640px) { .ktp-ccard { flex-basis: 86%; } }

/* ── Responsive ── */
@media (max-width: 900px) {
  .profile-facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qf-cell:last-child:nth-child(3n + 1),
  .qf-cell:last-child:nth-child(3n + 2) { grid-column: auto; }
  .qf-cell:last-child:nth-child(2n + 1) { grid-column: span 2; }
}
@media (max-width: 640px) {
  .panel-card,
  .profile-facts { padding: var(--ktp-space-4) var(--ktp-space-4) var(--ktp-space-5); }
  .buy-store { grid-template-columns: 1fr; }
  main .ktp-article .info-box { padding-left: var(--ktp-space-4); padding-top: 72px; }
  main .ktp-article .info-box::before { top: var(--ktp-space-4); }
  main .range-chart--ramp .range-chart__ticks > span { font-size: 13px; }
  .range-chart__tick-sub { display: none; }
  main .range-chart--ramp .range-chart__ticks { height: 1.6em; }
}
@media (max-width: 480px) {
  .profile-facts__grid { grid-template-columns: 1fr; }
  .qf-cell:last-child:nth-child(2n + 1) { grid-column: auto; }
  .ktp-toc__head { flex-wrap: wrap; row-gap: var(--ktp-space-1); }
}

/* ── Legacy partials inside the profile ──
   Inline-styled and partial-owned blocks keep the sizes they rendered at while readability.css still
   forced them. The !important lines beat inline style="" attributes (templates/partials/browse-links.php); the rest are plain declarations above the partials' own CSS. */
main .ktp-article a[style*="font-size"] { font-size: 18px !important; line-height: 1.55 !important; }
main .ktp-article [style*="font-size: var(--fs-md)"] { font-size: var(--ktp-text-body) !important; line-height: var(--ktp-lh-body) !important; }
main .ktp-article .feedback-question,
main .ktp-article .feedback-report__title,
main .ktp-article .author-bio-box__label,
main .ktp-article .author-bio-box__role,
main .ktp-article .author-bio-box__tag,
main .ktp-article .author-bio-box__bio,
main .ktp-article .eeat-card__signal-text { font-size: var(--ktp-fs-ui); line-height: var(--ktp-lh-body); }
main .ktp-article .ktp-handy-tools__link span { font-size: var(--ktp-fs-ui); }
main .ktp-article .author-bio-box__name { font-size: var(--ktp-fs-ui); line-height: 1.2; }
main .ktp-article .eeat-card__signal-text { line-height: 1.3; }
main .ktp-article .feedback-radio { font-size: var(--ktp-fs-ui); line-height: 1.74; }
main .ktp-article .feedback-btn,
main .ktp-article .feedback-report-toggle,
main .ktp-article .feedback-comment { font-size: 18px; line-height: 1.55; }

@media print {
  .ktp-toc-wrap,
  .ktp-toc-bar { display: none !important; }
  .article-head { background: none !important; padding-bottom: 0; }
  .article-hero { margin-top: 0; }
  .article-hero__frame,
  .profile-facts { box-shadow: none; }
}
.ktp-arrow[hidden] { display: none; }
@media (max-width: 640px) {
  .pair-cards { grid-template-columns: 1fr; }
}
/* FAQ answers: readability.css no longer resets these on redesigned pages */
main .ktp-faq .faq-answer p { margin: 0; }
main .ktp-faq .faq-answer p + p { margin-top: .9em; }

/* ── In-body smoke surface (comps 20, 22): a run of whole sections inside the long white read band ──
   Used by comparison.php (the "which dishes suit each pepper" section) and guide.php (sections with a step list).
   The box stays on the read column; the box-shadow spread paints the smoke edge to edge and the clip-path
   stops it spilling above or below. White cards and tables inside keep their own white. */
main .ktp-article div.body-smoke {
  display: flow-root;
  margin-block: var(--ktp-space-8);
  padding-block: var(--ktp-space-7);
  background: var(--ktp-white); /* was smoke; owner 2026-11-12: section backgrounds are white */
  box-shadow: 0 0 0 100vmax var(--ktp-white);
  clip-path: inset(0 -100vmax);
}
main .ktp-article .body-smoke .checklist { background: var(--ktp-white); } /* smoke on smoke would lose the card */
@media (max-width: 640px) {
  main .ktp-article div.body-smoke { margin-block: var(--ktp-space-7); padding-block: var(--ktp-space-6); }
}
@media print { main .ktp-article div.body-smoke { box-shadow: none; clip-path: none; background: none; } }

/* ── Editorial review box (templates/components/editorial-review.php, all article types) ── */
.editorial-review-box {
  margin: var(--ktp-space-6) auto;
  padding: var(--ktp-space-5) var(--ktp-space-5);
  border: var(--ktp-line);
  border-radius: var(--ktp-radius);
  background: var(--ktp-smoke);
  color: var(--ktp-ink);
}
.editorial-review-box__head { display: flex; align-items: center; gap: var(--ktp-space-2); margin-bottom: var(--ktp-space-3); }
.editorial-review-box__icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: var(--ktp-radius-sm);
  background: var(--ktp-white); border: var(--ktp-line); color: var(--ktp-jalapeno);
}
.editorial-review-box__title { font-family: var(--ktp-font-display); font-size: var(--ktp-fs-ui); font-weight: 700; color: var(--ktp-ink); }
.editorial-review-box__standards { font-size: var(--ktp-fs-body); line-height: var(--ktp-lh-body); margin-bottom: var(--ktp-space-3); }
.editorial-review-box__process { font-size: var(--ktp-fs-ui); line-height: 1.65; color: var(--ktp-muted); }
.editorial-review-box strong { color: var(--ktp-ink); }
.editorial-review-box a { color: var(--ktp-chili-dark); font-weight: 600; text-decoration: none; }
.editorial-review-box a:hover { text-decoration: underline; }
@media (max-width: 640px) { .editorial-review-box { padding: var(--ktp-space-4); } }

/* ── End-matter band (.article-end: FAQ, sources, feedback, author box on clay) ──
   The read band ends with a seam into clay; boxes inside turn white so they read as cards on the band. */
main .ktp-article.article-end .sources-box__panel { background: var(--ktp-white); }
main .ktp-article.article-end .feedback-widget,
main .ktp-article.article-end .author-bio-box__inner { background: var(--ktp-white); }