/* Shared page chrome — header, nav, footer.
   A copy of the chrome selectors from site.css, loaded by EVERY page including
   the ones that carry their own inline CSS (home, download). site.css itself is
   left whole; duplicating a dozen rules is cheaper than cutting them out and
   breaking .prose, which is exactly what happened when this was a cut. */

.page-foot { margin-top: auto; }
.site-head {
  position: sticky; top: 0; z-index: 60;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 26px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.brand img { width: 34px; height: 34px; border-radius: 23.27%; display: block; }
.brand span { font-weight: 650; letter-spacing: 0.3em; font-size: var(--t-small); }
.site-head nav { display: flex; align-items: center; gap: 20px; }
.site-head nav a { font-size: var(--t-small); text-decoration: none; color: var(--ink-soft); }
.site-head nav a:hover { color: var(--ink); }
.site-head nav a.cta:hover { color: #fff; }
body.dark-sky .site-head nav a.cta:hover { color: #0B0B0C; }
.site-head .cta {
  font-size: var(--t-small); line-height: 1; text-decoration: none; color: #fff;
  /* The home page's buttons are 17px on a 63px-tall button; this one is
     ~40px tall, so 11px keeps the same corner-to-height ratio. */
  background: var(--ink); border-radius: 11px; padding: 13px 18px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(11,11,12,.16), 0 8px 20px rgba(11,11,12,.18);
}
@media (max-width: 620px) { .site-head nav a.hide-sm { display: none; } }
.page-foot {
  /* Same 26px gutters as .site-head, so the wordmark sits under the logo and
     the links sit under the button. */
  padding: 0 26px 34px; font-size: var(--t-small); color: var(--ink-faint);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%;
}
.page-foot .mark { text-align: left; }
.page-foot .links { display: flex; gap: 26px; justify-content: flex-end; flex-wrap: wrap; }
.page-foot a { text-decoration: none; color: var(--ink-faint); }
.page-foot a:hover { color: var(--ink); }
body.dark-sky .site-head .brand span,
body.dark-sky .site-head nav a { color: #FFFFFF; }
body.dark-sky .site-head .cta { background: #FFFFFF; color: #0B0B0C; }
@media (max-width: 380px) {
  .site-head { padding: 14px 16px; }
  .site-nav { gap: 12px; }
  .site-head .cta { padding: 11px 13px; }
  .page-foot { padding: 0 16px 28px; gap: 12px; }
  .foot-links { gap: 12px; }
}


/* ── Header nav (added with the Articles section) ──
   Same ink and small size as the rest of the chrome; the current page is the
   only one at full strength, so the bar reads as position, not decoration. */
.site-nav { display: flex; align-items: center; gap: 22px; }
.site-nav a { font-size: var(--t-small); color: var(--ink-soft); text-decoration: none; }
.site-nav a:hover { color: var(--ink); }
.site-nav a.is-current { color: var(--ink); }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
.foot-links a { color: var(--ink-faint); text-decoration: none; }
.foot-links a:hover { color: var(--ink-soft); }
@media (max-width: 620px) { .site-nav { gap: 16px; } }
/* Below ~380px the wordmark, one link and the button stop fitting at full
   padding, and the button runs off the edge. Tighten rather than wrap. */
@media (max-width: 380px) {
  .site-head { padding: 14px 16px; }
  .site-nav { gap: 12px; }
  .site-head .cta { padding: 11px 13px; }
  .page-foot { padding: 0 16px 28px; gap: 12px; }
  .foot-links { gap: 12px; }
}