/* ============ SHARED MODAL SHROUD TIER (modalshroud.css) ============
   ONE treatment for every full-page modal pop-up on the site, extracted verbatim
   from the Roots & Recipes details view (About me): the page content behind the
   modal recedes into the warm blur (opacity .3 + blur 18px, transitioned .5s on
   the page ease), the page chrome stands down entirely, the nav rail, the name
   badge / mobile top bar (display, so nothing is left focusable) AND the fixed
   Get in Touch CTA (no modal pop-up carries that CTA; the top-most-right corner
   belongs to the dismiss), and the dismiss control is pinned to the page's
   top-most-right corner on the frame lines.
   Contract: the page root carries .mdl-open while a modal is up; the content
   layer behind the modal carries .mdl-behind; each dismiss control carries
   .mdl-x. Pages own: the modal layer itself, its choreography and show/hide
   transitions, the dismiss's internals (icon, text-CTA brush hover), and, when
   two dismisses stack (About's reading mode over its details view), the layer
   order via --mdl-x-z.
   Outside the tier: the <800 Nav menu overlay (a navigation surface, not a modal
   pop-up; it keeps its CTA by the button-system rule and its own mn-close), and
   the Case study expanded-video overlay (a cinema treatment that already stands
   ALL chrome down via .vopen .navroot, CTA included).
   .navcta is doubled so the hide outranks Nav's >=800 re-show regardless of load
   order. Linked from every consuming page's helmet after buttons.css. */
.mdl-behind{transition:opacity .5s var(--ease,cubic-bezier(.45,.05,.55,.95)),filter .5s var(--ease,cubic-bezier(.45,.05,.55,.95))}
/* Glass values come from the shared glass tier (glass.css): the modal shroud is the
   extraction source of --glass-blur / --glass-recede and consumes them, never literals. */
.mdl-open .mdl-behind{opacity:var(--glass-recede,.3);filter:blur(var(--glass-blur,18px));pointer-events:none}
.mdl-open .rail,.mdl-open .mtopbar{display:none}
.mdl-open .navcta.navcta{display:none}
.mdl-x{position:fixed;top:var(--frame-top,20px);right:var(--frame-x,20px);z-index:var(--mdl-x-z,10)}