/* Instructiedek — verticale stapel individueel flipbare A5-kaarten (770×1089).
   Bron-vormgeving: vicboomer-templates instruction-card-intro / -cover / -materials /
   -step-compact (voorkant) / -step-back (achterkant). Zelfstandig stylesheet: eigen
   fonts + flip-mechanica; register.css wordt op dekpagina's níet geladen.
   Conventie: elke color-mix() met een effen fallback ervóór (oude Safari). */

/* ── Site-fonts ── */
@font-face { font-family: "Lora"; src: url("../fonts/Lora-Variable.ttf") format("truetype");
  font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/Lora-Italic-Variable.ttf") format("truetype");
  font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/EBGaramond-latin.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap; }

:root {
  --ink: #2a2520; --muted: #8a8077;
  --gold: #a8905a;
  --paper:     #f9f5ef;
  --paper-top: #f7f0e2;
  --paper-mid: #fdf9f3;
  --paper-blend: #faf5eb;
  --paper-blend: color-mix(in srgb, var(--paper-top) 50%, var(--paper-mid) 50%);
  --graphite: #3a352e;
  --tier-basic: #2e6b46;
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --body:  "EB Garamond", Georgia, serif;
  --chrome: "EB Garamond", Georgia, serif;

  /* Verticaal budget stapkaart (van 1061px binnenruimte, template -step-compact):
     header · foto 46% · stapblok · let-op · footer */
  --h-head:    184px;
  --h-art:     456px;
  --h-step:    140px;
  --h-note:    85px;
  --h-foot:    64px;
  --h-backhead: 152px;
}
* { 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.stack-page {
  margin: 0; min-height: 100vh; padding: 40px 16px 64px;
  color: var(--ink); font-family: var(--body);
  background: #fbf8f5;   /* bijna-witte pagina-achtergrond, gelijk aan eoena.com */
  overflow-x: hidden;
}

/* ── Paginakop: zelfde taal als het register-overzicht (Klik en Flip) ── */
.gallery-head { text-align: center; max-width: 770px; margin: 6px auto 34px; }
.gallery-head h1 { font-family: var(--body); font-weight: 600; font-size: 22px; color: #9a8a6f; margin: 0;
  letter-spacing: .22em; text-transform: uppercase; }
.gallery-head p { font-family: var(--body); font-size: 13px; color: #6b6258; margin: 9px 0 0;
  letter-spacing: .22em; text-transform: uppercase; }

/* ── Stapel: kaarten onder elkaar ── */
.card-stack { display: flex; flex-direction: column; align-items: center; gap: 44px; }

/* ── Eo Ena op de bovenste kaart — register-recept, ×1,4 geschaald naar de A5-maat
   (550→770). Reist mee met de face; voorkant rechts, achterkant links op de rand. ── */
.gallery-fly { position: absolute; width: 76px; height: auto; z-index: 6; pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(40,28,10,.25)); }
.gallery-fly.front-fly { top: -87px; right: 70px; }
.gallery-fly.back-fly  { top: -87px; left: 70px; }

/* ── Flip-mechanica (card-flip.js): podium met twee vlakken, A5-maat ── */
.ins-flip { position: relative; width: 770px; margin-inline: auto;
  perspective: 2600px; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }   /* geen grijze iOS-tik-highlight */
.ins-flip .flip-stage { position: relative; width: 100%; height: 1089px;
  transition: transform .85s cubic-bezier(.2,.75,.2,1); transform-style: preserve-3d; }
.ins-flip .flip-pane { position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ins-flip .flip-pane.pane-b { transform: rotateY(180deg); }
.ins-flip .flip-faces { display: none; }
.ins-flip .flip-stage .card { cursor: pointer; }
.ins-flip:focus-visible { outline: 3px solid rgba(120,90,50,.6); outline-offset: 8px; border-radius: 34px; }
@media (prefers-reduced-motion: reduce) { .ins-flip .flip-stage { transition: none; } }

/* ══ KAARTFRAME — A5, register-recept ══ */
/* Gelaagde opbouw, exact als de register-kaart: rand-vlak (build-time gradient
   via geïnjecteerde --gr-a/b/c) → licht vlak (.inner) → sysstrook in de
   verhoogde onderrand. Geen color-mix (iPad/WebKit-proof). */
.ins-card {
  width: 770px; height: 1089px;
  --rule: rgba(var(--base-rgb), .32);
  border-radius: 34px; padding: 16px 16px 0; position: relative; isolation: isolate;
  display: flex; flex-direction: column;   /* inner + sysstrip in de flow */
  background: var(--base);   /* ultra-fallback */
  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 */
}
/* rand-textuur: linnen-weave (kruisraster) — premium kaartkarton-finish */
.ins-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; }
/* Achterkant: zachtere randtint wordt via insStyleBack in --gr-a/b/c geïnjecteerd;
   de basisregel hierboven rendert 'm. Geen aparte override nodig. */

