/* This site's own page layout. Colors, font and buttons live in tokens.css/buttons.css —
   load those too, they're not duplicated here. */
@import url("tokens.css");
@import url("buttons.css");

body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; width: 100%; max-width: var(--container); margin: 0 auto; padding: 60px var(--gutter); }
/* The browser's own default margin on whatever sits first/last in main (e.g. an h1's ~21px
   top margin) stacks on top of the padding above instead of being absorbed by it — zero it so
   the 60px/40px padding is the whole, exact gap to the header/footer, not padding-plus-surprise. */
main > :first-child { margin-top: 0; }
main > :last-child { margin-bottom: 0; }
@media (max-width: 640px) { main { padding: 40px var(--gutter); } }