/* ==========================================================================
   base.css — reset, papierbasis, kleuren, algemene layout
   We Can Marry — Isabelle & Marijn
   --------------------------------------------------------------------------
   HUISREGEL: geen witte kaarten met box-shadow, geen gradient-knoppen, geen
   afgeronde rechthoeken, geen 1px-lijnen als scheiding. Vlakken worden gemaakt
   met waterverf-washes (SVG met onregelmatige rand), scheidingen met
   handgetekende krullen en takjes.
   ========================================================================== */

:root {
  /* Kleuren — uitsluitend uit de stijlreferentie */
  --olive:      #8B804C;   /* diep gebladerte, titels, inkt-accenten */
  --sand:       #CEBE74;   /* middentoon wash, droog gras */
  --peach:      #E7B58F;   /* warme aardetint, zachte vullingen */
  --coral:      #F58768;   /* het rood van de circustent — spaarzaam! */
  --paper:      #FAF6EC;   /* cremekleurig papier */
  --paper-deep: #F2EBDA;   /* iets donkerder papier voor washes */
  --ink:        #4A4235;   /* warm donkerbruin voor tekst — nooit zwart */

  --ink-soft:   rgba(74, 66, 53, 0.72);
  --ink-faint:  rgba(74, 66, 53, 0.42);

  /* Maten */
  --measure: 62ch;         /* leesbreedte broodtekst */
  --page-max: 1240px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(1.02rem, 0.42vw + 0.92rem, 1.16rem);
  line-height: 1.72;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }

/* Lenis houdt de normale scroll, maar met inertie */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }

/* De SVG-bibliotheek zelf mag niet meedoen in de layout */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* VEILIGHEIDSNET — een <svg> zonder eigen breedte rekt zichzelf uit tot de
   volle breedte van zijn container. Eén vergeten regel CSS maakte zo een takje
   van 2000 pixels breed. Elke tekening zit in een element met een eigen maat;
   deze regel vangt op wat we ooit zouden vergeten. */
svg:not(.svg-sprite):not([width]) { max-width: 100%; max-height: 60vh; }

/* UITZONDERINGEN op dat vangnet: deze tekeningen moeten juist wél hun hele
   container vullen (het papieren paneel, het ticketkader, het kronkelpad, de
   waterverf-vlekken). Zonder deze regel wordt het cremekleurige paneel op de
   openingspagina afgekapt en valt de tekst eronder erbuiten.

   Let op de schrijfwijze: deze selectors hebben bewust exact hetzelfde gewicht
   als het vangnet hierboven (type + class + :not). Schrijf je hier enkel
   ".panel-wash", dan is dat lichter dan het vangnet en wint het net alsnog. */
svg.panel-wash:not([width]),
svg.ticket-frame:not([width]),
svg.timeline-path:not([width]),
svg.home-hero-wash:not([width]),
svg.map-frame-wash:not([width]) {
  max-width: none;
  max-height: none;
}

/* ============ Papiervezel over de hele pagina ============
   Dit is wat de site van "digitaal en plat" naar "papier" trekt. Heel subtiel. */
.paper-grain {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

/* Warme vlekkerigheid in de papierachtergrond zelf */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 40% at 12% 8%, rgba(206, 190, 116, 0.16), transparent 70%),
    radial-gradient(ellipse 45% 35% at 88% 22%, rgba(231, 181, 143, 0.14), transparent 70%),
    radial-gradient(ellipse 60% 45% at 70% 92%, rgba(139, 128, 76, 0.12), transparent 70%),
    radial-gradient(ellipse 40% 30% at 5% 70%, rgba(231, 181, 143, 0.10), transparent 70%);
}

/* ============ Algemene paginabreedte ============ */
.app { position: relative; z-index: 1; }

.sheet {
  position: relative;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 6.5rem) var(--gutter);
}

/* Asymmetrische varianten — elke view mag anders uitgelijnd zijn */
.sheet--offset-left  { padding-right: clamp(1.25rem, 16vw, 13rem); }
.sheet--offset-right { padding-left: clamp(1.25rem, 16vw, 13rem); }
.sheet--narrow { max-width: 900px; }

/* ============ Zwevende randversiering ============ */
.drift-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Echte aquarel-tekeningen (PNG), geen currentColor-lijntjes meer — daarom
   geen kleur hier, enkel opacity om ze zacht op de achtergrond te houden. */
.drift { position: absolute; opacity: 0.5; }
.drift img { display: block; width: 100%; height: auto; }
.drift--1 { top: 10%;  left: -2.5%; width: 100px; transform: rotate(-10deg); }
.drift--2 { top: 30%;  right: 6%;   width: 54px;  opacity: 0.55; }
.drift--3 { top: 54%;  left: 1%;    width: 88px;  opacity: 0.48; }
.drift--4 { top: 70%;  right: -1.5%; width: 92px; transform: rotate(6deg); opacity: 0.55; }
.drift--5 { top: 40%;  left: 7%;    width: 46px;  opacity: 0.5; }
.drift--6 { top: 86%;  right: 4%;   width: 78px;  opacity: 0.48; }
.drift--7 { top: 22%;  right: -1%;  width: 68px;  opacity: 0.55; }
.drift--8 { top: 94%;  left: -1%;   width: 96px;  opacity: 0.45; }

@media (max-width: 1100px) {
  .drift--5, .drift--7 { display: none; }
}
@media (max-width: 860px) {
  .drift--2, .drift--6, .drift--8 { display: none; }
  .drift { opacity: 0.14; }
}

/* ============ Toegankelijkheid ============ */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px dashed var(--olive);
  outline-offset: 3px;
}

/* ============ Rustige beweging waar gevraagd ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .drift { display: none; }
}