/* ==========================================================================
   sahra-sky.css
   ==========================================================================
   The first version made main/section/footer transparent and restored a
   readable pane on a LIST of class names. Anything not on that list ended up
   as dark text floating on a moving sky — illegible across 46 pages.

   Inverted: the reading column is opaque BY DEFAULT and the sky shows through
   the hero and the page margins. Legibility can no longer depend on a class
   being remembered.
   ========================================================================== */
#sb-sky{position:fixed;inset:0;z-index:0;pointer-events:none}
/* Was `body>*:not(#sb-sky)`. `:not(#id)` carries id-level specificity, so that
   selector scored (1,0,1) and overrode `.sb-drawer{position:fixed}` — the cart
   drawer and overlay became position:relative and rendered as a plain block at
   the bottom of every page, with a close button that did nothing. Target the
   actual layout blocks at low specificity instead, and never the cart. */
header,.hdr,main,.ftr,footer,section,.loc-hero,nav,.wrap{position:relative;z-index:1}

/* the hero is the window onto the sky */
.loc-hero{background-color:transparent!important}

/* the reading column always has something solid under it */
main{background:rgba(250,246,239,.972);border-radius:18px 18px 0 0;
  box-shadow:0 22px 70px rgba(20,16,42,.16)}
.ftr{background:rgba(250,246,239,.972);border-radius:0 0 18px 18px;
  box-shadow:0 22px 70px rgba(20,16,42,.16)}
/* on phones the column is full-bleed, so square the corners off */
@media(max-width:820px){
  main,.ftr{border-radius:0;box-shadow:none}
}
/* the header sits on the sky and needs its own backing */
.hdr{background:rgba(250,246,239,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

@media(prefers-reduced-motion:reduce){#sb-sky{display:none}}