/* Eo Ena — PAGE FRAME (30 sep 2026): body, landing, banner, index, rij en voet. De kaart zelf
   staat in eoena.card.css, afgebakend met .w-eoe. */

/* 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;
}
/* 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; }
}
/* Het raster (schikking grid, 10 okt 2026): dezelfde flex-rij, maar begrensd op `--kolommen` kaarten
   van ware grootte — zelfde rekensom als de Vic-voordeur (.cards-col.cards-grid). De basiskaart
   draagt margin-inline:auto (voor een losse kaart op haar eigen pagina); in de rij eist die auto-marge
   de vrije ruimte op, dus hier uit. */
.cards-row.cards-grid { --kaart:550px; --gap:40px; --rand:24px;
  max-width:calc(var(--kolommen, 3) * var(--kaart) + (var(--kolommen, 3) - 1) * var(--gap) + 2 * var(--rand));
  gap:var(--gap); padding:44px var(--rand) 84px; }
.cards-grid .w-eoe.flip { margin-inline:0; }
@media (max-width:640px) { .cards-row.cards-grid { --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; }
.foot-brand .foot-link { color:inherit; text-decoration:none; border-bottom:1px solid currentColor; }
.foot-brand .foot-link:hover { color:#3a2f22; }
/* 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; }

/* ── Tumble Cards (World TUM) als voordeur: dezelfde galerij, eigen huid (10 okt 2026) ── */
.eoena-gallery.world-tum { --accent:#e2563a; --sysmark:#1f2430; }
.world-tum .tb-mark { background:#1f2430; }
.world-tum .tb-title { font-family:'Sora', system-ui, sans-serif; font-weight:700; letter-spacing:.08em; color:#1f2430; }
.world-tum .tb-curated { color:#5b6170; font-family:'Sora', system-ui, sans-serif; }
.world-tum .tb-rule::before { background:linear-gradient(to left, rgba(226,86,58,.7), transparent); }
.world-tum .tb-rule::after { background:linear-gradient(to right, rgba(226,86,58,.7), transparent); }
.world-tum .tb-lede { font-family:'Sora', system-ui, sans-serif; color:#3e4452; }
/* de titelstapel staat gecentreerd in het vlak BOVEN de boekgolf, niet erachter (gemeten op 1440: de
   lede viel onder de golf); op mobiel is er geen golf en vervalt de ruimte */
.world-tum .topbanner-title { padding-bottom:clamp(28px,4vw,64px); }
.world-tum .tb-title { margin-top:6px; }
.world-tum .tb-curated { margin-top:5px; }
.world-tum .tb-rule { margin:5px auto; }
@media (max-width:760px) { .world-tum .topbanner-title { padding-bottom:12px; } }