/* Luna Post landing page — fonts, paper background, and the three acts
   (moon intro, postcard, birthday) plus the sign-up plans. Plain CSS, no build. */

/* ---- Fonts ---------------------------------------------------------------
   Paths are relative to this file (static/css/ -> ../fonts/). */
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond-Regular.90a58d69f647.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond-Italic.f428fcb135d4.ttf") format("truetype");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "CL Antique No 36";
  src: url("../fonts/F00036.1de9e7a0fa6d.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pinyon Script";
  src: url("../fonts/PinyonScript-Regular.0ebcc0c0afb8.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #2c2620;          /* warm near-black for body copy */
  --ink-soft: #6b6357;     /* muted captions */
  --stamp-red: #9d2b2b;    /* the Luna Post stamp red */
  --serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --display: "CL Antique No 36", Georgia, serif;
  --script: "Pinyon Script", "Snell Roundhand", cursive;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- Page shell ---------------------------------------------------------- */
body.landing {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.5;
  /* White at the centre, EBD091 @ 34% at the edges — the spec'd radial paper. */
  background: radial-gradient(circle at 50% 32%, #ffffff 0%, rgba(235, 208, 145, 0.34) 100%) fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.landing main { display: block; }

/* In-page anchors (the postcard's "Get my signs" -> #birthday) glide instead
   of jumping. Overridden under prefers-reduced-motion below. */
html { scroll-behavior: smooth; }

/* Page transition: the nav and paper stay put while the content area cross-fades
   between landing-styled pages (home <-> sign up), so the Sign Up button eases
   into the next page instead of hard-cutting. The enter fade is pure CSS (so it
   works with JS off and never flashes); the leave fade is added by a small
   script in base.html that holds navigation for one beat. */
/* Opacity-only so `main` never carries a lingering transform — a transform on
   an ancestor would break the moonrise's position:sticky. */
@keyframes page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body.landing main { animation: page-in 0.5s var(--ease) both; }
body.landing.page-leave main {
  animation: none;
  opacity: 0;
  transition: opacity 0.28s var(--ease);
}

/* Top nav from base.html — float it, keep it quiet over the paper. A hair of
   opacity on the background keeps it legible when page content scrolls
   underneath the fixed bar. */
body.landing > header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  gap: 0.4rem;
  align-items: center;
  padding: 1rem 1.6rem;
  font-family: var(--display);
  font-size: 0.78rem;
  background: rgba(253, 250, 244, 0.82);
}
body.landing > header a { color: var(--ink); text-decoration: none; opacity: 0.78; }
body.landing > header a:hover { opacity: 1; }
body.landing > header > a:first-child { margin-right: auto; font-size: 0.9rem; letter-spacing: 0.18em; opacity: 1; }

/* The stamp logo, pinned dead-center of the nav regardless of the side links. */
body.landing > header .nav-logo {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  line-height: 0;
  opacity: 1;
}
body.landing > header .nav-logo img { height: 46px; width: auto; display: block; }

/* Logged-in nav links + the hamburger that reveals them on narrow screens. */
body.landing > header .nav-links { display: flex; align-items: center; gap: 0.4rem; }
body.landing > header .nav-links > a:not(:first-child)::before,
body.landing > header .nav-links > form:not(:first-child)::before {
  content: "· ";
  opacity: 0.6;
}
body.landing > header .nav-logout-form { display: inline; }
body.landing > header .nav-logout-btn {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; opacity: 0.78; cursor: pointer;
  letter-spacing: inherit; text-transform: inherit;
}
body.landing > header .nav-logout-btn:hover { opacity: 1; }
body.landing > header .nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 30px; height: 30px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
body.landing > header .nav-toggle span {
  display: block;
  width: 100%; height: 2px;
  background: var(--ink);
  border-radius: 2px;
}
body.landing .nav-scrim { display: none; }

/* Quiet footer link, echoing the nav's typography. */
body.landing > footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2rem 1.6rem 2.4rem;
  font-family: var(--display);
  font-size: 0.72rem;
}
body.landing > footer a { color: var(--ink-soft); text-decoration: none; opacity: 0.78; }
body.landing > footer a:hover { opacity: 1; }

/* Small section eyebrow, echoing the comp's label captions. */
.eyebrow {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  color: var(--ink-soft);
  margin: 0 0 1.4rem;
}

/* ---- Shared button ------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--display);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  padding: 0.55rem 1.5rem;
  border: 1px solid var(--ink);
  border-radius: 3px;
  background: #4a3b30;
  color: #f6efe0;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.btn:hover { background: transparent; color: var(--ink); }

/* ======================================================================== */
/* ACT 1 — Moon intro (copy left, brightening moon right)                    */
/* ======================================================================== */
.intro-act {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: 12vh clamp(1.5rem, 6vw, 6rem) 8vh;
  box-sizing: border-box;
}
.intro-copy { max-width: 30rem; }
.hero-line {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.14;
  margin: 0;
}
.hero-sub {
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  line-height: 1.5;
  color: var(--ink);
  margin: 1.6rem 0 0;
  max-width: 26rem;
}
.intro-copy .btn { margin-top: 1.9rem; }

/* The interactive postcard sits where the moon used to. It's visible right away
   (the page-in fade covers its entrance); tap/click flips front art <-> fortune. */
.intro-postcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

/* ======================================================================== */
/* Artwork guard                                                            */
/* ======================================================================== */
/* The postcard art is the product, so make it awkward to lift: no
   drag-to-desktop, no selection, no iOS long-press "Save Image" sheet, and no
   pointer target of its own — a right-click lands on the wrapper div, so the
   browser offers the plain page menu instead of "Save image as".
   The postcard still flips: with pointer-events off the img, the click falls
   through to .postcard, which owns the handler. Scrolling the past-editions
   carousel by dragging over a card still works for the same reason.
   This is friction, not protection — each file is still a plain URL that shows
   up in the network tab. See the note in home.html. */
.pc-face img,
.past-art img,
.sign .art img,
.rising-moon,
.cloud {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

/* ======================================================================== */
/* Postcard (lives in the intro; flips front art <-> your fortune)           */
/* ======================================================================== */
/* The flip (rotateY) lives on the INNER .postcard; the scene just sets the 3D
   perspective. Keeping them on separate elements means no rule competes for
   .postcard's transform. */
.postcard-scene {
  perspective: 1800px;
  width: min(560px, 100%);
}
.postcard {
  position: relative;
  width: 100%;
  aspect-ratio: 1875 / 1275;
  transform-style: preserve-3d;
  transition: transform 0.9s var(--ease);
  transform: rotateY(0deg);
  cursor: pointer;
  /* NO filter/opacity here: either one forces the browser to flatten this
     element's 3D context, which breaks preserve-3d and renders the back face
     mirror-reversed. The card's shadow lives on .pc-face instead. */
}
.postcard.flipped { transform: rotateY(180deg); }

.pc-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 5px;
  overflow: hidden;
  background: #f3ead6;
  /* Shadow lives here (not on .postcard) so it doesn't flatten the 3D flip. */
  box-shadow: 0 18px 30px rgba(60, 45, 20, 0.22);
}
.pc-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-front { transform: rotateY(0deg); }
.pc-back  { transform: rotateY(180deg); }

/* Text overlaid on the left half of the printed back. Sizes use cqw (1% of the
   card's width) so they scale with the card; a `container-type` is required for
   cqw to resolve. NOTE: plain `font-size: %` would be % of the parent font-size,
   not the card — that renders the text microscopic. */
.pc-back-text {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  text-align: left;   /* don't inherit the page's centered text */
}
/* Mirrors postcards/templates/postcards/postcard_back.html: one script line
   combining the moon's name + date, then the fortune as plain serif body
   copy below it — the same two blocks Lob prints, not a separate teaser
   blurb, so the mockup matches what actually arrives in the mail. */
.pc-back-text .pc-moon {
  font-family: var(--script);
  font-size: 5cqw;
  line-height: 1;
  color: #243b6b;  /* navy, matching postcard_back.html's .moon */
  position: absolute;
  left: 5.5%;
  top: 27%;
  white-space: nowrap;
}
.pc-back-text .pc-fortune {
  font-family: var(--serif);
  font-size: 2.7cqw;
  line-height: 1.5;
  color: #2a2722;
  position: absolute;
  left: 6%;
  top: 37%;
  width: 60%;
}
/* Placeholder copy, not a real fortune: italic + a touch lighter than the
   moon header (which IS real), so it reads as a stand-in for print body
   copy rather than something a visitor might mistake for their own card. */
.pc-back-text .pc-fortune-placeholder {
  font-style: italic;
  color: var(--ink-soft);
}
.edition-name {
  font-family: var(--script);
  font-size: 1.3rem;
  color: var(--ink);
  margin: 0;
}
.flip-hint {
  font-family: var(--display);
  font-size: 0.76rem;
  color: var(--ink-soft);
  margin: 0;
  opacity: 0.7;
}

/* ======================================================================== */
/* Moonrise — a fixed full moon, present the whole scroll                     */
/* ======================================================================== */
/* The moon is fixed to the bottom of the viewport, sitting behind the page
   content. It starts peeking from the bottom edge behind the hero, then JS
   translates it up to fully risen as you scroll, and fades it out as the
   birthday section arrives. Because it's fixed (not tied to a track), it's
   continuously present — no gap between sections. */
.rising-moon {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: min(76vh, 92vw);
  z-index: 0;                          /* behind .content (z-index:1), above paper */
  pointer-events: none;
  transform: translate(-50%, 72%);     /* JS-driven; starts peeking from the bottom */
  will-change: transform, opacity;
}
/* Lift the page content above the fixed moon so text/postcard read over it. */
body.landing main { position: relative; z-index: 1; }

/* ======================================================================== */
/* Birthday + clouds                                                         */
/* ======================================================================== */
.birthday-act {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14vh 1.5rem;
  text-align: center;
  overflow: hidden;
}
.bday-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  margin: 0;
  color: var(--ink);
}
.bday-sub {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--ink);
  margin: 0.8rem auto 0;
  max-width: 30rem;
}

