/* Shared footer sitemap.
   Every page hand-authors its own <style>, so this is the one piece of CSS
   that is genuinely shared (the cookbook already proved the pattern with
   cookbook.css). Kept deliberately small and namespaced under .sitemap so it
   can drop into any page's existing <footer> without colliding.

   The links live in the HTML, NOT injected by JS: crawlers need to see them,
   and internal linking is the whole point of this footer.

   Colors come from each page's own :root vars, with fallbacks so the file
   also works on pages that define a smaller palette (the cookbook). */

/* Sits inside whatever wrap container the page's own footer already uses, so
   it lines up with the copyright row rather than going full-bleed. The
   fallback class is for any page whose footer has no wrap at all. */
.sitemap-fallback { max-width: 980px; margin: 0 auto; padding: 0 24px; }
.sitemap {
  border-bottom: 1px solid var(--line, #e5e5e7);
  padding: 0 0 30px;
  margin: 0 0 26px;
}
.sitemap-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 24px;
  text-align: left;
}
.sitemap-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
/* Not a heading element on purpose: these blocks repeat on every page and
   should not enter the document outline. */
.sitemap-h {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint, #86868b);
  margin: 0 0 2px;
}
.sitemap-col a {
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--text-muted, #6e6e73);
  text-decoration: none;
}
.sitemap-col a:hover {
  color: var(--accent-dark, #d96400);
  text-decoration: underline;
}
/* The one link that should read as an action, not navigation. */
.sitemap-col a.sitemap-dl {
  color: var(--accent-dark, #d96400);
  font-weight: 600;
}

@media (max-width: 760px) {
  .sitemap-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
}
@media (max-width: 380px) {
  .sitemap-inner { grid-template-columns: 1fr; }
}

/* The cookbook runs a dark terminal palette and never defines --text-muted,
   so the light-page fallback lands at about 3.5:1 on its background. Its own
   --term-dim is the right token and clears AA comfortably. */
.foot .sitemap-h,
.foot .sitemap-col a { color: var(--term-dim, #8b949e); }
.foot .sitemap-col a:hover { color: var(--accent, #ff7a00); }
.foot .sitemap { border-bottom-color: var(--term-border, #232b36); }

/* ---------- Last-chance download band ----------
   For pages whose body never offered a way to get the app: a visitor who
   read to the bottom had to go hunting for the header button. Lives here
   rather than in three inline <style> blocks because this file is already
   on every page. */
.get-tellie {
  border-top: 1px solid var(--line, #e5e5e7);
  background: var(--bg-warm, #fffaf2);
  padding: 46px 24px;
  text-align: center;
}
.get-tellie-inner { max-width: 560px; margin: 0 auto; }
.get-tellie h2 {
  margin: 0 0 8px;
  font-size: 25px;
  letter-spacing: -0.02em;
  color: var(--text, #1d1d1f);
}
.get-tellie p {
  margin: 0 0 20px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--text-muted, #6e6e73);
}
.get-tellie a.get-tellie-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent, #ff7a00);
  color: #fff;
  font-size: 15.5px;
  font-weight: 600;
  padding: 13px 24px;
  border-radius: 980px;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.get-tellie a.get-tellie-btn:hover {
  background: var(--accent-dark, #d96400);
  transform: translateY(-1px);
  text-decoration: none;
}
.get-tellie .get-tellie-fine {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--text-faint, #86868b);
}