/* Cardboard chapter: compositions extend the shared campaign tokens. */
.cardboard-page {
  --chapter-title:clamp(2.5rem,5.1vw,5.5rem);
  --chapter-statement:clamp(3rem,7vw,6.5rem);
  --chapter-gap:clamp(24px,4vw,64px);
}
.chapter-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin-bottom:var(--space-4); font-size:var(--text-sm); }
.chapter-breadcrumb a { display:inline-flex; align-items:center; min-height:44px; }
.chapter-breadcrumb svg { width:16px; height:16px; }
.chapter-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); align-items:center; gap:var(--chapter-gap); padding-bottom:var(--space-10); }
.chapter-hero-copy { --od-gap:var(--space-3); }
.chapter-hero h1 { font-size:var(--chapter-title); line-height:1.08; max-width:12ch; }
.chapter-hero { --chapter-title-emphasis:#247a38; }
.chapter-hero h1 .chapter-title-emphasis { color:var(--chapter-title-emphasis); }
@media (forced-colors:active) {
  .chapter-hero h1 .chapter-title-emphasis { color:CanvasText; }
}
.chapter-hero .chapter-lead { font-size:var(--text-lead); line-height:1.35; max-width:28ch; font-weight:700; }
.chapter-exception { max-width:43ch; font-size:var(--text-sm); }
.chapter-exception a { font-weight:700; }
.chapter-hero figure { min-width:0; }
.chapter-photo { border-radius:var(--radius-panel); }
.chapter-hero figcaption { margin-top:var(--space-2); font-size:var(--text-sm); max-width:50ch; }
.chapter-hero .text-link { align-self:flex-start; }
.preparation { background:var(--ink); color:var(--paper); padding-block:var(--space-10); }
.preparation :focus-visible { outline-color:var(--paper); box-shadow:0 0 0 4px var(--ink); }
.preparation-top { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; gap:var(--space-3); padding-bottom:var(--space-6); }
.preparation-top a { font-size:var(--text-sm); }
.preparation-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--chapter-gap); align-items:center; }
.preparation h2 { font-size:var(--chapter-statement); line-height:1.08; }
.preparation h2>span { display:block; }
.preparation h2 .statement-intro { font:400 var(--text-lead)/1.4 var(--body); text-transform:none; letter-spacing:normal; margin-bottom:var(--space-3); }
.preparation h2 .statement-end { font:400 var(--text-lead)/1.4 var(--body); text-transform:none; letter-spacing:normal; margin-top:var(--space-3); }
.preparation .statement-green { color:var(--green); }
.preparation figcaption { margin-top:var(--space-3); font-size:1.25rem; line-height:1.5; }
.comparison { background:var(--surface); padding-block:var(--space-10); }
.comparison-heading { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:var(--chapter-gap); align-items:end; margin-bottom:var(--space-5); }
.comparison-heading h2 { max-width:20ch; }
.comparison-heading .eyebrow { margin-bottom:var(--space-2); }
.comparison-heading p { max-width:43ch; }
.condition-controls { margin:0 0 var(--space-6); padding:0; border:0; min-width:0; }
.condition-controls legend { font-weight:700; padding:0 0 var(--space-2); font-size:var(--text-sm); }
.condition-options { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.condition-option { display:flex; gap:var(--space-2); align-items:center; min-height:56px; border:2px solid var(--ink); border-radius:var(--radius-button); padding:var(--space-2) var(--space-3); font-weight:700; line-height:1.4; cursor:pointer; color:var(--ink); background:var(--paper); }
.condition-option input { flex:none; width:20px; height:20px; margin:0; accent-color:var(--ink); cursor:pointer; }
.condition-option:has(input:checked) { color:var(--paper); background:var(--ink); }
.condition-option:has(input:checked) input { accent-color:var(--paper); }
.condition-option:focus-within { outline:3px solid var(--ink); outline-offset:4px; box-shadow:0 0 0 4px var(--paper); }
.condition-label { display:block; }
.condition-panels { display:grid; gap:var(--space-8); }
.condition-panel { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:var(--chapter-gap); align-items:center; }
/* Native radios also select one example before script loads or when it is unavailable. */
.condition-controls:has(input[value="clean"]:checked) ~ .condition-panels [data-condition]:not([data-condition="clean"]),
.condition-controls:has(input[value="soiled"]:checked) ~ .condition-panels [data-condition="clean"],
.condition-controls:has(input[value="liquid"]:checked) ~ .condition-panels [data-condition="clean"] { display:none; }
.condition-text { --od-gap:var(--space-3); }
.condition-text h3 { font-size:clamp(2rem,4.3vw,4rem); line-height:1.12; }
.condition-text p { max-width:42ch; font-size:var(--text-lead); line-height:1.4; }
.condition-text .condition-context { font-size:var(--text-body); }
.condition-text .text-link { align-self:flex-start; }
.condition-panel figure { min-width:0; }
.condition-panel .portrait-frame { display:flex; justify-content:center; }
.portrait-frame img { display:block; width:min(100%,320px); height:auto; }
.condition-caption { display:block; margin-top:var(--space-2); font-size:var(--text-sm); }
.condition-panel.is-entering { animation:condition-enter var(--entrance) var(--ease-out); }
.chapter-reason { padding-block:var(--space-10); text-align:center; }
.chapter-reason .eyebrow { margin-bottom:var(--space-3); }
.chapter-reason h2 { max-width:28ch; margin-inline:auto; }
.chapter-reason p { max-width:65ch; margin:var(--space-4) auto 0; }
.chapter-checker { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:var(--chapter-gap); background:var(--green); color:var(--ink-on-green); border-radius:var(--radius-panel); padding:var(--space-6); margin-bottom:var(--space-10); }
.chapter-checker h2 { font-size:clamp(2rem,4vw,4rem); max-width:13ch; }
.chapter-checker-copy { --od-gap:var(--space-3); }
.chapter-checker-copy p { max-width:45ch; }
.chapter-checker-copy .lead { font-size:var(--text-lead); line-height:1.35; font-weight:700; }
.chapter-checker-copy .button { align-self:flex-start; }
.chapter-return { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-3); padding-bottom:var(--space-8); }
@keyframes condition-enter { from { opacity:.35; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media (hover:hover) {
  .condition-option:hover { text-decoration:underline; text-underline-offset:.2em; }
}
@media (max-width:1023px) {
  .chapter-hero { grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding-bottom:var(--space-8); }
  .chapter-hero h1 { font-size:clamp(2.5rem,5.3vw,4rem); }
  .preparation,.comparison { padding-block:var(--space-8); }
  .preparation-grid { grid-template-columns:minmax(0,.8fr) minmax(0,1fr); }
  .comparison-heading { grid-template-columns:1fr; gap:var(--space-3); }
  .condition-option { padding-inline:var(--space-2); }
  .chapter-checker { padding:var(--space-4); }
}
@media (max-width:767px) {
  .chapter-breadcrumb { margin-bottom:var(--space-3); }
  .chapter-hero { grid-template-columns:1fr; gap:var(--space-4); }
  .chapter-hero h1 { font-size:clamp(2.5rem,9vw,4rem); max-width:14ch; }
  .chapter-hero-copy { --od-gap:var(--space-2); }
  .chapter-hero .chapter-lead { font-size:1.5rem; max-width:30ch; }
  .chapter-hero .text-link { margin-top:var(--space-1); }
  .preparation-top { padding-bottom:var(--space-4); }
  .preparation-grid { grid-template-columns:1fr; gap:var(--space-5); }
  .preparation h2 { font-size:clamp(3rem,13vw,5rem); }
  .preparation h2 .statement-intro,.preparation h2 .statement-end { font-size:1.5rem; }
  .condition-controls { margin-bottom:var(--space-4); }
  .condition-options { display:grid; grid-template-columns:1fr; }
  .condition-option { padding:var(--space-2); }
  .condition-panel { grid-template-columns:1fr; gap:var(--space-4); }
  .condition-text h3 { font-size:clamp(2rem,9vw,3rem); }
  .condition-text p { font-size:1.5rem; }
  .condition-panel .portrait-frame { justify-content:flex-start; }
  .portrait-frame img { width:min(100%,280px); }
  .chapter-reason { padding-block:var(--space-8); }
  .chapter-checker { grid-template-columns:1fr; gap:var(--space-3); padding:var(--space-4) var(--space-3); margin-bottom:var(--space-6); }
  .chapter-checker h2 { max-width:15ch; }
  .chapter-checker-copy .lead { font-size:1.5rem; }
  .chapter-checker-copy .button { max-width:100%; }
  .chapter-return { padding-bottom:var(--space-6); }
}
@media (max-width:374px) {
  .chapter-hero h1 { font-size:2.25rem; }
  .chapter-checker { padding-inline:var(--space-2); }
}
@media (prefers-reduced-motion:reduce) {
  .condition-panel.is-entering { animation:none; }
}
@media (forced-colors:active) {
  .condition-option:has(input:checked) { border-color:Highlight; outline:2px solid Highlight; }
  .preparation .statement-green { color:CanvasText; }
}

/* Shared supporting-page WHY rows, extracted from Plastic Bottles. */
.why-list { list-style:none; padding:0; margin:var(--space-6) 0 0; }
.why-list li { display:grid; grid-template-columns:minmax(64px,.22fr) minmax(0,1fr); gap:var(--chapter-gap); align-items:start; padding-block:var(--space-4); border-top:1px solid var(--ink); }
.why-list .why-number { display:block; font-family:var(--display); font-size:clamp(2rem,4vw,3.5rem); line-height:1.1; }
@media (max-width:767px) {
.why-list { margin-top:var(--space-4); }
.why-list li { grid-template-columns:48px minmax(0,1fr); gap:var(--space-2); padding-block:var(--space-3); }
}
@media (max-width:374px) {
.why-list li { grid-template-columns:1fr; gap:var(--space-2); }
}