/* Vic Boomer — PAGE FRAME (30 sep 2026): alles rond de kaart — body, banner, index, raster, voet.
   De kaart zelf staat in vicboomer.card.css, afgebakend met .w-vic, zodat een Vic-kaart overal
   (ook in een Deck van een andere wereld) haar eigen vorm houdt. */

/* Vic Boomer kaart — op de gedeelde almanak-template (register-anatomie):
   .card (uniforme cyaan gradient-rand) → .inner (perkament) → .frame →
   verhoogde onderrand/systeemstrook. Fonts: IBM Plex Mono (behouden, het
   eigen karakter van de Vic-kaart). De rubriek stuurt alléén nog het accent
   (badge + titelstreep); de rand is merk-cyaan, gelijk over alle Vic-kaarten. */
/* ── IBM Plex Mono, lokaal gebundeld (axioma 2: geen CDN-afhankelijkheid) ── */
@font-face {
    font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap;
    src: url('../fonts/PlexMono-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2192, U+2212;
  }
@font-face {
    font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap;
    src: url('../fonts/PlexMono-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BB, U+1E00-1EFF, U+2020, U+20A0-20AB;
  }
@font-face {
    font-family: 'IBM Plex Mono'; font-weight: 600; font-display: swap;
    src: url('../fonts/PlexMono-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2192, U+2212;
  }
@font-face {
    font-family: 'IBM Plex Mono'; font-weight: 600; font-display: swap;
    src: url('../fonts/PlexMono-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BB, U+1E00-1EFF, U+2020, U+20A0-20AB;
  }
:root {
    /* DE KAART IS EEN COMPOSITIE, GEEN THEMA (15 aug 2026): licht perkament en het
       donkere wereldveld zijn ontworpen paren. color-scheme:light zegt browsers met
       een automatische donkere modus dat ze hier niets te herschilderen hebben. */
    color-scheme: light;
    --ink:   #20201e;
    --muted: #6f6a63;
    --gold:  #a8905a;
    /* perkament — identiek aan de register-/Eo Ena-kaart, zodat het interieur
       (incl. de boek-golf) tot de zelfde familie hoort; alléén de rand is cyaan. */
    --paper:      #f9f5ef;
    /* Frissere contentzone, in lijn met de subtielere papierverdeling van KJM. */
    --paper-top:  #fbf7f0;
    --paper-mid:  #fefcf7;
    --paper-blend:#fcf9f4;
    --body:  'IBM Plex Mono', ui-monospace, monospace;
    --serif: 'IBM Plex Mono', ui-monospace, monospace;
    /* rubriek-accent (fallback = merk-cyaan als een kaart geen rubriek heeft) */
    --base: #7DD3D9; --base-rgb: 125, 211, 217;
    --cta: #1d8f9c;   /* cyaan van de prime-knop op de achterkant */
  }
/* HET VEL SPREEKT VIC (22 aug 2026). overlay.njk levert bewust een neutraal
     systeemrecept; op Vic-pagina's krijgen kaartoverlay en uitklapmenu de diepe
     teal van het woordmerk. Cyaan blijft het interactieve accent via --wereld. */
body.vic-card-page, body.vic-gallery {
    --vel-ink: #123c42;
    --vel-ink-rgb: 18,60,66;
    --vel-dash: rgba(18,60,66,.40);
    --vel-secondary: rgba(18,60,66,.68);
  }
* { box-sizing: border-box; }
/* iOS text-autosizing UIT (anders blaast iPhone-WebKit de kleine systeemstrook
     op ná de kaart-schaling) — zelfde regel als register.css/eoena.css. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    margin: 0; min-height: 100vh; padding: 34px 16px; overflow-x: hidden;
    display: grid; place-items: center; color: var(--ink);
    font-family: var(--body); background: #eef1ee;
  }
/* Losse Vic-kaarten krijgen op desktop hetzelfde grote kompaswatermerk als de
     jumbostacks. Het blijft achter de kaart en verdwijnt volledig op mobiel. */
@media screen and (min-width: 960px) {
  body.vic-card-page { position: relative; isolation: isolate; }
  body.vic-card-page::before {
      content: ""; position: fixed; z-index: 0; pointer-events: none;
      width: min(88vw, 1680px); aspect-ratio: 1; left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      background: url('../cards/vic-compass-screen.webp') center/contain no-repeat;
      opacity: .12;
    }
  body.vic-card-page > .world-card-main,
    body.vic-card-page > .world-site-foot { position: relative; z-index: 1; }
}
/* ══ voordeur-gallery (card-vic-gallery.njk) ══════════════════════════════
   Zelfde COMPOSITIE als eoena.com — banner, index-sectie, kaarten, voet — maar
   in de kleur en het lettertype van Vic Boomer. De klassenamen zijn bewust
   dezelfde (.topbanner, .index, .home-foot): dat maakt zichtbaar dat het één
   indeling is die twee werelden dragen, in plaats van twee losse ontwerpen. */
body.vic-gallery {
    display: block; padding: 0; background: #f4f6f4; color: var(--ink);
    --site-corner-accent: #1d8f9c;
    /* De Boekkrul blijft doorzichtig glas, maar spreekt nu zichtbaar Vic-cyaan. */
    --site-corner-bg: rgba(125,211,217,.26);
    --site-corner-filter: blur(5px) saturate(1.10);
    --banner-glow-rgb: 252,250,244;
    --banner-glow-core: .28; --banner-glow-mid: .20; --banner-glow-outer: .08;
  }
/* Het hamburgerteken spreekt dezelfde diepe teal als woordmerk en bannertekst.
     De boeklijn houdt bewust haar eigen, lichtere accent via --site-corner-accent. */
body.vic-gallery #vic-site-corner .site-corner-button,
  body.vic-gallery #vic-site-corner .site-corner-button:hover,
  body.vic-gallery #vic-site-corner .site-corner-button:focus-visible {
    color: #102e32;
  }
/* ── top-banner: panoramische sfeer-strip (6:1) met de titel eroverheen ── */
/* De voordeuren delen dezelfde panoramische circa-6:1-verhouding en dezelfde
     flauwe golf. Het actuele Vic-beeld is 3111x505; `cover` bewaakt de uitsnede. */
.topbanner { position: relative; width: 100%; aspect-ratio: 3072/512; overflow: hidden;
    /* DE STAPEL PAST ALTIJD (18 aug 2026). De banner schaalt 6:1 met het venster,
       maar de titelstapel (teken + woordmerk + drie regels, ~250px) heeft een vaste
       hoogte — plus de golf-reserve onderin. Onder ~1980px werd de banner lager dan
       stapel + golf en stak het teken er bóven uit (gemeten: −11px op 1600, −30px op
       1300 — precies de laptopbreedtes). De min-height houdt de banner op maat;
       boven ~1980px wint de verhouding vanzelf, en ≤1100px zet de mobiele regel
       zijn eigen hoogte. `cover` snijdt het beeld gewoon iets ruimer bij. */
    min-height: 330px;
    --spatial-focus-x: .10; --spatial-focus-y: .5; }
.topbanner-img { position: absolute; inset: 0; background: 10% center/cover no-repeat; }
/* het ruimtelijke canvas (spatial-banner.js) ligt óp de statische banner en
     onder titel (2) en golf (4); zonder canvas verandert er niets */
.spatial-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
/* de boek-golf snijdt de onderrand van de banner weg in de paginakleur */
/* Een FLAUWE golf (Toms correctie, 8 aug): compositie vóór kaartverhouding. */
.book-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%;
    height: clamp(28px, 4vw, 64px); display: block; z-index: 4; pointer-events: none; }
/* De stapel centreert in het deel bóven de golf — alleen bij Vic nodig: deze
     stapel (teken + woordmerk + drie regels) is hoger dan die van Eo Ena en zakte
     anders met de onderste regels in de vouw. */
.topbanner-title { position: absolute; inset: 0 0 clamp(28px, 4vw, 64px) 0; z-index: 2;
    isolation: isolate; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center; padding: 12px; }
/* Op brede schermen draagt de panoramabanner de merkintro. In het rustige
     middenvlak hoort die aan de BOVENKANT verankerd te zijn. Een verschuiving
     vanuit het geometrische centrum werkte op gewone desktops, maar zakte op
     ultrabrede schermen weer mee met de steeds hogere 6:1-banner. */
@media (min-width: 1101px) {
  .topbanner-title { inset:clamp(24px,1.5vw,60px) 0 auto 0;
      justify-content:flex-start; transform:none; }
}
/* De banner staat er ONBEWERKT (Toms keuze): geen waas, leesgloed of
     tekstschaduw over het beeld. Leesbaarheid mag volledig uit het beeld komen. */
.vic-gallery .site-banner-title::before,
  .vic-gallery .site-banner-title::after { display:none; }
/* het VIC BOOMER-woordmerk (het merk zelf), kleurbaar via mask — zoals het
     Eo Ena-woordmerk op de andere voordeur. Geen gezette letters meer. */
/* het VIC-teken boven het woordmerk, in dezelfde kleur als de letters */
.tb-badge { width: min(5vw, 60px); aspect-ratio: 1; display: block; margin: 0 auto 14px;
    background: #102e32;
    -webkit-mask: url('../cards/vic-mark.webp') center/contain no-repeat;
            mask: url('../cards/vic-mark.webp') center/contain no-repeat; }
.tb-mark { width: min(32vw, 400px); aspect-ratio: 2400/296; display: block; margin: 0 auto;
    background: #102e32;
    -webkit-mask: url('../cards/vic-wordmark.webp') center/contain no-repeat;
            mask: url('../cards/vic-wordmark.webp') center/contain no-repeat; }
.visually-hidden { position:absolute !important; width:1px !important; height:1px !important;
    padding:0 !important; margin:-1px !important; overflow:hidden !important;
    clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.tb-curated { margin: 10px 0 0; font: 700 clamp(12.75px, 1.2vw, 15.5px)/1 var(--body);
    letter-spacing: .22em; text-transform: uppercase; color: #08272b; }
/* het ornament: kompas geflankeerd door uitfadende lijntjes */
.tb-rule { display: flex; align-items: center; justify-content: center; gap: 12px; width: 210px; margin: 8px auto; }
.tb-rule::before, .tb-rule::after { content: ""; flex: 1; height: 1px; }
.tb-rule::before { background: linear-gradient(to left, rgba(29,143,156,.75), transparent); }
.tb-rule::after { background: linear-gradient(to right, rgba(29,143,156,.75), transparent); }
.tb-compass { flex: none; width: 18px; height: 18px; background: var(--cta);
    -webkit-mask: url('../cards/vic-compass.webp') center/contain no-repeat;
            mask: url('../cards/vic-compass.webp') center/contain no-repeat; }
.tb-lede { margin: 0; font-family: var(--body); font-size: clamp(11px, 1.15vw, 14px);
    line-height: 1.7; color: #102e32; }
/* TABLET (≤1100px): de 6:1-strip wordt te laag voor de titelstapel — gemeten liep
     die bij 1024px al 26px over de banner heen, waardoor logo en tekst wegvielen.
     Daarom een vaste hoogte in plaats van de vlakke verhouding, en het brandpunt
     naar links zodat de figuur in beeld blijft bij die krappere uitsnede. */
@media (max-width: 1100px) {
  .topbanner { aspect-ratio: auto; height: 30vh; min-height: 250px;
      --spatial-focus-x: .10; }
  @supports (height: 1svh) {
    .topbanner { height: 30svh; }
  }
  .topbanner-img { background-position: 10% center; }
  .tb-badge { width: 46px; margin-bottom: 10px; }
  .tb-mark { width: min(300px, 46vw); }
}
/* mobiel: geen platte strip maar een hoge banner met uitsnede, zodat de
     titelstapel leesbaar blijft — zelfde aanpak als de Eo Ena-voordeur */
@media (max-width: 760px) {
  /* Geen boek-golf op mobiel: de banner is daar een hoge uitsnede in plaats van een
       platte strip, en de vouw leest dan niet als een boekrand maar als een hap uit
       het beeld. De titelstapel mag dus ook weer de volle hoogte gebruiken. */
  .book-wave { display: none; }
  .topbanner-title { inset: 0; }
  .topbanner { aspect-ratio: auto; height: 56vh; min-height: 380px;
      /* Vic blijft als coulisse links in beeld — óók in het WebGL-canvas, dat
         anders op deze ultrabrede strip alleen het lege midden zou tonen. */
      --spatial-focus-x: .04; }
  @supports (height: 1svh) {
    .topbanner { height: 56svh; }
  }
  .topbanner-img { background-position: 4% center; }
  .tb-badge { width: 56px; }
  .tb-mark { width: min(320px, 82vw); }
  .tb-lede { font-size: 14px; }
}
/* ── index-sectie ── */
.index { max-width: 1240px; margin: 0 auto; padding: 52px 24px 8px; text-align: center; }
.index-eyebrow { margin: 0; font: 700 14px var(--body); letter-spacing: .34em;
    text-transform: uppercase; color: var(--cta); }
.index-title { margin: 12px 0 0; font-family: var(--body); font-weight: 700; font-size: 32px;
    letter-spacing: .06em; text-transform: uppercase; color: #123c42; }
/* de drukvel-link neemt het cyaan van de pagina, niet de gouden terugval */
.dv-link { --dv-ink: var(--cta); }
.index-sub { margin: 12px auto 0; max-width: 52ch; font-family: var(--body); font-size: 15px;
    line-height: 1.7; color: #4a5250; }
/* ── de kaarten onder elkaar (Toms indeling voor deze voordeur) ── */
.cards-col { display: flex; flex-direction: column; align-items: center; gap: 44px;
    padding: 44px 16px 72px; }
/* ── DE OPSTELLING: op ware grootte, maximaal `columns` per rij ──────────────
     Toms regel (20 aug 2026), herzien dezelfde dag: de kaarten houden hun WARE
     GROOTTE — 550px, precies zoals op eoena.com — want die maat draagt de impact
     en de typografie is erop afgestemd. Ze zijn dus niet geschaald; het aantal per
     rij volgt uit de ruimte: op 1920px passen er drie, op 1600px twee, en pas
     vanaf ~2350px vier.

     `columns` uit het Deck is daarmee een MAXIMUM, geen dwang: de container is
     precies zo breed als dat aantal kaarten, zodat er nooit meer naast elkaar
     komen — ook niet op een ultrabreed scherm. Zelfde flex-wrap als de Eo Ena-
     voordeur (.cards-row), zodat beide etalages zich gelijk gedragen.
     De eerste zoom-versie verkleinde de kaarten naar 284-384px; dat kostte precies
     de impact waar het om ging. */
.cards-col.cards-grid {
    --kaart: 550px; --gap: 40px; --rand: 28px;
    display: flex; flex-direction: row; flex-wrap: wrap;
    justify-content: center; align-items: flex-start;
    width: 100%;
    max-width: calc(var(--kolommen, 4) * var(--kaart)
                  + (var(--kolommen, 4) - 1) * var(--gap) + 2 * var(--rand));
    margin-inline: auto; gap: var(--gap); padding: 44px var(--rand) 72px;
  }
/* De basiskaart draagt `margin-inline: auto` (voor een LOSSE kaart op haar eigen
     pagina). In een flex-rij eist die auto-marge álle vrije ruimte op, en dan komt
     er precies één kaart per rij — gemeten, en de reden dat de eerste poging op elk
     scherm één kolom gaf. Binnen de voordeur dus geen auto-marge. */
.cards-grid .flip { margin-inline: 0; }
/* Mobiel behoudt dezelfde 550px-grondmaat. card-flip.js schaalt pas wanneer de
     viewport werkelijk smaller is; een vaste tussenzoom veroorzaakte bij 640px
     eerst een sprong naar 319px en daarna juist weer groei bij verder versmallen. */
@media (max-width: 640px) {
  .cards-col.cards-grid { --gap: 26px; padding: 36px 12px 64px; }
}
/* De Ulam-schikking staat in ulam-veld.css (gedeeld met de Stack-pagina). */
/* ── voet: exact de opbouw van eoena.com (maten, ruimte, typografie), met het
     kompas van Vic Boomer als merkteken ── */
.home-foot { border-top: 1px solid rgba(20,60,66,.16); width: 100%; max-width: 1240px; margin: 0 auto;
    padding: 36px 24px 48px; display: flex; flex-direction: column; align-items: center;
    gap: 16px; text-align: center; }
/* het VIC-teken in zijn EIGEN kleur — daarom een afbeelding en geen mask */
.foot-mark { width: 38px; height: auto; display: block; }
.foot-brand { font: 600 11px var(--body); letter-spacing: .14em; text-transform: uppercase;
    color: #4a5250; line-height: 1.9; }
.foot-brand span { color: #8a918e; letter-spacing: .08em; }
.foot-brand .foot-link { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.foot-brand .foot-link:hover { color: var(--world-color, #1d8f9c); }
/* De rechterrand-reserve is 15 aug 2026 vervallen: de bediening woont nu
   linksboven in een eigen interface-regel (card-tools.njk) en het menu is een
   tijdelijk paneel óver de content — het contentgebied is weer de volle breedte. */
/* EEN KAART IS GEEN BESTAND (13 aug 2026). Sleepbare afbeeldingen geven een
   spookbeeld aan de cursor en veranderen een veeg in een sleep. Dit is het
   vangnet voor Safari/Chrome; de werkende regel voor álle browsers staat als
   dragstart-guard in assets/js/card-flip.js. `-webkit-touch-callout` haalt op
   iOS het vasthoud-menu ("Bewaar afbeelding") weg — dezelfde onderbreking,
   maar dan met een vinger. */
img { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; }