/* 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. */
    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. */
.w-vic,
.w-vic {
    --vel-ink: #123c42;
    --vel-ink-rgb: 18,60,66;
    --vel-dash: rgba(18,60,66,.40);
    --vel-secondary: rgba(18,60,66,.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(46,120,130,.6); outline-offset: 8px; border-radius: 30px; }
/* ════════════ 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: #7ec1c7; --gr-b: #609ea6; --gr-c: #366b74; --on: #1c6d76;
    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: 0 22px 2px;
    font: 600 8px/1 var(--body); letter-spacing: .22em; text-transform: uppercase;
    color: rgba(236,244,246,.66);   /* ivoor, contrast op de diepe rand-onderkant */
    text-shadow: 0 -1px 0 rgba(8,20,30,.42), 0 1px 0 rgba(255,255,255,.06); }
.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: 7px; }
/* de flip-glyph (rond pijltje) naast TURN — non-serif, optisch op kapitaalhoogte */
.w-vic .ss-sym { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 21px; font-weight: 400; line-height: 1; letter-spacing: 0;
    position: relative; top: -2px; }
/* ── het lichte vlak (perkament) — identiek aan register.css ── */
.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:
      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(120,80,50,.05) 0%, rgba(120,80,50,.03) 40%, rgba(0,0,0,0) 80%),
      radial-gradient(600px 160px at -80px -40px, rgba(120,80,50,.05), rgba(0,0,0,0) 70%),
      radial-gradient(600px 160px at calc(100% + 80px) -40px, rgba(120,80,50,.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);
    background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    /* binnenkaderlijn: witte inzet-ring + subtiele keyline in de rubriek-tint */
    /* de zone tussen kaartrand en binnenkaderlijn: DEKKEND, exact dezelfde kleur
       als op de rug. Half-transparant kleurde hij mee met het papierverloop
       eronder (gemeten #EBE9E3 boven, #ECEAE5 onder) — klein, maar het maakt de
       regel toevallig in plaats van afdwingbaar. */
    box-shadow: inset 0 0 0 4px #ebe9e5,
      inset 0 0 0 6px rgba(var(--base-rgb), .16),
      inset 0 0 40px rgba(60,95,110,.10); }
