/* One continuous dark background system. No per-section colours, no light sections, no gradient bands.
   A fixed stage of layers whose opacity / position change slowly and continuously with scroll progress
   (transform + opacity only, driven by js/bg.js). Sections are told apart by whitespace, hairlines and raised panels. */
html{background:#110e0b}
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#120f0b;contain:strict}
/* base: three solid dark tones cross-faded by opacity (warm -> brown -> cool -> warm) */
.bg-base{position:absolute;inset:0;display:block;will-change:opacity}
.bg-base.b-brown{background:#19140f;opacity:0}
.bg-base.b-cool{background:#0d1214;opacity:0}
/* soft colour fields: large circles that fade to nothing, so there are no visible edges */
.bg-w{position:absolute;left:50%;top:50%;width:92vmax;height:92vmax;margin:-46vmax 0 0 -46vmax;border-radius:50%;will-change:transform}
.bg-w1{background:radial-gradient(closest-side,rgba(255,171,25,.075),rgba(255,171,25,.03) 55%,rgba(255,171,25,0))}
.bg-w2{background:radial-gradient(closest-side,rgba(84,128,148,.12),rgba(84,128,148,.05) 55%,rgba(84,128,148,0))}
.bg-w3{background:radial-gradient(closest-side,rgba(214,190,160,.045),rgba(214,190,160,.018) 55%,rgba(214,190,160,0))}
.bg-grid{position:absolute;left:0;right:0;top:-28px;bottom:-28px;will-change:transform;
  background-image:radial-gradient(rgba(244,241,234,.07) 1px,transparent 1.3px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(120% 95% at 50% 42%,#000 20%,transparent 85%);mask-image:radial-gradient(120% 95% at 50% 42%,#000 20%,transparent 85%)}
.bg-vig{position:absolute;inset:0;background:radial-gradient(ellipse 120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.32) 100%)}

/* hairline between sections (instead of a different background) */
.sec::before{content:"";position:absolute;top:0;left:max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)));right:max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)));height:1px;background:var(--line)}

/* ghost outlines of real blocks (few, very faint, drifting) */
.ghost{position:absolute;pointer-events:none;color:#f4f1ea;opacity:.04;z-index:0;will-change:transform}
.ghost svg{width:100%;height:auto;overflow:visible;display:block}
.ghost svg path{fill:none!important;stroke:currentColor!important;stroke-width:1.3;vector-effect:non-scaling-stroke}
.ghost svg text{display:none}
.ghost svg [fill-opacity]{fill-opacity:0}
.hero,.claim,.writing,.install{overflow:clip}

@media (max-width:860px){
  .ghost,.bg-grid,.bg-w3{display:none}
}
@media (prefers-reduced-motion:reduce){.bg-base,.bg-w,.bg-grid{will-change:auto}}