/* chapters.css: the full process, layout of 20 October 2026, with partials/chapters.js (pilot on case-smartstamp.html). Everything is scoped
   under .kcase.kc-ch2, which the script sets, so a page without the script keeps the kit's plain rows. Colours are the frame tokens. */
/* ---------- the closed rows: name, one line of her text, a few pictures of what is inside ---------- */
.kcase.kc-ch2 .kc-ch.has-peek .kc-ch-btn { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name state" "line state" "thumbs thumbs"; align-items: center; column-gap: clamp(16px, 3vw, 40px); row-gap: 8px; min-height: 0; padding-top: clamp(22px, 2.6vw, 34px); padding-bottom: clamp(22px, 2.6vw, 34px); }
.kcase.kc-ch2 .kc-ch.has-peek .kc-ch-name { grid-area: name; }
.kcase.kc-ch2 .kc-ch-line { grid-area: line; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 46em; font-family: var(--kc-font); font-size: .9375rem; line-height: 1.5; font-weight: 400; color: var(--kc-muted); }
.kcase.kc-ch2 .kc-ch.has-peek .kc-ch-state { grid-area: state; }
.kcase.kc-ch2 .kc-ch-thumbs { grid-area: thumbs; display: flex; gap: 8px; margin-top: 10px; }
.kcase.kc-ch2 .kc-ch-thumb { position: relative; display: block; width: 104px; height: 72px; overflow: hidden; border-radius: 10px; background: var(--kc-surface); box-shadow: 0 0 0 1px var(--kc-hair); }
.kcase.kc-ch2 .kc-ch-thumb img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; border-radius: 4px; box-shadow: none; background: none; }
.kcase.kc-ch2 .kc-ch-thumb.is-locked { background: var(--kc-lock-tint, var(--kc-lock-fill, var(--pb-accent, #F0923A))); }
.kcase.kc-ch2 .kc-ch-thumb.is-art { background: var(--kc-art-ground, var(--kc-surface)); }     /* a page sets the ground of its drawings */
.kcase.kc-ch2 .kc-ch-thumb.is-locked img { inset: -14%; width: 128%; height: 128%; object-fit: cover; filter: blur(10px); mix-blend-mode: multiply; border-radius: 0; }
@media (min-width: 900px) {
	.kcase.kc-ch2 .kc-ch.has-peek .kc-ch-btn { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name thumbs state" "line thumbs state"; }
	.kcase.kc-ch2 .kc-ch-thumbs { margin-top: 0; }
	.kcase.kc-ch2 .kc-ch-thumb { width: 128px; height: 88px; }
}
.kcase.kc-ch2 .kc-ch-btn:hover .kc-ch-line { color: var(--kx-hover-ink); }
.kcase.kc-ch2 .kc-ch-btn[aria-expanded="true"] .kc-ch-thumbs, .kcase.kc-ch2 .kc-ch-btn[aria-expanded="true"] .kc-ch-line { display: none; }
/* the open row: no orange rule under the name */
.kcase.kc-ch2 .kc-ch-btn[aria-expanded="true"] .kc-ch-name, .kcase.kc-ch2 .kc-ch-btn[aria-expanded="true"]:hover .kc-ch-name, .kcase.kc-ch2 .kc-ch-btn[aria-expanded="true"]:active .kc-ch-name { box-shadow: none; }
/* ---------- inside a chapter: one rhythm, quiet headings, pictures on boards ---------- */
.kcase.kc-ch2 .kc-panel { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 32px); row-gap: clamp(18px, 2.2vw, 28px); }
.kcase.kc-ch2 .kc-panel[hidden="until-found"] { row-gap: 0; }
.kcase.kc-ch2 .kc-panel > * { grid-column: 1 / -1; min-width: 0; }
.kcase.kc-ch2 .kc-panel h4 { margin-top: clamp(40px, 5vw, 80px); padding-top: 0; box-shadow: none; }
.kcase.kc-ch2 .kc-panel > h4:first-child { margin-top: 8px; }
.kcase.kc-ch2 .kc-panel h5 { margin-top: clamp(16px, 2vw, 28px); margin-bottom: 0; }
.kcase.kc-ch2 .kc-panel .kc-prose { max-width: 38em; }
.kcase.kc-ch2 .kc-panel .kc-topics { display: flex; flex-wrap: wrap; gap: 8px; font-size: .9375rem; font-family: var(--kc-font); font-weight: 500; }
.kcase.kc-ch2 .kc-panel .kc-topics li { padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--kc-hair); }
.kcase.kc-ch2 .kc-panel > figure.kc-fig > img, .kcase.kc-ch2 .kc-panel > .kc-grid:not(.ss-4) > figure.kc-fig > img { box-sizing: border-box; padding: clamp(12px, 2vw, 28px); background: var(--kc-surface); object-fit: contain; border-radius: var(--pb-radius); box-shadow: 0 0 0 1px var(--kc-hair); }
@media (min-width: 900px) {
	.kcase.kc-ch2 .kc-panel > .kc-x-l { grid-column: 1 / span 6; align-self: start; }
	.kcase.kc-ch2 .kc-panel > .kc-x-r { grid-column: 8 / -1; align-self: start; }
}
/* Read more: her first paragraph stays, the rest opens on a press */
.kcase.kc-ch2 .kc-more { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font: 500 .875rem/1 var(--kc-font); color: var(--kc-text); box-shadow: inset 0 0 0 1px var(--kc-hair); background: none; cursor: pointer; transition: background-color .16s ease, color .16s ease; }
@media (hover: hover) { .kcase.kc-ch2 .kc-more:hover { background: var(--kx-hover, #F0923A); color: var(--kx-hover-ink, #141414); box-shadow: none; } }
.kcase.kc-ch2 .kc-more:focus-visible { outline: 2px solid var(--kc-text); outline-offset: 2px; }
.kcase.kc-ch2 .kc-more-x[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .kcase.kc-ch2 .kc-more { transition: none; } }
/* editorial columns from 900px: the heading of a part on the left, her text on the right; pictures, boards and locked sections take the full width */
@media (min-width: 900px) {
	.kcase.kc-ch2 .kc-panel > h4 { grid-column: 1 / span 4; align-self: start; margin-top: clamp(40px, 5vw, 80px); }
	.kcase.kc-ch2 .kc-panel > h4 + * { margin-top: clamp(40px, 5vw, 80px); }
	.kcase.kc-ch2 .kc-panel > h5, .kcase.kc-ch2 .kc-panel > .kc-prose, .kcase.kc-ch2 .kc-panel > .kc-topics, .kcase.kc-ch2 .kc-panel > dl.kc-facts { grid-column: 5 / -1; }
	.kcase.kc-ch2 .kc-panel > h4:first-child, .kcase.kc-ch2 .kc-panel > h4:first-child + * { margin-top: 8px; }
	.kcase.kc-ch2 .kc-panel > .kc-x-l { grid-column: 1 / span 6; } .kcase.kc-ch2 .kc-panel > .kc-x-r { grid-column: 8 / -1; }
}
.kcase.kc-ch2 .kc-panel > .kc-prose.kc-lead p { font-size: clamp(1.1875rem, 1.6vw, 1.4375rem); line-height: 1.42; letter-spacing: -.008em; }
/* Kait, 20 October 2026: no Pause button on the films, no expand marks on pictures (a press still opens them large) */
.kcase .ds .ds-toggle, .kcase .kp-tip, .kcase .kx-expand, .kcase .kc-zoom { display: none !important; }
/* Illustrations: the heading sits on the left edge of its grid, the grid is centred, each drawing sits in the middle of its tile */
.kcase.kc-ch2 .kc-panel > h5:has(+ .kc-grid), .kcase.kc-ch2 .kc-panel > h5:has(+ .kp5-ill), .kcase.kc-ch2 .kc-panel > h5:has(+ figure), .kcase.kc-ch2 .kc-panel > h5:has(+ .kc-teasers), .kcase.kc-ch2 .kc-panel > h5:has(+ .kp5-bento), .kcase.kc-ch2 .kc-panel > h5:has(+ .kbrand) { grid-column: 1 / -1; }
.kcase.kc-ch2 .kc-panel > .kc-grid.kp5-ill { justify-self: center; width: 100%; max-width: 1200px; }
.kcase .kc-grid.ss-4.kp5-ill .kc-fig img { object-position: 50% 50%; padding: 10%; }
.kcase .kc-grid.ss-4.kp5-ill .kc-fig figcaption { text-align: center; }
/* the brand block inside a chapter: its name and the credit stack on the left under the heading, not split into two halves */
.kcase.kc-ch2 .kc-panel .kbrand .kb-intro { grid-template-columns: minmax(0, 1fr) !important; gap: 6px; justify-items: start; text-align: left; }