.w-vic .frame { position: relative; 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. */
.w-vic .head { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 20px 22px 15px; border-bottom: 1.5px solid rgba(var(--base-rgb), .28); }
.w-vic .head-title { margin: 0; font-family: var(--body); font-weight: 700; font-size: 28px; line-height: 1.25;
    letter-spacing: -.02em; color: #20201e; 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.vic .head .card-tools .tools-tab { width: 42px; height: 42px; }
.w-vic .card.vic .head .card-tools .tools-tab svg { width: 23px; height: 23px; }
.w-vic .card.vic .head .card-tools .tools-tab svg path { stroke-width: 2.3; }
.w-vic .card.vic:not(.back) .head .card-tools:not(.tools-stil) .tools-tab {
    color: var(--cta, #1d8f9c); }
.w-vic .card.vic:not(.back) .head .card-tools:not(.tools-stil) .tools-tab:hover,
.w-vic .card.vic:not(.back) .head .card-tools:not(.tools-stil) .tools-tab:focus-visible {
    color: var(--cta, #1d8f9c); }
/* 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: 600; letter-spacing: .06em; color: #2c2620;
    border: 2px solid var(--gr-a); border-radius: 7px; padding: 5px 9px 4px;
    background: transparent; white-space: nowrap; }
/* ════════════ het beeld (55%) + boek-contour handelsmerk ════════════ */
.w-vic .art { position: relative; z-index: 2; flex: 0 0 55%; min-height: 0; margin: 0; overflow: hidden; }
.w-vic .art-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 56px;
    display: block; pointer-events: none; z-index: 4; }
/* DE GOLF IS EEN GAT, GEEN KLEUR (12 aug 2026) — zie register.css voor het waarom.
     De donkere grond verhuist mee naar de img, zodat hij wordt weggesneden. */
.w-vic .art > img,
.w-vic .art > video,
.w-vic .art .vignette {
    -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 > img,
.w-vic .art > video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block;
    /* 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. */
    background: #12171a; }
/* 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: #123c42; background: rgba(249,245,239,.68);
    box-shadow: 0 1px 0 rgba(18,60,66,.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(249,245,239,.92); }
.w-vic .art-video-toggle:focus-visible { outline: 2px solid #1d8f9c; 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: 0 0 3px; border-bottom: 1px solid currentColor;
    font: 600 11px/1 var(--body); letter-spacing: .045em; text-transform: uppercase;
    color: #123c42; pointer-events: none; }
/* ════════════ tekstvlak ════════════ vaste Vic-vorm: links gezet, gelijke
     zijmarges en bewust ademruimte tussen boekpunt en boodschap. */
.w-vic .lede { position: relative; z-index: 3; flex: 1 1 auto;
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    margin: -22px 32px 0; padding: 28px 0 4px; 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: none; font-family: var(--body); font-size: 13px;
    line-height: 1.45; letter-spacing: 0; color: #33302b; text-align: left; }
/* 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, #2a2520);
    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. */
.w-vic .card.back .mid { position: relative; z-index: 3; flex: 1 1 auto; min-height: 0;
    display: grid; grid-template-rows: minmax(0, 1fr) auto;
    /* 76px onderruimte houdt de vaste CTA-zône vrij van het downloadteken dat
       rechtsonder in hetzelfde frame woont. */
    padding: 24px 20px 76px; }
/* Meerdere routes blijven aan de onderrand verankerd. Voor één primaire route
     volgt de compositie de onderste derdelijn: het hart van de CTA ligt op 1/3
     van de beschikbare ruimte, omhoog gemeten vanaf de onderste binnenkaderlijn.
     De bovenste 2/3 blijft zo beschikbaar voor eventuele rugtekst. */
.w-vic .card.back .back-actions { align-self: end; width: 100%; }
.w-vic .card.back .mid.alleen-ctas .back-actions { grid-row: 2; }
/* De .mid zelf is een flexibel inhoudsvlak en daarom geen betrouwbare
     meetlat voor een absolute derdelijn. Door haar voor deze variant statisch
     te maken, meet de CTA aan de echte .frame: 33,333% van de framehoogte min
     een derde van de vaste 79px-kop = exact 1/3 van het vrije vlak onder de kop. */
.w-vic .card.back .mid.enkele-cta { position: static; }
/* De World-kaart gaf de referentie: een rustige gecentreerde samenvatting. Het
     label verklaart haar functie; een losse lijn zonder twee te scheiden delen
     zou hier toevallig zijn. De CTA blijft het duidelijke, zwaardere eindpunt. */
.w-vic .card.back .mid.enkele-cta.heeft-samenvatting { grid-template-rows: 2fr 1fr; }
.w-vic .card.back .back-summary { grid-row: 1; align-self: center; justify-self: center;
    width: 100%; max-width: 34ch; text-align: center; color: rgba(240,246,245,.80); }
.w-vic .card.back .back-summary-label { display: block; margin: 0 0 16px;
    font: 600 9px/1.2 var(--body); letter-spacing: .22em; text-transform: uppercase;
    color: rgba(185,232,235,.72); }
.w-vic .card.back .back-summary-title { display: block; margin: 0 0 10px;
    font: 700 17px/1.3 var(--body); color: #f0f6f5; }
.w-vic .card.back .back-summary p { margin: 0; font: 400 14px/1.58 var(--body); }
.w-vic .card.back .mid.enkele-cta .back-actions { position: absolute;
    bottom: calc(33.3333% - 26.3333px); left: 20px; right: 20px; width: auto;
    transform: translateY(50%); }
.w-vic .card.back .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* oneven aantal (3 tegels): de losse laatste centreert op halve breedte */
.w-vic .card.back .tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
.w-vic .card.back .tile { background: rgba(18,60,66,.18);
    border: 1px solid rgba(220,241,241,.24); border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    display: flex; flex-direction: column; align-items: center; text-align: center;
    text-decoration: none; color: inherit; cursor: pointer;
    padding: 18px 12px 16px; gap: 11px;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease; }
.w-vic .card.back .tile:hover { background: rgba(18,60,66,.30);
    border-color: rgba(125,211,217,.66); transform: translateY(-1px); }
.w-vic .card.back .tile:focus-visible { outline: 3px solid rgba(125,211,217,.72); outline-offset: 3px; }
.w-vic .card.back .tile-badge { width: 60px; height: 60px; border-radius: 999px; flex: 0 0 auto;
    display: grid; place-items: center; background: transparent;
    border: 1.5px solid rgba(163,226,231,.82); box-shadow: none; }
.w-vic .card.back .tile-badge .ico { width: 56%; height: 56%; background-color: #b9e8eb;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain; }
/* De aangeleverde tweebladen-Stack blijft het icoon. De gebruikte kopie heeft
     transparante binnenmarge; 40px omvat die marge en houdt het getekende deel
     optisch even groot, terwijl geen lijn nog op een halve canvaspixel valt. */
.w-vic .card.back .tile-jumbo .tile-badge,
.w-vic .card.back .tile-product .tile-badge,
.w-vic .card.back .tile-mail .tile-badge,
.w-vic .card.back .tile-download .tile-badge { width:auto; height:auto;
    border:0; border-radius:0; background:none; box-shadow:none; }
.w-vic .card.back .tile-jumbo .tile-badge .ico { width:44px; height:54px;
    -webkit-mask-size:40px auto; mask-size:40px auto; }
.w-vic .card.back .tile-product .tile-badge .ico { width:44px; height:54px;
    -webkit-mask-size:38px auto; mask-size:38px auto; }
.w-vic .card.back .tile-mail .tile-badge .cta-mail-icon { display:block;
    width:44px; height:54px; color:#b9e8eb; background:none; border:0;
    border-radius:0; box-shadow:none; }
/* De Markdown-download herhaalt bewust het PDF-symbool rechtsonder: een pijl
     naar een lijn, zonder medaillon. Hij krijgt exact de Jumbo-CTA-maat.
     De SVG draagt daarom een strakke viewBox (3 2 18 18) om het pad heen, zodat
     de tekening deze doos vult zoals de Jumbo-stack dat doet; de lijndikte staat
     in de macro op 0.9 zodat zij na die schaling optisch even fijn blijft. */
.w-vic .card.back .tile-download .tile-badge .cta-download-icon { display:block;
    width:44px; height:54px; color:#b9e8eb; background:none; border:0;
    border-radius:0; box-shadow:none; }
.w-vic .card.back .tile-name { font: 600 15px/1 var(--body); color: #f0f6f5; }
.w-vic .card.back .tile-btn { margin-top: 3px; display: flex; align-items: center; justify-content: center; gap: 7px;
    width: auto; height: auto; padding: 3px 0;
    font: 600 12px/1 var(--body); letter-spacing: .08em;
    background: transparent; color: #b9e8eb; border: 0; }
.w-vic .card.back .tile-btn .arr { transition: transform .18s ease; }
.w-vic .card.back .tile:hover .tile-btn .arr { transform: translateX(3px); }
/* ── 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.vic.markback .inner { background: var(--gr-c);
    box-shadow: inset 0 0 0 4px #86a6ac, inset 0 0 0 6px #3f6b73; }
/* 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.vic.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(240,244,244,.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. */
.w-vic .card.vic.back .inner { background: var(--gr-c);   /* het diepe merk-cyaan als veld */
    /* DE ZONE TUSSEN KAARTRAND EN BINNENKADERLIJN (20 aug 2026): die moet aan
       beide zijden dezelfde kleur hebben. De ring stond hier op .5 wit — dus
       wél aanwezig, maar half doorzichtig, en dus kleurde hij mee met het veld
       eronder: gemeten #9FB5B9 op de rug tegen #EBE9E5 op de voorkant. Vandaar
       dat de correctie steeds "terugkwam". Een dekkende kleur is de enige
       sluitende vorm; de keyline blijft de lijn zelf. */
    /* zone = veld + 40% wit (blijft cyaan, dus de opstaande rand van hetzelfde
       vlak); lijn = haar kleur van vóór deze ingreep, rgba(108,108,108,.16) over
       #366b74, vooraf uitgerekend. Beide DEKKEND: geen verloop over dit gebied. */
    box-shadow: inset 0 0 0 4px #86a6ac,
      inset 0 0 0 6px #3f6b73; }
.w-vic .card.vic.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(240,244,244,.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.vic.back .head { z-index:7; border-bottom-color:rgba(240,244,244,.28); }
.w-vic .card.vic.back .head-title { color:#f0f6f5; }
.w-vic .card.vic.back .pill { color:#f0f6f5; border-color:rgba(220,241,241,.24); }