/* Comic strips for /why/. Layout rules are scoped under .cx; SVG paint classes carry a
   cx- prefix and stay top-level, because rules nested under a parent class do not reach
   shapes drawn through <use>. Panel art keeps one fixed light palette (it is drawn
   artwork); headings, captions and links around it follow the site's theme tokens. */
:root {
  --cx-panel: #ffffff;
  --cx-ink: #15212c;
  --cx-soft: #5d6f7e;
  --cx-sky: #d7e8f2;
  --cx-signal: #f08a24;
  --cx-ok: #24935c;
  --cx-alarm: #d33f3f;
  --cx-paper: #fffdf6;
  --cx-hand: "Patrick Hand", "Comic Sans MS", "Segoe Print", cursive;
}
.cx .hero { padding-bottom: 0; }
.cx-body { display: grid; gap: 44px; padding-block: 24px 64px; }
.cx-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.cx-strip { display: grid; gap: 12px; padding: 0; }
.cx-strip h2 { font-size: clamp(1.4rem, 3vw, 1.75rem); margin: 0; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.cx-strip h2 small { font: 500 .72rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cx-panels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .cx-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .cx-panels { grid-template-columns: 1fr; } }
.cx figure { margin: 0; background: var(--cx-panel); border: 3px solid var(--cx-ink); border-radius: 4px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.cx figure.after { border-color: var(--cx-ok); box-shadow: 0 0 0 3px var(--cx-ok) inset; }
.cx figcaption { font: 500 .7rem/1.3 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; background: var(--cx-ink); color: var(--cx-panel); padding: 6px 10px; }
.cx figure.after figcaption { background: var(--cx-ok); }
.cx figure svg { display: block; width: 100%; height: auto; }
.cx-moral { margin: 0; font: 1.2rem/1.45 var(--cx-hand); padding-left: 14px; border-left: 4px solid var(--good); max-width: 70ch; }
.cx-how { margin: 0; color: var(--muted); max-width: 70ch; }

/* SVG paint */
.cx-ink { stroke: var(--cx-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.cx-sw2 { stroke-width: 2; }
.cx-inkf { fill: var(--cx-ink); }
.cx-skyf { fill: var(--cx-sky); }
.cx-skyink { stroke: var(--cx-ink); stroke-width: 3; }
.cx-paperf { fill: var(--cx-paper); stroke: var(--cx-ink); stroke-width: 2.5; }
.cx-whitef { fill: var(--cx-panel); stroke: var(--cx-ink); stroke-width: 3; }
.cx-alarmline { stroke: var(--cx-alarm); }
.cx-sig { stroke: var(--cx-signal); stroke-width: 3; fill: none; stroke-linecap: round; }
.cx-okf { fill: var(--cx-ok); }
.cx-oks { stroke: var(--cx-ok); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cx-alf { fill: var(--cx-alarm); }
.cx-als { stroke: var(--cx-alarm); stroke-width: 3; fill: none; stroke-linecap: round; }
.cx-tick { stroke: #ffffff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cx-say { font-family: var(--cx-hand); font-size: 17px; fill: var(--cx-ink); }
.cx-say-s { font-family: var(--cx-hand); font-size: 15px; fill: var(--cx-ink); }
.cx-big { font-size: 30px; }
.cx-bold { font-weight: 700; }
.cx-mono { font-family: var(--font-mono); font-size: 11px; fill: var(--cx-ink); }
.cx-mono-w { font-family: var(--font-mono); font-size: 11px; fill: var(--cx-panel); }
.cx-cap { font-family: var(--font-mono); font-size: 10.5px; fill: var(--cx-soft); letter-spacing: .04em; }
.cx-bub { fill: var(--cx-panel); stroke: var(--cx-ink); stroke-width: 2.5; }
@media (prefers-reduced-motion: no-preference) {
  .cx-blink { animation: cx-blink 1.4s steps(2, end) infinite; }
  @keyframes cx-blink { 50% { opacity: .25; } }
}