/* Site-wide shell refinements, loaded after site.css on every page.
   Deliberately small: the blog, legal pages and quizzes keep their existing
   look. This only changes the chrome around them so the redesigned pages and
   the untouched ones feel like one site. */

/* Sticky, translucent header. Positioned (sticky) rather than static so the
   mobile nav panel, which is absolutely positioned off the header, keeps its
   containing block. Loaded after site.css so this wins over its mobile
   `position: relative` at equal specificity. */
header.site {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 14px 0;
  background: rgba(241, 240, 235, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(23, 23, 28, 0.07);
}

/* Browsers without backdrop-filter get an opaque bar instead of text sliding
   illegibly under a half-transparent one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.site { background: var(--bg); }
}

/* The redesigned pages use a wider container; the header and footer must
   line up with it or the brand and the page edge sit on different gutters. */
body.v2 header.site .wrap,
body.v2 footer.site .wrap {
  max-width: 1160px;
}

/* Anchored sections (/#why, #download ...) must not hide under the sticky bar. */
html { scroll-padding-top: 76px; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Keyboard users get a visible focus ring everywhere. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Skip link: first focusable element on every page. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

/* <picture> wraps images so they can offer a WebP. It is an inline element by
   default, which would put a descender gap under every image. display:contents
   removes its box entirely, so layout is identical to a bare <img>. */
picture { display: contents; }