/* ─────────────────────────────────────────────────────────────────────────────
   Marcel Pater — shared theme core
   The visual language common to every page: design tokens, the reset, the body
   base, the film-grain overlay and the cursor ink-trail canvas. Linked FIRST by
   both the landing page (index.html) and the portfolio page (portfolio/index.html),
   so each page's own stylesheet — loaded after — wins on any override and supplies
   its own layout + (different) background-image.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --paper: #0d0d0f;
  --ink: #ece7dc;
  --ink-soft: #949ea9;
  --ink-faint: #737887;
  --accent: #62a9d2;
  --tape: rgba(188, 163, 148, 0.537);
  --hand: "Caveat", "Segoe Script", cursive;
  --serif: "Newsreader", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

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

/* background-color (not the `background` shorthand) so each page's own
   body background-image is never reset, regardless of link order */
html, body { background-color: var(--paper); color: var(--ink); }
body {
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100svh;
}

/* film-grain overlay (screen blend) */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.16; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
}

/* cursor ink-trail canvas */
#trail { position: fixed; inset: 0; z-index: 9; pointer-events: none; }