.bday-picker {
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  margin: 1.6rem 0 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.bday-picker input[type="date"] {
  font-family: var(--serif);
  font-size: 1.05rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(44, 38, 32, 0.35);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
}
.bday-error { color: var(--stamp-red); font-style: italic; min-height: 1.4em; margin: 0.4rem 0 0; position: relative; z-index: 2; }

/* Clouds: a layer of drifting doodle clouds that stays in the background the
   whole time. On reveal they only soften (a smooth opacity fade) — they never
   fly away — so the signs read clearly while the sky keeps drifting behind. */
.cloud-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.cloud {
  position: absolute;
  width: var(--w, 220px);
  opacity: 0.85;
  animation: drift var(--dur, 18s) ease-in-out infinite alternate;
  transition: opacity 1s var(--ease);
}
@keyframes drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(var(--dx, 18px), var(--dy, -10px)); }
}
.birthday-act.revealed .cloud { opacity: 0.5; }

/* The three-sign result. */
.signs {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 5vw, 4rem);
  margin: 2.5rem auto 0;
  max-width: 56rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s var(--ease) 0.35s, transform 1s var(--ease) 0.35s;
}
.birthday-act.revealed .signs { opacity: 1; transform: translateY(0); }
.sign { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.sign .col-head {
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.sign .art {
  height: clamp(72px, 12vw, 116px);
  display: flex; align-items: center; justify-content: center;
}
.sign .art img { max-height: 100%; max-width: 100%; object-fit: contain; }
.sign .art .numeral { font-family: var(--display); font-size: clamp(3rem, 7vw, 4.6rem); line-height: 1; }
/* Reserve space for the name + trait before they're filled in, so the CTA
   below doesn't get pushed down when results appear. */
.sign .name { font-weight: 700; font-size: 1.15rem; min-height: 1.8rem; }
.sign .trait { font-style: italic; color: var(--ink-soft); font-size: 0.95rem; max-width: 14rem; min-height: 3rem; }

.birthday-cta {
  position: relative;
  z-index: 2;
  margin-top: 2.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.birthday-cta .cta-line {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 1;
  margin: 0;
  color: var(--ink);
}
.birthday-cta .cta-sub {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--ink);
  margin: 0;
  max-width: 30rem;
  text-align: center;
}
.birthday-cta a { text-decoration: none; }

/* ======================================================================== */
/* Past editions — horizontal scrolling carousel of previously mailed art    */
/* ======================================================================== */
.past-act {
  position: relative;
  z-index: 2;
  padding: 4vh 0 10vh;
  text-align: center;
}
.past-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1;
  margin: 0 0 2rem;
  color: var(--ink);
}
.past-carousel {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 0.5rem clamp(1.5rem, 6vw, 6rem) 1rem;
  -webkit-overflow-scrolling: touch;
}
.past-card {
  flex: 0 0 auto;
  width: min(260px, 72vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}
.past-art {
  width: 100%;
  aspect-ratio: 1875 / 1275;
  border-radius: 5px;
  overflow: hidden;
  background: #f3ead6;
  box-shadow: 0 12px 22px rgba(60, 45, 20, 0.18);
}
.past-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.past-caption {
  font-family: var(--script);
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0;
}

/* ======================================================================== */
/* Sign-up page — cycle choice, then log-in + postcard details               */
/* ======================================================================== */
.signup-page {
  min-height: 100vh;
  padding: 14vh clamp(1.5rem, 6vw, 5rem) 8vh;
  box-sizing: border-box;
  max-width: 60rem;
  margin: 0 auto;
}
.signup-title {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  text-align: center;
  margin: 0 0 0.4rem;
  font-weight: 400;
}
.signup-intro {
  text-align: center;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0 0 2.6rem;
}
.form-errors { color: var(--stamp-red); text-align: center; margin: 0 0 1.5rem; }

/* Plan cards double as the billing-cycle radio: clicking a card selects it. */
.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 4vw, 2.5rem);
  align-items: start;
  margin: 0 0 3rem;
}
.plan {
  display: block;
  padding: 1.6rem 1.8rem;
  border: 1px solid rgba(44, 38, 32, 0.25);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.plan:hover { border-color: rgba(44, 38, 32, 0.5); }
.plan:has(input:checked) {
  border-color: var(--ink);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 24px rgba(60, 45, 20, 0.12);
}
.plan:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.plan input { position: absolute; opacity: 0; width: 0; height: 0; }
.plan-name {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  margin: 0 0 0.2rem;
}
.plan-price {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.4rem, 5.5vw, 3.4rem);
  line-height: 1;
  margin: 0 0 1.1rem;
  font-style: italic;
}
.plan-price span { font-size: 0.4em; font-style: normal; }
.plan ul { list-style: none; padding: 0; margin: 0; font-size: 1rem; line-height: 1.5; }
.plan ul li { margin-bottom: 0.2rem; }

