/* Fixed photo backdrop behind every page. The photo stays put while the page scrolls
   (a fixed pseudo-element, which also works on iPhone where background-attachment:fixed doesn't).
   Text boxes become a slightly darker, semi-transparent white with the same film grain. */
:root{
  --surface:rgba(236,232,224,.61);
  --line:rgba(120,104,82,.38);
  --on-photo:#f1ede4; --on-photo-muted:#d6d0c3; --bronze-light:#e0a06a;
}
html{background:#15130f}
body{background:transparent!important;position:relative;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--grain) 0 0/180px 180px,
             linear-gradient(rgba(12,10,8,.42),rgba(12,10,8,.58)),
             url("bg.jpg") center 35%/cover no-repeat}

/* Text boxes: semi-transparent darker white, grain on top, a little blur so text stays clear over the photo */
.panel,.card,.empty,.grain,fieldset{background-color:var(--surface)!important;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
legend{background:rgba(236,232,224,.96)!important;padding:1px 7px!important;border-radius:3px;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.page>section:not(.panel)>.links .muted,.page>section:not(.panel)>.links>p,.page>section:not(.panel)>p{color:var(--on-photo-muted)!important;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.wrap>header button,.wrap>header .ghost{color:var(--on-photo)!important;border-color:rgba(241,237,228,.7)!important;background:rgba(0,0,0,.3)!important}
.panel,.card,.empty,fieldset,.grain{--muted:#2f2a22}
.panel,.card,.empty,fieldset{box-shadow:0 6px 22px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.35)}

/* Text that sits straight on the photo (page titles, section headings, footer) */
.page>header .eyebrow,.page>section:not(.panel)>.eyebrow,.page>section:not(.panel)>h2.eyebrow{color:var(--bronze-light)}
.page>header h1,.page>section:not(.panel)>h2,.wrap>header h1{color:var(--bronze-light);text-shadow:0 2px 10px rgba(0,0,0,.55)}
.page>header .lede,.page>header p,.wrap>header .scope{color:var(--on-photo-muted);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.page>header a:not(.btn),.page>header .muted{color:var(--on-photo)}
.page>section:not(.panel)>.links .btn.ghost,.page>header .btn.ghost{color:var(--on-photo);border-color:rgba(241,237,228,.7);background:rgba(0,0,0,.25)}
.site-foot{color:var(--on-photo-muted);border-top-color:rgba(241,237,228,.25)}
.site-foot a{color:var(--on-photo)}
.tape-stage{background:rgba(70,74,64,.92)}
@media print{body::before{display:none}html{background:#fff}}