/* footer.css — the one site footer, on every page.
   It inherits each page's text colour, so it sits in the dark desk pages and in each app's own landing page alike.
   On the dark site pages the hover colour is the site accent; app pages use their own accent. */
.sf { box-sizing: border-box; display: grid; grid-template-columns: 1fr auto; gap: 32px 56px; align-items: start;
  margin: 0 max(40px, calc(50vw - 640px)); padding: 40px 0 56px;
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); font-size: 14px; line-height: 1.4; text-align: left; }
.sf.in { margin: 32px 0 0; padding: 28px 0 8px; }
.sf a { color: inherit; text-decoration: none; }
.sf-me a { font-weight: 500; font-size: 15px; }
.sf-me p { margin: 6px 0 0; line-height: 1.5; }
.sf-me p > span { opacity: .72; }
.sf-me .sf-cr { display: inline-block; font-weight: 400; font-size: 14px; opacity: .85; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; transition: opacity .2s ease-out, color .2s ease-out, text-decoration-color .2s ease-out; }
.sf-me .sf-cr:hover, .sf-me .sf-cr[aria-current="page"] { opacity: 1; color: var(--accent-text, var(--accent, inherit)); text-decoration-color: currentColor; }
.sf-cols { display: flex; flex-wrap: wrap; gap: 28px 56px; }
.sf-h { margin: 0 0 12px; font: 500 11px/1 'JetBrains Mono', ui-monospace, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; opacity: .72; }
.sf ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.sf li a { display: inline-flex; align-items: center; min-height: 28px; opacity: .85; text-underline-offset: 3px;
  transition: opacity .2s ease-out, color .2s ease-out; }
.sf li a:hover { opacity: 1; text-decoration: underline; text-decoration-color: var(--accent, currentColor); color: var(--accent-text, var(--accent, inherit)); }
.sf li a[aria-current="page"] { opacity: 1; color: var(--accent-text, var(--accent, inherit)); }
@media (max-width: 640px) {
  .sf { grid-template-columns: 1fr; margin-inline: 16px; }
  .sf.in { margin-inline: 0; }
  .sf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .sf li a { min-height: 36px; }
}