/* The two detail groups: log-in details, postcard details. */
.form-section {
  border: none;
  border-top: 1px solid rgba(44, 38, 32, 0.18);
  padding: 1.8rem 0 0;
  margin: 0 0 2rem;
}
.form-section legend {
  font-family: var(--display);
  font-size: 1.7rem;
  padding: 0;
  margin: 0 0 0.6rem;
}
.field { margin: 0 0 1.1rem; max-width: 34rem; }
.field label {
  display: block;
  font-family: var(--display);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  margin-bottom: 0.3rem;
}
.field input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--serif);
  font-size: 1rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(44, 38, 32, 0.35);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
}
.field .helptext { display: block; font-size: 0.85rem; color: var(--ink-soft); font-style: italic; margin-top: 0.2rem; }
.field .errorlist { color: var(--stamp-red); font-size: 0.9rem; list-style: none; padding: 0; margin: 0.2rem 0 0; }

/* ---- Checkbox field (e.g. "This is a gift") ------------------------------ */
.profile-checkbox {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.6rem;
}
.profile-checkbox input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--ink);
}
.profile-checkbox label {
  font-family: var(--serif);
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
}

.shipping-notice { text-align: center; font-size: 0.9rem; color: var(--ink-soft); margin: 1rem 0; }

.signup-submit { display: block; margin: 0 auto; font-size: 1.4rem; padding: 0.7rem 2.6rem; }

