/* The site footer, shared by the landing page and the private library.
 *
 * Split out of site.css so both pages can link it without the library also
 * pulling in the marketing page's hero, sections and forms.
 *
 * Every selector here is scoped under `footer`, and the file relies only on the
 * CSS variables and the `.wrap` container that both pages already define -- so
 * it drops into either one without colliding with its own styles. The brand
 * rules are duplicated from site.css under `footer .brand` on purpose: the
 * library has no header brand of its own, and repeating four declarations is
 * cheaper than making the library load the whole landing stylesheet.
 */
footer{background:var(--abyss);padding:64px 0 40px;color:var(--mist)}
footer .brand{display:flex;align-items:center;gap:12px;font-family:var(--disp);font-weight:600;letter-spacing:.02em;color:var(--foam);text-decoration:none}
footer .brand .mark{width:30px;height:30px;flex:0 0 auto}
footer .brand b{font-size:20px}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid var(--line)}
.foot-brand .brand{margin-bottom:16px}
.foot-brand p{font-size:.95rem;max-width:34ch;margin-bottom:18px}
.foot-brand .place{font-family:var(--mono);font-size:12.5px;color:var(--mute);line-height:1.9}
.foot-col h5{font-family:var(--disp);font-weight:500;color:var(--foam);font-size:1rem;margin-bottom:16px}
.foot-col a{display:block;font-size:14.5px;padding:6px 0;color:var(--mist);text-decoration:none;transition:color .16s}
.foot-col a:hover{color:var(--aqua)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:26px}
.foot-bottom small{font-family:var(--mono);font-size:12.5px;color:var(--mute)}
.socials{display:flex;gap:12px}
.socials a{width:38px;height:38px;border-radius:10px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--mist);text-decoration:none;transition:.16s}
.socials a:hover{border-color:var(--teal);color:var(--aqua)}

@media (max-width:920px){
  .foot-top{grid-template-columns:1fr 1fr;gap:30px}
}
@media (max-width:720px){
  .foot-top{grid-template-columns:1fr;gap:6px}
  .foot-bottom{flex-direction:column;align-items:center;text-align:center;gap:16px}
  .socials{justify-content:center}
  /* The columns collapse into accordions on a phone; footer.js supplies the
     click target and the aria state. Without that script the links would be
     unreachable, so the two ship together. */
  .foot-col h5{cursor:pointer;display:flex;justify-content:space-between;align-items:center;margin-bottom:0;padding:15px 2px;border-top:1px solid var(--line)}
  .foot-col h5::after{content:"+";font-family:var(--mono);color:var(--mist);font-weight:400;font-size:1.15rem;line-height:1}
  .foot-col.open h5::after{content:"\2212"}
  .foot-col a{display:none;padding:8px 0 8px 2px}
  .foot-col.open a{display:block}
  .foot-col.open a:last-child{padding-bottom:14px}
}