/* Landing-page overrides.
 *
 * The export is the client's own design and stays that way. This file only
 * reconciles it with the shop: shared tokens, the shared masthead, and the
 * shared footer. Nothing here changes her layout, her photography or her copy.
 */

/* The export styles the bare `nav` element itself -- position:fixed, full
   width, mix-blend-mode:difference. That was fine when the page had exactly
   one nav. The shared masthead and footer each contain their own <nav>, so
   that rule captured them too: it pinned the footer links over the hero and
   inverted the headline colours through the blend mode.
   
   Neutralise it for the shared chrome only. The export's own rule is left
   untouched so nothing else in her design shifts. */
.masthead nav,
.footer nav {
  position: static;
  width: auto;
  padding: 0;
  display: flex;
  mix-blend-mode: normal;
  color: inherit;
  z-index: auto;
  grid-template-columns: none;
}

/* The export declares its own copies of the brand colours. Point them at the
   shared tokens so there is exactly one source of truth for the palette. */
:root {
  --black: var(--forest);
  --green: var(--house);
}

body { font-family: var(--sans); }

/* The masthead is transparent over the hero and solid once you scroll past it.
   The export's original nav used mix-blend-mode:difference to invert against
   the hero photograph -- dramatic, but it made the landing page look like a
   different site from every other page. This keeps the drama at the top and
   converges on the shop's chrome as soon as you move. */
.masthead.landing-mast {
  /* fixed, not sticky: the export's hero uses transforms that would make a
     sticky bar detach. left/right are explicit because a fixed element does
     not inherit the width sticky gave it. */
  position: fixed;
  left: 0; right: 0;
  background: transparent;
  transition: background .35s ease, box-shadow .35s ease;
}
.masthead.landing-mast.solid {
  background: var(--house);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}

/* Over the hero the wordmark and links sit on photography, so they need their
   own contrast rather than relying on the bar behind them. Once the bar goes
   solid the shadow is removed -- against the solid green it reads as a smudge. */
.masthead.landing-mast:not(.solid) .wordmark,
.masthead.landing-mast:not(.solid) .baglink {
  text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
}
.masthead.landing-mast:not(.solid) .mastnav a {
  opacity: .92;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
}

/* The export positions its first section under a 20px-tall fixed nav. The
   shared masthead is taller, so the hero needs the difference back. */
body > main > section:first-of-type,
body > section:first-of-type { scroll-margin-top: var(--bar-h); }

/* The shop's footer replaces the export's own ending, so drop the trailing
   rule the export drew above it. */
.footer { margin-top: 0; }