/* ==========================================================================
   Library globals — injected into every component's Shadow DOM.

   Site *classes* do not cross the Shadow DOM boundary, but site *Variables*
   do. So the contract with the Webflow site is: the site defines the
   variables, every component reads them with a hard-coded fallback so it
   still looks right on a site that has not defined them yet.

   Get the exact variable names from Webflow:
   Designer > Variables panel > three-dot menu > Copy CSS
   ========================================================================== */
:host {
  /* spot ink 1 — from Merlijn's logo */
  --mrln-pink-200: var(--pink-200, #FFC2E7);
  --mrln-pink-400: var(--pink-400, #FF66C4);
  --mrln-pink-800: var(--pink-800, #57082F);
  /* spot ink 2 */
  --mrln-yellow: var(--yellow-300, #FFE600);
  /* substrate */
  --mrln-ink: var(--ink, #150A11);
  --mrln-paper: var(--paper, #FBF5EE);

  /* inherited properties DO cross the boundary, so type comes for free */
  font-family: inherit;
  color: inherit;
  -webkit-font-smoothing: antialiased;
}

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

@media (prefers-reduced-motion: reduce) {
  :host { --mrln-motion: none; }
}

/* ==========================================================================
   There is NO Color prop type in Webflow code components. The prop types are
   Text, RichText, TextNode, Link, Image, Number, Boolean, Variant,
   Visibility, Slot and Id — that's it.

   So rather than have a designer paste hex into a Text prop (which forks the
   brand away from the Variables panel), the palette is a Variant that selects
   a class, and the class resolves the site's Webflow Variables. Colour stays
   single-sourced in Webflow; the designer picks a named pair.

   Adding a palette option = add an option to the Variant + a class here.
   ========================================================================== */
.F2APqGDWxBtNH6MbaQXI {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
  z-index: 0;
  /* defaults, overridden per palette below */
  --mrln-spot-a: var(--mrln-pink-400, #FF66C4);
  --mrln-spot-b: var(--mrln-yellow, #FFE600);
}
.OLWiCzIEyzTGemViSo08 { display: block; width: 100%; height: 100%; }

.CUP5AfDyjGmQ5oJSKLyG  { --mrln-spot-a: var(--mrln-pink-400, #FF66C4); --mrln-spot-b: var(--mrln-yellow, #FFE600); }
.idM8E9MuyyTyKb2YIyyJ  { --mrln-spot-a: var(--mrln-pink-400, #FF66C4); --mrln-spot-b: var(--mrln-ink, #150A11); }
.jY1ewEzUzxUfuOFTccIf  { --mrln-spot-a: var(--mrln-yellow, #FFE600); --mrln-spot-b: var(--mrln-pink-400, #FF66C4); }
.sWbHhN8vOSZmC453MtQ5 { --mrln-spot-a: var(--mrln-pink-200, #FFC2E7); --mrln-spot-b: var(--mrln-paper, #FBF5EE); }

/* riso grain, as an inline SVG so nothing is fetched across the network */
.R5n_dsSqRI82DuiKCKA6 {
  position: absolute;
  inset: 0;
  opacity: 0.34;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27180%27 height=%27180%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.82%27 numOctaves=%273%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix type=%27saturate%27 values=%270%27/%3E%3C/filter%3E%3Crect width=%27180%27 height=%27180%27 filter=%27url%28%23n%29%27 opacity=%27.5%27/%3E%3C/svg%3E");
}