/* One header and one footer on every page (site roast 19 Oct #35, owner): the homepage's lockup at the
   homepage's left edge, in its frame (1180 px, 1360 from 1800 px, a 24 px gutter, 16 px from 640 px down), wherever you
   click. The homepage keeps its own fixed menu (site-v4.css .nav-inner: the same frame, 72 px, 64 from 640 px down); this
   file draws the other pages' header, every page's footer and the portal's frame. The markup is the same on every page
   (test/site-chrome-ui.test.mjs). Its own colours, so a page's palette never changes it. */
.site-header, .site-footer {
  --line: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.16); --quiet: #7f8997; --muted: #aab2be; --ink: #f5f3ec;
  --gold: #e2c46c; --gold-soft: #f3dc93;
  --body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-family: var(--body); line-height: 1.6;
}
.site-header .header-inner, .site-footer .footer-inner, .site-frame { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
@media (min-width: 1800px) { .site-header .header-inner, .site-footer .footer-inner, .site-frame { width: min(1360px, calc(100% - 48px)); } }
@media (max-width: 640px) { .site-header .header-inner, .site-footer .footer-inner, .site-frame { width: calc(100% - 32px); } }
.site-header a, .site-footer a { color: inherit; text-decoration: none; }
.site-header .brand, .site-footer .brand { display: block; flex: none; }
.site-header .brand-logo, .site-footer .brand-logo { display: block; width: 118px; max-width: none; height: auto; }

/* the header: the lockup left, the way home and two icons right (a page never links to itself) */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 72px; }
.site-header .hn { display: flex; align-items: center; gap: 8px; }
.site-header .tl { display: none; align-items: center; margin-right: 6px; color: var(--muted); font: 600 13px/1 var(--body); white-space: nowrap; }
.site-header .tl:hover { color: var(--gold-soft); }
.site-header .i { display: block; flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.site-header .ib { position: relative; display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(226,196,108,.22); border-radius: 999px;
  background: transparent; box-shadow: none; color: var(--muted); transition: color .2s, border-color .2s; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .site-header .ib:hover { color: var(--gold-soft); border-color: var(--gold); background: transparent; box-shadow: 0 0 16px -5px rgba(226,196,108,.5); } }
/* our own tooltip, never the browser's title: under the icon, the last one opens leftwards */
.site-header [data-tip]::after { content: attr(data-tip); position: absolute; z-index: 30; top: calc(100% + 8px); bottom: auto; left: 50%; right: auto; padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: #1d2128; color: var(--ink); font: 500 12px/1.3 var(--body); white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, -4px); transition: opacity .16s, transform .16s; }
.site-header [data-tip]:hover::after, .site-header [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.site-header [data-tip-r]::after { left: auto; right: 0; transform: translateY(-4px); }
.site-header [data-tip-r]:hover::after, .site-header [data-tip-r]:focus-visible::after { transform: none; }
@media (hover: none) { .site-header [data-tip]:not(:focus-visible)::after { display: none; } }
@media (min-width: 640px) { .site-header .tl { display: inline-flex; } }
@media (max-width: 640px) { .site-header .header-inner { height: 64px; } .site-header .brand-logo { width: 104px; } }

/* the footer: the homepage's (logo, links, then the copyright and how to reach us) */
.site-footer { border-top: 1px solid var(--line); color: var(--quiet); font-size: 13.5px; }
.site-footer .footer-inner { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px 40px; padding: 32px 0 40px; }
.site-footer .brand-logo { width: 104px; }
.site-footer .brand { justify-self: start; }   /* a phone's one column stretched the link 358 px past the logo (review r1 #4) */
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 22px; }
.site-footer a { white-space: nowrap; }   /* a line wraps between links, never inside one */
.site-footer nav a { display: inline-flex; align-items: center; min-height: 40px; }
.site-footer a:hover { color: var(--gold-soft); }
.site-footer .footer-portal { color: var(--gold-soft); }
/* the page you are on (pages.js): marked in white, not a link that reloads it; gold stays the portal's alone */
.site-footer a[aria-current] { color: var(--ink); pointer-events: none; }
.site-footer .footer-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; }
.site-footer .footer-contact { display: flex; flex-wrap: wrap; gap: 6px 18px; }
/* below 1400 px the frame reaches up to 81 px under the support box's Ask button (bottom right, 89 px wide, 16 from the edge):
   the links and the addresses start on the left and keep 96 px clear of the frame's right edge, so no footer link ever lies
   under Ask and it never steps aside for one. The signed-out portal is short: its footer is on the first screen of a laptop
   window (1366 x 657, 1280 x 689) and of the "No code?" step at 1000 x 760, where the right-aligned links hid Ask (review r2).
   A phone's one column keeps its full width: there the homepage's Ask sits in the bottom bar. */
@media (max-width: 1399px) { .site-footer nav, .site-footer .footer-base { justify-content: flex-start; } .site-footer .footer-base { column-gap: 28px; } }
@media (min-width: 641px) and (max-width: 1399px) { .site-footer nav, .site-footer .footer-base { padding-right: 96px; } }
@media (max-width: 640px) { .site-footer .footer-inner { grid-template-columns: minmax(0, 1fr); } }