/* ===========================================================================
   Base: reset, document defaults, page container, and the grain overlay.
   =========================================================================== */

/* --- Reset --------------------------------------------------------------- */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--mz-ink);
  color: var(--mz-text);
  font-family: var(--mz-font-sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

/* The build wraps images that have AVIF/WebP siblings in a <picture>. This
   keeps that wrapper out of layout entirely, so the <img> stays the flex or
   grid item it was and every existing selector still reaches it.

   `display: contents` promotes the picture's children into the parent's
   layout, and that includes the <source> elements. Nothing in the UA
   stylesheet hides them -- they are normally invisible only because <picture>
   itself renders them away -- so as flex items they each claimed a gap and
   pushed the mobile hero 80px taller. They have to be hidden explicitly. */
picture {
  display: contents;
}

picture > source {
  display: none;
}

/* The `hidden` attribute has to beat a class that sets `display`. Its own rule
   lives in the user-agent origin, so ANY author `display` outranks it. Every
   card and row this site toggles with `el.hidden` carries a class that sets
   `display`, so the attribute was being set and rendering nothing. (The
   wrapper sections and status paragraphs set none, which is why those halves
   of the same code always worked and the breakage looked partial.)

   That is what broke blog search (MEZ-3746): the 24 server-rendered items were
   marked hidden, stayed on screen, and the matches were appended below them,
   so filtering looked dead. `/help` search had the same bug.

   No stylesheet on any page resets this. `webflow.css` carries the usual
   `[hidden]{display:none}`, but it is linked only from `partials/head.html`,
   which no page includes any more -- so the reset every page used to inherit
   quietly stopped being loaded, and nothing replaced it. */
[hidden] {
  display: none !important;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* --- Page container ------------------------------------------------------
   Every section sits inside .mz-page, which caps the design at 1440px and
   centres it. Above that width the page is letterboxed against the dark
   background rather than stretching.
   ------------------------------------------------------------------------- */

.mz-page {
  max-width: var(--mz-page-max);
  margin: 0 auto;
}

/* --- Film grain -----------------------------------------------------------
   A single overlay, laid over every photograph on the site. It is the design
   system's `Image noise` effect: MONOTONE black at alpha 0.25 and density 0.7,
   so 0.25 x 0.7 = 0.175 of average coverage, in 1px grain.

   Figma's NOISE is a proprietary renderer with no CSS equivalent, so this is a
   calibrated approximation. What is matched is what reads: the colour, the
   grain size and the average coverage. Only the exact distribution differs.

   How: feTurbulence emits RGBA noise; the colour matrix throws its colour away,
   substitutes black, and drives alpha from the noise's red channel. That
   channel averages 0.5, the matrix scales it by 0.7 for a mean alpha of 0.35,
   and 0.5 opacity brings the mean coverage to the 0.175 above. `stitchTiles`
   makes the 128px tile repeat seamlessly.

   Do not drop the colour matrix: raw feTurbulence renders as full-colour RGB
   speckle, and this effect is monotone.
   ------------------------------------------------------------------------- */

/* Grain overlay for photographs. Absolutely positioned, so its container needs
   `position: relative`.

   It is a sibling of the image rather than a pseudo-element because several
   layouts stack it between the photo and a scrim, and DOM order is what
   decides that stacking — check each page's markup before reordering. */
.mz-img-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0 0 0 0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}