.ins-card .inner {
  position: relative; overflow: hidden; border-radius: 22px;
  flex: 1 1 auto; min-height: 0; 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%),
    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);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.5),
              inset 0 0 0 6px rgba(var(--base-rgb), .14),
              inset 0 0 40px rgba(120,95,55,.10);
}

/* systeemstrook in de verhoogde onderrand — A5-maat (×1,4 t.o.v. register 550) */
.ins-card .sysstrip { position: static; flex: 0 0 auto; height: 72px; z-index: 2;
  pointer-events: none; white-space: nowrap;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 0 34px 3px;
  font: 600 12px/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); }
.ins-card .sysstrip > span:first-child { justify-self: start; }
.ins-card .sysstrip > span:last-child { justify-self: end; display: inline-flex; align-items: center; gap: 10px; }
.ins-card .sysstrip .ss-sym { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 34px; font-weight: 400; line-height: 1; letter-spacing: 0; position: relative; top: -3px; }

/* ── S.B.A.-watermerk (achterkanten) ── */
.watermark {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -46%);
  width: 380px; height: 380px; opacity: .06; z-index: 1;
  filter: sepia(.25) saturate(.85);
  pointer-events: none;
}

/* ══ KOPPEN ══ */

/* Glyph-kop (cover, materialen, eindkaart) */
.head-glyph {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: 92px 1fr auto; gap: 14px;
  align-items: start; padding: 28px 30px 14px 26px;
}
.badge-glyph {
  position: relative; width: 92px; height: 92px; margin-left: 4px; border-radius: 999px;
  display: grid; place-items: center;
  background: #4a5d6e;
  background: radial-gradient(circle at 34% 22%, rgba(255,255,255,.16), transparent 40%),
              color-mix(in srgb, var(--base) 78%, #6b675c);
  border: 7px solid #f7f1e6;
  box-shadow: 0 1px 3px rgba(60,45,20,.16), inset 0 0 0 1px rgba(255,255,255,.14);
}
.badge-glyph .glyph {
  width: 54px; height: 54px; background-color: #ecdcb0;
  -webkit-mask: center / contain no-repeat;
          mask: center / contain no-repeat;
}
.head-glyph .title { padding-top: 8px; }

/* Stap-kop (stapkaarten, achterkanten): headrow + badge = nummer-cirkel */
.head-step {
  position: relative; z-index: 3; flex: 0 0 auto;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px 30px 0 26px;
}
.head-step .headrow { display: grid; grid-template-columns: 92px 1fr auto; align-items: center;
  gap: 14px; padding-bottom: 14px; }
.badge-step {
  position: relative;
  width: 92px; height: 92px; margin-left: 4px;
  display: grid; place-items: center;
}
.badge-step::before { content: ""; position: absolute; inset: 7px;
  border: 2.5px solid var(--base); border-radius: 50%; }
.badge-step .stepno {
  font-family: var(--serif); font-weight: 600; font-size: 46px; line-height: 1;
  color: var(--base); transform: translateY(-1px);
}
.badge-step .glyph {
  width: 50px; height: 50px; background-color: var(--base);
  -webkit-mask: center / contain no-repeat;
          mask: center / contain no-repeat;
}

/* Gedeelde kop-onderdelen */
.ins-card .title { min-width: 0; text-align: center; }
.ins-card .title h1 { margin: 0; font-family: var(--body); font-weight: 700;
  font-size: 40px; line-height: 1.05; letter-spacing: -.005em; color: #251f1b; white-space: nowrap; }
.ins-card .title p { margin: 7px 0 0; font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 20px; line-height: 1; color: #4a423a; }
.ins-card .num { padding-left: 16px; border-left: 1px solid rgba(0,0,0,.18); text-align: right; }
.head-glyph .num { padding-top: 7px; }
.ins-card .num strong { display: block; font-family: var(--serif); font-weight: 600; font-size: 21px;
  letter-spacing: .02em; color: #2c2620; white-space: nowrap; }
.ins-card .num span { display: block; margin-top: 8px; font: 600 11px/1.5 var(--body); letter-spacing: .14em;
  color: var(--muted); text-transform: uppercase; }

/* Achterkant-kop: alles in de frame-tint, afgesloten met één lijn */
.head-back .badge-step::before { border-color: var(--frame-tone); }
.head-back .stepno { color: var(--frame-tone); }
.head-back .badge-step .glyph { background-color: var(--frame-tone); }
.head-back .title h1, .head-back .title p, .head-back .num strong { color: var(--frame-tone); }
.head-back .headclose { border-top: 1px solid var(--rule); }
.head-back { flex: 0 0 var(--h-backhead); }

/* ── Identiteitsstrip ── */
.instrip {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 14px;
  margin: 4px 32px 0; padding: 10px 4px 11px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font-family: var(--chrome); font-weight: 600; font-size: 13.5px;
  letter-spacing: .17em; text-transform: uppercase;
  color: #1a3346;
  color: color-mix(in srgb, var(--base), #000 15%);
}
.head-step + .instrip { margin-top: 0; }
.instrip .kind { font-weight: 700; letter-spacing: .26em; white-space: nowrap; }
.instrip .codons { color: var(--muted); letter-spacing: .13em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.instrip .tier { border: 1px solid var(--tier-basic); color: var(--tier-basic);
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  padding: 2.5px 8px 2px; border-radius: 3px; white-space: nowrap; }
.instrip .cardpos { margin-left: auto; font-weight: 700; letter-spacing: .19em; white-space: nowrap; }

/* ══ CONTENTBLOKKEN ══ */

/* Instructiefoto (stap: 46%-vlak) en hero (cover) */
.art {
  border: 1.5px solid var(--base); border-radius: 8px;
  background: linear-gradient(180deg, #f7f2e6 0%, #f1ead8 100%);
  box-shadow: inset 0 0 0 1px rgba(168,144,90,.28);
  overflow: hidden; position: relative; z-index: 2; margin-block: 0;
}
.art-step { margin: 12px 26px 0; flex: 0 0 var(--h-art); }
.art-step > img { position: absolute; inset: 4%; width: 92%; height: 92%; object-fit: contain;
  filter: grayscale(1) contrast(1.02) brightness(1.04); mix-blend-mode: multiply; }
.art-hero { margin: 20px 32px 0; flex: 0 0 470px; display: grid; place-items: center; }
.art-hero img.hero { width: 92%; height: 92%; object-fit: contain;
  filter: grayscale(1) contrast(1.02) brightness(1.04); mix-blend-mode: multiply; }

/* Eo Ena's begroeting (cover) */
.greeting {
  display: flex; align-items: center; gap: 30px;
  margin: 0 48px; position: relative; z-index: 3;
  flex: 1; min-height: 0;
}
.greeting .eo { flex: 0 0 128px; width: 128px; }
.greeting .eo img { width: 100%; display: block; }
.greeting blockquote {
  margin: 0; flex: 1; min-width: 0;
  font-family: var(--serif); font-style: italic;
  font-size: 24px; line-height: 1.5; color: #45403a;
}
.greeting blockquote .who {
  display: block; margin-top: 7px;
  font-family: var(--chrome); font-style: normal; font-weight: 600;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}

/* Stapblok (voorkant): titel + dubbele lijn + tekst */
.step { flex: 0 0 auto; display: flex; align-items: flex-start;
  margin: 0 26px; padding-top: 18px; position: relative; z-index: 3; }
.steptext { flex: 1; min-width: 0; }
.steptext h2 { margin: 0; font-family: var(--chrome); font-weight: 700;
  font-size: 29px; letter-spacing: .07em; text-transform: uppercase; line-height: 1.1;
  color: #1a3346;
  color: color-mix(in srgb, var(--base), #000 15%); }
.steptext .titlerule { height: 7px; margin: 7px 0 10px;
  border-top: 2px solid var(--base); border-bottom: 1px solid var(--base); }
.steptext p { margin: 0; font-family: var(--body); font-size: 19.5px; line-height: 1.48; color: var(--graphite); }

/* Let op / tip-balk (voorkant stap) */
.notebar { flex: 0 0 auto; min-height: var(--h-note); display: flex; align-items: center; gap: 12px;
  margin: 14px 26px 0; padding: 10px 16px; position: relative; z-index: 3;
  border: 1px dashed rgba(31,60,82,.35);
  border: 1px dashed color-mix(in srgb, var(--base) 35%, transparent);
  border-radius: 6px; }
.notebar .nb-head { display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  font-family: var(--chrome); font-weight: 700; font-size: 12.5px; letter-spacing: .2em;
  text-transform: uppercase;
  color: #1a3346;
  color: color-mix(in srgb, var(--base), #000 15%); }
.notebar .nb-head svg { width: 18px; height: 18px; }
.notebar p { margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.4; color: var(--graphite); }

/* Sectiekop: icoon · titel · dubbele lijn */
.sheet-title { display: flex; align-items: center; gap: 16px; margin: 26px 32px 0;
  position: relative; z-index: 3; }
.sheet-title .ic { width: 44px; height: 44px; flex: 0 0 44px; background-color: var(--base);
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.sheet-title .ic-svg { width: 34px; height: 34px; flex: 0 0 34px; color: var(--base); }
.sheet-title .ic-svg svg { width: 100%; height: 100%; display: block; }
.sheet-title h2 { margin: 0; font-family: var(--chrome); font-weight: 700;
  font-size: 28px; letter-spacing: .08em; text-transform: uppercase;
  color: #1a3346;
  color: color-mix(in srgb, var(--base), #000 15%); }
.sheet-title .rule { flex: 1; height: 7px;
  border-top: 2px solid var(--base); border-bottom: 1px solid var(--base); }

/* Materiaal-/gereedschapsrijen met stippellijn-leader */
.matlist { margin: 10px 32px 0; position: relative; z-index: 3; }
.mrow { display: flex; align-items: baseline; gap: 12px;
  padding: 8px 2px; text-decoration: none; color: var(--graphite); }
.mrow + .mrow { border-top: 1px dashed rgba(31,60,82,.18);
  border-top: 1px dashed color-mix(in srgb, var(--base) 18%, transparent); }
.mrow .mname { font-family: var(--body); font-weight: 600; font-size: 19px; white-space: nowrap; }
.mrow .mspec { font-family: var(--body); font-size: 17px; color: #6a6157; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow .lead { flex: 1; min-width: 16px;
  border-bottom: 2px dotted rgba(31,60,82,.30);
  border-bottom: 2px dotted color-mix(in srgb, var(--base) 30%, transparent);
  transform: translateY(-4px); }
.mrow .buy { font-family: var(--chrome); font-weight: 700; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: var(--base); }
.mrow .buy .arr { font-size: 14px; }
a.mrow:hover .mname { text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(31,60,82,.45);
  text-decoration-color: color-mix(in srgb, var(--base) 45%, transparent); }
.mrow.plain .buy { visibility: hidden; }

.aff-note { margin: auto 32px 0; padding-top: 12px; position: relative; z-index: 3;
  font-family: var(--body); font-size: 13.5px; font-style: italic;
  color: var(--muted); text-align: center; }
.aff-note + .colophon { margin-top: 0; }

/* Waarom zo (achterkant stap) */
.why { margin: 14px 32px 0; position: relative; z-index: 3; }
.why p { margin: 0 0 12px; font-family: var(--body); font-size: 19.5px; line-height: 1.55; color: var(--graphite); }
.why p:last-child { margin-bottom: 0; }

/* Probleem → herstel / controleer / veiligheid-rijen */
.fixes { margin: 12px 32px 0; position: relative; z-index: 3; }
.fixes .fx { display: flex; gap: 12px; align-items: baseline; padding: 9px 2px; }
.fixes .fx + .fx { border-top: 1px dashed rgba(31,60,82,.18);
  border-top: 1px dashed color-mix(in srgb, var(--base) 18%, transparent); }
.fixes .fx::before { content: "→"; color: var(--base); flex: 0 0 auto;
  font-family: var(--body); font-size: 18px; }
.fixes .fx p { margin: 0; font-family: var(--body); font-size: 17.5px; line-height: 1.45; color: var(--graphite); }
.fixes .fx p strong { font-weight: 700;
  color: #16293a;
  color: color-mix(in srgb, var(--base), #000 20%); }

/* Het resultaat (eindkaart) */
.ins-output { margin: 14px 32px 0; padding: 10px 18px; position: relative; z-index: 3;
  border-left: 3px solid rgba(31,60,82,.45);
  border-left: 3px solid color-mix(in srgb, var(--base) 45%, transparent);
  font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.5; color: #4a423a; }

/* ══ INTROKAART ══ */
.ins-intro .spacer { flex: 1 1 0; }
.titleblock {
  flex: 0 0 auto; position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 40px;
}
.titleblock h1 {
  margin: 0 -.15em 0 0;   /* optische correctie voor letter-spacing */
  font-family: var(--chrome); font-weight: 700;
  font-size: 54px; line-height: 1.16; letter-spacing: .15em;
  color: var(--base); text-transform: uppercase;
  text-align: center;
}
.titleblock .program {
  display: flex; align-items: center; gap: 14px;
  margin-top: 18px;
  font-family: var(--chrome); font-weight: 600;
  font-size: 15px; letter-spacing: .32em;
  color: var(--base); text-transform: uppercase;
  white-space: nowrap;
}
.titleblock .orn { position: relative; width: 52px; height: 1.5px;
  background: rgba(31,60,82,.65);
  background: color-mix(in srgb, var(--base) 65%, transparent); }
.titleblock .orn::before { content: ""; position: absolute; top: 50%; width: 5px; height: 5px;
  border-radius: 50%; background: var(--base); transform: translateY(-50%); }
.titleblock .orn-l::before { left: -2px; }
.titleblock .orn-r::before { right: -2px; }
.titleblock .edition {
  display: flex; align-items: center; gap: 12px;
  margin-top: 13px;
  font-family: var(--chrome); font-weight: 600;
  font-size: 11.5px; letter-spacing: .34em;
  color: var(--base); text-transform: uppercase;
}
.titleblock .edition .dash { width: 22px; height: 1px;
  background: rgba(31,60,82,.55);
  background: color-mix(in srgb, var(--base) 55%, transparent); }
.titleblock .star { margin-top: 30px; text-align: center;
  font-size: 15px; color: var(--base); line-height: 1; }
.titleblock .adage { margin-top: 22px; display: flex; justify-content: center; text-align: center; }
.titleblock .adage blockquote { margin: 0; min-width: 0; }
.titleblock .adage em {
  display: block; white-space: pre-line;
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 20px; line-height: 1.55; color: #4a423a;
}
.titleblock .adage .who {
  display: block; margin-top: 12px;
  font-family: var(--body); font-style: normal; font-weight: 600;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}

/* ══ FOOTERS ══ */
.colophon { position: relative; z-index: 3; flex: 0 0 auto; margin-top: auto;
  padding: 18px 34px 26px; }
.footerline { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
.footerline .mark .label { font: 600 11px/1 var(--body); letter-spacing: .2em;
  color: var(--muted); text-transform: uppercase; white-space: nowrap; }
.foot-fade { height: 2px; }
.fa-left  { background: linear-gradient(to left,  rgba(31,60,82,.25), transparent);
  background: linear-gradient(to left,  color-mix(in srgb, var(--base) 25%, transparent), transparent); }
.fa-right { background: linear-gradient(to right, rgba(31,60,82,.25), transparent);
  background: linear-gradient(to right, color-mix(in srgb, var(--base) 25%, transparent), transparent); }

/* Achterkant-footer: + dna-regel */
.colophon-back { display: flex; flex-direction: column; justify-content: center; gap: 7px;
  padding-bottom: 20px; }
.dnaline { text-align: center; font-family: var(--serif); font-size: 9.5px; letter-spacing: .04em;
  color: var(--muted); white-space: nowrap; }
.dnaline .k { font-weight: 700; letter-spacing: .06em; margin-right: .5em;
  color: #1a3346; opacity: .75;
  color: color-mix(in srgb, var(--base), #000 15%); }

/* Intro-footer: DNA-strip in drie kolommen */
.colophon-intro { padding: 0 34px 24px; }
.dna-wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; }
.dna-label { justify-self: start; font-family: var(--serif); font-weight: 600; font-size: 11px;
  letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
  color: #1a3346;
  color: color-mix(in srgb, var(--base), #000 15%); }
.dna-code { text-align: center; white-space: nowrap; min-width: 0;
  font-family: var(--serif); font-size: 11px; letter-spacing: .03em;
  color: var(--muted); line-height: 1; }
.dna-code .sba { font-weight: 700; letter-spacing: .06em; margin-right: .55em;
  color: #1a3346;
  color: color-mix(in srgb, var(--base), #000 15%); }
.dna-number { justify-self: end; font-family: var(--serif); font-weight: 700; font-size: 11px;
  letter-spacing: .04em; white-space: nowrap;
  color: #1a3346;
  color: color-mix(in srgb, var(--base), #000 15%); }

/* ── Ontbrekende instructie ── */
.card-missing { text-align: center; font-family: var(--body); color: var(--muted); }

/* ── Print: één kaart per pagina, geen schaduwen ── */
@media print {
  body.stack-page { background: none; padding: 0; }
  .card-stack { gap: 0; }
  .ins-flip { page-break-after: always; }
  .ins-card { box-shadow: none; }
}