/* ---- Log-in page — same shell as sign-up, narrowed to a single column ---- */
.login-page { max-width: 26rem; }
.login-banner { display: block; width: 100%; height: auto; margin: 0 0 1.8rem; }
.login-page .form-section { border-top: none; padding-top: 0; }
.login-page .field { max-width: none; }
.login-signup-hint { text-align: center; padding-top: 20px; color: var(--ink-soft); margin: 0; }
.login-signup-hint a { color: var(--ink); }

/* ---- Motion / responsive ------------------------------------------------- */
@media (max-width: 820px) {
  .intro-act {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2.5rem;
  }
  .intro-copy { max-width: 36rem; margin: 0 auto; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .intro-postcard { order: -1; }   /* show the card above the copy when stacked */
  .plans { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 640px) {
  .signs { grid-template-columns: 1fr; gap: 2rem; }
  /* No mobile font bump here (unlike the old short moon-meaning blurb): the
     fortune is a full paragraph, and cqw already scales it with the card, so
     enlarging the fraction on small screens just re-triggers overflow inside
     the fixed-aspect-ratio card. */
  /* No room to center on phones: drop the wordmark (the stamp already reads
     "Luna Post") and float the stamp left, links right. */
  body.landing > header > a:first-child { display: none; }
  body.landing > header .nav-logo { position: static; transform: none; margin-right: auto; }
  body.landing > header .nav-logo img { height: 34px; }

  /* Logged-in nav doesn't fit this narrow — collapse it into a hamburger
     that opens a vertical panel sliding in from the right. */
  body.landing > header .nav-toggle { display: flex; z-index: 60; }
  body.landing > header .nav-links {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(78vw, 20rem);
    box-sizing: border-box;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 5.5rem 2rem 2rem;
    background: rgba(253, 250, 244, 0.97);
    backdrop-filter: blur(10px);
    box-shadow: -8px 0 30px rgba(44, 38, 32, 0.18);
    transform: translateX(100%);
    transition: transform 0.28s var(--ease);
    z-index: 55;
    font-size: 1rem;
  }
  body.landing > header .nav-links > a:not(:first-child)::before,
  body.landing > header .nav-links > form:not(:first-child)::before {
    content: none;
  }
  body.landing.nav-open > header .nav-links { transform: translateX(0); }
  body.landing .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(44, 38, 32, 0.35);
    z-index: 54;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s var(--ease);
  }
  body.landing.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  body.landing.nav-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.landing main { animation: none; }
  body.landing.page-leave main { transition: none; }
  .rising-moon { transform: translate(-50%, 28%); }  /* rest partly risen, no scroll motion */
  .cloud { animation: none; }
}