/* Family footer v2.1.0 — the one footer every page of a site wears.
   Master copy: direct-standards/master-footer/. Never edit a site's copy:
   change the master, bump VERSION in family-footer.js, and run sync-all.mjs.
   Every class starts with .ff, so no site stylesheet collides, and this file
   stands on its own: it needs nothing from a site's stylesheet (some
   server-built pages load no site stylesheet at all).

   The form is the footer the owner approved on 2026-11-13: the idea line on
   paper ground · the white main area under a 3px line in the site's primary
   color, with the site's columns and the family line · the dark bar. Sizes
   below are that drawing's. A site sets its own colors through site.json
   "style" (primary, ink, muted, line, paper, card, bar, bar-ink, width).

   This file is public on every site: no personal names in it. */

.ff{
  --ff-primary:#1C2B3A; --ff-ink:#23201B; --ff-muted:#6E675C; --ff-line:#E5DFD3;
  --ff-paper:#FAF7F2; --ff-card:#ffffff; --ff-bar:var(--ff-ink); --ff-bar-ink:#D8D2C4; --ff-width:1120px;
  display:block; margin:0; padding:0; border:0; clear:both; background:transparent;
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.55; color:var(--ff-ink); text-align:left;
}
.ff *,.ff *::before,.ff *::after{box-sizing:border-box}
.ff-wrap{max-width:var(--ff-width);margin:0 auto;padding:0 20px}

/* 1. The idea line, on sites that have an idea page */
.ff-idea{background:var(--ff-paper);border-top:1px solid var(--ff-line);padding:10px 0;font-size:15px}
.ff-idea a{color:var(--ff-primary);font-weight:600;text-decoration:none}
.ff-idea a:hover{text-decoration:underline}

/* 2. The main area: the site's own columns */
.ff-main{background:var(--ff-card);border-top:3px solid var(--ff-primary);padding:26px 0 20px}
.ff-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.ff-cols b{display:block;margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ff-muted)}
.ff-cols a{display:block;padding:4px 0;color:var(--ff-ink);font-weight:600;text-decoration:none}
.ff-cols a:hover{text-decoration:underline}

/* 3. The family line, under the columns (or alone, on a site with no columns) */
.ff-family{margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--ff-line);font-size:15px;line-height:1.7;color:var(--ff-ink)}
.ff-family:first-child{margin-top:0;padding-top:0;border-top:0}
.ff-mark{display:inline-block;height:22px;width:auto;max-width:none;vertical-align:-5px;margin:0 8px 0 0;border:0}
.ff-family a{color:var(--ff-primary);font-weight:600;text-decoration:underline}

/* 4. The dark bar */
.ff-bar{background:var(--ff-bar);color:var(--ff-bar-ink);padding:14px 0;font-size:14px}
.ff-bar .ff-wrap{display:flex;align-items:center;justify-content:space-between;gap:4px 20px;flex-wrap:wrap}
.ff-bar b{color:#fff;font-size:15.5px;font-weight:700}
.ff-bar a{color:#fff;text-decoration:underline}

/* Two columns side by side on a phone */
@media (max-width:640px){
  .ff-cols{grid-template-columns:1fr 1fr;gap:18px 16px}
  .ff-main{padding:22px 0 18px}
}

/* Documents, flyers and anything else printed carry no footer. */
@media print{.ff{display:none !important}}