/* ==========================================================================
   Masterfly — Landing page
   Fluid scaling: the two Figma comps (375px / 1440px) are treated as the
   two ends of a continuous fluid scale for the hero display type + logo,
   built with clamp(). Fixed-size UI text (buttons, inputs, footer, notes)
   stays the exact px Figma uses at BOTH comps, since it doesn't change
   between them either. Structural layout (stacked vs. split column)
   switches at 900px, matching the two provided breakpoints.
   ========================================================================== */

/* ---- Fonts --------------------------------------------------------------
   Both families come from Google Fonts (<link> in the HTML <head>):
   - Anton: the big title and the red/yellow claim (--font-display)
   - Archivo: everything else, incl. the email field and the button (--font-body)
   PP Agrandir and PP Object Sans (the Figma fonts) are parked: see
   PROJECT.md ("Polices") for their details and how to bring them back.
   -------------------------------------------------------------------- */

/* While Anton downloads, show Impact scaled to Anton's width (7.245em / 7.926em
   = 91.4%) so the title, sized from Anton's width, doesn't wrap into extra
   lines and jump when the real font swaps in. */
@font-face {
  font-family: "Anton Fallback";
  src: local("Impact");
  size-adjust: 91.4%;
}

@supports (height: 100svh) {
  :root {
    --screen-h: 100svh;
  }
}

:root {
  --beige: #dadacf;
  --red: #e44327;
  --yellow: #f69500;
  --ink: #1d1c17;
  --bg: #000;
  --bg-plate: #1d1c17; /* flat color of the former cover.png */

  --font-display: Anton, "Anton Fallback", Impact, sans-serif;
  /* width of the widest title line ("TRACKS IN SECONDS") in em, for the display
     font above: Anton 7.245 (measured at 100px) */
  --display-em: 7.25;
  --font-body: Archivo, "Helvetica Neue", Arial, sans-serif;

  /* fluid viewport clamp bounds — anchored to the two Figma frames */
  --vw-min: 375;
  --vw-max: 1440;

  --gutter: clamp(20px, calc(20px + (100vw - 375px) * 0.0563), 80px);
  --col-gap: clamp(48px, calc(48px + (100vw - 375px) * 0.169), 96px);
  --pad-top: clamp(20px, calc(20px + (100vw - 375px) * 0.0169), 40px);
  --panel-gap: clamp(24px, calc(24px + (100vw - 375px) * 0.169), 40px);
  /* Desktop: the title's longest line fills the hero column (Figma: 580px in a
     582px column; 0.98 leaves a hair of room so it never wraps), unless that
     would make the hero taller than the screen. Height limit: the block is
     centered with the same space above and below (footer 14px + padding + gap,
     twice), so the screen minus that minus what follows the title
     (--hero-below: divider, paragraph, form, notes; measured by js/main.js, 330px
     is the fallback) minus 8px of air, divided by the title block's height in
     font sizes (4 lines at line-height 1 + the claim's 0.15em gap). On very short
     screens the height limit bottoms out at 20px (the page then scrolls), but the
     size never exceeds the column-width limit, so no wrapping. */
  --hero-fs: min(
    min(582px, (100vw - 2 * var(--gutter) - var(--col-gap)) / 2) * 0.98 / var(--display-em),
    max(
      20px,
      (var(--screen-h) - 2 * (var(--pad-bottom) + 14px + var(--panel-gap)) - var(--hero-below, 330px) - 8px) / 4.15
    )
  );
  --pad-bottom: clamp(70px, calc(70px + (100vw - 375px) * 0.0075), 78px);

  /* Screen height used for layout. 100svh (small viewport, toolbars showing) does
     not change when a mobile browser's toolbar slides away while scrolling, unlike
     100dvh, which made content jump. Plain 100vh where svh isn't supported. */
  --screen-h: 100vh;

  /* Thank-you page title ("YOU'RE" / "IN."). --thanks-em: width of "YOU'RE" in em
     for the display font (Anton, measured at 100px). Desktop: fills the column,
     capped by the screen height like --hero-fs (title block = 2 lines of
     line-height 1; --thanks-below = the copy, button and margins, measured by
     js/main.js, 250px fallback). */
  --thanks-em: 2.51; /* Anton: "YOU'RE" = 2.508em */
  --thanks-fs: min(
    min(582px, (100vw - 2 * var(--gutter) - var(--col-gap)) / 2) * 0.98 / var(--thanks-em),
    max(
      24px,
      (var(--screen-h) - 2 * (var(--pad-bottom) + 14px + var(--panel-gap)) - var(--thanks-below, 250px) - 8px) / 2
    )
  );
  --thanks-copy-fs: 34px;

  /* page swap (home <-> privacy): each half (leave, enter) lasts --swap-ms */
  --swap-ms: 550;
  --swap-distance: 100px;
  --swap-ease: cubic-bezier(0, 0, 0.01, 1);
  --swap-blur: 12px;
}

