/* home-why.css: the home page's page 3, "Why I built Codemany" (#why, 2026-11-13). One page between page 2 and
 * the footer (home.css), fitting it at every size: the story (left) beside the owner's own CI bill (right), one
 * column under 861px. The bars are emerald and square, like the CI-cost article's charts; the June 2027 bar is a
 * guess, drawn as a dashed outline so it never reads as data. The site is light only (the no-scroll gate). */
.wy { --wy-bar: #059669; }
.wy-in {
  height: 100%; max-width: 1080px; margin: 0 auto; padding: clamp(12px, 3vh, 40px) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 56px);
  align-items: center; align-content: safe center; min-width: 0;
}
.wy-copy { display: grid; gap: clamp(8px, 1.6vh, 14px); justify-items: start; min-width: 0; }
.wy-copy h2 { margin: 0; font-size: clamp(20px, min(3vw, 4.4vh), 34px); line-height: 1.12; letter-spacing: -.05em; }
.wy-copy p { margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.6; color: var(--muted-foreground); text-wrap: pretty; }
.wy-copy p a { color: var(--foreground); text-underline-offset: 3px; }
.wy-copy .eyebrow { font-size: 12px; }
.wy-copy .wy-by { color: var(--foreground); font-size: 13px; }
.wy-more { font-size: 14px; font-weight: 600; color: var(--foreground); text-underline-offset: 3px; }
.wy-more:hover { text-decoration: underline; }

/* ---------- the chart: GitHub billed $ a month for Amaltash CI (gen_svg.py) ---------- */
.wy-fig { margin: 0; display: grid; gap: 8px; min-width: 0; }
.wy-svg { display: block; width: 100%; height: auto; max-height: 52vh; font-family: inherit; }
.wy-grid { stroke: var(--border); stroke-width: 1; }
.wy-tick { fill: var(--muted-foreground); font-size: 10px; }
.wy-val { fill: var(--foreground); font-size: 10.5px; font-weight: 700; }
.wy-bar { fill: var(--wy-bar); }
.wy-proj { fill: none; stroke: var(--wy-bar); stroke-width: 1.5; stroke-dasharray: 4 3; }
.wy-fig figcaption { font-size: 12px; line-height: 1.5; color: var(--muted-foreground); text-wrap: pretty; }

/* ---------- narrow: one column, centred like page 1 (home.css) ---------- */
@media (max-width: 860px) {
  .wy-in { grid-template-columns: minmax(0, 560px); justify-content: center; gap: clamp(12px, 2.4vh, 24px); }
  .wy-svg { max-height: 30vh; }
}
@media (max-width: 600px) {
  .wy-in { padding-top: 8px; padding-bottom: 8px; }
  .wy-copy { gap: 8px; }
  .wy-copy p { font-size: 13px; line-height: 1.5; }
  .wy-copy .eyebrow { display: none; }
}
/* short windows: the caption goes (the chart's title and the article carry it) */
@media (max-height: 700px) { .wy-fig figcaption { display: none; } .wy-copy p { line-height: 1.45; } }