/* Background options, switchable via . A is the current paper. */
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* B — aged field-guide paper: warm vellum, fine fibre grain, a faint vignette at the edges of the screen */
html[data-bg=vellum]{--a-paper:#efe8d8;--a-tile:#e6dcc6;--a-rule:#d4c9b3}
html[data-bg=vellum] body{background:radial-gradient(ellipse 80% 70% at 50% 45%,transparent 55%,#c9b8952e 100%) fixed,var(--grain),#efe8d8}
/* C — misty sky: a pale sky wash at the top of the page settling into paper */
html[data-bg=mist]{--a-paper:#f3f3ef;--a-tile:#e7e8e2}
html[data-bg=mist] body{background:linear-gradient(180deg,#dce6eb 0,#e7edef 38%,#f3f3ef 78%) fixed,var(--grain),#f3f3ef}
/* D — conservatory: a very soft sage, like the label cards in a glasshouse */
html[data-bg=sage]{--a-paper:#eceee6;--a-tile:#e1e4d8;--a-rule:#cfd3c5}
html[data-bg=sage] body{background:var(--grain),#eceee6}
/* E — light of a day: the ground drifts with the story (dawn sky → paper → moss → dusk) */
html[data-bg=day]{--a-paper:#f2efe8;--a-tile:#e8e2d6}
html[data-bg=day] body{background:linear-gradient(180deg,#e2eaee 0%,#e9eeee var(--s1,14%),#f3efe6 var(--s2,32%),#efe7d8 var(--s3,52%),#e8ebe0 var(--s4,70%),#efe3cf var(--s5,86%),#f2efe8 100%),var(--grain),#f2efe8}
/* keep a few hard-coded paper colours in step with the chosen ground */
html[data-bg] .envelope-stage{background:transparent}
html[data-bg] .ap-plate.is-light .ap-img b{text-shadow:0 0 18px var(--a-paper),0 0 6px var(--a-paper)}
/* the switcher itself (a preview tool, removed once a ground is chosen) */
.bg-switch{position:fixed;right:16px;bottom:16px;z-index:70;display:flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid #16161633;border-radius:40px;background:#fbfaf6ee;backdrop-filter:blur(6px);font:11px var(--mono);box-shadow:0 10px 26px -14px #0006}
body.arrival-open .bg-switch{display:none}
.bg-switch>span{margin-right:4px;letter-spacing:.05em;text-transform:uppercase}
.bg-switch button{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid #16161640;background:var(--sw);font:500 11px var(--mono);color:#161616;cursor:pointer;padding:0}
.bg-switch button[aria-pressed=true]{outline:2px solid #161616;outline-offset:2px}
.bg-switch output{min-width:74px;margin-left:4px;font:12px var(--sans)}
@media (max-width:620px){.bg-switch output,.bg-switch>span{display:none}}
/* ---------- grain: fine and light, only in the background (never over text or pictures) ---------- */
:root{--grain:url(assets/grain-fine.png)}
html[data-bg] body{background-size:auto}
/* a few coarse speckle accents: soft-edged patches in the corners of the part openers, behind the content */
.atlas-part::before{content:"";position:absolute;z-index:-1;top:-40px;right:-6%;width:min(46vw,620px);height:420px;pointer-events:none;
background:url(assets/grain-speckle.png) 0 0/300px 300px;-webkit-mask:radial-gradient(closest-side,#000 0,#0008 45%,transparent 100%);mask:radial-gradient(closest-side,#000 0,#0008 45%,transparent 100%);opacity:.9}
#part-2::before{right:auto;left:-8%;top:auto;bottom:18%}
.atlas-part{isolation:isolate}