/* fluid(minPx, maxPx) helper values, computed per-property below with calc()
   using: min + (max - min) * (100vw - 375px) / (1440 - 375) */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--beige);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Stage / background --------------------------------------------- */

.stage {
  position: relative;
  min-height: var(--screen-h);
  overflow: hidden;
  overflow: clip; /* clip (unlike hidden) keeps position: sticky working inside */
}

.bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 100lvh; /* stays put when mobile browser toolbars show/hide */
  z-index: 0;
  background: var(--bg-plate);
}

/* Static background art (bg-mobile.jpg / bg-desktop.jpg): exported from Figma
   already blurred and darkened, sized like the frames, so nothing is layered on
   top of it. Over the flat --bg-plate color; object-fit: cover keeps proportion. */
.bg__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Panel / layout ---------------------------------------------------- */

.panel {
  position: relative;
  z-index: 1;
  min-height: var(--screen-h);
  display: flex;
  flex-direction: column;
  padding: var(--pad-top) var(--gutter) var(--pad-bottom);
  gap: var(--panel-gap);
}

.intro {
  margin: 0;
  max-width: 527px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 400;
}

.intro strong {
  font-weight: 700;
}

.content {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--col-gap);
}

@media (min-width: 900px) {
  .content {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Brand / logo ------------------------------------------------------- */

.brand {
  --logo-w: clamp(241px, calc(241px + (100vw - 375px) * 0.1049), 352.7px);
  display: flex;
  align-items: center;
  gap: clamp(8px, calc(8px + (100vw - 375px) * 0.0094), 18px);
}

.brand__home {
  display: contents;
}

.brand__logo {
  width: var(--logo-w);
  height: auto;
  /* the SVG has ~3.45% empty space left of the "M"; pull it out so the ink
     lines up with the page gutter */
  margin-left: calc(var(--logo-w) * -0.0345);
}

.brand__tag {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(14.38px, calc(14.38px + (100vw - 375px) * 0.00624), 21.03px);
  line-height: 1.03;
  letter-spacing: -0.04em;
  color: var(--red);
  white-space: nowrap;
}

.brand__tag span {
  display: block;
  color: var(--yellow);
}

/* ---- Hero ---------------------------------------------------------------- */

.hero {
  max-width: 582px;
}

.hero__title,
.hero__claim {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400; /* Anton has one weight; a higher value would be faux-bolded */
  text-transform: uppercase;
  line-height: 1.15;
  font-size: var(--hero-fs);
}

.hero__claim {
  margin-top: 0.15em;
}

.hero__claim .c-red {
  color: var(--red);
  display: block;
}

.hero__claim .c-yellow {
  color: var(--yellow);
  display: block;
}

.hero__divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin: clamp(20px, calc(20px + (100vw - 375px) * 0.0169), 34px) 0;
}

.hero__label {
  margin: 0 0 16px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.5;
}

.hero__note {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
}

/* ---- Signup form ---------------------------------------------------------- */

.signup {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /*max-width: 335px;*/
}

.signup input {
  appearance: none;
  border: none;
  border-radius: 3px;
  background: var(--beige);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  padding: 12px 16px;
}

.signup input::placeholder {
  color: var(--ink);
  opacity: 1;
}

.signup button {
  appearance: none;
  border: none;
  border-radius: 3px;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 24px;
  cursor: pointer;
}

.signup button:hover {
  filter: brightness(1.05);
}

.signup__status {
  min-height: 1.4em;
  font-size: 13px;
}

.signup__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}

.signup__consent input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.signup__box {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border: 1px solid var(--beige);
  border-radius: 3px;
  position: relative;
}

.signup__consent input:checked + .signup__box {
  background: var(--yellow);
  border-color: var(--yellow);
}

