/* home.css — the home page, on top of the site's own main.css. * * Same relation report.css has to main.css: palette, type scale, links and * the site chrome all come from main.css (§1: same family, not a separate * identity). This file adds only the layout the home page needs — the * hero, the section intro copy and the country/region/topic box grids — * and nothing else. See build/home.py. * * Revised 2026-08-11 (Bill's numbered change list): dropped the four-card * grid, the two-up "what the base holds" bar tables, and the classes that * served only them (.cards/.card/.two-up/table.bars) — nothing else in the * site used them (checked before removing). * * Revised again 2026-08-11: dropped the hero's own rule (the faint line * stacked on the Countries heading's bold one) and .hero__sub/.n, unused * once Bill trimmed the hero to one line; section headings resized to match * an article's h2 sub-headings. * * Revised again 2026-08-11: .corpus-nav, .stat-bar and .section-heading * moved to main.css — the country page needs them too, and a class two page * types share belongs in the shared stylesheet, not copied between them. */ /* Hero: smaller type and no trailing whitespace, so the copy sits right above * the Countries rule (Bill, 2026-08-13, item 3). Text is placeholder pending a * rewrite, so the size is deliberately modest. */ .hero { padding: 1.75rem 0 0; margin-bottom: 0.6rem; } .hero p { font-size: 1.05rem; line-height: 1.5; max-width: 46rem; margin-bottom: 0; } .section-intro { font-size: 1rem; line-height: 1.6; color: var(--ink-light); max-width: 46rem; margin-bottom: 1.25rem; } .section-intro--todo { color: var(--ink-faint); font-style: italic; } /* Footnote/caveat sits tight under its matrix, and the next section's rule * follows close behind it (Bill, 2026-08-13, item 5). The heading override is * home-only — country pages load country.css, not this file — and the * :first-of-type rule in main.css still zeroes the top margin of Countries. */ .caveat { font-size: 0.76rem; color: var(--ink-faint); line-height: 1.5; margin: 0.5rem 0 0; } .section-heading { margin-top: 1.4rem; } /* Country / region matrix: seven boxes to a row, a touch shorter than before, * and a shared min-height so countries and regions line up box-for-box (Bill, * 2026-08-13, items 4 and 6). The longest region name ("Sub-Saharan Africa") * is the only label that runs to two lines and so rides a hair taller. */ .boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.6rem, 1fr)); gap: 4px; margin: 1rem 0 0.5rem; } /* Regions: only eight boxes with longer names, so they get a wider column and * do not follow the countries' seven-per-row (Bill, 2026-08-13). Wider boxes * keep every region name — "Sub-Saharan Africa" included — on one line, so the * boxes match the country boxes' height (item 6). */ .boxes--regions { grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); } .box { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 3rem; padding: 0.4rem 0.55rem; border: 1px solid var(--rule); border-radius: 3px; background: color-mix(in srgb, var(--accent) calc(var(--fill) * 14%), var(--paper)); color: var(--ink); } .box:hover { border-color: var(--accent); color: var(--ink); } .box__k { font-family: var(--serif); font-size: 0.8rem; font-weight: 600; line-height: 1.2; } .box__n { font-size: 0.7rem; color: var(--ink-light); line-height: 1.2; } .tboxes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 1rem 0 0.5rem; } /* .tbox is now a