/* ============================================================
   Mistero hero atmosphere — approved live-preview system
   ------------------------------------------------------------
   OWNER:
   - only the shared visual shell of header + two-column hero;
   - original page DOM/content/right-hand component remain owners of meaning;
   - calculator form remains owned by Mistero Matrix.

   Scope is deliberately narrow: calc-page plus the shared section--tight /
   lp-hero__grid family. The family may have an art/seal right rail or an
   intentionally empty right rail; arc-hero/art-hero-v6 remain separate.
   ============================================================ */

@layer pages {
  :root {
    --mhero-paper: #f8f1e6;
    --mhero-bg: url(../img/calc-hero-backdrop.png);
    --mhero-bg: image-set(url(../img/calc-hero-backdrop.webp) type("image/webp"), url(../img/calc-hero-backdrop.png) type("image/png"));
    --mhero-home-bg: url(../img/home-hero-backdrop.png);
    --mhero-home-bg: image-set(url(../img/home-hero-backdrop.webp) type("image/webp"), url(../img/home-hero-backdrop.png) type("image/png"));
    --mhero-cloud-left: url(../img/hero-cloud-left.png);
    --mhero-cloud-left: image-set(url(../img/hero-cloud-left.webp) type("image/webp"), url(../img/hero-cloud-left.png) type("image/png"));
    --mhero-cloud-right: url(../img/hero-cloud-right.png);
    --mhero-cloud-right: image-set(url(../img/hero-cloud-right.webp) type("image/webp"), url(../img/hero-cloud-right.png) type("image/png"));
    --mhero-celestial: url(../img/calc-hero-celestial.png);
    --mhero-celestial: image-set(url(../img/calc-hero-celestial.webp) type("image/webp"), url(../img/calc-hero-celestial.png) type("image/png"));
    --mhero-mountains: url(../img/hero-mountains-strip.png);
    --mhero-mountains: image-set(url(../img/hero-mountains-strip.webp) type("image/webp"), url(../img/hero-mountains-strip.png) type("image/png"));
    --mhero-pad-top: 56px;
    --mhero-pad-bottom: 68px;
    --mhero-crumb-gap: 32px;
    --mhero-column-gap: 64px;
    --mhero-right-col: 520px;
    /* 1440px live calculator master: section 743.8px. Short LP heroes keep
       the same scene height so the bottom-anchored mountains/section boundary
       do not jump between routes; taller content may grow naturally. */
    --mhero-min-height: 744px;
  }

  /* One scene really spans the header and hero. This is intentionally owned
     by body instead of duplicating two unrelated backgrounds on header/hero. */
  body.home,
  body:has(section.calc-page),
  body:has(section.section--tight .lp-hero__grid) {
    background-color: var(--mhero-paper);
    background-image:
      var(--mhero-cloud-left),
      var(--mhero-cloud-right),
      var(--mhero-bg);
    background-position: left top, right top, center top;
    background-size:
      min(760px, 52vw) 860px,
      min(760px, 52vw) 860px,
      max(100vw, 1448px) auto;
    background-repeat: no-repeat;
  }

  /* Homepage uses the same watercolor scene but a moon-free backdrop: the
     matrix illustration already owns the circular motif, so a second large
     circle behind it creates the rejected circle-on-circle effect. */
  body.home {
    background-image:
      var(--mhero-cloud-left),
      var(--mhero-cloud-right),
      var(--mhero-home-bg);
  }

  /* Header belongs to that same scene. Keep the real navigation and controls,
     only change their visual treatment. */
  body.home .site-header,
  body:has(section.calc-page) .site-header,
  body:has(section.section--tight .lp-hero__grid) .site-header {
    background: linear-gradient(180deg, rgba(255, 252, 246, .42), rgba(255, 252, 246, .06));
    border-bottom-color: rgba(160, 121, 53, .10);
    box-shadow: none;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  /* The atmospheric top is intentionally translucent only while it sits over
     the hero. Once sticky navigation overlaps document content, return to a
     dense paper surface so links remain readable. */
  body.home .site-header.is-scrolled,
  body:has(section.calc-page) .site-header.is-scrolled,
  body:has(section.section--tight .lp-hero__grid) .site-header.is-scrolled {
    background: color-mix(in srgb, var(--bg-4) 97%, transparent);
    border-bottom-color: rgba(160, 121, 53, .24);
    box-shadow: 0 12px 34px rgba(66, 45, 19, .12);
    backdrop-filter: blur(18px) saturate(128%);
    -webkit-backdrop-filter: blur(18px) saturate(128%);
  }

  body.home .header-tools .nav-cta,
  body:has(section.calc-page) .header-tools .nav-cta,
  body:has(section.section--tight .lp-hero__grid) .header-tools .nav-cta {
    color: #fff;
    background: linear-gradient(135deg, #cba650, #9d6817);
    box-shadow: 0 10px 24px rgba(132, 88, 17, .25);
  }
  body.home .header-tools .nav-cta:hover,
  body:has(section.calc-page) .header-tools .nav-cta:hover,
  body:has(section.section--tight .lp-hero__grid) .header-tools .nav-cta:hover {
    color: #fff;
    background: linear-gradient(135deg, #d4b25f, #87550f);
  }

  body.home .theme-switch,
  body:has(section.calc-page) .theme-switch,
  body:has(section.section--tight .lp-hero__grid) .theme-switch {
    background: rgba(255, 252, 246, .38);
    border-color: rgba(160, 121, 53, .16);
  }

  /* Homepage approval: keep the original H2 hero composition, dimensions,
     copy, SVG, chips and week rail. Only its backdrop joins the approved
     internal-page atmosphere. */
  body.home .h2 {
    background: transparent;
  }
  body.home .h2__paper {
    background: transparent;
  }
  body.home .h2 > .container {
    position: relative;
    z-index: 2;
  }
  /* Homepage already has a large circular matrix illustration. Do not put the
     shared celestial disk behind it: circle-on-circle weakens the composition. */
  body.home .h2::before {
    content: none;
  }
  body.home .h2::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 300px;
    background: var(--mhero-mountains) center bottom / 100% 100% no-repeat;
    opacity: .64;
    pointer-events: none;
  }

  /* The week rail remains in its approved place, but mountains must not compete
     with its fine typography. One continuous translucent paper veil keeps the
     strip part of the scene instead of turning every day into a separate card. */
  body.home .h2__week {
    position: relative;
    z-index: 3;
    background: linear-gradient(180deg, rgba(250, 247, 239, .76), rgba(248, 241, 230, .90));
    border-top-color: rgba(119, 87, 38, .28);
    border-bottom-color: rgba(119, 87, 38, .30);
    box-shadow: 0 -14px 36px rgba(248, 241, 230, .34);
    backdrop-filter: blur(8px) saturate(108%);
    -webkit-backdrop-filter: blur(8px) saturate(108%);
    box-sizing: border-box;
    padding-inline: clamp(16px, 1.7vw, 24px);
  }
  body.home .h2__weekLab,
  body.home .h2__weekDay {
    border-right-color: rgba(119, 87, 38, .22);
  }
  body.home .h2__weekDayDate,
  body.home .h2__weekMore {
    color: color-mix(in srgb, var(--ink) 72%, var(--ink-3));
  }
  body.home .h2__weekDayName {
    color: var(--ink);
  }

  /* Shared hero surface. No hard separator and no artificial fade into the
     next section: the next section keeps its own existing surface. */
  /* Canonical shell. Deliberately NOT wrapped in :where(): this layer must
     outrank legacy .section--tight/page rules instead of silently losing on
     specificity. Calculator is the visual master for all lp-hero routes. */
  section.calc-page,
  section.section--tight:has(> .container > .lp-hero__grid) {
    position: relative;
    isolation: isolate;
    overflow: clip;
    min-height: var(--mhero-min-height);
    display: block;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
    padding-top: var(--mhero-pad-top);
    padding-bottom: var(--mhero-pad-bottom);
  }

  /* Celestial geometry sits behind the right rail as one scene, not as a
     separate background baked into every component. */
  section.calc-page::before,
  section.section--tight:has(> .container > .lp-hero__grid)::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: min(720px, 55vw);
    aspect-ratio: 1;
    right: max(8px, calc((100vw - var(--container)) / 2 - 54px));
    top: 18px;
    background: var(--mhero-celestial) center / contain no-repeat;
    opacity: .78;
    pointer-events: none;
  }

  /* Approved mountains strip: full composition, never cover-cropped. */
  /* Legal/technical documents intentionally keep the approved hero shell but
     have no right-hand illustration. Do not paint the shared celestial disk
     into that deliberately empty rail. */
  section.section--tight.tech-hero:has(> .container > .lp-hero__grid)::before {
    content: none;
  }

  section.calc-page::after,
  section.section--tight:has(> .container > .lp-hero__grid)::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 300px;
    background: var(--mhero-mountains) center bottom / 100% 100% no-repeat;
    opacity: .72;
    pointer-events: none;
  }

  section.calc-page > .container,
  section.section--tight:has(> .container > .lp-hero__grid) > .container {
    position: relative;
    z-index: 2;
  }

  /* Same vertical rhythm as the approved calculator master. */
  section.calc-page > .container > .crumbs,
  section.section--tight:has(> .container > .lp-hero__grid) > .container > .crumbs {
    margin: 0;
  }
  section.calc-page > .container > .crumbs + .calc-page__grid,
  section.section--tight:has(> .container > .lp-hero__grid) > .container > .crumbs + .lp-hero__grid {
    margin-top: var(--mhero-crumb-gap);
  }
  section.section--tight:has(> .container > .lp-hero__grid) > .container:not(:has(> .crumbs)) > .lp-hero__grid {
    margin-top: 0;
  }

  .calc-page__grid,
  section.section--tight:has(> .container > .lp-hero__grid) .lp-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(430px, var(--mhero-right-col));
    column-gap: var(--mhero-column-gap);
    row-gap: 22px;
  }
  .calc-page__grid { align-items: center; }
  section.section--tight:has(> .container > .lp-hero__grid) .lp-hero__grid {
    flex: none;
    align-items: start;
  }

  section.section--tight:has(> .container > .lp-hero__grid) .lp-hero__copy {
    align-self: start;
    min-width: 0;
  }
  section.section--tight:has(> .container > .lp-hero__grid) .lp-hero__copy .s-head {
    flex: 0 0 auto;
    display: grid;
    gap: 22px;
  }

  .calc-page__title,
  section.section--tight:has(> .container > .lp-hero__grid) .lp-hero__copy .s-head__title {
    font-size: clamp(44px, 4.25vw, 68px);
    line-height: 1.01;
  }
  .calc-page__lead,
  section.section--tight:has(> .container > .lp-hero__grid) .lp-hero__copy .s-head__sub {
    font-size: 16px;
    line-height: 1.58;
    max-width: 650px;
  }

  /* Calculator master stays itself: only the shared scene changes. */
  .calc-page__panel {
    position: relative;
    z-index: 2;
    isolation: isolate;
    width: 100%;
    max-width: 520px;
    justify-self: end;
  }
  .calc-page__panel::before { display: none; }

  /* ==========================================================
     Existing right rails — actual live Mistero components, enhanced
     ========================================================== */

  .section--tight:has(.lp-hero__grid > .lp-hero__seal) .lp-hero__seal,
  .section--tight:has(.lp-hero__grid > .lp-hero__art) .lp-hero__art {
    align-self: center;
    justify-self: center;
  }

  /* Preserve all real page tones and add the missing spirit tone. */
  [data-tone="spirit"] .lp-hero__seal {
    background: linear-gradient(160deg, #28203b 0%, #493a61 52%, #80679a 100%);
  }

  /* Seal pages: same content and tone, more deliberate object presence. */
  .section--tight:has(.lp-hero__grid > .lp-hero__seal) .lp-hero__seal {
    max-width: 410px;
    border-radius: 20px;
    border: 1px solid rgba(232, 188, 114, .24);
    outline: 1px solid rgba(158, 111, 39, .12);
    outline-offset: 8px;
    box-shadow:
      0 34px 70px -24px rgba(62, 36, 19, .42),
      0 12px 30px -18px rgba(185, 138, 62, .58),
      inset 0 0 0 1px rgba(255, 255, 255, .035);
    transform: translateY(-4px);
  }
  .section--tight:has(.lp-hero__grid > .lp-hero__seal) .lp-hero__seal .seal-card {
    width: 76%;
    max-width: 330px;
    gap: 14px;
  }
  .section--tight:has(.lp-hero__grid > .lp-hero__seal) .lp-hero__seal .seal-card__top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    color: rgba(239, 205, 146, .92);
  }
  .section--tight:has(.lp-hero__grid > .lp-hero__seal) .lp-hero__seal .seal-card__top::before,
  .section--tight:has(.lp-hero__grid > .lp-hero__seal) .lp-hero__seal .seal-card__top::after {
    content: "";
    height: 1px;
    flex: 1;
    max-width: 58px;
    background: linear-gradient(90deg, transparent, rgba(232, 188, 114, .58));
  }
  .section--tight:has(.lp-hero__grid > .lp-hero__seal) .lp-hero__seal .seal-card__top::after {
    transform: scaleX(-1);
  }
  .section--tight:has(.lp-hero__grid > .lp-hero__seal) .lp-hero__seal .seal-card__emblem {
    width: 230px;
    height: 230px;
  }
  .section--tight:has(.lp-hero__grid > .lp-hero__seal) .lp-hero__seal .seal-card__emblem::before {
    content: "";
    position: absolute;
    inset: 13%;
    border-radius: 50%;
    border: 1px solid rgba(232, 188, 114, .22);
    box-shadow: 0 0 0 12px rgba(232, 188, 114, .025), 0 0 70px rgba(232, 188, 114, .16);
    pointer-events: none;
  }
  .section--tight:has(.lp-hero__grid > .lp-hero__seal) .lp-hero__seal .seal-card__emblem::after {
    content: "✦";
    position: absolute;
    right: -7px;
    top: 23px;
    font: 16px/1 Georgia, serif;
    color: rgba(232, 188, 114, .72);
    text-shadow: 0 0 16px rgba(232, 188, 114, .35);
  }
  .section--tight:has(.lp-hero__grid > .lp-hero__seal) .lp-hero__seal .seal-card__digit {
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .62)) drop-shadow(0 0 22px rgba(232, 188, 114, .10));
  }
  .section--tight:has(.lp-hero__grid > .lp-hero__seal) .lp-hero__seal .seal-card__tag {
    color: rgba(244, 239, 230, .68);
  }

  /* SVG/diagram pages: the exact diagram remains untouched; only its physical
     frame gets the same weight as the calculator card. */
  .section--tight:has(.lp-hero__grid > .lp-hero__art) .lp-hero__art:not(.lp-hero__art--calc) {
    max-width: 500px;
  }
  .section--tight:has(.lp-hero__grid > .lp-hero__art) .lp-hero__art:not(.lp-hero__art--calc) .lp-hero-art__frame {
    max-width: 430px;
    padding: clamp(24px, 3vw, 34px);
    background: color-mix(in srgb, var(--bg-1) 84%, rgba(255, 255, 255, .44));
    border-color: rgba(185, 138, 62, .33);
    border-radius: 18px;
    box-shadow:
      0 34px 70px -32px rgba(64, 41, 18, .34),
      0 12px 36px -22px rgba(185, 138, 62, .42),
      inset 0 1px rgba(255, 255, 255, .55);
    transform: translateY(-3px);
  }
  .section--tight:has(.lp-hero__grid > .lp-hero__art) .lp-hero__art:not(.lp-hero__art--calc) .lp-hero-art__frame::before {
    inset: 12px;
    border-color: rgba(185, 138, 62, .22);
  }
  .section--tight:has(.lp-hero__grid > .lp-hero__art) .lp-hero__art:not(.lp-hero__art--calc) .lp-hero-art__frame::after {
    width: 220px;
    height: 220px;
    top: -72px;
    right: -72px;
    background: radial-gradient(circle, rgba(185, 138, 62, .16), transparent 70%);
  }
  .section--tight:has(.lp-hero__grid > .lp-hero__art) .lp-hero-art__caption {
    border-top-color: rgba(185, 138, 62, .20);
  }

  /* Night theme keeps structure and real right rails, but drops pale raster
     scene so the theme does not flash a paper illustration. */
  :root[data-theme="night"] body.home,
  :root[data-theme="night"] body:has(section.calc-page),
  :root[data-theme="night"] body:has(section.section--tight .lp-hero__grid) {
    background-color: var(--bg);
    background-image:
      radial-gradient(ellipse 52% 60% at 82% 24%, rgba(210, 166, 90, .12), transparent 68%),
      linear-gradient(180deg, var(--bg-1), var(--bg));
    background-size: 100% 900px, 100% 900px;
  }
  :root[data-theme="night"] body.home .h2::after,
  :root[data-theme="night"] section.calc-page::after,
  :root[data-theme="night"] section.section--tight:has(> .container > .lp-hero__grid)::after {
    opacity: .08;
  }
  :root[data-theme="night"] body.home .h2::before,
  :root[data-theme="night"] section.calc-page::before,
  :root[data-theme="night"] section.section--tight:has(> .container > .lp-hero__grid)::before {
    opacity: .18;
  }

  @media (max-width: 980px) {
    body.home .h2::before {
      left: 0;
      right: 0;
      width: auto;
      height: 620px;
      aspect-ratio: auto;
      top: 260px;
      background-position: calc(100% + 210px) center;
      background-size: 620px 620px;
      opacity: .34;
    }
    body.home .h2::after {
      height: 230px;
      opacity: .56;
    }

    body.home,
    body:has(section.calc-page),
    body:has(section.section--tight .lp-hero__grid) {
      background-size: 72vw 1000px, 72vw 1000px, auto 1080px;
    }

    section.calc-page,
    section.section--tight:has(> .container > .lp-hero__grid) {
      min-height: 0;
      padding-bottom: 72px;
    }
    section.calc-page::before,
    section.section--tight:has(> .container > .lp-hero__grid)::before {
      width: 620px;
      right: -210px;
      top: 300px;
      opacity: .38;
    }
    section.calc-page::after,
    section.section--tight:has(> .container > .lp-hero__grid)::after {
      height: 230px;
      opacity: .68;
    }

    .calc-page__grid,
    section.section--tight:has(> .container > .lp-hero__grid) .lp-hero__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 40px;
    }
    /* Calculator master starts with its copy on stacked layouts. LP pages must
       not jump the illustration above the eyebrow: the legacy order:-1 rules
       in 08-lp.css are intentionally neutralized here. */
    section.section--tight:has(> .container > .lp-hero__grid) .lp-hero__copy { order: 0; }
    section.section--tight:has(> .container > .lp-hero__grid) .lp-hero__art,
    section.section--tight:has(> .container > .lp-hero__grid) .lp-hero__seal { order: 1; }
    .calc-page__panel { justify-self: center; }

    .section--tight:has(.lp-hero__grid > .lp-hero__seal) .lp-hero__seal {
      max-width: 340px;
      outline-offset: 5px;
      transform: none;
    }
    .section--tight:has(.lp-hero__grid > .lp-hero__seal) .lp-hero__seal .seal-card__emblem {
      width: 190px;
      height: 190px;
    }
    .section--tight:has(.lp-hero__grid > .lp-hero__art) .lp-hero__art:not(.lp-hero__art--calc) .lp-hero-art__frame {
      max-width: 360px;
      transform: none;
    }
  }

  @media (max-width: 640px) {
    body.home .h2::before {
      height: 520px;
      top: 410px;
      background-position: calc(100% + 250px) center;
      background-size: 520px 520px;
      opacity: .22;
    }
    body.home .h2::after {
      height: 175px;
      opacity: .42;
    }

    body.home,
    body:has(section.calc-page),
    body:has(section.section--tight .lp-hero__grid) {
      background-size: 100vw 920px, 100vw 920px, auto 980px;
    }
    section.calc-page,
    section.section--tight:has(> .container > .lp-hero__grid) {
      padding-top: 32px;
      padding-bottom: 64px;
    }
    section.calc-page::before,
    section.section--tight:has(> .container > .lp-hero__grid)::before {
      width: 520px;
      right: -250px;
      top: 330px;
      opacity: .28;
    }
    section.calc-page::after,
    section.section--tight:has(> .container > .lp-hero__grid)::after {
      height: 175px;
      opacity: .52;
    }
    .calc-page__title,
    section.section--tight:has(> .container > .lp-hero__grid) .lp-hero__copy .s-head__title {
      font-size: 42px;
    }
    .calc-page__lead,
    section.section--tight:has(> .container > .lp-hero__grid) .lp-hero__copy .s-head__sub {
      font-size: 14px;
    }
  }
}


@layer pages {
  /* 1.10.99 hard lock: homepage never restores the celestial disk at responsive breakpoints. */
  body.home .h2::before { content: none; display: none; }
  @media (max-width: 900px) {
    body.home .h2__week {
      background: rgba(248, 241, 230, .92);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      padding-inline: 14px;
    }
  }
}