.signup__consent input:checked + .signup__box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.signup__consent input:focus-visible + .signup__box {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

.signup__status.is-error {
  color: var(--red);
}

.signup button:disabled {
  opacity: 0.6;
  cursor: wait;
}

@media (min-width: 900px) {
  .signup {
    flex-direction: row;
    flex-wrap: wrap;
    max-width: none; /* field + button span the hero column, flush with the divider */
  }

  .signup__consent {
    flex: 0 0 100%;
  }

  .signup input[type="email"] {
    flex: 1;
    min-width: 0;
  }

  .signup button {
    white-space: nowrap;
    min-width: 153px;
  }
}

/* ---- Footer ---------------------------------------------------------------- */

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

/* Privacy Policy is always on the left, Credit on the right, each on the page
   gutter. */
.site-footer__link--privacy {
  order: -1;
}

.site-footer__link {
  font-size: 10px;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-transform: uppercase;
}

@media (min-width: 900px) {
  .site-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--col-gap);
  }

  .site-footer__link {
    justify-self: start;
  }

  .site-footer__link:not(.site-footer__link--privacy) {
    justify-self: end;
  }
}

/* ---- Privacy page ------------------------------------------------------------ */

.privacy-copy {
  max-width: 582px;
  font-family: var(--font-body);
  color: #fff;
}

.privacy-copy h1 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(20px, calc(20px + (100vw - 375px) * 0.0075), 28px);
  text-transform: uppercase;
  margin: 0 0 0.6em;
}

.privacy-copy__meta {
  opacity: 0.7;
}

.privacy-copy h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  text-transform: uppercase;
  margin: 2.4em 0 0.8em;
}

.privacy-copy p,
.privacy-copy li {
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
}

.privacy-copy p {
  margin: 0 0 1.2em;
}

.privacy-copy ul {
  margin: 0 0 1.2em;
  padding-left: 1.2em;
}

.privacy-copy li {
  margin-bottom: 0.4em;
}

.privacy-copy strong {
  font-weight: 700;
}

.privacy-copy a {
  color: inherit;
  text-underline-offset: 2px;
}

/* Long page: keep the logo at the top instead of vertically centered. */
.content--privacy {
  align-items: start;
}



/* Mobile: the first screen is the intro line, the logo, and the top of the hero
   (title + claim) peeking in at the bottom; the divider, form and footer are
   reached by scrolling.
   - The hero title starts --hero-peek above the viewport bottom (the 4-line
     title/claim block, 4.75 line-heights, plus 45px of air; Figma mobile QA
     frame 539:20218).
   - The logo is vertically centered in the white space between the intro line
     and that title (--hero-from-bottom / .brand's height). That needs the intro
     line's height (--intro-h: 3 lines below ~377px wide, 2 lines above; measured
     with Archivo, so re-check if the body font changes).
   - The logo lockup and the title are stretched to the screen width minus a
     40px right margin. */
@media (max-width: 899.98px) {
  /* Everything that should span the screen is sized from one width: the
     screen minus the left gutter minus a 40px right margin. */
  :root {
    /* Right margin: 40px, but never smaller than the left gutter (on wider
       screens the content column ends at the gutter, and anything wider wraps). */
    --right-margin: max(40px, var(--gutter));

    /* Title: its longest line ("TRACKS IN SECONDS") is --display-em wide, so
       this makes that line about as wide as the logo. If the display font
       changes, update --display-em (measure the line at 100px). Capped at
       50px (Fred's QA): above ~430px wide it stays left-aligned and narrower
       than the logo. */
    --hero-fs: min(
      50px,
      calc((100vw - var(--gutter) - var(--right-margin)) / var(--display-em))
    );
  }

  /* Shared by .brand (logo band) and, on the thank-you page, .content itself.
     --space-top: where the white space above the logo starts (just under the
     intro line if there is one). --m-top: where .content itself starts. */
  .content {
    --intro-h: 55px;
    --intro-gap: var(--panel-gap);
    --space-top: calc(var(--pad-top) + var(--intro-h));
    --m-top: calc(var(--pad-top) + var(--intro-h) + var(--intro-gap));
  }

  /* No intro line on this page: the white space starts at the very top. */
  .panel:not(:has(> .intro)) .content {
    --intro-h: 0px;
    --intro-gap: 0px;
    --space-top: 0px;
  }

  .brand {
    /* Logo lockup (wordmark + "Mastering Desk") stretched to that width. Ratios
       from the Figma lockup (333px): the wordmark's ink is 0.7236 of it, and the
       SVG box is 3.45% wider than its ink (hence 0.7236 / 0.9655 = 0.7494);
       gap 0.0193; the tag's width is 0.2572, which needs a font-size of 0.0441
       of the lockup in Archivo Bold (was 0.0432 in PP Object Sans). */
    --lockup-w: calc(100vw - var(--gutter) - var(--right-margin));
    --logo-w: calc(var(--lockup-w) * 0.7494);
    gap: calc(var(--lockup-w) * 0.0193);

    --logo-h: calc(var(--logo-w) * 0.1382); /* the wordmark SVG's aspect ratio */
    /* Height of what must fit above the fold: the title/claim block (4.75 font
       sizes) + everything from the claim down to the consent checkbox
       (--hero-rest, set on <html> by js/main.js from the real layout, so it
       follows copy changes; 243px is the fallback before the script runs) + 24px
       of air under it. */
    --hero-peek: calc(var(--hero-fs) * 4.75 + var(--hero-rest, 243px) + 24px);
    /* The hero title starts this far above the bottom of the screen: --hero-peek,
       but never so high that the white space above the title is less than the
       logo plus 40px above and below it. */
    --hero-from-bottom: min(
      var(--hero-peek),
      calc(var(--screen-h) - var(--space-top) - var(--logo-h) - 80px)
    );
    /* The logo's box spans exactly that white space (from --space-top down to
       the hero title's top edge), and the logo is centered in it: the negative
       margins cancel the gap above (to the intro line, or to the screen's top
       padding) and the column gap below. */
    margin-top: calc(var(--space-top) - var(--m-top));
    margin-bottom: calc(-1 * var(--col-gap));
    height: calc(var(--screen-h) - var(--hero-from-bottom) - var(--space-top));
  }

  .brand__tag {
    font-size: calc(var(--lockup-w) * 0.0441);
  }

  /* The divider runs to the right edge of the content; the title and claim
     scale with the screen; the form and the copy keep their max width. */
  .hero {
    max-width: none;
  }

  .hero > * {
    max-width: 582px;
  }

  .hero > .hero__title,
  .hero > .hero__claim,
  .hero > .hero__divider {
    max-width: none;
  }
}

