/* Gedeelde basis voor de drie ontwerpen op /design/menno/.
   Lettertypen staan zelf gehost (de site-CSP staat alleen 'self' toe). */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(../fonts/archivo-var.woff2) format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; src: url(../fonts/instrumentsans-var.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/instrumentserif-regular.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/instrumentserif-italic.woff2) format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/dmmono-300.woff2) format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/dmmono-400.woff2) format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/dmmono-500.woff2) format("woff2"); }

:root {
  --f-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --f-wide: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Instrument Serif", "Times New Roman", serif;
  --f-mono: "DM Mono", ui-monospace, Menlo, monospace;

  /* De drie bochten uit de referentie (houmahani.com):
     uit  = snel vertrekken, lang uitlopen (woorden, panelen)
     zacht = rustig, voor vormen
     wereld = in-uit, voor alles wat de hele kamer verandert */
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-soft: cubic-bezier(.22, .61, .36, 1);
  --e-world: cubic-bezier(.65, 0, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { list-style: none; padding: 0; }

:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Filmkorrel: een SVG-ruis als data-URL (img-src data: mag van de CSP). */
.grain {
  position: fixed; inset: -50%; z-index: 50; pointer-events: none;
  width: 200%; height: 200%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: var(--grain, .09);
  mix-blend-mode: overlay;
  animation: grain-shift 1.2s steps(6) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); } 17% { transform: translate(-6%, 4%); } 33% { transform: translate(5%, -7%); }
  50% { transform: translate(-3%, 9%); } 67% { transform: translate(8%, 2%); } 83% { transform: translate(-9%, -4%); } 100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* Terug naar het overzicht: klein, altijd dezelfde plek, in elke versie. */
.design-back {
  position: fixed; z-index: 60; left: 50%; bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  font: 400 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; padding: 7px 10px; opacity: .55;
  transition: opacity .26s ease;
}
.design-back:hover { opacity: 1; }
.is-preview .design-back { display: none; }