/* The footer shared by the landing page and the legal pages (plain files: no build step). The page's own stylesheet sets --bg, --fg, --muted, --surface, --border and --link. */
@font-face { font-family: 'Literata'; src: url('/fonts/literata-latin-wght-normal.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('/fonts/instrument-sans-latin-wght-normal.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
footer { font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; text-align: left; color: var(--fg); }
footer .brand { display: flex; align-items: center; gap: 0.6rem; line-height: 1; color: var(--fg); text-decoration: none; font-family: Literata, Georgia, 'Times New Roman', serif; font-weight: 600; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* footer, like Notion's: the logo, columns of links, and a language picker that opens upwards */
footer { max-width: 64rem; margin: 7rem auto 0; padding: 3rem var(--gutter) calc(3rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); }
.foot { display: grid; gap: 2rem 1.5rem; grid-template-columns: 1.6fr 1fr 1fr; align-items: start; }
.brand.big { font-size: 1.35rem; gap: 0.75rem; }
/* The capital letters sit lower than the middle of the text line, so the logo is nudged down to look centered on them (measured on the pixels). */
.brand img { position: relative; top: 0.8px; }
.brand.big img { top: 1px; } /* a whole pixel: the text snaps to whole pixels, so a fractional nudge flips between two positions depending on where the footer lands on the page */
.foot-col { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.975rem; min-width: 0; }
.foot-col a { color: var(--fg); text-decoration: none; overflow-wrap: anywhere; }
.foot-col a:hover { color: var(--link); text-decoration: underline; }
.foot-title { margin: 0 0 0.15rem; color: var(--muted); font-size: 0.875rem; }
@media (max-width: 48rem) { .foot { grid-template-columns: 1fr; } } /* phones: one column, so nothing is squeezed */
.lang { position: relative; display: inline-block; margin-top: 2.25rem; }
.lang summary { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--fg); font-size: 0.975rem; cursor: pointer; list-style: none; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { background: var(--surface); }
.lang .chev { transition: transform 0.15s; transform: rotate(180deg); color: var(--muted); }
.lang[open] .chev { transform: rotate(0deg); }
@media (prefers-reduced-motion: reduce) { .lang .chev { transition: none; } }
/* wide screens: the picker sits at the right edge, like Notion; its menu opens leftwards so it stays on screen */
@media (min-width: 48.01rem) {
  .lang { display: block; width: max-content; margin-left: auto; }
  .lang-menu { left: auto; right: 0; }
}
.lang-menu { position: absolute; left: 0; bottom: calc(100% + 0.5rem); z-index: 5; min-width: 13rem; margin: 0; padding: 0.4rem; list-style: none; background: var(--bg); border: 1px solid var(--border); border-radius: 0.875rem; box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.3); }
.lang-menu a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.7rem; border-radius: 0.5rem; color: var(--fg); text-decoration: none; }
.lang-menu a:hover { background: var(--surface); }
.lang-menu .check { opacity: 0; color: var(--fg); } /* the text color: white in dark mode, ink in light mode */
.lang-menu a[aria-current='true'] { background: var(--surface); }
.lang-menu a[aria-current='true'] .check { opacity: 1; }