/* frames.css — the embedded nav and footer, and Lenis's own rules.
 * Shared by the /blogs/<slug> article pages and the generated /blogs listing.
 * Split out of article.css: the listing needs these embeds but must not
 * inherit the article typography that file also carries.
 */
/* ---- smooth scroll ---------------------------------------------------------
 * Lenis, the same library Framer ships on every other page (its bundle carries
 * it as SmoothScroll_Prod). Vendored to /_sk/lenis.js rather than imported from
 * that chunk, whose filename carries a content hash that changes on every
 * re-mirror and would silently break these pages.
 *
 * These three rules are Lenis's own required stylesheet, inlined.
 */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---- nav band --------------------------------------------------------------
 * Deliberately thin. The markup injected by tools/apply-nav.mjs already carries
 * Framer's own 115px band — its gradient and the `top: 15px` that positions the
 * pill inside it — so all this has to do is give that band a fixed, full-width,
 * 115px box to live in. An earlier version also centred the pill and added its
 * own 15px offset, which pushed the pill 15px down and collapsed Framer's band
 * to 0x0 because it had no width to size against.
 *
 * pointer-events are left alone: on the Framer pages the band does receive
 * clicks across its full width, and article content starts below it anyway.
 */
.sk-nav {
  position: fixed;
  inset: 0 0 auto;
  height: var(--sk-nav-h, 115px);
  z-index: 5;
}
.sk-nav-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color-scheme: normal; /* keep the transparent frame from getting a UA dark background */
}

/* The footer is embedded the same way as the nav: an iframe of the real
 * /blogs page stripped to its footer block. Height follows the embed's
 * reports; the fallback is roughly the desktop footer height so first
 * paint doesn't jump. */
/* The frame is viewport-tall so vh units inside it mean what they mean on
 * the real page (the footer uses them); the wrapper clips it down to the
 * footer's reported extent. */
.sk-footer-embed {
  --sk-footer-fallback: 538px;
  height: var(--sk-footer-h, var(--sk-footer-fallback));
  overflow: hidden;
  position: relative;
}
@media (min-width: 810px) { .sk-footer-embed { --sk-footer-fallback: 721px; } }
@media (min-width: 1200px) { .sk-footer-embed { --sk-footer-fallback: 735px; } }
.sk-footer-frame {
  display: block;
  position: absolute;
  /* Pinned to the BOTTOM of the wrapper: the embed aligns the footer with
   * the frame's bottom edge, so the violet always ends exactly where the
   * page ends. Anchoring at the top instead left a black strip under it. */
  inset: auto 0 0;
  width: 100%;
  height: 100vh;
  border: 0;
  background: transparent;
  color-scheme: normal;
}