/* Panoramic landscape and shadow behind the site. */
body { background: #0b110e url('/assets/fantasy-background-hq-20260915.png') center top / cover fixed no-repeat; }
body > main { width: min(1140px, calc(100% - 64px)); margin: 32px auto; background: linear-gradient(180deg, rgba(9,16,12,.78), rgba(9,16,12,.94)); box-shadow: 0 20px 65px 20px rgba(0,0,0,.68), 0 0 130px 45px rgba(0,0,0,.48); border: 1px solid rgba(207,180,119,.13); }
body > main > .vineCanopy { opacity: .18; }
@media (max-width: 760px) {
  body { background-position: 65% top; }
  body > main { width: calc(100% - 20px); margin: 10px auto; box-shadow: 0 10px 35px 8px rgba(0,0,0,.65); }
}

/* The hero reveals the same landscape; no old landscape image. */
body > main { background: linear-gradient(180deg, rgba(6,12,9,.20), rgba(6,12,9,.75)); border-color: transparent; }
body > main > .vineCanopy { display: none; }
body > main > .intro { background: radial-gradient(ellipse at 50% 28%, rgba(20,27,19,.18), rgba(3,10,6,.84)); box-shadow: inset 0 0 0 4px rgba(6,12,8,.65), inset 0 0 0 5px rgba(207,180,119,.16), 0 16px 48px rgba(0,0,0,.7); }

/* Keep the landscape flush with the viewport; contain collapsing margins. */
html { min-height: 100%; background: #090e0b; }
body { display: flow-root; min-height: 100vh; }