/* Eo Ena-kaart (EOE) — anatomie v2 in warm-bruin (23 jul 2026), 550×770 = 5:7.
   Was 544×770 (1:√2); rechtgezet 10 aug 2026 zodat alle drie de etalagefamilies
   dezelfde tradingcard-verhouding hebben — zie
   .ai/DECISIONS/2026-08-10-kaartformaten-tradingcard-en-blad.md
   Voor: rustige kop (titel + nummer-pil) → beeld → wenkbrauw → lede → zegel.
   Achter: zelfde kop; credo/begrippen; colofonregel (codon·DNA·Integrity Check·
   Edition) — zonder QR sinds 10 aug 2026, zie .ident-block.
   Rand + alle donkere elementen delen het warme bruin; perkament naar de
   Stoutenburger-constructie (noise + gloed + verloop). */

/* Jost (Futura-lijn): toekomstig én tijdloos, rustig. Eén familie, roman + italic. */
@font-face { font-family:'Jost'; src:url('../fonts/Jost-Variable.ttf') format('truetype'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:'Jost'; src:url('../fonts/Jost-Italic-Variable.ttf') format('truetype'); font-weight:100 900; font-style:italic; font-display:swap; }
@font-face { font-family:'Cinzel'; src:url('../fonts/Cinzel-Variable.ttf') format('truetype'); font-weight:400 900; font-display:swap; }

: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;
  --type:       #443a30;   /* warm-bruin: rand, titel, tekst, zegel-logo */
  --type-line:  rgba(68,58,48,.3);
  --accent:     #8a6a3a;   /* goud-brons: codon-naam */
  /* systeemteken linksboven: op de donkere kaartgrond moet het goud lichter
     zijn dan het codon-goud, anders verdwijnt het in het bijna-zwart. */
  --sysmark:    #b8945c;
  --cream:      #f2ead6;   /* perkament-basis */
  --paper-top:  #efe6cf;
  --paper-mid:  #f6efdd;
  --paper-blend:#f3ead7;
  --ink:        #786e57;   /* gedempte warme tekst: caps, voet */
  --faint:      #9a9078;
  --serif: 'Jost', system-ui, sans-serif;
  --body:  'Jost', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* iOS text-autosizing uit — anders blaast iPhone-WebKit kleine tekst op na de kaart-schaling */
body {
  margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(1100px 620px at 50% -10%, rgba(136,92,53,.28), rgba(136,92,53,.08) 45%, transparent 65%),
    #1a120a;   /* afgestemd op het EOE-001-portret: amber-gloed (#885c35) op diep warm zwart */
  font-family:var(--body); padding:40px 20px;
}

/* ── flip-podium: hetzelfde mechanisme als alle collecties (card-flip.js) ── */
.flip { position:relative; width:550px; margin-inline:auto; perspective:2100px; touch-action:pan-y;
  -webkit-tap-highlight-color:transparent; }   /* geen grijze iOS-tik-highlight over de klikbare kaart */
.flip-stage { position:relative; width:100%; height:770px;
  transition:transform .85s cubic-bezier(.2,.75,.2,1); transform-style:preserve-3d; }
.flip-pane { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.flip-pane.pane-b { transform:rotateY(180deg); }
.flip-faces { display:none; }
.flip-stage .card { cursor:pointer; }
.flip:focus-visible { outline:3px solid rgba(120,90,50,.55); outline-offset:8px; border-radius:38px; }

/* ── de kaart: warm randverloop + raster; perkament binnen ── */
.card {
  width:550px; height:770px; position:relative; isolation:isolate;   /* 550×770 = 5:7, de tradingcard-verhouding */
  border-radius:34px; padding:16px 16px 0;   /* boven/zijden gelijk; onderrand = sysstrip in de flow */
  display:flex; flex-direction:column;   /* card-inner + sysstrip in de flow → strook schaalt betrouwbaar mee (ook Safari-zoom) */
  /* rand: goud-brons verloop, licht bovenaan → donker onderaan (gesampled uit
     Toms referentiekaart: #cca977 → #8e673d → #70512f — tafellicht van boven) */
  background:#a9855a;   /* fallback */
  background:linear-gradient(180deg, #cca977 0%, #a9855a 48%, #70512f 100%);
  box-shadow:0 20px 42px rgba(0,0,0,.21), 0 3px 8px rgba(0,0,0,.13),
    inset 0 0 0 1px rgba(255,255,255,.22), inset 0 0 18px rgba(60,38,14,.35);   /* buitenschaduw afgezwakt */
}
.card-inner {
  width:100%; flex:1 1 auto; min-height:0; position:relative;
  background:#f8f3e8;   /* lichtere crème-basis (kaart-achtergrond lichter) */
  border-radius:22px; padding:6px;
  /* het lichte effect tussen de gouden rand en de binnenkaderlijn (bewust behouden):
     witte inzet-ring + warme keyline + zachte vignet. */
  /* de zone tussen kaartrand en binnenkaderlijn: DEKKEND, exact dezelfde kleur
     als op de rug — anders kleurt hij mee met wat eronder ligt. */
  box-shadow: inset 0 0 0 4px #ede9e3,
    inset 0 0 0 6px color-mix(in srgb, var(--type) 14%, transparent),
    inset 0 0 40px rgba(120,95,55,.10);
  display:flex; flex-direction:column;
}
/* de oker-parchment (kompas-hoeken) loopt VANAF de binnenkaderlijn naar binnen;
   transparant → oker afgezwakt, het lichte randeffect blijft eromheen zichtbaar. */
.card-inner::after { content:""; position:absolute; inset:6px; z-index:0; pointer-events:none;
  border-radius:16px;
  background:url('../cards/eo-card-background.webp') center / 100% 100% no-repeat;
  opacity:.2; }
.frame { position:relative; z-index:1; height:100%; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }   /* boven de textuur; anker + knipkader voor de decor-laag */

/* ── kop: één rustige regel — titel links, nummer-pil rechts ── */
.head { display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:20px 22px 15px; border-bottom:1px solid rgba(68,58,48,.22); }
/* KAPITALEN ZIJN STIJL, GEEN TITEL. Stond tot 12 aug 2026 als `| upper` in de
   template, waardoor dezelfde kaart op het scherm letterlijk een andere tekst droeg
   dan op haar werkkaart ("CARDS" tegenover "Cards"). De titel is nu overal dezelfde
   string; dat de Eo Ena-huid haar in kapitalen zet is vormgeving, net als het font. */
.title { font-family:var(--body); font-size:28px; font-weight:700; line-height:1; letter-spacing:.02em;   /* origineel gewicht, ~7% kleiner */
  color:var(--type); white-space:nowrap; overflow:hidden; text-transform:uppercase; }
/* De hamburger hoort optisch bij de titelregel. De gedeelde bediening houdt
   bewust een compacte basismaat; Eo Ena gebruikt dezelfde prominente maat en
   lijndikte als Vic, in de warme titelinkt van deze kaartfamilie. */
.card .head .card-tools .tools-tab { width:42px; height:42px; }
.card .head .card-tools .tools-tab svg { width:23px; height:23px; }
.card .head .card-tools .tools-tab svg path { stroke-width:2.3; }
.card:not(.back) .head .card-tools:not(.tools-stil) .tools-tab,
.card:not(.back) .head .card-tools:not(.tools-stil) .tools-tab:hover,
.card:not(.back) .head .card-tools:not(.tools-stil) .tools-tab:focus-visible {
  color:var(--type); }
/* geen .small-variant: de titelgrootte varieert nergens en nooit — te lang is
   een redactieprobleem (titel inkorten), geen vormgevingsprobleem */
.pill { flex:none; font-family:var(--body); font-size:11px; font-weight:700; letter-spacing:.12em;
  color:var(--type); border:2px solid rgba(68,58,48,.5); border-radius:7px; padding:5px 10px 4px;
  background:transparent; }

/* ── voorkant (gedeelde template): beeld in de flow → tekst op de kaart → badge ── */
/* het beeld: iets hoger dan de registerkaart (55% van het kader), boek-contour onderin */
.art { position:relative; z-index:1; flex:0 0 55%; min-height:0; margin:0; overflow:hidden; }
/* DE GOLF IS EEN GAT, GEEN KLEUR (12 aug 2026). De donkere grond staat op de img,
   niet op .art: alleen zo wordt hij mee weggesneden en zie je het echte vlak
   eronder — inclusief de inset-gloed van .card-inner én de kompas-textuur op 20%,
   die een gevulde golf nooit kon reproduceren (gemeten Δ 13 aan de rand).
   Het masker mag NIET op .art staan: dan zou de gouden lijn mee weggeknipt worden. */
.hero { display:block; width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:saturate(1.04) contrast(1.04);
  background:#16120f;
  -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; }
/* de boek-contour (het handelsmerk, 1-op-1 gedeeld met de registerkaart) */
.art-wave { position:absolute; left:0; right:0; bottom:-1px; width:100%; height:56px;
  display:block; pointer-events:none; z-index:4; }

/* tekst gewoon op de kaart — gecentreerd tussen beeld en badge (het aparte
   tekstpaneel met wikkel is vervallen; de kaartachtergrond mét kompas draagt) */
.card-body { position:relative; z-index:1; flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:10px 38px 6px; }
.eyebrow { text-align:center; font:700 12px var(--body); letter-spacing:.28em;
  text-transform:uppercase; color:var(--type); margin-bottom:14px; }
.lede { margin:0; font-family:var(--serif); text-align:center;
  font-size:20px; line-height:1.5; color:var(--type); }
/* de collectie-badge: dunne cirkel met koperen lijn (de kleur van het
   footer-icoon), open — geen schijf meer */
.seal { position:relative; flex:none; margin:0 auto 20px;
  width:64px; height:64px; border-radius:999px; display:grid; place-items:center;
  background:transparent;
  border:1.5px solid var(--accent); }
.seal .g { width:44px; height:44px; background:var(--type);
  -webkit-mask:url('../cards/eoe-logo.png') center/contain no-repeat; mask:url('../cards/eoe-logo.png') center/contain no-repeat; }

/* systeemstrook in de hoge onderrand — zelfde anatomie als de registerkaart */
.sysstrip { position:static; flex:0 0 auto; height:52px;
  z-index:2; pointer-events:none; white-space:nowrap; padding:0 24px 2px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
  font:600 9px/1 var(--body); letter-spacing:.32em; text-transform:uppercase;
  color:rgba(240,232,214,.62);
  text-shadow:0 -1px 0 rgba(30,20,8,.4), 0 1px 0 rgba(255,255,255,.07); }
.sysstrip > span:first-child { justify-self:start; }
.sysstrip > span:last-child  { justify-self:end;
  display:inline-flex; align-items:center; gap:8px; }
.ss-sym { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:26px; font-weight:400; line-height:1; letter-spacing:0;
  position:relative; top:-2.5px; }

/* ── achterkant: credo / begrippen ── */
.back-body { flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center;
  gap:16px; padding:20px 30px; }
.back-credo { text-align:center; font-family:var(--serif); font-style:italic; font-size:27px;
  line-height:1.2; color:var(--type); }
.back-rule { width:40px; height:2px; background:var(--type); opacity:.55; border-radius:2px; align-self:center; }
.back-lead { margin:0; font-family:var(--serif); font-size:14.5px; line-height:1.6; color:var(--type);
  text-align:center; align-self:center; max-width:40ch; }
.back-lead.italic { font-style:italic; font-size:15.5px; }
.back-note { margin:2px auto 0; font-family:var(--serif); font-size:13px; line-height:1.6;
  color:var(--ink); max-width:36ch; text-align:center; }
.back-note .lbl { display:block; margin-bottom:3px; font:700 8.5px var(--body); letter-spacing:.18em;
  text-transform:uppercase; color:var(--type); }
.gloss { display:flex; flex-direction:column; gap:13px; }
.gloss-term { font-family:var(--serif); font-size:15px; font-weight:600; color:var(--type); }
.gloss-def { font-family:var(--serif); font-size:12.5px; line-height:1.45; color:#584e3e; }

/* identiteitsblok: QR → resolver · codon-naam · volledige DNA · Edition */
/* ── de CTA op de achterkant ──────────────────────────────────────────────────
   Zelfde recept als de Vic-tegelknop (gevulde accentknop, label + pijl die
   meebeweegt op hover), maar in goud-brons op perkament. Vol breed, direct boven
   de colofonregel: de laatste handeling vóór de identiteit. */
.back-cta { flex:none; margin:0 18px 14px; display:flex; flex-direction:column;
  align-items:center; gap:7px; text-decoration:none; }
.back-cta .bc-knop { display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; height:46px; border-radius:13px;
  background:var(--accent); color:#f7f1e2;
  font:700 15px/1 var(--body); letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
  transition:filter .18s ease; }
.back-cta .bc-knop .arr { transition:transform .18s ease; }
.back-cta:hover .bc-knop { filter:brightness(1.07); }
.back-cta:hover .bc-knop .arr { transform:translateX(3px); }
.back-cta:focus-visible .bc-knop { outline:2px solid var(--type); outline-offset:3px; }
.back-cta .bc-noot { font-family:var(--serif); font-size:12.5px; line-height:1.4;
  color:var(--ink); text-align:center; }

/* ── colofonregel: de identiteit van de kaart ──────────────────────────────────
   GEEN QR meer (10 aug 2026). De QR is een PAPIER-instrument: `_FIRST` beschrijft
   hem als de weg van een fysieke kaart naar "de levende verschijningsvorm van
   hetzelfde object". Op de digitale kaart wees hij dus naar de pagina waar je al
   stond — en sinds de werkkaart bestaat, draagt díe hem, afgeleid uit de DNA in
   plaats van als handgemaakt plaatje.
   Wat blijft heeft op het scherm wél een taak: het codon als menselijke naam, de
   DNA-code om te kopiëren, en de link naar de Integrity Check. Het blok is daarmee
   een regel geworden in plaats van een vlak, en laat rechts ruimte voor de
   werkkaart-knop (--wk-vrij). */
.ident-block { --wk-vrij:56px;
  flex:none; margin:0 18px 18px; padding:12px 16px;   /* ondermarge: de back-foot is vervangen door de systeemstrook */
  padding-right:calc(16px + var(--wk-vrij));          /* de knop staat ernaast, niet erop */
  border:1px solid var(--type-line); border-radius:8px; background:rgba(255,255,255,.4);
  position:relative; }
/* de werkkaart-knop hangt aan het eind van de regel, verticaal gecentreerd — de
   padding-right hierboven houdt de DNA-code eruit */
.ident-block .wk-dl { top:50%; bottom:auto; right:12px; transform:translateY(-50%); }
.ident-block .wk-dl:hover { transform:translateY(-50%) scale(1.06); }
.id-codon { font-family:var(--serif); font-size:18px; font-weight:600; letter-spacing:.02em; color:var(--accent); }
.id-codon .sep { color:var(--faint); margin:0 5px; }
.id-dna { margin-top:6px; font-family:var(--body); font-size:8.5px; line-height:1.55;
  letter-spacing:.1em; color:var(--faint); word-break:break-all; }
.id-cap { margin-top:8px; display:flex; justify-content:space-between; gap:10px;
  font:600 8.5px var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--ink); }
.id-cap .verify { color:var(--accent); }
.id-cap .verify::after { content:" \2192"; }
.id-cap a { color:inherit; text-decoration:none; }
.id-cap a:hover { text-decoration:underline; }
.back-foot { flex:none; margin-top:12px; padding:12px 22px 16px; border-top:1px solid rgba(68,58,48,.22);
  display:flex; align-items:center; justify-content:space-between;
  font:600 9px var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--ink); }
.back-foot a { color:inherit; text-decoration:none; }

/* Overzichts-mascotte: de gids op de bovenrand van de eerste gallery-kaart
   (positie identiek aan de Stoutenburger register-gallery, register.css:319). */
.gallery-fly { position:absolute; width:88px; height:auto; z-index:6; pointer-events:none;
  filter:drop-shadow(0 3px 5px rgba(40,28,10,.25)); }
.gallery-fly.front-fly { top:-88px; right:50px; width:60px; }   /* 1:1,5 → 90px hoog; voeten óp de rand */
.gallery-fly.back-fly  { top:-84px; left:50px;  width:60px; }   /* de rug, linksboven — spiegel van de voorkant */

/* ── landingspagina: alleen de beeldvullende video-hero op zwart ── */
body.eoena-landing { display:block; padding:0; background:#000; }

/* ── de video-landing (masthead, mh-*): beeldvullende video-hero ── */
.mh { position:relative; width:100%; height:100vh; min-height:640px; overflow:hidden; background:#0b0805; }
.mh-inner { position:relative; width:100%; height:100%; }
.mh-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.mh-scrim { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 62% 46%, rgba(247,240,222,.22), transparent 46%),
    linear-gradient(180deg, rgba(20,15,9,.42) 0%, transparent 22%, transparent 68%, rgba(20,15,9,.6) 100%); }
.mh-brand { position:absolute; top:26px; left:30px; z-index:3; display:flex; align-items:center; gap:11px; }
.mh-seal { width:44px; height:44px; object-fit:cover; opacity:.82; display:block; filter:drop-shadow(0 2px 7px rgba(0,0,0,.45)); }
.mh-brand small { font:600 10px var(--body); letter-spacing:.24em; text-transform:uppercase; color:#f4eedd;
  text-shadow:0 1px 3px rgba(0,0,0,.5); }
.mh-stage { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:40px 24px; transform:translateX(6%); }
.mh-wordmark { width:min(580px,76vw); aspect-ratio:3558/647; display:block;
  background:#120c07;
  -webkit-mask:url('../cards/eo-wordmark.webp') center/contain no-repeat; mask:url('../cards/eo-wordmark.webp') center/contain no-repeat;
  filter:drop-shadow(0 3px 14px rgba(30,22,10,.35)); }
.mh-eyebrow { margin:20px 0 0; font:700 13px var(--body); letter-spacing:.34em; text-transform:uppercase; color:#140f0a; }
.mh-rule { width:132px; height:1px; margin:16px auto 18px; position:relative;
  background:linear-gradient(to right, transparent, rgba(60,48,30,.5), transparent); }
.mh-rule::after { content:""; position:absolute; left:50%; top:50%; width:5px; height:5px;
  background:rgba(153,120,78,.85); transform:translate(-50%,-50%) rotate(45deg); }
.mh-tag { margin:0; font-family:var(--serif); font-style:italic; font-size:22px; line-height:1.5; color:#140f0a;
  text-shadow:0 1px 10px rgba(247,240,222,.4); }
.mh-tag span { display:block; }
.mh-enter { display:inline-block; margin-top:30px; padding:15px 34px 13px;
  font:600 13px var(--body); letter-spacing:.2em; text-transform:uppercase; color:#f0e7d4;
  background:rgba(14,9,5,.88); border:1px solid rgba(153,120,78,.7); border-radius:3px; text-decoration:none;
  box-shadow:0 10px 24px rgba(12,8,3,.42); transition:transform .2s ease, box-shadow .2s ease, background .2s ease; }
.mh-enter:hover { transform:translateY(-2px); background:rgba(8,5,2,.94);
  box-shadow:0 14px 30px rgba(12,8,3,.5), 0 0 0 1px rgba(201,165,78,.5); }
.mh-cue { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:3; text-decoration:none;
  font:600 9px var(--body); letter-spacing:.28em; text-transform:uppercase; color:#f4eedd; opacity:.7; }
@media (max-width:760px){
  .mh-inner { max-width:none; }
  .mh-video { height:100vh; min-height:560px; object-fit:cover; object-position:20% center; }
  .mh-scrim { background:
      radial-gradient(150% 70% at 50% 40%, rgba(247,240,222,.28), transparent 52%),
      linear-gradient(180deg, rgba(20,15,9,.42) 0%, transparent 26%, transparent 64%, rgba(20,15,9,.62) 100%); }
  .mh-stage { transform:none; justify-content:flex-start; padding-top:34vh; }
  .mh-wordmark { width:min(420px,82vw); }
  .mh-tag { font-size:19px; }
  .mh-seal { width:38px; height:38px; object-fit:cover; opacity:.82; }
}

/* ── kaarten-pagina: kalme zwarte tafel; het patroon staat op een vaste laag
   (parallax bij scrollen) met verlaagde opacity → rustiger. ── */
body.eoena-gallery { flex-direction:column; justify-content:flex-start; gap:0; padding:0; align-items:stretch;
  background:#fbf8f5; color:var(--type);
  --sysmark:#8a6a3a;   /* lichte grond → het donkere goud van de voet */
  --site-corner-accent:#000;
  --site-corner-bg:rgba(251,248,245,.20);
  --site-corner-filter:blur(5px) saturate(1.04);
  --banner-glow-rgb:251,248,245;
  --banner-glow-core:.28; --banner-glow-mid:.20; --banner-glow-outer:.08; }

/* ── top-banner: de sfeer-strip, eigen aspect-ratio (geen crop, geen fade) ── */
/* panoramische banner (eo-top-banner2, 6:1) — compacte tekst-stack die
   meeschaalt met de viewport zodat alles binnen de platte balk blijft */
/* De banner op zijn NATUURLIJKE verhouding (Toms uitgangspunt, 8 aug): het
   onbewerkte beeld bepaalt de hoogte, de volle compositie blijft in beeld. De golf
   ligt er als een flauwe rand overheen en dicteert niets meer. */
.topbanner { position:relative; width:100%; aspect-ratio:3072/512; overflow:hidden;
  --spatial-focus-x:.5; --spatial-focus-y:.5; }

.topbanner-img { position:absolute; inset:0; background: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): de compositie van het beeld gaat vóór
   de exacte kaartverhouding. Bescheiden hoogte met een plafond, zodat de rand op
   een breed scherm niet de halve banner opeet. */
.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; }
.topbanner-title { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:12px; }
.tb-mark { width:min(21vw,270px); aspect-ratio:3558/647; display:block; margin:0 auto;
  background:#241d15;   /* het EO ENA-woordmerk (het merk), kleurbaar via mask */
  -webkit-mask:url('../cards/eo-wordmark.webp') center/contain no-repeat; mask:url('../cards/eo-wordmark.webp') center/contain no-repeat; }
.tb-title { margin:10px 0 0; font-family:'Cinzel', Georgia, serif; font-weight:600; font-size:clamp(16px,2vw,26px);
  letter-spacing:.14em; text-transform:uppercase; color:#3a3126; line-height:1; }
.tb-curated { margin:8px 0 0; font:600 clamp(9px,0.85vw,11px)/1 var(--body); letter-spacing:.3em; text-transform:uppercase; color:#6a5a41; }
/* het ornament: compass geflankeerd door uitfadende lijntjes (accent-kleur) */
.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(138,106,58,.7), transparent); }
.tb-rule::after  { background:linear-gradient(to right, rgba(138,106,58,.7), transparent); }
.tb-compass { flex:none; width:18px; height:18px; background:var(--accent);
  -webkit-mask:url('../cards/compass.png') center/contain no-repeat; mask:url('../cards/compass.png') center/contain no-repeat; }
.tb-lede { margin:0; font-family:var(--serif); font-size:clamp(12px,1.2vw,15px); line-height:1.65; color:#4a4030; }

/* ── mobiel: niet de hele (platte) banner, maar een hoge banner met een uitsnede
   (cover, Eo Ena in beeld) — net als de video-pagina ── */
/* TABLET (≤1100px): de vlakke 6:1-strip wordt te laag voor de titelstapel — gemeten
   liep die bij 834px al 10px over de banner heen. Vaste hoogte i.p.v. verhouding, en
   het beeld iets naar links zodat Eo Ena in de krappere uitsnede blijft. */
@media (max-width:1100px){
  .topbanner { aspect-ratio:auto; height:30vh; min-height:250px; --spatial-focus-x:0; }
  @supports (height:1svh) { .topbanner { height:30svh; } }
  .topbanner-img { background-position:0% center; }
  .tb-mark { width:min(260px,42vw); }
}

@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:70vh; min-height:460px; --spatial-focus-x:.18; }
  @supports (height:1svh) { .topbanner { height:70svh; } }
  .topbanner-img { background-position:18% center; }   /* Eo Ena als coulisse links (gezicht intact), landschap ontsloten */
  .tb-mark { width:min(300px,72vw); }
  .tb-lede { font-size:15px; }
}

/* ── index-sectie (op wit) ── */
.index { max-width:1240px; margin:0 auto; padding:52px 24px 8px; text-align:center; }
.index-eyebrow { margin:0; font:700 15px var(--body); letter-spacing:.34em; text-transform:uppercase; color:var(--accent); }
.index-title { margin:12px 0 0; font-family:var(--body); font-weight:700; font-size:34px; letter-spacing:.06em;
  text-transform:uppercase; color:#241d15; }
.index-sub { margin:12px 0 0; font-family:var(--serif); font-size:16px; line-height:1.6; color:#5a4f3c; }

/* ── de vier kaarten op een rij, WARE GROOTTE; wrapt responsive naar minder per rij ── */
.cards-row { display:flex; flex-wrap:wrap; justify-content:center; gap:40px;
  margin:0 auto; padding:44px 24px 84px; }
/* Mobiel behoudt dezelfde 550px-grondmaat; card-flip.js schaalt alleen wanneer
   de beschikbare viewport werkelijk kleiner is. Geen aparte tussenzoom. */
@media (max-width:640px){
  .cards-row { gap:26px; padding:36px 12px 64px; }
}

/* ── footer: gecentreerd, met gouden kompas boven de twee regels ── */
.home-foot { border-top:1px solid rgba(90,70,40,.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; }
.foot-compass { width:38px; aspect-ratio:442/582; display:block;
  background:var(--accent);   /* eo-magic in goud (mask) */
  -webkit-mask:url('../cards/eo-magic.webp') center/contain no-repeat; mask:url('../cards/eo-magic.webp') center/contain no-repeat; }
.foot-brand { font:600 11px var(--body); letter-spacing:.14em; text-transform:uppercase; color:#6a5a41; line-height:1.9; }
.foot-brand span { color:#9a8a6c; letter-spacing:.08em; }


/* 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; }

/* ══ 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. */

.card.back .card-inner { background:#70512f;   /* het diepe randbruin — de wereld als veld */
  /* DE ZONE TUSSEN KAARTRAND EN BINNENKADERLIJN (20 aug 2026): aan beide zijden
     dezelfde kleur. De ring stond hier op .12 wit — half doorzichtig, dus hij
     kleurde mee met het bruine veld eronder: gemeten #866E54 op de rug tegen
     #EDE9E3 op de voorkant. Dekkend maken is de enige sluitende vorm. */
  /* zone = veld + 40% wit (blijft bruin); lijn = haar kleur van vóór deze
     ingreep, rgba(242,234,214,.10) over #70512f, vooraf uitgerekend.
     Beide DEKKEND: geen verloop over dit gebied. */
  box-shadow: inset 0 0 0 4px #a99782,
    inset 0 0 0 6px #7d6040; }
.card.back .card-inner::after { opacity:0; }   /* de perkament-textuur hoort bij het lichte veld */
.card.back .frame::before { content:""; position:absolute; top:calc(50% + 18px); left:50%;
  transform:translate(-50%,-50%); width:78%; aspect-ratio:1; z-index:0; pointer-events:none;
  background:rgba(240,232,214,.06);
  -webkit-mask:url('../cards/eo-compass.webp') center/contain no-repeat;
          mask:url('../cards/eo-compass.webp') center/contain no-repeat; }
.card.back .head { border-bottom-color:rgba(240,232,214,.28); }
.card.back .title, .card.back .back-credo, .card.back .gloss-term { color:#f2ead6; }
.card.back .pill { color:#f2ead6; border-color:rgba(240,232,214,.5); }
.card.back .back-rule { background:rgba(240,232,214,.6); }
.card.back .back-lead { color:rgba(242,234,214,.92); }
.card.back .gloss-def, .card.back .gloss-row { color:rgba(242,234,214,.92); }
.card.back .back-note { color:rgba(242,234,214,.88); }
.card.back .back-note .lbl { color:rgba(242,234,214,.78); }
/* de paspoortzijde: de codon/DNA-module wint juist op het donkere veld */
.card.back .ident-block { background:rgba(0,0,0,.14); border-color:rgba(240,232,214,.22); }
.card.back .id-codon { color:#d9b982; }
.card.back .id-dna { color:rgba(242,234,214,.66); }
.card.back .id-cap, .card.back .id-cap a, .card.back .verify { color:rgba(242,234,214,.78); }
.card.back .back-cta .bc-knop { background:#f2ead6; color:#70512f; }
.card.back .bc-noot { color:rgba(242,234,214,.78); }