/* Eo Ena-kaart (EOE) — anatomie v2 in warm-bruin (23 jul 2026), 544×770 = 1:√2.
   Voor: rustige kop (titel + nummer-pil) → beeld → wenkbrauw → lede → zegel.
   Achter: zelfde kop; credo/begrippen; identiteitsblok (QR·codon·DNA·Edition).
   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 {
  --type:       #443a30;   /* warm-bruin: rand, titel, tekst, zegel-logo */
  --type-line:  rgba(68,58,48,.3);
  --accent:     #8a6a3a;   /* goud-brons: codon-naam */
  --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:544px; 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; }
@media (prefers-reduced-motion: reduce) { .flip-stage { transition:none; } }

/* ── de kaart: warm randverloop + raster; perkament binnen ── */
.card {
  width:544px; height:770px; position:relative; isolation:isolate;
  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 */
}
/* rand-textuur: linnen-weave (kruisraster) — premium kaartkarton-finish */
.card::before { content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background-image:
    repeating-linear-gradient(0deg,  rgba(0,0,0,.07)      0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay; opacity:.9; pointer-events:none; }
.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. */
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.5),
    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); }
.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; }
.title.small { font-size:24px; }
.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;
  background:#16120f; }
.hero { display:block; width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:saturate(1.04) contrast(1.04); }
/* 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 */
.ident-block { flex:none; margin:0 18px 18px; padding:14px 16px;   /* ondermarge: de back-foot is vervangen door de systeemstrook */
  border:1px solid var(--type-line); border-radius:8px; background:rgba(255,255,255,.4);
  display:grid; grid-template-columns:84px 1fr; gap:16px; align-items:center; }
.ident-block .qr { width:84px; height:84px; display:block; border-radius:4px; }
.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 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); }

/* ── 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 */
.topbanner { position:relative; width:100%; aspect-ratio:3072/512; overflow:hidden; }
.topbanner-img { position:absolute; inset:0; background:center/cover no-repeat; }
.topbanner-brand { position:absolute; top:16px; left:24px; z-index:3; width:38px; height:auto; display:block;
  filter:drop-shadow(0 2px 7px rgba(0,0,0,.4)); }
.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 ── */
@media (max-width:760px){
  .topbanner { aspect-ratio:auto; height:70vh; min-height:460px; }
  .topbanner-img { background-position:18% center; }   /* Eo Ena als coulisse links (gezicht intact), landschap ontsloten */
  /* lichte waas achter de tekst zodat de donkere titel leesbaar blijft over het beeld */
  .topbanner-title { background:radial-gradient(135% 66% at 50% 46%,
      rgba(251,248,245,.7), rgba(251,248,245,.28) 50%, transparent 72%); }
  .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: kaarten passend schalen zodat ze in het scherm passen (geen horizontale scroll) */
@media (max-width:640px){
  .cards-row { gap:26px; padding:36px 12px 64px; }
  .cards-row .flip { zoom:.58; }
}

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