/* Section 7: the guides and the footer (owner: structure). Its own section after the FAQ:
   one wrapped run of underlined guide links, then the menu bar strip (the wordmark, the
   links, the clam at the end, white: the lid is open). */
.foot{background:#000}
.guides{padding-block:calc(var(--sec-gap) / 2) calc(var(--sec-gap) / 2)}
.guide-links{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:calc(var(--cell) * 12)}
.guide-links a{font-size:16px;line-height:1.45;color:var(--tx);text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:4px;transition:color .15s steps(2),text-decoration-color .15s steps(2)}
.guide-links a:hover{color:#fff;text-decoration-color:var(--light)}
.guide-links .guide-all{font-weight:650;color:var(--ice)}

/* The menu bar strip: the site nav's measure, a near-black bar, the clam at the end. */
.fbar{display:flex;align-items:center;gap:6px 22px;min-height:48px;padding:8px var(--gutter);background:var(--n0);font-size:13.5px}
.fbar-brand{display:inline-flex;align-items:center;gap:8px;font-weight:650;font-size:14.5px;letter-spacing:-.01em;color:var(--tx);white-space:nowrap}
.fbar-brand img{width:20px;height:20px;image-rendering:pixelated}
.fbar-links{display:flex;flex-wrap:wrap;gap:2px 4px;margin-right:auto}
.fbar-links a{padding:5px 8px;border-radius:8px;color:var(--tx2);white-space:nowrap;transition:color .15s steps(2),background-color .15s steps(2)}
.fbar-links a:hover{color:var(--tx);background:var(--n2)}
.fbar-copy{color:var(--tx2);white-space:nowrap}
.fbar-clam{display:grid;place-items:center;flex:none;width:28px;height:28px;color:#e9ebee}
.fbar-clam svg{width:19px;height:17px}
@media (max-width:759px),(max-aspect-ratio:4/5){
  .guide-links{gap:10px 18px}
  .guide-links a{font-size:15px}
  .fbar{flex-wrap:wrap;padding:12px 14px 16px;row-gap:8px}
  .fbar-links{order:3;width:100%;margin-right:0}
  .fbar-copy{margin-left:auto}
}
/* Phones: 44px touch targets. A guide link pads its own line (the row gap moves into it), a
   footer link grows to the bar's measure. Touch screens of any size get the same. */
@media (max-width:759px),(pointer:coarse){
  .guide-links{row-gap:0}
  .guide-links a{padding-block:11px}
  .fbar-links a{padding-block:12px}
  .fbar-brand{padding-block:10px;margin-block:-10px}
  .fbar{row-gap:0}
}