/* The footer, copied from the locked prototype (docs/design/prototype/template.html, D10 T01 §10). */
/* Light / Dark / System: three icon buttons in one pill; the pressed one is filled. */
.modes { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.modes button { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--ink-3); cursor: pointer; }
.modes button:hover { color: var(--ink); }
.modes button[aria-pressed="true"] { background: var(--soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.modes svg { width: 16px; height: 16px; }
.socials { display: flex; gap: 8px; margin-top: 18px; }
.socials a { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-2); }
.socials a:hover { color: var(--signal); border-color: var(--signal); }
.socials svg { width: 16px; height: 16px; }
.foot-modes { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 13px; color: var(--ink-3); }
.foot { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 32px; padding: 56px 32px; }
/* The prototype's column heads are h4; they are h3 here so no heading level is skipped after a page's last h2
   (D11 T01 §3). The rule sets every property an h3 would change, so they look the same. */
.foot h3 { font: 500 13px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.foot a { text-decoration: none; } .foot a:hover { color: var(--signal-ink); }
.foot .small { color: var(--ink-2); font-size: 14px; margin-top: 14px; max-width: 30ch; }
@media (max-width: 760px) { .foot { grid-template-columns: 1fr 1fr; } }
/* The bottom line (D11 T07 §6): the legal entity, and the Terms and Privacy links, in the footer's small type, across
   the full width under the columns and set off by the dashed line the frame uses. */
.foot-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; border-top: 1px dashed var(--line); }
.foot-legal .small { margin-top: 0; max-width: none; }
.foot-legal a { color: var(--ink-2); }