/* =====================================================================
   NervaHous · /static/css/atmosphere.css
   v6.1 INHABITED EDITORIAL — corrections from user + committee feedback.

   Changes from v6:
   - Hero figure removed (backdrop carries the visual; no layered image).
   - All section washes use SOFT GRADIENTS that fade to transparent at
     top + bottom (no hard horizontal cutoffs). The painting bleeds
     through the gaps between text panels.
   - Bracket-corner frame motif returns, this time on the shaded text
     areas — hairline ink corners marking the editorial "page" inside
     the world.
   - Cream wash opacity reduced from 0.86–0.92 to 0.78–0.82 (Saoirse).
   - Pixel constellation cut from 5 to 3 (Saoirse).
   - Hairline rule above each section eyebrow (Marcus).
   - Asterism larger, more letter-spacing (Marcus).
   - Hero-eyebrow + door-cta contrast bumps (Tomás P1).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. THE WORLD — depth parallax derived from the ONE original painting.
      The supplied 4 SVGs were mismatched composites (different crops)
      and stacked into mud, so that build was cancelled. Instead the
      single registered world-backdrop.jpg is split into pixel-
      identical-framing planes: a LOCKED foreground (sky knocked
      transparent — cliff, rock, house, powerlines, the man) on top,
      and foreground-FREE sky planes drifting behind it. Because every
      plane is the same source at the same registration, the locked
      foreground occludes the moving sky's would-be foreground exactly
      — no ghosting, can never misalign.
      Vanilla rAF transforms (atmosphere.js); reuses the existing
      .wb-* class names so no template markup changes. The .wb-drift
      plane from the old build is retired.
   --------------------------------------------------------------------- */
.world-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--canvas, #F5F0E8);
}
.wb-layer {
  position: absolute;
  inset: -200px -2%;              /* bleed > parallax cap (150px) so edges never show; identical framing for all planes */
  transform: translate3d(0, var(--wb-y, 0px), 0);
  will-change: transform;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  pointer-events: none;
}
/* Foreground LOCKED, sky drifts behind it. wb-front = the painting
   with the sky knocked transparent (cliff, rock, house, powerlines,
   the man, the terrain) — stationary (depth 0), on top. wb-back +
   wb-mid are foreground-FREE sky planes (no ghost man) drifting at
   two rates for layered cloud depth behind the locked scene. Same
   registration as always, so the locked foreground occludes the
   moving planes' foreground exactly. */
.wb-back  { --wb-depth: 0.075; background-image: url('/static/images/atmosphere/parallax/wb-sky.webp'); }
.wb-mid   { --wb-depth: 0.110; opacity: 0.55; background-image: url('/static/images/atmosphere/parallax/wb-mid.webp'); }
.wb-front { --wb-depth: 0;     background-image: url('/static/images/atmosphere/parallax/wb-fore.webp'); }
.wb-drift { display: none; }      /* retired with the cancelled SVG build */
.world-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(245, 240, 232, 0.40) 0%,
    rgba(245, 240, 232, 0.20) 48%,
    rgba(245, 240, 232, 0.44) 100%
  );
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .wb-layer { transform: none; }
}

/* ---------------------------------------------------------------------
   2. PAGE STACKING — content above the world. No isolation needed
      (no blend modes in use).
   --------------------------------------------------------------------- */
