/* huid (gegenereerd uit skins/, canon blauwdruk-en-huid) */
.w-vic.w-vic { --skin-strip-ink-alpha: .66; --skin-strip-text-shadow: 0 -1px 0 rgba(8,20,30, .42), 0 1px 0 rgba(255,255,255,.06); --skin-strip-pad: 0 22px 2px; --skin-strip-size: 8px; --skin-strip-tracking: .22em; --skin-strip-gap: 7px; --skin-strip-sym-size: 21px; --skin-strip-sym-top: -2px; --skin-font-body: 'IBM Plex Mono', ui-monospace, monospace; --skin-font-display: 'IBM Plex Mono', ui-monospace, monospace; --skin-ink-text: #20201e; --skin-ink-text-rgb: 32, 32, 30; --skin-ink-body: #33302b; --skin-ink-body-rgb: 51, 48, 43; --skin-ink-muted: #6f6a63; --skin-ink-muted-rgb: 111, 106, 99; --skin-ink-gold: #a8905a; --skin-ink-gold-rgb: 168, 144, 90; --skin-ink-pill: #2c2620; --skin-ink-pill-rgb: 44, 38, 32; --skin-ink-deep: #123c42; --skin-ink-deep-rgb: 18, 60, 66; --skin-paper-base: #f9f5ef; --skin-paper-base-rgb: 249, 245, 239; --skin-paper-top: #fbf7f0; --skin-paper-top-rgb: 251, 247, 240; --skin-paper-mid: #fefcf7; --skin-paper-mid-rgb: 254, 252, 247; --skin-paper-blend: #fcf9f4; --skin-paper-blend-rgb: 252, 249, 244; --skin-paper-tint: #785032; --skin-paper-tint-rgb: 120, 80, 50; --skin-accent-base: #7DD3D9; --skin-accent-base-rgb: 125, 211, 217; --skin-accent-cta: #1d8f9c; --skin-accent-cta-rgb: 29, 143, 156; --skin-accent-rubric: #6c6c6c; --skin-accent-rubric-rgb: 108, 108, 108; --skin-edge-top: #7ec1c7; --skin-edge-top-rgb: 126, 193, 199; --skin-edge-mid: #609ea6; --skin-edge-mid-rgb: 96, 158, 166; --skin-edge-bottom: #366b74; --skin-edge-bottom-rgb: 54, 107, 116; --skin-edge-on: #1c6d76; --skin-edge-on-rgb: 28, 109, 118; --skin-strip-ink: #ecf4f6; --skin-strip-ink-rgb: 236, 244, 246; --skin-frame-inset: #ebe9e5; --skin-frame-inset-rgb: 235, 233, 229; --skin-frame-glow: #3c5f6e; --skin-frame-glow-rgb: 60, 95, 110; --skin-focus-ring: #2e7882; --skin-focus-ring-rgb: 46, 120, 130; --skin-art-backdrop: #12171a; --skin-art-backdrop-rgb: 18, 23, 26; --skin-back-ink: #f0f6f5; --skin-back-ink-rgb: 240, 246, 245; --skin-back-icon: #b9e8eb; --skin-back-icon-rgb: 185, 232, 235; --skin-back-ident-accent: #9fe0e6; --skin-back-ident-accent-rgb: 159, 224, 230; --skin-back-tile-line: #dcf1f1; --skin-back-tile-line-rgb: 220, 241, 241; --skin-back-frame-outer: #86a6ac; --skin-back-frame-outer-rgb: 134, 166, 172; --skin-back-frame-inner: #3f6b73; --skin-back-frame-inner-rgb: 63, 107, 115; --skin-back-veil: #f0f4f4; --skin-back-veil-rgb: 240, 244, 244; --skin-back-mark-ink: #ffffff; --skin-back-mark-ink-rgb: 255, 255, 255; }
.w-vic.w-vic.ed-2 { --skin-strip-ink-alpha: .66; --skin-strip-text-shadow: 0 -1px 0 rgba(8,20,30, .42), 0 1px 0 rgba(255,255,255,.06); --skin-strip-pad: 0 22px 2px; --skin-strip-size: 8px; --skin-strip-tracking: .22em; --skin-strip-gap: 7px; --skin-strip-sym-size: 21px; --skin-strip-sym-top: -2px; --skin-font-body: 'IBM Plex Mono', ui-monospace, monospace; --skin-font-display: 'IBM Plex Mono', ui-monospace, monospace; --skin-ink-text: #20201e; --skin-ink-text-rgb: 32, 32, 30; --skin-ink-body: #33302b; --skin-ink-body-rgb: 51, 48, 43; --skin-ink-muted: #6f6a63; --skin-ink-muted-rgb: 111, 106, 99; --skin-ink-gold: #a8905a; --skin-ink-gold-rgb: 168, 144, 90; --skin-ink-pill: #2c2620; --skin-ink-pill-rgb: 44, 38, 32; --skin-ink-deep: #123c42; --skin-ink-deep-rgb: 18, 60, 66; --skin-paper-base: #f9f5ef; --skin-paper-base-rgb: 249, 245, 239; --skin-paper-top: #fbf7f0; --skin-paper-top-rgb: 251, 247, 240; --skin-paper-mid: #fefcf7; --skin-paper-mid-rgb: 254, 252, 247; --skin-paper-blend: #fcf9f4; --skin-paper-blend-rgb: 252, 249, 244; --skin-paper-tint: #785032; --skin-paper-tint-rgb: 120, 80, 50; --skin-accent-base: #7DD3D9; --skin-accent-base-rgb: 125, 211, 217; --skin-accent-cta: #1d8f9c; --skin-accent-cta-rgb: 29, 143, 156; --skin-accent-rubric: #6c6c6c; --skin-accent-rubric-rgb: 108, 108, 108; --skin-edge-top: #7ec1c7; --skin-edge-top-rgb: 126, 193, 199; --skin-edge-mid: #609ea6; --skin-edge-mid-rgb: 96, 158, 166; --skin-edge-bottom: #366b74; --skin-edge-bottom-rgb: 54, 107, 116; --skin-edge-on: #1c6d76; --skin-edge-on-rgb: 28, 109, 118; --skin-strip-ink: #ecf4f6; --skin-strip-ink-rgb: 236, 244, 246; --skin-frame-inset: #ebe9e5; --skin-frame-inset-rgb: 235, 233, 229; --skin-frame-glow: #3c5f6e; --skin-frame-glow-rgb: 60, 95, 110; --skin-focus-ring: #2e7882; --skin-focus-ring-rgb: 46, 120, 130; --skin-art-backdrop: #12171a; --skin-art-backdrop-rgb: 18, 23, 26; --skin-back-ink: #f0f6f5; --skin-back-ink-rgb: 240, 246, 245; --skin-back-icon: #b9e8eb; --skin-back-icon-rgb: 185, 232, 235; --skin-back-ident-accent: #9fe0e6; --skin-back-ident-accent-rgb: 159, 224, 230; --skin-back-tile-line: #dcf1f1; --skin-back-tile-line-rgb: 220, 241, 241; --skin-back-frame-outer: #86a6ac; --skin-back-frame-outer-rgb: 134, 166, 172; --skin-back-frame-inner: #3f6b73; --skin-back-frame-inner-rgb: 63, 107, 115; --skin-back-veil: #f0f4f4; --skin-back-veil-rgb: 240, 244, 244; --skin-back-mark-ink: #ffffff; --skin-back-mark-ink-rgb: 255, 255, 255; }
.w-vic.w-tom { --skin-strip-ink-alpha: .66; --skin-strip-text-shadow: 0 -1px 0 rgba(8,20,30, .42), 0 1px 0 rgba(255,255,255,.06); --skin-strip-pad: 0 22px 2px; --skin-strip-size: 8px; --skin-strip-tracking: .22em; --skin-strip-gap: 7px; --skin-strip-sym-size: 21px; --skin-strip-sym-top: -2px; --skin-font-body: 'IBM Plex Mono', ui-monospace, monospace; --skin-font-display: 'IBM Plex Mono', ui-monospace, monospace; --skin-ink-text: #20201e; --skin-ink-text-rgb: 32, 32, 30; --skin-ink-body: #33302b; --skin-ink-body-rgb: 51, 48, 43; --skin-ink-muted: #6f6a63; --skin-ink-muted-rgb: 111, 106, 99; --skin-ink-gold: #a8905a; --skin-ink-gold-rgb: 168, 144, 90; --skin-ink-pill: #2c2620; --skin-ink-pill-rgb: 44, 38, 32; --skin-ink-deep: #123c42; --skin-ink-deep-rgb: 18, 60, 66; --skin-paper-base: #f9f5ef; --skin-paper-base-rgb: 249, 245, 239; --skin-paper-top: #fbf7f0; --skin-paper-top-rgb: 251, 247, 240; --skin-paper-mid: #fefcf7; --skin-paper-mid-rgb: 254, 252, 247; --skin-paper-blend: #fcf9f4; --skin-paper-blend-rgb: 252, 249, 244; --skin-paper-tint: #785032; --skin-paper-tint-rgb: 120, 80, 50; --skin-accent-base: #7DD3D9; --skin-accent-base-rgb: 125, 211, 217; --skin-accent-cta: #1d8f9c; --skin-accent-cta-rgb: 29, 143, 156; --skin-accent-rubric: #6c6c6c; --skin-accent-rubric-rgb: 108, 108, 108; --skin-edge-top: #7ec1c7; --skin-edge-top-rgb: 126, 193, 199; --skin-edge-mid: #609ea6; --skin-edge-mid-rgb: 96, 158, 166; --skin-edge-bottom: #366b74; --skin-edge-bottom-rgb: 54, 107, 116; --skin-edge-on: #1c6d76; --skin-edge-on-rgb: 28, 109, 118; --skin-strip-ink: #ecf4f6; --skin-strip-ink-rgb: 236, 244, 246; --skin-frame-inset: #ebe9e5; --skin-frame-inset-rgb: 235, 233, 229; --skin-frame-glow: #3c5f6e; --skin-frame-glow-rgb: 60, 95, 110; --skin-focus-ring: #2e7882; --skin-focus-ring-rgb: 46, 120, 130; --skin-art-backdrop: #12171a; --skin-art-backdrop-rgb: 18, 23, 26; --skin-back-ink: #f0f6f5; --skin-back-ink-rgb: 240, 246, 245; --skin-back-icon: #b9e8eb; --skin-back-icon-rgb: 185, 232, 235; --skin-back-ident-accent: #9fe0e6; --skin-back-ident-accent-rgb: 159, 224, 230; --skin-back-tile-line: #dcf1f1; --skin-back-tile-line-rgb: 220, 241, 241; --skin-back-frame-outer: #86a6ac; --skin-back-frame-outer-rgb: 134, 166, 172; --skin-back-frame-inner: #3f6b73; --skin-back-frame-inner-rgb: 63, 107, 115; --skin-back-veil: #f0f4f4; --skin-back-veil-rgb: 240, 244, 244; --skin-back-mark-ink: #ffffff; --skin-back-mark-ink-rgb: 255, 255, 255; }
/* De kleurmodus is vorm en in elke World gelijk; de waarden eronder zijn haar huid. */
.w-vic { color-scheme: light; }
/* Vic Boomer — KAART-CSS (30 sep 2026): alles wat een Vic-kaart tekent, en niets meer. Elke regel
   begint met .w-vic (de klasse op de .flip van de kaart), zodat deze stylesheet naast die van
   andere werelden op één pagina kan staan. Gegenereerd uit de oude vicboomer.css; de poort
   validate-kaart-css bewaakt de afbakening. Het page frame staat in vicboomer.css. */

/* 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;
  }
.w-vic {
    /* 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. */
    
    --ink:   var(--skin-ink-text);
    --muted: var(--skin-ink-muted);
    --gold:  var(--skin-ink-gold);
    /* 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:      var(--skin-paper-base);
    /* Frissere contentzone, in lijn met de subtielere papierverdeling van KJM. */
    --paper-top:  var(--skin-paper-top);
    --paper-mid:  var(--skin-paper-mid);
    --paper-blend:var(--skin-paper-blend);
    --body:  var(--skin-font-body);
    --serif: var(--skin-font-display);
    /* rubriek-accent (fallback = merk-cyaan als een kaart geen rubriek heeft) */
    --base: var(--skin-accent-base); --base-rgb: var(--skin-accent-base-rgb);
    --cta: var(--skin-accent-cta);   /* 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. */
.w-vic,
.w-vic {
    --vel-ink: var(--skin-ink-deep);
    --vel-ink-rgb: var(--skin-ink-deep-rgb);
    --vel-dash: rgba(var(--skin-ink-deep-rgb), .40);
    --vel-secondary: rgba(var(--skin-ink-deep-rgb), .68);
  }
/* ── flip-deck: één roterend podium met twee fysieke vlakken (pane-a voor,
     pane-b achter). card-flip.js verplaatst de twee faces uit .flip-faces naar
     de panes en draait 0°↔180°. Mobiel-schaling gaat via fit() op .flip. ── */
.w-vic.flip { position: relative; width: 550px; margin-inline: auto; perspective: 2200px;
    touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
/* De kaart leent haar typografie niet van de pagina: in een Deck van een andere wereld
   bleef anders het font van die pagina staan (en `ch`-maten liepen mee). Waarden = wat haar
   eigen pagina altijd al gaf. */
.w-vic.flip { font: 400 16px/normal var(--body); color: var(--ink); }
.w-vic .flip-stage { position: relative; width: 100%; height: 770px;
    transition: transform .85s cubic-bezier(.2,.75,.2,1); transform-style: preserve-3d; }
.w-vic .flip-stage .card { cursor: pointer; }
.w-vic .flip-pane { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.w-vic .flip-pane.pane-b { transform: rotateY(180deg); }
.w-vic .flip-faces { display: none; }
.w-vic.flip:focus-visible { outline: 3px solid rgba(var(--skin-focus-ring-rgb), .6); outline-offset: 8px; border-radius: 34px; }
/* ════════════ DE KAART — uniforme cyaan rand ════════════ */
.w-vic .card {
    width: 100%; max-width: 550px; margin-inline: auto; height: 770px;   /* 550×770 = 5:7 */
    /* cyaan-familie, ÉÉN kleur die zacht verdiept (geen kleursprong): de drie
       stops liggen dicht bij elkaar in dezelfde teal-hue, alleen de lichtheid
       zakt naar onderen — net als de subtiele warme register-rand. Onderin
       donker genoeg voor de ivoren systeemstrooktekst. */
    --gr-a: var(--skin-edge-top); --gr-b: var(--skin-edge-mid); --gr-c: var(--skin-edge-bottom); --on: var(--skin-edge-on);
    border-radius: 34px; padding: 16px 16px 0; position: relative; isolation: isolate;
    display: flex; flex-direction: column;   /* inner + sysstrip in de flow → strook schaalt betrouwbaar mee */
    background: var(--gr-b);
    background: linear-gradient(180deg, var(--gr-a) 0%, var(--gr-b) 48%, var(--gr-c) 100%);
    box-shadow: 0 20px 42px rgba(0,0,0,.17), 0 3px 8px rgba(0,0,0,.11),
      inset 0 0 0 1px rgba(255,255,255,.22), inset 0 0 22px rgba(0,0,0,.30);   /* buitenschaduw afgezwakt (was .30/.20) */
  }
/* ── systeemstrook (verhoogde onderrand): editie · wordmark · nummer ── */
.w-vic .sysstrip { position: static; flex: 0 0 auto; height: 52px; z-index: 2;
    pointer-events: none; white-space: nowrap;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
    padding: var(--skin-strip-pad);
    font: 600 var(--skin-strip-size)/1 var(--body); letter-spacing: var(--skin-strip-tracking); text-transform: uppercase;
    color: rgba(var(--skin-strip-ink-rgb), var(--skin-strip-ink-alpha));
    text-shadow: var(--skin-strip-text-shadow); }
.w-vic .sysstrip > span:first-child { justify-self: start; }
.w-vic .sysstrip > span:last-child { justify-self: end; display: inline-flex; align-items: center; gap: var(--skin-strip-gap); }
/* de flip-glyph (rond pijltje) naast TURN — non-serif, optisch op kapitaalhoogte van het eigen font */
.w-vic .ss-sym { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: var(--skin-strip-sym-size); font-weight: 400; line-height: 1; letter-spacing: 0;
    position: relative; top: var(--skin-strip-sym-top); }
/* ── het lichte vlak (perkament) — identiek aan register.css ── */
/* ── HET BINNENVLAK: ÉÉN VORM IN ELKE WORLD ────────────────────────────────
     De drager van kop, beeld en tekst, met de binnenkaderlijn eromheen. Het
     papier is een waarde van de World; de zone tussen kaartrand en binnen-
     kaderlijn is dekkend en aan beide zijden gelijk (canon kaderveld-dekkend).
     De vorm staat hier, en nergens anders (amendement 5, stap 4, 28 okt 2026). */
.w-vic .inner { position: relative; overflow: hidden; border-radius: 22px;
    flex: 1 1 auto; min-height: 0; padding: 6px; display: flex; flex-direction: column;
    background: var(--paper-stack); background-repeat: var(--paper-repeat);
    box-shadow: var(--frame-inset); }
.w-vic .frame { position: relative; z-index: var(--frame-z, auto); height: 100%; overflow: hidden;
    border-radius: 16px; display: flex; flex-direction: column; }
/* ════════════ KOP — strak, gemeenschappelijk met register/Eo Ena ════════════
     Alleen titel links + nummer-pil rechts; geen badge, streep of ondertitel. */
/* ── DE KOP VAN DE KAART: ÉÉN REGEL IN ELKE WORLD ───────────────────────────
     Titel links, nummer-pil rechts, één lijn eronder. De maten van de letter
     zijn een waarde van de World — elke World heeft haar eigen font en dus haar
     eigen optische correctie (canon wereld-fonts-onaantastbaar). De vorm staat
     hier, en nergens anders (amendement 5, stap 4, 28 okt 2026). */
.w-vic .head { position: var(--head-pos, static); z-index: var(--head-z, auto);
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 20px 22px 15px;
    border-bottom: var(--head-rule-width) solid var(--head-rule-ink); }
.w-vic .head-title { margin: 0; font-family: var(--body); font-weight: var(--title-weight);
    font-size: var(--title-size); line-height: var(--title-leading);
    letter-spacing: var(--title-tracking); color: var(--title-ink);
    text-transform: var(--title-case, none); white-space: nowrap; overflow: hidden; }
/* mono → iets krapper gespatieerd */
/* De kaartbediening hoort optisch bij de titelregel. De gedeelde kaartmacro
     houdt het icoon bewust klein en neutraal; op de Vic-voorkant krijgt het de
     maat en merkinkt van deze kop. Alleen het getekende icoon groeit — de knop
     blijft transparant en de donkere achterkant behoudt haar lichte contrast. */
.w-vic .card .head .card-tools .tools-tab { width: 42px; height: 42px; }
.w-vic .card .head .card-tools .tools-tab svg { width: 23px; height: 23px; }
.w-vic .card .head .card-tools .tools-tab svg path { stroke-width: 2.3; }
.w-vic .card:not(.back) .head .card-tools:not(.tools-stil) .tools-tab {
    color: var(--cta); }
.w-vic .card:not(.back) .head .card-tools:not(.tools-stil) .tools-tab:hover,
.w-vic .card:not(.back) .head .card-tools:not(.tools-stil) .tools-tab:focus-visible {
    color: var(--cta); }
/* geen .small-variant: de titelgrootte varieert nergens en nooit — te lang is
     een redactieprobleem (titel inkorten), geen vormgevingsprobleem */
/* nummer-pil rechtsboven (register-anatomie), rand in de lichtste rand-cyaan */
.w-vic .pill { flex: none; font-family: var(--body); font-size: 11px;
    font-weight: var(--pill-weight); letter-spacing: var(--pill-tracking);
    color: var(--pill-ink); border: 2px solid var(--pill-line); border-radius: 7px;
    padding: var(--pill-pad); background: transparent; white-space: nowrap; }
/* ════════════ het beeld (55%) + boek-contour handelsmerk ════════════ */
/* GEEN FILTER OP HET VIC-BEELD (20 aug 2026). Hier stond `saturate(1.04) contrast(1.03)` —
   zinnig toen alle hero's foto's waren, maar de Vic-beelden zijn sinds het kleursysteem duotone
   lijntekeningen met vastgelegde inkten (papier #F7F1E7, blauwzwart #123443, één spotinkt per
   familie). Een filter maakt de getoonde kleur dan aantoonbaar anders dan de gespecificeerde, en
   bij een licht beeld loopt het papier vast op wit: op helena 5,2% van alle kanalen, precies waar
   de lijnsubtiliteit zit (gemeten gemiddelde 218,8 → 221,4 — het beeld oogde lichter dan het
   origineel, wat Tom opmerkte). De andere huiden houden hun filter: daar zijn de hero's nog foto's. */
.w-vic .card, .w-vic .card.markback {
  /* De rubriekkleur en de inkt van de gereedschapsknop stonden tot 28 okt 2026 als
     inline stijl op elke <article>. Het zijn waarden van de World, niet van de kaart;
     alleen Eo Ena's textuurpositie verschilt per kaart en blijft daar staan. */
  --base: var(--skin-accent-rubric); --base-rgb: var(--skin-accent-rubric-rgb);
  --hero-position: 50% 42%; --hero-filter: none;
  --paper-stack: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.04"/></svg>') repeat,
    radial-gradient(1200px 220px at 50% -20px, rgba(var(--skin-paper-tint-rgb), .05) 0%, rgba(var(--skin-paper-tint-rgb), .03) 40%, rgba(0,0,0,0) 80%),
    radial-gradient(600px 160px at -80px -40px, rgba(var(--skin-paper-tint-rgb), .05), rgba(0,0,0,0) 70%),
    radial-gradient(600px 160px at calc(100% + 80px) -40px, rgba(var(--skin-paper-tint-rgb), .05), rgba(0,0,0,0) 70%),
    linear-gradient(to right, var(--paper-top) 0%, var(--paper-top) 10%, var(--paper-blend) 22%, var(--paper-mid) 38%, var(--paper-mid) 62%, var(--paper-blend) 78%, var(--paper-top) 90%, var(--paper-top) 100%),
    var(--paper);
  --paper-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  --frame-inset: inset 0 0 0 4px var(--skin-frame-inset),
    inset 0 0 0 6px rgba(var(--base-rgb), .16),
    inset 0 0 40px rgba(var(--skin-frame-glow-rgb), .10);
  --lede-z: 3; --lede-align: stretch; --lede-justify: flex-start; --lede-margin: -22px 32px 0;
  --lede-pad: 28px 0 4px;     --lede-measure: none; --lede-font: var(--body);
  --lede-size: 13px; --lede-leading: 1.45; --lede-tracking: 0; --lede-ink: var(--skin-ink-body);  --lede-text: left;
  --head-pos: relative; --head-z: 3;
  --head-rule-width: 1.5px; --head-rule-ink: rgba(var(--base-rgb), .28);
  --title-weight: 700; --title-size: 28px; --title-leading: 1.25; --title-tracking: -.02em;
  --title-ink: var(--skin-ink-text);
  --pill-weight: 600; --pill-tracking: .06em; --pill-ink: var(--skin-ink-pill);
  --pill-line: var(--gr-a); --pill-pad: 5px 9px 4px;
  --wave-ink-rgb: var(--skin-ink-gold-rgb); --wave-alpha: .85; --wave-width: 1.3;
  --kind-pad: 0 0 3px;     --kind-tracking: .045em; --kind-ink: var(--skin-ink-deep);
}
/* ── HET BEELDVLAK: ÉÉN VORM IN ELKE WORLD ──────────────────────────────────
   Dit blok staat woord voor woord gelijk in de drie stijlbladen (amendement 5, stap 4).
   DE GOLF IS EEN GAT, GEEN KLEUR (12 aug 2026): het masker staat op het beeld, niet op
   .art — anders zou de gouden lijn mee weggeknipt worden, en alleen zo zie je het echte
   vlak eronder, inclusief de inset-gloed van .inner (gemeten Δ 13 aan de rand).
   Wat per World verschilt staat hierboven als --hero-*. */
.w-vic .art { position: relative; z-index: 2; flex: 0 0 55%; min-height: 0; margin: 0; overflow: hidden; }
.w-vic .art .hero, .w-vic .art .vignette, .w-vic .art > video {
    -webkit-mask-image: linear-gradient(#000,#000), var(--golf-mask);
    -webkit-mask-size: 100% calc(100% - var(--golf-h)), 100% var(--golf-h);
    -webkit-mask-position: top, bottom;
    -webkit-mask-repeat: no-repeat, no-repeat;
    mask-image: linear-gradient(#000,#000), var(--golf-mask);
    mask-size: 100% calc(100% - var(--golf-h)), 100% var(--golf-h);
    mask-position: top, bottom;
    mask-repeat: no-repeat, no-repeat; }
.w-vic .art .hero, .w-vic .art > video { display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: var(--hero-position);
    filter: var(--hero-filter); background: var(--skin-art-backdrop); }
/* de boek-contour: het handelsmerk, één op één gedeeld door de drie Worlds */
.w-vic .art-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 56px;
    display: block; pointer-events: none; z-index: 4; }
.w-vic .art-wave path { fill: none; stroke: rgba(var(--wave-ink-rgb), var(--wave-alpha)); stroke-width: var(--wave-width); }
/* De videokaart blijft een Trading Card: het beeldvlak en de boekkrul zijn
     identiek aan een fotohero. Alleen een klein, randloos speel/pauzeteken maakt
     de beweging bestuurbaar. De printweergave gebruikt altijd de poster. */
.w-vic .art-video-print { display: none !important; }
.w-vic .art-video-toggle { position: absolute; right: 12px; bottom: 47px; z-index: 6;
    width: 32px; height: 32px; padding: 0; border: 0; border-radius: 0;
    display: grid; place-items: center; cursor: pointer;
    color: var(--skin-ink-deep); background: rgba(var(--skin-paper-base-rgb), .68);
    box-shadow: 0 1px 0 rgba(var(--skin-ink-deep-rgb), .18);
    opacity: .72; transition: opacity .18s ease, background-color .18s ease; }
.w-vic .art-video-toggle:hover,
.w-vic .art-video-toggle:focus-visible {
    opacity: 1; background: rgba(var(--skin-paper-base-rgb), .92); }
.w-vic .art-video-toggle:focus-visible { outline: 2px solid var(--skin-accent-cta); outline-offset: 2px; }
.w-vic .art-video-play { width: 0; height: 0; margin-left: 2px;
    border-top: 6px solid transparent; border-bottom: 6px solid transparent;
    border-left: 9px solid currentColor; }
.w-vic .art-video-pause { width: 10px; height: 12px;
    border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.w-vic .art-video-toggle[data-state="paused"] .art-video-pause,
.w-vic .art-video-toggle[data-state="playing"] .art-video-play { display: none; }
.w-vic .vignette { position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: radial-gradient(150% 105% at 50% 32%, transparent 72%, rgba(0,0,0,.15) 100%); }
/* De kaartsoort staat als redactionele rubricering ín het beeld: klein genoeg
     om de illustratie niet te kapen, maar expliciet genoeg om kleur niet eerst te
     hoeven leren. De positie blijft vrij van de boeklijn en is op elke Vic-kaart
     identiek. */
.w-vic .art-kind { position: absolute; left: 10px; bottom: 47px; z-index: 5;
    padding: var(--kind-pad); background: var(--kind-face, transparent);
    border-bottom: 1px solid currentColor; font: 600 11px/1 var(--body);
    letter-spacing: var(--kind-tracking); text-transform: uppercase;
    color: var(--kind-ink); pointer-events: none; }
/* ════════════ tekstvlak ════════════ vaste Vic-vorm: links gezet, gelijke
     zijmarges en bewust ademruimte tussen boekpunt en boodschap. */
/* ── DE TEKSTZONE VAN DE VOORKANT: ÉÉN VORM IN ELKE WORLD ───────────────────
     Wenkbrauw, kop en broodtekst onder het beeld. Hoe de tekst staat (gecentreerd
     of uitgevuld, hoog of midden) is een waarde van de World; dat zij hier staat,
     en met welke maten, is dat niet (amendement 5, stap 4, 28 okt 2026). */
.w-vic .lede { position: relative; z-index: var(--lede-z); flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    align-items: var(--lede-align); justify-content: var(--lede-justify);
    margin: var(--lede-margin); padding: var(--lede-pad); background: transparent; }
/* de wenkbrauw: de tagline boven de lede — zelfde anatomieplek als op de
     Eo Ena-kaart (subtitle → eyebrow), in het Vic-idioom: mono, gesperd kapitaal,
     het rubriekaccent als kleur. */
.w-vic .lede .eyebrow { margin: 0 0 14px; font-family: var(--body); font-weight: 700;
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--cta); text-align: left; }
.w-vic .lede p { margin: 0; max-width: var(--lede-measure);
    font-family: var(--lede-font); font-size: var(--lede-size); line-height: var(--lede-leading);
    letter-spacing: var(--lede-tracking); color: var(--lede-ink); text-align: var(--lede-text); }
/* Op kaarten met een quote volgen subtitel en broodtekst direct op elkaar.
     De quote sluit af, na twee tekstregels wit. */
.w-vic .lede.heeft-quote .eyebrow { margin-bottom: 0; }
.w-vic .lede .lede-quote { margin-top: 38px; }
/* De titel van de tekst, in het contentgebied — verschijnt alleen als de kaart
     een eigen `name:` draagt die van de titel verschilt (naam ≠ titel, 22 aug 2026).
     De wenkbrauw erboven blijft (vormbewijs variant B). */
.w-vic .lede .content-kop { margin: 0 0 10px; font-family: var(--body); font-weight: 700;
    font-size: 19px; line-height: 1.2; letter-spacing: -.005em; color: var(--ink);
    text-align: left; max-width: none; margin-inline: 0; }
.w-vic .lede .eyebrow + .content-kop { margin-top: 2px; }
/* ════════════ ACHTERKANT — routes op het donkere merkvlak ════════════ */
/* De hele tegel is de handeling. Een doorschijnende teal-laag en lichte
     lijnvoering houden de routes in dezelfde wereld als rug, kompas en kop;
     er is daarom geen tweede, nagebootste knop binnen de klikzone. */
/* ── DE MIDDENZONE: ÉÉN CONTAINER IN ELKE WORLD ─────────────────────────────
     De zone tussen de kop en het identiteitsblok, op elke rug in elke World
     (amendement 5, stap 4, 28 okt 2026). Zij draagt de tekstzone en de tegels;
     de tegels zakken naar de onderrand (margin-top:auto in .back-actions).
     De maten staan als waarden erboven, de vorm staat hier — en nergens anders. */
.w-vic .mid { position: var(--mid-pos, static); z-index: var(--mid-z, auto); flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; padding: var(--mid-pad); }
/* EEN RUSTIGE RUG (canon blauwdruk-en-huid, amendement 4, 18 okt 2026): de rugtekst begint op elke
     rug op dezelfde hoogte, vast onder de kop; de CTA's staan vast onderaan, een vaste afstand boven het
     identiteitsblok; CTA's en blok delen één vlak (de donkere overlay van de tegels). Geen
     verticaal centreren meer: dat liet 'In het kort' op elke kaart op een andere hoogte beginnen. */
/* HET IDENTITEITSBLOK (canon deel-deze-kaart, amendement 2): de opbouw komt uit werkkaartStyle
   (macro ident-blok.njk); hier de Vic-huid: het vlak van de tegels, ivoor inkt, codons in het
   lichte cyaan, Plex Mono als kop. */
.w-vic .card.back, .w-vic .card.markback { --ib-lijn: var(--tile-line); --ib-vlak: var(--tile-face);   /* één vlak met de tegels (amendement 4, punt 4) */
    --ib-radius: 16px; --ib-inkt: rgba(var(--skin-strip-ink-rgb), .86); --ib-accent: var(--skin-back-ident-accent); --ib-kop: var(--body); }
.w-vic .card.back .back-body { margin: 0 auto;
    width: 100%; max-width: 34ch; text-align: center; color: rgba(var(--skin-back-ink-rgb), .80); }
.w-vic .card.back .back-label { display: block; margin: 0 0 16px;
    font: 600 9px/1.2 var(--body); letter-spacing: .22em; text-transform: uppercase;
    color: rgba(var(--skin-back-icon-rgb), .72); }
.w-vic .card.back .back-title { display: block; margin: 0 0 10px;
    font: 700 17px/1.3 var(--body); color: var(--skin-back-ink); }
.w-vic .back-lead { margin: 0; font: var(--back-lead-font); text-align: center;
    align-self: center; max-width: var(--back-lead-measure); }
.w-vic .card.back .back-lead { color: var(--back-lead-ink); }
/* De waarden van de tegel in het Vic-idioom; de vorm staat in het blok hieronder. */
.w-vic .card.back, .w-vic .card.markback {
  --back-field: var(--gr-c);                 /* het diepe merk-cyaan als veld */
  --back-frame-outer: var(--skin-back-frame-outer); --back-frame-inner: var(--skin-back-frame-inner);
  --back-ink: var(--skin-back-ink);
  --back-lead-ink: rgba(var(--skin-back-ink-rgb), .80);
  --back-lead-font: 400 14px/1.58 var(--body); --back-lead-measure: none;
  --back-rule: rgba(var(--skin-back-veil-rgb), .28);
  --back-pill-line: rgba(var(--skin-back-tile-line-rgb), .24);
  --back-head-z: 7;                          /* de kop staat boven de decorlaag van de Vic-rug */
  --tile-outset: 16px 0 0;
  --mid-pad: 26px 18px 14px;
  /* de middenzone staat boven de decorlaag van de Vic-rug; de andere Worlds
     hebben daar niets onder staan en blijven static (geen eigen compositielaag). */
  --mid-pos: relative;
  --mid-z: 3;
  --tile-face: rgba(var(--skin-ink-deep-rgb), .18);
  --tile-face-hover: rgba(var(--skin-ink-deep-rgb), .30);
  --tile-line: rgba(var(--skin-back-tile-line-rgb), .24);
  --tile-line-hover: rgba(var(--skin-accent-base-rgb), .66);
  --tile-portrait-line: rgba(var(--skin-back-tile-line-rgb), .52);
  --tile-sheen: rgba(255,255,255,.035);
  --tile-focus: rgba(var(--skin-accent-base-rgb), .72);
  --tile-icon: var(--skin-back-icon);
  --tile-name-weight: 600;  --tile-name-size: 15px;  --tile-name-tracking: normal;
  --tile-name-ink: var(--skin-back-ink);
  --tile-meta-ink: rgba(var(--skin-back-icon-rgb), .70);
  --tile-action-weight: 600; --tile-action-size: 12px; --tile-action-leading: 1;
  --tile-action-tracking: .08em; --tile-action-ink: var(--skin-back-icon); }
/* ── DE TEGEL: ÉÉN CTA-VORM IN ELKE WORLD ───────────────────────────────────
   Dit blok staat woord voor woord gelijk in eoena.card.css, register.card.css en
   vicboomer.card.css (canon blauwdruk-en-huid, amendement 4 variant A, amendement 5
   stap 3, 27 okt 2026). Wat per World verschilt staat hierboven als --tile-*: kleur,
   en de optische correctie op het eigen font. De vorm staat hier, en nergens anders.
   De opmaak die deze regels verwachten komt uit macros/tegels.njk. */
.w-vic .back-actions { margin-top: auto; padding: var(--tile-outset); width: 100%; }
.w-vic .tiles { display: grid; grid-template-columns: 1fr; gap: 8px; }
.w-vic .tile { background: var(--tile-face);
    border: 1px solid var(--tile-line); border-radius: 16px;
    box-shadow: inset 0 1px 0 var(--tile-sheen);
    display: grid; grid-template-columns: 40px auto 1fr; grid-template-rows: auto auto;
    grid-template-areas: "icoon naam meta" "icoon actie actie";
    column-gap: 16px; row-gap: 5px; align-items: center; text-align: left;
    text-decoration: none; color: inherit; cursor: pointer;
    min-height: 58px; padding: 10px 18px;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease; }
.w-vic .tile:hover { background: var(--tile-face-hover);
    border-color: var(--tile-line-hover); transform: translateY(-1px); }
.w-vic .tile:focus-visible { outline: 3px solid var(--tile-focus); outline-offset: 3px; }
.w-vic .tile[aria-disabled="true"] { cursor: default; opacity: .42; filter: grayscale(1); }
.w-vic .tile[aria-disabled="true"]:hover { background: var(--tile-face);
    border-color: var(--tile-line); transform: none; }
.w-vic .tile[aria-disabled="true"]:hover .tile-btn .arr { transform: none; }
/* Elk icoon los, zonder cirkel, in één maat (amendement 4). */
.w-vic .tile-badge { grid-area: icoon; display: grid; place-items: center; width: 40px; height: 40px; }
.w-vic .tile-badge .ico { display: block; width: 40px; height: 40px; background-color: var(--tile-icon);
    -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; }
.w-vic .tile-badge svg { display: block; width: 40px; height: 40px; color: var(--tile-icon); }
.w-vic .tile-badge.portrait { border-radius: 999px; overflow: hidden; border: 1.5px solid var(--tile-portrait-line); }
.w-vic .tile-badge.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.w-vic .tile-name { grid-area: naam; align-self: end; font-family: var(--body);
    font-weight: var(--tile-name-weight); font-size: var(--tile-name-size); line-height: 1;
    letter-spacing: var(--tile-name-tracking); color: var(--tile-name-ink); }
.w-vic .tile-meta { grid-area: meta; align-self: end; font-family: var(--body);
    font-weight: 600; font-size: 12.5px; line-height: 1.1;
    letter-spacing: .02em; color: var(--tile-meta-ink); }
.w-vic .tile-meta::before { content: "\00b7"; margin-right: 8px; opacity: .6; }
.w-vic .tile-btn { grid-area: actie; align-self: start; display: flex; align-items: center; justify-content: flex-start; gap: 7px;
    width: auto; height: auto; padding: 0;
    font-family: var(--body); font-weight: var(--tile-action-weight); font-size: var(--tile-action-size);
    line-height: var(--tile-action-leading); letter-spacing: var(--tile-action-tracking);
    background: transparent; color: var(--tile-action-ink); border: 0; box-shadow: none; }
.w-vic .tile-btn .arr { transition: transform .18s ease; }
.w-vic .tile:hover .tile-btn .arr { transform: translateX(3px); }
/* Een tegel mag een NOOT dragen: een hele zin onder de actie, over de volle
   breedte. De crème CTA had dit als .bc-noot; bij de gedeelde tegel (amendement 5)
   belandde hij in de meta-sleuf, die voor een prijs of een makernaam bedoeld is, en
   schoof daar boven de titel uit. Alleen een tegel MÉT noot krijgt de derde rij,
   zodat elke tegel zonder noot ongemoeid blijft (29 okt 2026). */
.w-vic .tile.has-note { grid-template-rows: auto auto auto;
    grid-template-areas: "icoon naam meta" "icoon actie actie" "icoon noot noot"; }
.w-vic .tile-noot { grid-area: noot; align-self: start; font-family: var(--body);
    font-weight: 400; font-size: 12.5px; line-height: 1.35;
    letter-spacing: .01em; color: var(--tile-meta-ink); }
/* ── merk-achterkant: het Vic-kompas als medaillon (colofon-kant) ──
   Zelfde anatomie als de Stoutenburger makerkaart: de .inner neemt de donkerste
   kleur van de kaartrand → kaart en vlak worden één naadloos medaillon. Het
   kompas is een masker in de ivoorkleur van de systeemstrooktekst, half
   doorschijnend, zodat het merkteken met het teal-vlak versmelt. */
.w-vic .card.markback .inner { background: var(--gr-c);
    box-shadow: inset 0 0 0 4px var(--skin-back-frame-outer), inset 0 0 0 6px var(--skin-back-frame-inner); }
/* De lege rug heeft wel dezelfde kopgeometrie nodig voor haar bediening, maar
     geen zichtbare kop: geen titel, nummer of scheidingslijn op het merkvlak. */
.w-vic .card.markback .markback-head { z-index: 7; border-bottom: 0; }
.w-vic .vic-back { position: relative; z-index: 3; flex: 1 1 auto;
    display: grid; place-items: center; padding: 24px; }
/* HET HART VAN DE KAART (13 aug 2026): absoluut gecentreerd op .card, niet op het
     contentvlak — dat scheelt de halve systeemstrook en zag er net-niet-midden uit. */
.w-vic .vic-back-mark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 3; pointer-events: none;
    width: 62%; max-width: 300px; aspect-ratio: 1;
    background: rgba(var(--skin-back-veil-rgb), .5);
    -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; }
@media print {
  .w-vic .art > video,
  .w-vic .art-video-toggle { display: none !important; }
  .w-vic .art > .art-video-print { display: block !important; }
}
/* ══ DE RUG-CANON (14 aug 2026, Tom — na vormbewijs op EOE-004) ═══════════════
   FRONT = licht veld / wereld in beeld · BACK = wereldveld / wereld als watermerk.
   De informatie op de rug staat ín de kleur van haar wereld; het kompas is er een
   zeer zacht watermerk onder (.06 — zachter waar tekst overheen loopt was de eis,
   dus overal .06). De crème CTA blijft: die springt als handeling uit de
   informatiezijde. Inktwaarden zijn GEMETEN, niet geschat: vol ivoor haalt
   6.0/5.0/7.3 op de drie velden, secundair (.92) 5.4/4.5/6.5 — drempel 4.5.
   Het watermerk staat in het hart van de KAART: +18px onder het frame-centrum,
   want het frame mist de halve systeemstrook (les van de merkvlakken).
   De lege rug blijft het volle merkvlak — één teken, twee volumes. */
/* DE RUG IS OVERAL DE VIC-099-RUG (19 aug 2026, Toms canon). Het merkvlak van
     VIC-099 is de maat: hetzelfde veld, dezelfde binnenkaderlijn en hetzelfde
     kompas — met content erop wordt het kompas alleen doorschijnend (.06).
     Concreet betekent dat: GEEN eigen box-shadow (de gewone binnenkaderlijn van
     .inner blijft staan — witte inzet-ring .5 + keyline — die had ik eerst naar
     .12 verzwakt en dát was de inconsistentie), en het kompas op de merkvlak-maat
     (62%, max 300px) in plaats van 78% zonder maximum. */
/* ── DE RUG IN HAAR WERELD: ÉÉN VORM, EIGEN INKT ────────────────────────────
     Het veld van de rug, de twee insets en de inkt van kop en pil. De zone
     tussen kaartrand en binnenkaderlijn draagt aan beide zijden dezelfde
     dekkende kleur (canon kaderveld-dekkend, 20 aug 2026): half doorzichtig
     kleurde zij mee met het veld eronder en werd grauw.
     Dezelfde drie regels in elke World; alleen de waarden hierboven verschillen
     (amendement 5, stap 4, 28 okt 2026). */
.w-vic .card.back .inner { background: var(--back-field);
    box-shadow: inset 0 0 0 4px var(--back-frame-outer), inset 0 0 0 6px var(--back-frame-inner); }


.w-vic .card.back .frame::before { content:""; position:absolute; top:calc(50% + 18px); left:50%;
    transform:translate(-50%,-50%); width:62%; max-width:300px; aspect-ratio:1; z-index:0; pointer-events:none;
    background:rgba(var(--skin-back-veil-rgb), .06);
    -webkit-mask:url('../cards/vic-compass.webp') center/contain no-repeat;
            mask:url('../cards/vic-compass.webp') center/contain no-repeat; }
/* De kop vormt een eigen stacking context. De CTA-laag (.mid) staat op z-index 3;
     met dezelfde waarde won zij als later DOM-element en ving zij de kliks onder
     het uitgeklapte menu af. De hele kop moet daarom erboven liggen — een hogere
     z-index op .tools-tray alléén kan nooit uit de stacking context ontsnappen. */
.w-vic .card.back .head { z-index: var(--back-head-z, auto); border-bottom-color: var(--back-rule); }
.w-vic .card.back .head-title { color: var(--back-ink); }
.w-vic .card.back .pill { color: var(--back-ink); border-color: var(--back-pill-line); }

/* De inkt van de gereedschapsknop op de rug en op het merkvlak — waarden van de World,
   tot 28 okt 2026 als inline stijl in de macro (amendement 5, stap 4). */
.w-vic .card.back { --wk-ink: rgba(var(--skin-back-icon-rgb), .78); --wk-hover-ink: var(--skin-back-icon); }
.w-vic .card.markback { --wk-ink: rgba(var(--skin-back-mark-ink-rgb), .78);
    --wk-hover-ink: rgba(var(--skin-back-mark-ink-rgb), .98); }