@media (min-width: 377px) and (max-width: 899.98px) {
  .content {
    --intro-h: 36px;
  }
}

/* The divider, the support paragraph and the form are all in the first screen
   now (see --hero-peek), so it sits close under the title. */
@media (max-width: 899.98px) {
  .hero__divider {
    margin-top: 28px; /* "petit espacement" between the claim and the divider */
    /* full width: edge to edge (Figma mobile: the line runs from x=0) */
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
  }
}

/* Privacy page on mobile: only the top of the article peeks into the first screen
   (title + dates + first heading), not a whole form. */
@media (max-width: 899.98px) {
  .content--privacy .brand {
    --hero-peek: calc(var(--hero-fs) * 4.75 + 45px);
  }
}

/* Mobile: the background art belongs to the first screen and scrolls away with
   the page (no fixed layer: it made the page feel like it was sticking while
   scrolling); below it, the flat dark panel from the Figma mobile frame. */
@media (max-width: 899.98px) {
  .stage {
    background: #111;
  }

  .bg {
    position: absolute;
    height: var(--screen-h);
  }
}

/* Desktop layout details. */
@media (min-width: 900px) {
  /* The space above and below the content: the intro line (37px) + gap on top,
     the footer (14px) + its padding + gap below. Without an intro line the top
     mirrors the bottom, so the block sits at the vertical middle of the screen. */
  .panel {
    --top-space: calc(var(--pad-top) + 37px + var(--panel-gap));
    --bottom-space: calc(var(--pad-bottom) + 14px + var(--panel-gap));
  }

  .panel:not(:has(> .intro)) {
    --top-space: var(--bottom-space);
    padding-top: var(--bottom-space);
  }

  /* Figma's desktop title/claim use line-height 1 (mobile keeps 1.15). */
  .hero__title,
  .hero__claim {
    line-height: 1;
  }

  /* Privacy page: give the logo the same vertical band the home page centers
     it in (between the intro and the footer), so it sits at the same height. */
  .content--privacy .brand {
    height: calc(var(--screen-h) - var(--top-space) - var(--bottom-space));
  }
}

/* ---- Thank-you page ------------------------------------------------------ */

.thanks {
  max-width: 582px;
}

.thanks__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400; /* one weight, see --font-display */
  text-transform: uppercase;
  line-height: 1;
  font-size: var(--thanks-fs);
}

.thanks__title span {
  display: block;
}

.thanks__title .c-red {
  color: var(--red);
}

.thanks__title .c-yellow {
  color: var(--yellow);
}

.thanks__copy {
  margin: 32px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--thanks-copy-fs);
  line-height: 1.2;
}

