/* ═══════════════════════════════════════════════════════════
   SEENN — de warme richting (proef, 17 september 2026)
   Gebouwd door Smeulders Digital.

   Brian stuurde een beeld dat hij prachtig vond: een fles en een glas
   op een brons-bruin gepleisterd vlak, het logo ernaast, verder niets.
   Weinig woorden, veel lucht, en warmte door de bruine tinten. Dit
   blad legt die warmte over de site, bovenop style.css:

     1. Het zwart wordt een warm bruinzwart, het grijs een warm room.
        Goud blijft het goud van het brandbook.
     2. Achter de hele pagina ligt een zachte brons-gloed met wat
        korrel, zoals een gepleisterde muur. Geen foto, alleen css.
     3. De foto's krijgen een tik warmte mee, zodat ze in dezelfde
        wereld zitten als het vlak eronder.

   Het brandbook van Frank zegt zuiver zwart. Dit begon op 17 sep als een
   proef naast de site (voorbeeld-warm.html); dezelfde dag koos Brian
   ervoor, en sindsdien laadt kop.php dit blad altijd. Wil je terug naar
   zwart: haal die ene regel in kop.php weg, meer is het niet.
   ═══════════════════════════════════════════════════════════ */

:root {
  --nacht:      #16110D;   /* warm bruinzwart, in plaats van #000 */
  --nacht-rgb:  22, 17, 13;
  --nacht-op:   #221A14;   /* een blok dat iets naar voren komt */
  --nacht-diep: #0F0B08;   /* de voet */
  --room:       #F1E9DE;   /* warm room in plaats van grijs */
  --room-zacht: rgba(241, 233, 222, .66);
  --room-stil:  rgba(241, 233, 222, .40);
  --lijn:       rgba(241, 233, 222, .14);
}

/* ── De muur achter alles ───────────────────────────────── */
/* Een vaste laag achter de pagina: bruinzwart met twee zachte
   bronsvlekken en fijne korrel. Vast, zodat de gloed overal is en niet
   alleen bovenaan een pagina van zes schermen hoog. */
html { background: var(--nacht); }
body { background: transparent; }
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -10;
  background-color: var(--nacht);
  background-image:
    radial-gradient(70% 55% at 88% 8%,  rgba(150, 98, 52, .34), rgba(150, 98, 52, 0) 70%),
    radial-gradient(60% 50% at 8% 95%,  rgba(122, 78, 40, .26), rgba(122, 78, 40, 0) 70%),
    radial-gradient(40% 35% at 50% 50%, rgba(96, 62, 34, .12),  rgba(96, 62, 34, 0) 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .8  0 0 0 0 .6  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23k)'/></svg>");
  background-size: auto, auto, auto, 400px 400px;
}

/* ── Wat zelf zwart geverfd was ─────────────────────────── */
/* Blokken die hun eigen zwart hadden, gaan mee in het bruin. */
.kop.is-vast { background: rgba(22, 17, 13, .82); }
/* De rubriekenbalk op de kaart was pikzwart (rgba(0,0,0,.85) in style.css)
   en viel uit de bruine wereld; sinds 21 sep 2026 warm bruin, een tik
   lichter dan de kopbalk, met dezelfde vervaging erachter. */
.kaartnav { background: rgba(34, 26, 20, .88); border-block-color: rgba(192, 163, 96, .18); }

/* De duimbalk onderaan een gsm was pikzwart, net als die rubriekenbalk.
   Sinds 24 sep 2026 hetzelfde warme bruin met hetzelfde gouden lijntje,
   zodat hij bij de site hoort in plaats van eronder te plakken. */
.duimbalk { background: rgba(34, 26, 20, .88); border-top-color: rgba(192, 163, 96, .18); }
.duimbalk__knop { border-color: rgba(192, 163, 96, .3); }

/* De twee lijnen in de voet (boven de voet, boven de kleine lettertjes)
   waren grijs terwijl de rest van de lijnen op de site goud is. Sinds
   21 sep 2026 ook goud, zoals de lijn boven het praktische blok. */
.voet, .voet__klein { border-top-color: rgba(192, 163, 96, .4); }
@media (max-width: 55.999rem) {
  .kop:has(.menu.is-open) { background: rgba(22, 17, 13, .96); }
}
.proef:hover { background: #2A2019; }
.sfeer__band li { background: var(--nacht-op); }
.intro { background: var(--nacht); }

/* Het eerste scherm: het waas over de film krijgt bruin in plaats van
   zwart, zodat de film in het vlak eronder overloopt. */
.held::after {
  background: linear-gradient(to top, rgba(22,17,13,.88) 0%, rgba(30,20,12,.42) 30%, rgba(30,20,12,.30) 50%, rgba(30,20,12,.18) 100%);
}

/* ── De foto's, een tik warmer ──────────────────────────── */
/* Niet het logo, niet de tekening: alleen de foto's en de film. Een
   klein beetje sepia en iets minder verzadiging trekt de koele foto's
   (de blauwe avond, het grijze terras) naar dezelfde warme wereld. */
.held__achter img,
.held__achter video,
.teken__foto img,
.drieluik__foto img,
.sfeer__band img {
  filter: sepia(.22) saturate(.92) contrast(1.03);
}

/* De gevelfoto op de contactpagina is koel en fel (blauwe lucht, wit
   meubilair); die krijgt meer sepia dan de rest, anders knalt ze uit de
   bruine wereld. Sinds 21 sep 2026 op vraag van Brian. */
.kaartbeeld img {
  filter: sepia(.45) saturate(.85) contrast(1.04) brightness(.94);
}

/* De scheiding en de lijntjes zijn goud; goud op bruin is warmer dan
   goud op zwart, dus die mogen een tik rustiger. */
.scheiding__lijn:first-child { background: linear-gradient(90deg, transparent, rgba(192,163,96,.45)); }
.scheiding__lijn:last-child  { background: linear-gradient(90deg, rgba(192,163,96,.45), transparent); }

/* Op zwart zie je de schaduw onder de middelste foto van het drieluik
   niet; op bruin wel, als een donkere doos onder de tekst. Zachter dus. */
.drieluik__foto--midden { box-shadow: 0 30px 60px rgba(0, 0, 0, .3); }