body { background: var(--canvas, #F5F0E8); }
.page { position: relative; z-index: 2; }
nav.site-nav { position: relative; z-index: 5; }

/* ---------------------------------------------------------------------
   2A. SITE-WIDE CANVAS + NAV SCALE — the marketplace pass widened the
       product shelves into the full landscape, but older pages still
       capped themselves at 920px and kept the pre-scale header. This
       late-loaded stylesheet is the right consolidation point: every
       page that participates in the cloud world gets the same wider
       editorial canvas and the same header proportions.
   --------------------------------------------------------------------- */
:root {
  --nh-page-wide: min(1960px, calc(100vw - 32px));
}

.page {
  width: 100% !important;
  max-width: var(--nh-page-wide) !important;
  padding-left: clamp(20px, 3.6vw, 72px) !important;
  padding-right: clamp(20px, 3.6vw, 72px) !important;
}

.site-nav {
  padding: clamp(22px, 2vw, 36px) 0 !important;
}
.site-nav .wordmark {
  gap: clamp(12px, 0.9vw, 16px) !important;
  min-height: clamp(52px, 3.6vw, 64px) !important;
  font-size: clamp(24px, 1.55vw, 32px) !important;
  letter-spacing: -0.025em !important;
}
.site-nav .wordmark-logo {
  width: clamp(40px, 2.35vw, 50px) !important;
  height: clamp(40px, 2.35vw, 50px) !important;
}
.site-nav .nav-links {
  gap: clamp(18px, 2vw, 38px) !important;
  font-size: clamp(11px, 0.72vw, 14px) !important;
}

@media (max-width: 720px) {
  .page {
    max-width: calc(100vw - 20px) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .site-nav {
    padding: 18px 0 !important;
    gap: 16px;
    flex-wrap: wrap;
    overflow: visible;
  }
  .site-nav .wordmark {
    min-height: 46px !important;
    font-size: 23px !important;
  }
  .site-nav .wordmark-logo {
    width: 40px !important;
    height: 40px !important;
  }
  .site-nav .nav-links {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    padding-top: 8px !important;
    row-gap: 10px !important;
    gap: 14px !important;
    font-size: 10px !important;
  }
  .site-nav .nav-links li {
    flex: 0 0 auto !important;
  }
  .site-nav .nav-links .has-dropdown {
    width: auto !important;
  }
  .site-nav .nav-links .has-dropdown:hover,
  .site-nav .nav-links .has-dropdown:has(.dropdown-trigger[aria-expanded="true"]) {
    flex-basis: 100% !important;
  }
  .site-nav .dropdown-panel {
    display: none !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: min(100%, 260px) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 12px 14px 8px !important;
    background-color: rgba(243, 233, 214, 0.42) !important;
    background-image:
      linear-gradient(176deg,
        rgba(246, 238, 223, 0.74) 0%,
        rgba(240, 229, 206, 0.66) 48%,
        rgba(232, 219, 194, 0.76) 100%),
      url('/static/images/atmosphere/footer-clouds.jpg') !important;
    background-size: auto, cover !important;
    background-position: 0 0, 58% 38% !important;
    border: 1px solid rgba(150, 131, 101, 0.28) !important;
    border-radius: 14px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 251, 242, 0.52),
      0 18px 38px -24px rgba(86, 72, 52, 0.34) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    max-height: none !important;
  }
  .site-nav .has-dropdown:hover .dropdown-panel,
  .site-nav .dropdown-trigger[aria-expanded="true"] + .dropdown-panel {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* ---------------------------------------------------------------------
   3. SKY-PAGES — every section is a translucent cloud card.
      Replaces the old per-section cream washes. This is the footer's
      sky-page recipe, generalized (minus the tape, which stays the
      footer's lone signature): a frosted pane with the painting's
      clouds bleeding through and a feathered deboss edge, sized to the
      wording it holds. The fixed world shows through every card, so
      each one frames a different slice of the same sky as you scroll.
   --------------------------------------------------------------------- */
section.section-block,
section.hero-section,
section.lenses-section {
  position: relative;
  z-index: 1;
}

/* The card surface — each section box + the hero text panel +
   the inner-page hero band (services/about/marketplace/tools/etc.),
   so every page's top matches the landing and its own sections. */
section.section-block,
.hero-text,
header.hero {
  border-radius: 28px;
  background-color: rgba(241, 230, 208, 0.34);
  background-image: linear-gradient(178deg,
    rgba(245, 237, 221, 0.40) 0%,
    rgba(240, 228, 205, 0.32) 46%,
    rgba(231, 217, 191, 0.46) 100%);
  -webkit-backdrop-filter: blur(4px) saturate(1.06);
  backdrop-filter: blur(4px) saturate(1.06);
  border: 1px solid rgba(150, 131, 101, 0.20);
  box-shadow:
    inset 0 1px 0 rgba(255, 251, 242, 0.52),
    inset 0 16px 30px -22px rgba(255, 250, 240, 0.42),
    inset 0 -14px 26px -20px rgba(120, 102, 74, 0.28),
    0 1px 0 rgba(255, 250, 240, 0.26),
    0 24px 52px -32px rgba(86, 72, 52, 0.28);
}
section.section-block {
  padding: clamp(44px, 5.4vw, 80px) clamp(28px, 5vw, 72px) clamp(40px, 4.6vw, 64px);
}
/* Inner-page hero: override the old hard ink-bordered full-bleed band
   (border-top/bottom 2px ink, margin 0 -56px) so it becomes a
   contained cloud sky-page like everything else. Per-page hero copy
   gives it its own height — that's the per-page variance. */
header.hero {
  border: 1px solid rgba(150, 131, 101, 0.20);
  margin: clamp(40px, 4vw, 72px) 0 clamp(80px, 7vw, 116px);
  padding: clamp(56px, 6vw, 96px) clamp(32px, 5.4vw, 80px) clamp(52px, 5.4vw, 84px);
}
@media (max-width: 720px) {
  header.hero {
    margin: 28px 0 64px;
    padding: 56px 26px 56px;
  }
}
/* The painting's clouds at half-strength, so the real world still
   reads through — the clouds are part of the background, not a fill. */
section.section-block::before,
.hero-text::before,
header.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  background: url('/static/images/atmosphere/footer-clouds.jpg') 64% 42% / cover no-repeat;
  opacity: 0.50;
  pointer-events: none;
}
/* Content always rides above the cloud layer, regardless of how each
   section nests its markup. */
section.section-block > *,
.hero-text > *,
header.hero > * {
  position: relative;
  z-index: 1;
}
/* The corner-bracket motifs are retired on every boxed page — the
   card's own feathered rim is the edge now; the two would clash.
   Covers landing frame-corners AND the inner-page hero brackets. */
.frame-corner,
header.hero > .bracket-tl,
header.hero > .bracket-tr,
header.hero > .bracket-bl,
header.hero > .bracket-br { display: none !important; }

@media (max-width: 720px) {
  section.section-block {
    border-radius: 20px;
    padding: 40px 22px 34px;
  }
  .hero-text,
  header.hero { border-radius: 20px; }
}

/* Marketplace-scale body panels. Kept after the original sky-page
   block so older page-local padding values no longer make the non-
   marketplace pages feel miniature next to /marketplace. */
section.section-block,
header.hero {
  border-radius: clamp(24px, 1.7vw, 34px) !important;
}
section.section-block {
  padding:
    clamp(54px, 5.6vw, 108px)
    clamp(30px, 5vw, 100px)
    clamp(48px, 5vw, 92px) !important;
}
header.hero {
  padding:
    clamp(66px, 6vw, 118px)
    clamp(34px, 5.6vw, 108px)
    clamp(60px, 5.6vw, 104px) !important;
}

@media (max-width: 720px) {
  section.section-block {
    padding: 42px 22px 36px !important;
  }
  header.hero {
    padding: 58px 24px 54px !important;
  }
}


/* ---------------------------------------------------------------------
   4. HERO TEXT — the largest sky-page. The first thing you meet is not
      a website, it's weather: a vast cliff sky with a single luminous
      page pressed into it, the name big at the top. Oversized, near
      full-screen, commanding.
   --------------------------------------------------------------------- */
.hero-text {
  position: relative;
  max-width: 1040px;
  margin: 48px auto 110px;
  padding: clamp(56px, 6vw, 92px) clamp(32px, 5.4vw, 80px) clamp(52px, 5vw, 76px);
  min-height: min(62vh, 600px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
}
.hero-text h1 {
  font-family: var(--font-display, 'Bricolage Grotesque', system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(42px, 5.4vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--ink, #0D0D0D);
  max-width: 21ch;
  margin: 0 0 clamp(22px, 2.2vw, 36px);
}
.hero-text .hero-eyebrow {
  font-size: clamp(12px, 1.05vw, 15px);
  letter-spacing: 0.26em;
  margin-bottom: clamp(24px, 2.6vw, 40px);
}
.hero-text .hero-eyebrow::before { width: 40px; }
.hero-text .hero-subhead {
  font-family: var(--font-serif, 'Young Serif', Georgia, serif);
  font-size: clamp(19px, 1.9vw, 27px);
  line-height: 1.42;
  color: var(--ink-secondary, #555047);
  max-width: 46ch;
  margin-bottom: clamp(36px, 3.4vw, 56px);
}
.hero-text .hero-affordances { font-size: clamp(12px, 1vw, 14px); }
@media (max-width: 720px) {
  .hero-text {
    padding: 64px 26px 56px;
    margin: 32px auto 72px;
    min-height: auto;
  }
  .hero-text h1 { font-size: clamp(40px, 12vw, 60px); max-width: 14ch; }
}

/* Frame-corner motif — faint ink hairlines marking the four corners
   of the editorial "page" inside the world. Reusable across sections. */
.frame-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(13, 13, 13, 0.62);
  pointer-events: none;
}
.frame-corner--tl { top: 0;    left: 0;    border-right: 0; border-bottom: 0; }
.frame-corner--tr { top: 0;    right: 0;   border-left:  0; border-bottom: 0; }
.frame-corner--bl { bottom: 0; left: 0;    border-right: 0; border-top:    0; }
.frame-corner--br { bottom: 0; right: 0;   border-left:  0; border-top:    0; }

/* Section-block frame-corner placement — let body section corners sit
   slightly outside the content column for a "page edge" feel. */
section.section-block .frame-corner,
section.lenses-section .frame-corner {
  width: 18px;
  height: 18px;
  border-color: rgba(13, 13, 13, 0.40);
}

/* ---------------------------------------------------------------------
   5. HERO EYEBROW — small mono stamp above the headline. Contrast
      bumped to pass WCAG AA (was rgb(140,135,126) ~3.15:1 → now
      rgb(95,90,80) ~5.2:1).
   --------------------------------------------------------------------- */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #5F5A50;
  margin-bottom: 28px;
}
.hero-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--accent, #C75B12);
}

/* ---------------------------------------------------------------------
   6. SECTION EYEBROW HAIRLINE — Marcus's bind-it-as-a-document move.
      1px hairline above the .section-label of each .section-block
      (the existing block that holds the section's ROMAN-numeral-ish
      mono label). The rule runs full-bleed to the column edge.
   --------------------------------------------------------------------- */
section.section-block > .section-label::before,
section.lenses-section > .section-label::before,
section.section-block > div > .section-label::before,
section.lenses-section > div > .section-label::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(13, 13, 13, 0.18);
  margin-bottom: 22px;
}

/* ---------------------------------------------------------------------
   7. PIXEL-SIGNAL CONSTELLATION — cut to THREE per Saoirse. Slower,
      more irregular, sitting near the section-seam bands.
   --------------------------------------------------------------------- */
.pixel-constellation {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.pixel-constellation > i {
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--accent, #C75B12);
  opacity: 0.42;
  animation: pixel-twinkle 14s ease-in-out infinite;
}
/* Position three, hide the other two */
.pixel-constellation > i:nth-child(1) { top: 12vh;  left: 4vw;   animation-delay: 0s; }
.pixel-constellation > i:nth-child(2) { top: 56vh;  right: 6vw;  animation-delay: 5.2s; }
.pixel-constellation > i:nth-child(3) { bottom: 14vh; left: 32vw; animation-delay: 9.4s; }
.pixel-constellation > i:nth-child(4),
.pixel-constellation > i:nth-child(5) { display: none; }

@keyframes pixel-twinkle {
  0%, 100% { opacity: 0.28; transform: scale(1);    }
  50%      { opacity: 0.80; transform: scale(1.20); }
}
@media (prefers-reduced-motion: reduce) {
  .pixel-constellation > i { animation: none; opacity: 0.48; }
}
@media (max-width: 720px) {
  .pixel-constellation > i:nth-child(3) { display: none; }
}

/* ---------------------------------------------------------------------
   8. MARGINALIA — flush-left, real content. Unchanged from v5.1.
   --------------------------------------------------------------------- */
.has-margin-note { position: relative; }
.margin-note {
  display: block;
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: #6E6A62;
  text-transform: lowercase;
  text-align: left;
}
@media (min-width: 1180px) {
  .margin-note {
    position: absolute;
    top: 8px;
    left: -260px;
    width: 220px;
    margin: 0;
    font-size: 11.5px;
  }
}

/* ---------------------------------------------------------------------
   9. ASTERISM DIVIDER — bigger, more letter-spacing, more breathing
      space (Marcus's note). Cap-height of body type, ~3em across.
   --------------------------------------------------------------------- */
.asterism {
  display: block;
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1;
  color: var(--ink-muted, #6E6A62);
  letter-spacing: 1.2em;
  text-indent: 1.2em;
  margin: 96px auto 96px;
  opacity: 0.55;
  user-select: none;
  border: 0;
  position: relative;
  z-index: 1;
}
.asterism::before { content: '\002A \0020 \002A \0020 \002A'; }

/* ---------------------------------------------------------------------
  10. KILL OLD ATMOSPHERIC DECORS that v5.x left in the DOM.
   --------------------------------------------------------------------- */
.atmosphere-sky,
.atmosphere-cliff,
.scroll-thread { display: none !important; }

/* ---------------------------------------------------------------------
  11. CONTRAST FIX — door-cta passes WCAG AA.
   --------------------------------------------------------------------- */
.door-cta { color: #B14F0E !important; }
.door-cta:hover { color: #8C3D0A !important; }

/* ---------------------------------------------------------------------
  12. SOFTBREAK utility (unchanged)
   --------------------------------------------------------------------- */
.softbreak { hyphens: auto; -webkit-hyphens: auto; }

/* ---------------------------------------------------------------------
  13. CANONICAL FOOTER — the sky-page, pressed into the world.
      Markup lives in templates/_footer.html (included site-wide), so
      this lands on every page at once and cannot drift.

      Concept (designdna cast): the footer is a torn page of sky
      pressed INTO the cliff world (feathered deboss, no hard lift)
      and pinned by two clots of darker cloud (translucent strata
      tape, not office tape). Interior fill + glow are sampled from
      world-backdrop.jpg: a warm cloud gradient with a honey
      sun-glow anchored upper-right, exactly where the painting's
      sun sits. Distinct texture from the page, same world.
   --------------------------------------------------------------------- */

/* Small breath above; flush to the very bottom so the footer wraps
   the bottom of the page rather than floating with a gap below it. */
.footer-zone {
  position: relative;
  z-index: 2;
  padding: 56px 0 0;
}

/* THE SKY-PAGE. The actual painting's clouds — a pure-sky crop of
   world-backdrop.jpg (figure/lantern/poles cut out) painted into the
   card and held legible under a warm cream veil. The crop carries the
   real sun-glow (center-right), so it IS the same sky, not a mimic.
   Edge is a feathered deboss: a hairline cloud-shadow rim, an inner
   light lip up top, the base sinking into shadow, and a very soft
   diffuse warm settle instead of a hard floating drop-shadow — so it
   reads as pressed into the landscape, not stuck on top. The veil
   keeps mono link text above WCAG AA on the lit cloud tones. */
.footer-card {
  position: relative;
  /* Full page-column width (wraps the bottom of the page), but SHORT —
     trimmed vertical padding so it's a low closing band, not a tall
     panel. Squared bottom corners so it seats flush against the very
     bottom edge; top stays rounded as a soft sky-page lip. */
  border-radius: 22px 22px 0 0;
  padding: clamp(28px, 3.2vw, 42px) clamp(28px, 5vw, 60px) clamp(24px, 2.6vw, 32px);
  /* Translucent frosted pane: the fixed world bleeds through, softened
     by a backdrop blur so it stays a sky and text stays legible. The
     card's own fill is only a light cream veil now — no opaque base. */
  background-color: rgba(241, 230, 208, 0.34);
  background-image: linear-gradient(178deg,
    rgba(245, 237, 221, 0.40) 0%,
    rgba(240, 228, 205, 0.32) 44%,
    rgba(231, 217, 191, 0.46) 100%);
  -webkit-backdrop-filter: blur(4px) saturate(1.06);
  backdrop-filter: blur(4px) saturate(1.06);
  border: 1px solid rgba(150, 131, 101, 0.20);
  box-shadow:
    inset 0 1px 0 rgba(255, 251, 242, 0.52),
    inset 0 14px 26px -20px rgba(255, 250, 240, 0.42),
    inset 0 -12px 24px -18px rgba(120, 102, 74, 0.28),
    0 1px 0 rgba(255, 250, 240, 0.26),
    0 20px 46px -30px rgba(86, 72, 52, 0.26);
}
/* The painting's clouds, painted into the pane at half-strength so the
   real world behind still reads through — clouds are part of the
   background, not a solid fill. */
.footer-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url('/static/images/atmosphere/footer-clouds.jpg') 64% 44% / cover no-repeat;
  opacity: 0.52;
  pointer-events: none;
}

/* Tape removed per direction — the footer is now just the clean
   contained sky-page; the feathered deboss rim is its only edge. */

footer {
  position: relative;
  z-index: 2;
  padding: 0 0 18px;
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 36px;
  align-items: start;
  margin-top: 0;
}
/* Legibility halo: a whisper of warm light directly behind footer text
   so it separates from the busy translucent sky without an opaque
   scrim — keeps the card see-through (the user's ask) while holding
   small mono labels above WCAG AA. Invisible to the eye, decisive to
   contrast. */
footer, .footer-bottom { text-shadow: 0 1px 2px rgba(248, 241, 227, 0.62); }
.footer-left .wordmark {
  font-family: var(--font-display, 'Bricolage Grotesque', system-ui, sans-serif);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--ink, #0D0D0D);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.footer-left .wordmark .wordmark-logo { width: 24px; height: 24px; display: block; }
.footer-tagline {
  font-family: var(--font-mono, 'DM Mono', ui-monospace, monospace);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-secondary, #555047);
}
.footer-col h4 {
  font-family: var(--font-mono, 'DM Mono', ui-monospace, monospace);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-secondary, #555047);
  margin-bottom: 14px;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-col ul a {
  font-family: var(--font-mono, 'DM Mono', ui-monospace, monospace);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-secondary, #555047);
  text-decoration: none;
  transition: color 150ms;
}
.footer-col ul a:hover { color: var(--ink, #0D0D0D); }
.footer-bottom {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(150, 131, 101, 0.26);
  padding: 14px 0 0;
  margin-top: 4px;
  font-family: var(--font-mono, 'DM Mono', ui-monospace, monospace);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-secondary, #555047);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-version { color: var(--ink-secondary, #555047); }
@media (max-width: 720px) {
  .footer-zone { padding: 48px 0 0; }
  .footer-card {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 30px 22px 24px;
  }
  footer { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}
/* Cookie-settings reopen trigger: render as a clean mono link, no button chrome. */
.footer-col .cookie-settings-link {
  font-family: var(--font-mono, 'DM Mono', ui-monospace, monospace);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--ink-secondary, #555047);
  text-decoration: none;
  text-align: left;
  transition: color 150ms;
}
.footer-col .cookie-settings-link:hover { color: var(--ink, #0D0D0D); }
/* Social row inside footer-bottom: inline links separated by middots. */
.footer-social { display: inline-flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.footer-social a { color: inherit; text-decoration: none; transition: color 150ms; }
.footer-social a:hover { color: var(--ink, #0D0D0D); }
@media (prefers-reduced-motion: no-preference) {
  .footer-col ul a { transition: color 150ms; }
}
@media print {
  .footer-zone { padding: 24px 0 0; }
  .footer-card {
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: none;
  }
  footer { margin: 0; }
}

/* ---------------------------------------------------------------------
  14. NAV DROPDOWN — the cloud treatment, site-wide.
      The Read·Listen·Learn panel was an opaque near-white box with a
      hard ink border — the same material clash the door cards had.
      Now it's a small frosted sky-page: translucent warm veil, the
      painting's clouds at low strength, soft rim, no hard border.
      Desktop-scoped (min-width 721px) so the mobile inline accordion
      stays transparent as designed. Loaded site-wide via atmosphere.css
      so every page's dropdown matches at once.
   --------------------------------------------------------------------- */
@media (min-width: 721px) {
  .dropdown-panel {
    background-color: rgba(243, 233, 214, 0.30) !important;
    background-image: linear-gradient(176deg,
      rgba(246, 238, 223, 0.72) 0%,
      rgba(240, 229, 206, 0.66) 48%,
      rgba(232, 219, 194, 0.76) 100%) !important;
    -webkit-backdrop-filter: blur(7px) saturate(1.06);
    backdrop-filter: blur(7px) saturate(1.06);
    border: 1px solid rgba(150, 131, 101, 0.28) !important;
    border-radius: 14px;
    box-shadow:
      inset 0 1px 0 rgba(255, 251, 242, 0.52),
      inset 0 -10px 20px -16px rgba(120, 102, 74, 0.22),
      0 18px 38px -24px rgba(86, 72, 52, 0.34);
    overflow: hidden;
  }
  .dropdown-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('/static/images/atmosphere/footer-clouds.jpg') 58% 38% / cover no-repeat;
    opacity: 0.24;
    pointer-events: none;
  }
  .dropdown-panel > * { position: relative; z-index: 1; }
  /* Hover highlight kept, but translucent so it sits in the cloud
     instead of punching an opaque chip through it. */
  .dropdown-panel a:hover,
  .dropdown-panel a.active {
    background: rgba(214, 198, 168, 0.42) !important;
    color: var(--ink, #0D0D0D) !important;
  }
}

/* ---------------------------------------------------------------------
  15. NESTED CLOUD CARDS — bespoke inner components, site-wide.
      Every page kept opaque near-white cards with hard ink borders
      (the same clash the door cards had). These class names are all
      page-specific and unambiguous, so one shared block re-skins them
      to the cloud system at once: a translucent warm veil + soft rim;
      no painted cloud layer needed — the parent section's sky-page
      and the world already read through the translucency. No markup
      changes. !important is deliberate: a global theme override that
      must beat each page's varied inline specificity.
   --------------------------------------------------------------------- */
.card,
.flow-step,
.find-item,
.lens-card,
.proof-card,
.product-card,
.tool-card,
.cta-section,
.closing-note,
.project-drawer,
.episode,
.subscribe-card,
.note-from-jene,
.expect-card,
.signup-wrap,
.issue-card,
.next-card,
.recovery-card,
.form-success-msg,
.affiliate-band,
.tier,
.earn-table,
.callout,
.meta-row,
.steps li,
.closer,
.faq-item,
.nh-cloud-card {
  /* No backdrop-filter here on purpose: these sit INSIDE section
     sky-pages that already blur the world. A nested blur just
     compounds cost + muddiness. The translucent veil + soft rim let
     the parent section's cloud read through — that's the cohesion. */
  background-color: rgba(243, 233, 215, 0.38) !important;
  background-image:
    linear-gradient(176deg,
      rgba(246, 238, 223, 0.68) 0%,
      rgba(240, 229, 206, 0.58) 48%,
      rgba(232, 219, 194, 0.70) 100%),
    url('/static/images/atmosphere/footer-clouds.jpg') !important;
  background-size: auto, cover !important;
  background-position: 0 0, 58% 42% !important;
  border: 1px solid rgba(150, 131, 101, 0.26) !important;
  border-radius: clamp(18px, 1.35vw, 26px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 251, 242, 0.50),
    inset 0 -10px 20px -16px rgba(120, 102, 74, 0.22),
    0 12px 28px -22px rgba(86, 72, 52, 0.24) !important;
}

.affiliate-band,
.tier,
.callout,
.meta-row,
.steps li,
.closer {
  overflow: hidden;
}

.affiliate-band::before,
.affiliate-band::after,
.tier::before,
.tier::after {
  display: none !important;
}

.affiliate-band {
  padding:
    clamp(40px, 4.3vw, 76px)
    clamp(34px, 4.8vw, 92px) !important;
  gap: clamp(28px, 4vw, 72px) !important;
}
.affiliate-band__copy {
  max-width: min(760px, 100%) !important;
}
.affiliate-band__title {
  font-size: clamp(30px, 2.65vw, 56px) !important;
}
.affiliate-band__sub {
  font-size: clamp(17px, 1.15vw, 22px) !important;
}

.tiers {
  gap: clamp(18px, 2vw, 34px) !important;
}
.tier {
  padding: clamp(30px, 3.2vw, 54px) clamp(26px, 3vw, 48px) !important;
  min-height: clamp(310px, 24vw, 420px);
}
.tier h3 {
  font-size: clamp(24px, 1.8vw, 34px) !important;
}
.tier p {
  font-size: clamp(17px, 1.18vw, 23px) !important;
  line-height: 1.55 !important;
}

.earn-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
}
.earn-table th,
.earn-table td {
  background: transparent !important;
}
.earn-table th {
  border-bottom: 1px solid rgba(13, 13, 13, 0.28) !important;
}
.earn-table td {
  border-bottom: 1px solid rgba(150, 131, 101, 0.25) !important;
}
.earn-table tr.is-bundle td {
  background: rgba(199, 91, 18, 0.08) !important;
}

/* Small / dense controls — same family, lighter, no heavy lift. */
.price-pill,
.audio-player {
  background: rgba(243, 233, 214, 0.52) !important;
  border: 1px solid rgba(150, 131, 101, 0.28) !important;
  border-radius: 12px;
  box-shadow: 0 8px 18px -16px rgba(86, 72, 52, 0.22) !important;
}

/* The portrait frame holds an image — just soften its hard edge into
   the system; no veil (it would do nothing behind a photo). */
.about-photo {
  border: 1px solid rgba(150, 131, 101, 0.32) !important;
  border-radius: 16px;
  overflow: hidden;
}

/* The "Complete Bundle" card is the one emphasized dark element.
   Keep it emphasized — but as a deep storm-cloud of the same sky,
   not a flat ink slab. Translucent so the world still reads through;
   light text stays legible on the dark veil. */
.bundle-card {
  background-color: rgba(70, 58, 42, 0.40) !important;
  background-image: linear-gradient(176deg,
    rgba(96, 80, 60, 0.86) 0%,
    rgba(72, 60, 44, 0.92) 100%) !important;
  border: 1px solid rgba(120, 103, 78, 0.50) !important;
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 240, 0.12),
    0 18px 36px -24px rgba(40, 32, 22, 0.50) !important;
}

/* ---------------------------------------------------------------------
  16. CLEANUP SWEEP — the last things still breaking cohesion.
      (a) Stray marginalia captions ("[ the sign-up, simple ]",
          "[ the way of working ]", etc.) were only stripped from the
          landing HTML; kill them site-wide here so no caption floats
          outside a box on any page.
      (b) The services "How it works" grid was a hard ink frame with
          ink gridlines + opaque cells. De-frame it so the steps read
          as their own little sky-pages (the .flow-step cards already
          pick up the §15 cloud veil now).
      (c) Form inputs / textareas were opaque near-white with a hard
          edge — the same clash, where the visitor actually types.
          Translucent veil + soft rim, a touch more present so typed
          text stays crisp.
      (d) The key/value divider hairline warmed to the cloud rim tone.
   --------------------------------------------------------------------- */
.margin-note { display: none !important; }

.flow-steps,
.find-grid {
  border: none !important;
  background: transparent !important;
  gap: 14px !important;
}

.form-group input,
.form-group textarea,
.form-group select {
  background: rgba(245, 236, 219, 0.55) !important;
  border: 1px solid rgba(150, 131, 101, 0.30) !important;
  border-radius: 12px !important;
  transition: border-color 150ms, background 150ms;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: rgba(199, 91, 18, 0.55) !important;
  background: rgba(248, 240, 226, 0.68) !important;
}

.kv { border-top-color: rgba(150, 131, 101, 0.26) !important; }

/* ---------------------------------------------------------------------
  17. NAV CLOUD BAR — edge-to-edge cloud gradient behind the logo +
      links at the very top, site-wide. The bar bleeds full-viewport
      width via a pseudo-element while the logo/links stay on the page
      column. Nav buttons sized up (they were tiny mono labels).
   --------------------------------------------------------------------- */
body { overflow-x: hidden; }  /* contains the full-bleed nav bar */

.site-nav {
  position: relative;
  z-index: 5;
  border-bottom: 0 !important;
}
.site-nav::before {
  content: '';
  position: absolute;
  inset: 0 calc(50% - 50vw);   /* top/bottom flush, spans 100vw centered */
  z-index: -1;
  background-color: rgba(241, 230, 208, 0.42);
  background-image: linear-gradient(178deg,
    rgba(245, 237, 221, 0.54) 0%,
    rgba(240, 228, 205, 0.44) 58%,
    rgba(231, 217, 191, 0.30) 100%);
  -webkit-backdrop-filter: blur(5px) saturate(1.06);
  backdrop-filter: blur(5px) saturate(1.06);
  border-bottom: 1px solid rgba(150, 131, 101, 0.22);
  pointer-events: none;
}
.site-nav > * { position: relative; z-index: 1; }

/* Bigger nav buttons (Home / Services / Marketplace / RL&L). The
   dropdown trigger inherits, so it scales with them. */
.site-nav .nav-links {
  font-size: 13.5px !important;
  gap: 26px;
  letter-spacing: 0.15em !important;
}
@media (max-width: 720px) {
  .site-nav .nav-links { font-size: 12px !important; gap: 16px; }
}

/* ============================================================
   §18  COOKIE CONSENT BANNER  (default-deny)
   Bottom-right card, fixed, dismissible. Persists choice in
   localStorage as `nh.consent`. "Cookie Settings" link in the
   footer Legal column (data-cookie-settings) re-opens this.
   ============================================================ */
.nh-consent {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  max-width: 380px;
  width: calc(100% - 32px);
  font-family: var(--font-body, 'Instrument Sans', system-ui, sans-serif);
  color: #0D0D0D;
  pointer-events: none;
}
.nh-consent[hidden] { display: none !important; }
.nh-consent__card {
  pointer-events: auto;
  background:
    linear-gradient(180deg,
      rgba(248, 243, 233, 0.96) 0%,
      rgba(245, 240, 232, 0.94) 100%);
  border: 1px solid rgba(150, 131, 101, 0.38);
  border-radius: 14px;
  padding: 20px 22px 18px;
  box-shadow:
    0 24px 64px -10px rgba(13, 13, 13, 0.28),
    0 8px 20px -6px rgba(13, 13, 13, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  backdrop-filter: blur(6px) saturate(1.05);
  transform: translateY(8px);
  opacity: 0;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nh-consent[data-shown="true"] .nh-consent__card {
  transform: translateY(0);
  opacity: 1;
}
.nh-consent__title {
  font-family: var(--font-mono, 'DM Mono', ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-secondary, #555047);
  margin: 0 0 8px;
}
.nh-consent__body {
  font-size: 13.5px;
  line-height: 1.5;
  color: #2a2620;
  margin: 0 0 14px;
}
.nh-consent__body em {
  font-style: normal;
  color: #0D0D0D;
  border-bottom: 1px solid rgba(150, 131, 101, 0.5);
}
.nh-consent__actions {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.nh-consent__btn {
  flex: 1;
  font-family: var(--font-mono, 'DM Mono', ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 11px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 160ms, color 160ms, border-color 160ms;
}
.nh-consent__btn--ghost {
  background: transparent;
  border: 1px solid rgba(150, 131, 101, 0.5);
  color: var(--ink-secondary, #555047);
}
.nh-consent__btn--ghost:hover {
  border-color: var(--ink, #0D0D0D);
  color: var(--ink, #0D0D0D);
}
.nh-consent__btn--solid {
  background: var(--accent, #C75B12);
  border: 1px solid var(--accent, #C75B12);
  color: #F5F0E8;
}
.nh-consent__btn--solid:hover {
  background: var(--accent-glow, #E8731A);
  border-color: var(--accent-glow, #E8731A);
}
.nh-consent__link {
  font-family: var(--font-mono, 'DM Mono', ui-monospace, monospace);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-secondary, #555047);
  text-decoration: none;
  display: inline-block;
}
.nh-consent__link:hover { color: var(--ink, #0D0D0D); }

@media (max-width: 640px) {
  .nh-consent { right: 12px; bottom: 12px; left: 12px; width: auto; max-width: none; }
  .nh-consent__card { padding: 18px 18px 14px; }
  .nh-consent__actions { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .nh-consent__card { transition: none; }
}