/* MBR — texture zones: the footer halftone, reused across the site.
   Loaded AFTER css/style.css. Driven by js/texture-zones.js.
   Soften the see-through zones globally:  :root { --tex-opacity: .8 }  (0 = off) */

.tex-zone{pointer-events:none;overflow:hidden;opacity:var(--tex-opacity,1)}
.tex-zone canvas{display:block;width:100%;height:100%}

/* Parent sections get their own stacking context so see-through textures
   sit BEHIND the text (z-index:-1) but above the section background. */
.tex-host,
section:has(> .tex-zone:not(.tex-band)){position:relative;isolation:isolate}

.tex-corner,.tex-hero,.tex-frame,.tex-side{position:absolute;z-index:-1}

/* Page headers: dots gather top-right and dissolve toward the title */
.tex-corner{
  top:0;right:0;width:min(62%,720px);height:100%;
  -webkit-mask-image:radial-gradient(ellipse 100% 90% at 100% 0%,#000 0%,rgba(0,0,0,.5) 45%,transparent 78%);
          mask-image:radial-gradient(ellipse 100% 90% at 100% 0%,#000 0%,rgba(0,0,0,.5) 45%,transparent 78%);
}
/* Homepage hero: a field behind the right side, clear of the headline */
.tex-hero{
  inset:0;
  -webkit-mask-image:radial-gradient(ellipse 60% 85% at 92% 40%,#000 0%,transparent 75%);
          mask-image:radial-gradient(ellipse 60% 85% at 92% 40%,#000 0%,transparent 75%);
}
/* CTA: dots frame the edges, centre stays clear for the message */
.tex-frame{
  inset:0;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,transparent 35%,#000 100%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,transparent 35%,#000 100%);
}
/* Right-edge strip beside long text (Studio process) */
.tex-side{
  top:0;right:0;bottom:0;width:min(28%,340px);
  -webkit-mask-image:linear-gradient(to left,#000 0%,transparent 100%);
          mask-image:linear-gradient(to left,#000 0%,transparent 100%);
}
/* Divider band: a solid panel in the same look as the footer. Holds no text. */
.tex-band{
  position:relative;width:100%;
  height:clamp(96px,12vw,170px);
  background:var(--ink);
  opacity:1;
  cursor:crosshair;
}

@media (max-width:720px){
  .tex-corner{width:100%;height:70%;opacity:calc(var(--tex-opacity,1) * .55)}
  .tex-hero{opacity:calc(var(--tex-opacity,1) * .6)}
  .tex-frame{opacity:calc(var(--tex-opacity,1) * .6)}
  .tex-side{display:none}
}
@media print{.tex-zone{display:none}}