.thanks__back {
  display: inline-block;
  margin-top: 40px;
  min-width: 153px;
  padding: 12px 24px;
  border-radius: 3px;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}

.thanks__back:hover {
  filter: brightness(1.05);
}

/* Mobile (Figma frame 539:20331): logo at the top (no intro line, no footer),
   "YOU'RE IN." centered in the free space, copy and a full-width button at the
   bottom of a one-screen page. */
@media (max-width: 899.98px) {
  :root {
    /* "YOU'RE" spans the usable width like the logo (capped on tablets). */
    --thanks-fs: min(150px, calc((100vw - var(--gutter) - var(--right-margin)) / var(--thanks-em)));
    --thanks-copy-fs: 28px;
  }

  .stage--thanks .intro {
    opacity: 0;
    pointer-events: none;
  }

  .stage--thanks .site-footer {
    display: none;
  }

  .stage--thanks .panel {
    padding-bottom: 26px;
  }

  /* Pull the whole content up so the logo sits 50px from the top, where the
     (now invisible) intro line was. */
  .content--thanks {
    margin-top: calc(50px - var(--m-top));
    align-items: stretch;
  }

  .content--thanks .brand {
    height: var(--logo-h);
    margin-top: 0;
    margin-bottom: 0;
  }

  .thanks {
    display: flex;
    flex-direction: column;
    max-width: none;
  }

  .thanks__title {
    margin: auto 0;
    text-align: center;
  }

  .thanks__copy {
    margin-top: 0;
  }

  .thanks__back {
    display: block;
  }
}

/* ---- Page swap (home <-> privacy) ------------------------------------------ */

.swap-col {
  transition:
    opacity calc(var(--swap-ms) * 1ms) var(--swap-ease),
    transform calc(var(--swap-ms) * 1ms) var(--swap-ease);
}

.swap-col.is-up {
  opacity: 0;
  transform: translateY(calc(var(--swap-distance) * -1));
}

.swap-col.is-down {
  opacity: 0;
  transform: translateY(var(--swap-distance));
}

/* Blur out / unblur in, only where CSS filters are supported. */
@supports (filter: blur(1px)) {
  .swap-col {
    transition:
      opacity calc(var(--swap-ms) * 1ms) var(--swap-ease),
      transform calc(var(--swap-ms) * 1ms) var(--swap-ease),
      filter calc(var(--swap-ms) * 1ms) var(--swap-ease);
  }

  .swap-col.is-up,
  .swap-col.is-down {
    filter: blur(var(--swap-blur));
  }
}

/* While a page swap runs (html.is-swapping, set by main.js), things that change
   position between pages glide instead of jumping: the intro line fades, and on
   mobile the logo band and content move (home -> thank-you puts the logo at the
   top). Not always-on: live window resizing shouldn't lag. */
.is-swapping .intro {
  transition: opacity calc(var(--swap-ms) * 1ms) var(--swap-ease);
}

@media (max-width: 899.98px) {
  .is-swapping .content {
    transition: margin-top calc(var(--swap-ms) * 1ms) var(--swap-ease);
  }

  .is-swapping .brand {
    transition:
      height calc(var(--swap-ms) * 1ms) var(--swap-ease),
      margin-top calc(var(--swap-ms) * 1ms) var(--swap-ease),
      margin-bottom calc(var(--swap-ms) * 1ms) var(--swap-ease);
  }
}

[tabindex="-1"]:focus {
  outline: none;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .swap-col,
  .is-swapping .intro,
  .is-swapping .content,
  .is-swapping .brand {
    transition: none;
  }

  .stage--fixed-bg .panel::after {
    animation: none;
  }
}

/* Sticky intro line, logo and footer links: only with a mouse (hover + fine
   pointer) on a wide screen, never on touch devices. */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .intro {
    position: sticky;
    top: var(--pad-top);
    align-self: flex-start;
    z-index: 2;
  }

  /* top = its natural spot on the privacy page (where .content starts) */
  .brand {
    position: sticky;
    top: var(--top-space);
    z-index: 2;
  }

  .site-footer {
    position: sticky;
    bottom: var(--pad-bottom);
    z-index: 2;
    pointer-events: none;
  }

  .site-footer__link {
    pointer-events: auto;
  }

  /* Soft fade so scrolling text doesn't run into the fixed footer links. */
  .stage--fixed-bg .panel::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 140px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
    pointer-events: none;
    animation: fade-in calc(var(--swap-ms) * 1ms) var(--swap-ease) both;
  }
}