/* The footer, and only the footer. One file because there is one footer. It used to live in theme.css, which the twenty-two generated pages load and the six section studies do not, so the studies had no footer at all or a hand-built one of their own. Both the generated pages and the studies now link this, and build/studies.mjs puts the same markup on the studies, so there is a single source for both halves. Every value is LITERAL, and deliberately so. The first version of this file read the site tokens with fallbacks, on the theory that a generated page would supply them and a study would fall back. It does not work: the studies define --film and --gold too, with their own meanings, so the footer came out with a transparent ground and near-black headings on all six of them. A token that exists but means something else never reaches its fallback. The footer is the film ground on every page of the site, in both themes, which is what makes literals the right answer rather than a shortcut: there is nothing here that should ever follow the page it is sitting on. */ .foot { --f-film: #0d0b08; --f-bone: #f6eee1; --f-bone-soft: #d6cbb8; --f-gold: #cba64e; --f-gold-ink: #1a1409; --f-wrap: 74rem; --f-gut: clamp(1.25rem, 4vw, 3.5rem); --f-serif: Georgia, "Noto Serif", "Droid Serif", "Times New Roman", serif; --f-sans: "Public Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; font-family: var(--f-sans); } .foot { background: var(--f-film); color: var(--f-bone); padding: clamp(3rem, 8vh, 5rem) var(--f-gut) 2rem; } .foot__wrap { width: min(100%, var(--f-wrap)); margin-inline: auto; display: grid; gap: clamp(1.6rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); /* Every item sits at the top of its row rather than stretching to the tallest one in it. Stretching cost nothing visible in itself, since these boxes have no ground of their own, but it is what put 227px of empty box under the brand and 220 under the Ecosystem list, and it is why the newsletter began a screen below the block it belongs to. At every width, not just the wide one. */ align-items: start; } /* ── how the footer arranges itself ──────────────────────────────────────── ONE PRINCIPLE AT EVERY WIDTH ABOVE A SINGLE COLUMN: the tall list owns a column, and the short blocks stack beside it. The Summit list carries ten links against the Ecosystem's four and Take part's six, so it is about twice the height of anything else down here, and any row it shares is as tall as it is. That is where the empty space came from. Not from stretching, which `align-items: start` already stops, but from a short block sitting in a row whose height a ten-link list had decided. Measured on /summit/registration/ before this rule: at 900px the footer was 813px tall with a 203px hole under the brand, and every width from 480 to 1023 had one. The four-column band below was written first and fixed only its own band, which left the hole in the widths most of a phone-and-tablet audience is actually in. Three explicit bands, ascending, each one COMPLETE: every band restates the placement of all five children rather than inheriting half of it from the band below. That is deliberate. Written as a min/max pair the bands leave a sub-pixel width belonging to neither, and written as ascending min-widths that only state what changes, the four-column band silently kept the three column band's column numbers. Restating is the only version that cannot half-apply. Placement is by `nav.foot__col:nth-of-type()`, which is safe here and only here: every footer on the site is the same five children in the same order, brand, three navs, newsletter, verified across all 28 pages, and the three navs are the only