/* Instructiedek — verticale stapel individueel flipbare BLADEN (770×1078).
   770×1078 = 5:7, zelfde verhouding als de tradingcard; op papier 126×176 mm
   (was 770×1089 = 1:V2 'A5'; rechtgezet 10 aug 2026, zie
   .ai/DECISIONS/2026-08-10-kaartformaten-tradingcard-en-blad.md)
   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; }
/* IBM Plex Mono — het font van de wereld Vic Boomer. Staat hier zodat DEZELFDE
   jumbo-huid een Vic-kaart kan dragen; een @font-face is inert tot een regel het
   font echt gebruikt, dus dit kost een Stoutenburger-kaart niets. De fonts per
   wereld zijn onaantastbaar (Toms regel) — daarom worden ze hier geleend, niet
   vervangen: --body/--serif/--chrome komen uit config/worlds/*.yml. */
@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: 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: 700; 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: "EB Garamond"; src: url("../fonts/EBGaramond-latin.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap; }


/* ── DE TEKSTMAAT IS ÉÉN HEFBOOM: --fs (13 aug 2026) ─────────────────────────
   Deze huid is gezet in EB Garamond. Draagt een andere wereld haar eigen font —
   Vic Boomer schrijft in IBM Plex Mono — dan is DEZELFDE px een heel andere
   letter: gemeten heeft Plex Mono een 27% grotere x-hoogte en is hij 57% breder.
   Op 26px werd de tekst daardoor "veel te groot" (Tom), en liep de DNA-regel in
   de voet over het nummer heen.
   Toms regel is hier leidend: px-verschillen tussen wereld-fonts zijn optische
   correctie — meet kapitaalhoogte (en voor lopende tekst: x-hoogte), niet
   font-size. --fs is die correctie, één getal per wereld in config/worlds/*.yml
   (card.font_scale). Standaard 1, dus voor Stoutenburger verandert er niets. */
: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;
  --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: calc(22px * var(--fs, 1)); color: #9a8a6f; margin: 0;
  letter-spacing: .22em; text-transform: uppercase; }
.gallery-head p { font-family: var(--body); font-size: calc(13px * var(--fs, 1)); 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, bladmaat ── */
.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: 1078px;
  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; }

/* ══ KAARTFRAME — blad, 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: 1078px;   /* blad, 5:7 */
  --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%);
  /* de donkere binnengloed (inset 22px) is vervallen — op een licht randmateriaal
     maakt hij de rand grauw. De 1px hairline blijft: die tekent de rand af. */
  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);
}
/* 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,
    /* vanuit het hart naar de randkleur toe, maar er lichter dan. De warme radiaal
       en de horizontale boekvouw zijn vervallen: samen gaven ze het vlak een gele
       waas én een zichtbare band links en rechts. --paper-rand komt uit de wereld;
       een wereld zonder dat veld houdt haar eigen --paper-top. */
    radial-gradient(ellipse 120% 92% at 50% 46%, var(--paper-mid) 0%, var(--paper-mid) 34%,
      var(--paper-rand, var(--paper-top)) 88%, var(--paper-rand, var(--paper-top)) 100%),
    var(--paper-rand, var(--paper-top));
  /* zone en binnenkaderlijn: DEKKEND, dus geen verloop over dit gebied en geen
     kleur die meekleurt met wat eronder ligt. */
  box-shadow: inset 0 0 0 4px var(--kaderveld, #f6f3ee),
              inset 0 0 0 6px var(--kaderlijn, rgba(70,62,50,.20));
  /* De DERDE RING (12 aug 2026, Toms observatie: de buitenvorm klopte al, het
     contentgebied niet). De tradingcard bouwt card 34 → inner 22 → frame 16; het
     blad had er maar twee, waardoor de inhoud ónder de inzet-ringen doorliep tot
     de 22px-hoek. Deze 6px padding maakt ruimte voor het contentvenster. */
  padding: 6px;
}

/* ── HET CONTENTGEBIED — één keer vastgelegd (13 aug 2026, Toms opdracht) ──────
   --pad-x: de zijmarge van alle inhoud, gelijk aan de kop → alles lijnt uit.
   --pad-b: de ondermarge als padding op het venster zelf → wat er ook als laatste
   staat, het houdt afstand van de binnenste kaderlijn. */
.ins-card { --pad-x: 31px; --pad-b: 26px; }
.ins-card .frame { position: relative; height: 100%; overflow: hidden;
  border-radius: 16px; padding-bottom: var(--pad-b);
  display: flex; flex-direction: column; min-height: 0; }

/* 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 calc(12px * var(--fs, 1))/1 var(--body); letter-spacing: .32em; text-transform: uppercase;
  /* de inkt hoort bij de voet van de rand: ivoor op een diepe voet (VIC), donker
     op een lichte (SBA sinds de bone-basis). Komt uit de wereld; zonder dat veld
     blijft het oude ivoor staan. */
  color: var(--strip-ink, rgba(240,232,214,.62));
  text-shadow: var(--strip-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: calc(34px * var(--fs, 1)); 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; }

/* ══ DE KOP — 1-op-1 het recept van de tradingcard (register.css .head) ══════
   Titel links, nummerpil rechts, lijn over de volle kaderbreedte. Maten ×1,4 t.o.v.
   de tradingcard (770 vs 550 breed), zodat de optische verhouding gelijk blijft.
   De stapcirkel is vervallen; het nummer staat vóór de inhoudstitel. Daardoor delen
   alle jumbo-kaarten één compacte kophoogte. */
.ins-card .head { position: relative; z-index: 3; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 84px;
  padding: 20px 31px 16px;
  border-bottom: 2px solid rgba(var(--base-rgb), .28); }
.ins-card .head-title { flex: 1 1 auto; min-width: 0; }

/* Op het grotere jumboformaat hoort ook de kaartbediening een maat groter te zijn.
   De gewone tradingcards houden hun eigen 42/23-verhouding. */
.ins-card .head .card-tools .tools-tab { width: 52px; height: 52px; }
.ins-card .head .card-tools .tools-tab svg { width: 30px; height: 30px; }
.ins-card .head .card-tools .tools-tab svg path { stroke-width: 2.3; }

/* Het type-cirkeltje is 13 aug weer vervallen: de informatiebalk hieronder draagt
   de typeletter al ("INSTRUCTIE · I · codon"), dus in de kop was het dubbel.
   De letters en kleuren blijven in card-types.js staan voor de index en voor de
   andere kaartfamilies. */
.ins-card .head-title { margin: 0; font-family: var(--chrome); font-weight: 700;
  font-size: calc(42px * var(--fs, 1)); line-height: 1.3; letter-spacing: -.005em; color: #251f1b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* GEEN .small-variant. De titelgrootte varieert nergens en nooit — een kaart die
   haar titel verkleint om hem te laten passen, liegt over haar eigen anatomie.
   Past een titel niet, dan is de titel te lang en wordt hij ingekort (redactie,
   niet vormgeving). Vandaar de ellipsis: overloop moet zichtbaar zijn. */
.ins-card .pill { flex: none; font-family: var(--chrome); font-size: calc(15px * var(--fs, 1)); font-weight: 700;
  letter-spacing: .12em; color: #2c2620;
  border: 2px solid rgba(var(--base-rgb), .5); border-radius: 10px; padding: 7px 14px 6px;
  background: transparent; }

/* De openingskaart houdt haar beeldcompositie: dezelfde kopcoördinaten als de
   andere jumbo's, maar transparant boven het voorblad in plaats van een extra
   horizontale strook. Zo blijven hamburger en nummer aan beide kanten vindbaar. */
.ins-card .intro-head { position: absolute; inset: 0 0 auto; z-index: 8;
  border-bottom: 0; background: transparent; }
.ins-card .intro-head-back .pill { color: rgba(252,250,244,.82);
  border-color: rgba(252,250,244,.46); }

/* de wenkbrauw onder het beeld — de plek van `catch` op de tradingcard */
.ins-eyebrow { flex: 0 0 auto; margin: 18px 26px 0;
  font: 700 calc(17px * var(--fs, 1))/1 var(--chrome); letter-spacing: .28em; text-transform: uppercase;
  color: color-mix(in srgb, var(--base), #000 12%); text-align: center; }

/* ── DE ACHTERKANT LEEST ALS ACHTERKANT (13 aug 2026, Toms opmerking) ──────────
   De kop draagt daar dezelfde onderdelen als de voorkant — stapcirkel, titel,
   nummerpil — en dat maakte de twee kanten op het eerste gezicht inwisselbaar.
   Nu staat de kopinhoud op de achterkant doorschijnend: dezelfde compositie, maar
   duidelijk teruggetrokken, zoals de rug van een kaart hoort te doen. De rand van
   de kop dooft mee. Alleen de KOP verzacht; de inhoud eronder (waarom, herstel)
   blijft op volle sterkte — die moet je juist kunnen lezen. */
.ins-back .head { opacity: .5; }

/* De identiteitsregel op de achterkant (typeletter · codon · tier) is 13 aug 2026
   vervallen: de informatiebalk op de voorkant draagt die gegevens al, en twee keer
   dezelfde identiteit op één kaart maakt de achterkant onrustig. Het DNA staat in
   de voet. */

/* ── DE BEDIENINGSSTROOK — het duimregister (13 aug 2026) ─────────────────────
   Bediening, geen kaartinhoud. De vorm is die van een duimregister: de tabs in de
   rechterrand van een woordenboek. Vandaar de omkadering aan DRIE kanten (boven,
   links, onder) en open naar rechts — de strook groeit uit de kaartrand, hij
   zweeft niet (Toms vormverzoek). Twee lagen, één accent: het kader is van de
   strook, de knoppen zelf zijn kaal — line-art iconen, stil in de kaartkleur,
   op hover vol. De knoppen zijn NOFLIP (button/a in card-flip.js), dus een klik
   draait de kaart niet per ongeluk om. Digitaal-only: de werkkaart kent hem niet.
   --tools-w is de strookbreedte; het contentgebied van de achterkant wijkt ervoor
   (zie de regel onder de strook). */
/* De bedieningsstrook woont in macros/card-tools.njk (toolsStyle) — één bron
   voor alle families sinds de kaartbrede uitrol van 13 aug 2026. */

/* ══ CONTENTBLOKKEN ══ */

/* ══ HET BEELDVLAK — exact het recept van de tradingcard ══════════════════════
   Aangepast 12 aug 2026 (Toms opdracht: de bladen moeten aansluiten op de
   tradingcards). Vier verschillen zijn weggenomen; ze stonden gemeten in de weg:

     verhouding   1,43 (omslag) en 1,50 (stap) → 4:3, gelijk aan 506×380 op de kaart
                  — de bladen waren onderling niet eens consistent
     plaatsing    ingekaderd doosje met eigen lijn → rand tot rand, zoals de kaart
     hoeken       8px afgerond → recht
     weergave     contain op 92% (zwevend) → cover (vult en snijdt bij)
     contour      ontbrak → de BOEK-GOLF, het handelsmerk (macros/book-wave.njk)

   Het verschil tussen zwevend-in-een-lijstje en rand-tot-rand is het verschil
   tussen een geïllustreerd rapport en een kaart. Vandaar `cover`. */
.art {
  aspect-ratio: 4 / 3;                 /* één maat, gelijk aan de tradingcard */
  overflow: hidden; position: relative; z-index: 2; margin-block: 0;
  flex: 0 0 auto;
}
/* DE GOLF IS EEN GAT, GEEN KLEUR (12 aug 2026). Een gevulde golf moest de kleur van
   het papier raden en kwam er nooit helemaal: .inner draagt een inset-gloed (40px)
   die het papier aan de randen verdonkert maar de golf niet raakt. Nu wordt het
   beeld weggesneden en zie je het ECHTE vlak eronder — Δ per definitie 0.
   De donkere grond staat op de img (niet op .art) zodat hij mee wordt weggesneden;
   het masker mag NIET op .art staan, want dan verdwijnt de gouden lijn mee. */
.art > img, .art img.hero, .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;
}
.art > img, .art img.hero {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block;
  filter: saturate(1.04) contrast(1.04);
  background: #16120f;                 /* zelfde donkere grond als register.css */
}
/* de golf-deckle: het beeld lost onderin op in perkament — familietrek van
   register-, Vic- en Eo Ena-kaart. Hoogte meegeschaald naar de bladbreedte
   (56px op 550 → 78px op 770). */
.art-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 78px;
  display: block; pointer-events: none; z-index: 4; }
.art .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%); }
/* geen zij-marges meer: het beeld raakt het kader, zoals op de kaart */
.art-step, .art-hero { margin: 0; }

/* Eo Ena's begroeting (cover) */
/* De begroeting: gecentreerd blok — spreuk, toeschrijving, zegel. Stond tot
   13 aug 2026 als rij met het Eo Ena-portret links; dat portret is vervallen
   (Toms opdracht) en de compositie is nu die van een colofon. */
.greeting {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin: 0 48px; position: relative; z-index: 3;
  flex: 1; min-height: 0; text-align: center;
}
.greeting blockquote {
  margin: 0; min-width: 0; max-width: 30em;
  font-family: var(--serif); font-style: italic;
  font-size: calc(24px * var(--fs, 1)); 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: calc(12px * var(--fs, 1)); letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}

/* Stapblok (voorkant): titel + dubbele lijn + tekst */
/* mag de slack opnemen, zoals de lede op de tradingcard */
/* ── DE INFORMATIEBALK (instrip) — terug op 13 aug 2026, Toms opdracht ─────────
   Direct onder de kop: INSTRUCTIE · typeletter+codon · tier · positie rechts
   ("Stap 3 van 12", "Benodigdheden", "12 stappen · ± 3 uur"). Stijl uit het
   oorspronkelijke ontwerp (git 6c83975^), marges op de gedeelde --pad-x. */
.instrip {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 14px;
  /* De lijn loopt over de VOLLE kaderbreedte, net als die van de kop erboven: geen
     zijmarge maar zijpadding, zodat de tekst wél op --pad-x uitlijnt maar de rand
     doorloopt tot de kaderrand (Toms opmerking 13 aug). */
  margin: 0; padding: 10px var(--pad-x) 11px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--chrome); font-weight: 600; font-size: calc(13.5px * var(--fs, 1));
  letter-spacing: .17em; text-transform: uppercase;
  color: #1a3346;
  color: color-mix(in srgb, var(--base), #000 15%);
}
.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: calc(11px * var(--fs, 1)); 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; }

.step { flex: 1 1 auto; min-height: 0; display: flex; align-items: flex-start;
  margin: 0 var(--pad-x); padding-top: 12px; position: relative; z-index: 3; }

/* De stapkaart zonder foto (13 aug): handeling + tekst bovenin, de rest van het
   venster is voor de latere schets. De positie ("Stap x van y") staat in de
   informatiebalk, dus hier geen eigen positieregel. */
.step-vol { align-items: flex-start; padding-top: 30px; }
.step-vol .steptext { display: flex; flex-direction: column; justify-content: flex-start; }
.step-vol .handeling { font-size: calc(44px * var(--fs, 1)); letter-spacing: .01em; text-transform: none;
  line-height: 1.16; margin-bottom: 22px; }
.step-vol .steptext > p { font-size: calc(26px * var(--fs, 1)); line-height: 1.55; }
.steptext { flex: 1; min-width: 0; }
.steptext h2 { margin: 0; font-family: var(--chrome); font-weight: 700;
  font-size: calc(29px * var(--fs, 1)); 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: calc(19.5px * var(--fs, 1)); 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: 10px 26px 0; padding: 9px 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: calc(12.5px * var(--fs, 1)); 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: calc(17px * var(--fs, 1)); 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: calc(28px * var(--fs, 1)); 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: calc(19px * var(--fs, 1)); white-space: nowrap; }
.mrow .mspec { font-family: var(--body); font-size: calc(17px * var(--fs, 1)); 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: calc(12px * var(--fs, 1));
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: var(--base); }
.mrow .buy .arr { font-size: calc(14px * var(--fs, 1)); }
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: calc(13.5px * var(--fs, 1)); 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: calc(19.5px * var(--fs, 1)); 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: calc(18px * var(--fs, 1)); }
.fixes .fx p { margin: 0; font-family: var(--body); font-size: calc(17.5px * var(--fs, 1)); 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: calc(19px * var(--fs, 1)); 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: calc(54px * var(--fs, 1)); 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: calc(15px * var(--fs, 1)); 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: calc(11.5px * var(--fs, 1)); 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: calc(15px * var(--fs, 1)); 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: calc(20px * var(--fs, 1)); 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: calc(12px * var(--fs, 1)); 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 calc(11px * var(--fs, 1))/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: calc(9.5px * var(--fs, 1)); 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: calc(11px * var(--fs, 1));
  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: calc(11px * var(--fs, 1)); 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: calc(11px * var(--fs, 1));
  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; }
}

/* ── pagina-chrome van een LOSSE instructiekaart (card-instruction-card.njk) ──
   Buiten de kaart, want de kaart zelf draagt geen navigatie: waar zij vandaan komt
   en waar zij in de route staat, hoort bij de pagina. */
  .card-chrome { max-width: 770px; margin: 0 auto 14px; text-align: center;
    font: 400 calc(14px * var(--fs, 1))/1.6 var(--serif, Georgia, serif); color: #4f4a3f; }
  .card-chrome a { color: #3d5a34; }

/* Route-navigatie: de buren binnen de STACK. Bewust anders dan de wereldnavigatie
   (prev/next op nummer) — een instructie doorloop je in bedoelde volgorde. */
  .route-nav { max-width: 770px; margin: 0 auto 22px; display: grid;
    grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
    font: 600 calc(12px * var(--fs, 1))/1.4 var(--body, system-ui, sans-serif); letter-spacing: .04em; }
  .route-nav a { text-decoration: none; color: #3d5a34; display: inline-flex;
    align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid transparent; }
  .route-nav a:hover { border-bottom-color: rgba(61,90,52,.4); }
  .rn-prev { justify-self: start; text-align: left; }
  .rn-next { justify-self: end; text-align: right; }
  .rn-pos { justify-self: center; font-family: var(--mono, ui-monospace, monospace);
    font-size: calc(11px * var(--fs, 1)); letter-spacing: .14em; color: #8a8272; }
  .rn-arr { font-size: calc(15px * var(--fs, 1)); line-height: 1; }
  @media (max-width: 640px) {
    .route-nav { grid-template-columns: 1fr; gap: 6px; text-align: center; }
    .rn-prev, .rn-next { justify-self: center; text-align: center; }
  }


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

/* HET MERK OP HET VOORBLAD (13 aug 2026). Als MASKER en niet als plaatje: zo neemt
   het de inkt van de kaart aan, precies zoals de Vic-tradingcard dit merk al
   gebruikt (vicboomer.css .foot-wordmark). Het eigen paars van het logo zou op de
   cyaan kaart een tweede merkkleur binnenbrengen; de vorm is het merk, de kleur is
   die van de kaart. Verhouding 8,11:1 — vast, want een logo mag niet vervormen. */
.ins-intro .wordmark-logo { display: block; width: 72%; aspect-ratio: 8.11 / 1;
  margin: 0 auto 22px; background-color: var(--base);
  -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; }

/* ── HET VOLGNUMMER IN VORM ─────────────────────────────────────────────────
   Het nummer is deel van de titel, geen versiering ervoor: dezelfde kleur, geen
   demping. Alleen de cijferbreedte wordt vastgezet, zodat
   "1" en "10" dezelfde inspringing geven. */
.step-vol .handeling .h-nr { display: inline-block; margin-right: .42em;
  font-variant-numeric: tabular-nums; color: inherit; }

/* Het beeldmerk boven het woordmerk — zelfde masker-aanpak, dus zelfde inkt. */
.ins-intro .wordmark-mark { display: block; width: 96px; height: 96px; margin: 0 auto 20px;
  background-color: var(--base);
  -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; }

/* ── DE MERKVLAK-ACHTERKANT (13 aug 2026) ────────────────────────────────────
   Zelfde anatomie als de tradingcard-merkvlakken (vicboomer.css .vic-back-mark,
   register.css .maker-back-mark): het lichte vlak wordt het diepe randvlak, en
   daarop staat het kompas als masker in half-doorschijnend ivoor — zo versmelt het
   merk met de grond in plaats van erop te liggen. */
/* Stond op `box-shadow: none` — daarmee ontbrak de binnenkaderlijn hier volledig,
   terwijl elke andere kaartkant er één draagt. Nu dezelfde anatomie als de
   tradingcard-ruggen: zone in de kleurfamilie van het veld (veld + 40% wit) met de
   lijn erbinnen in haar eigen kleur. Beide dekkend — geen verloop. */
.ins-card.ins-merkback .inner { background: var(--gr-c);
  box-shadow: inset 0 0 0 4px var(--veldzone),
              inset 0 0 0 6px var(--veldlijn); }
/* HET HART VAN DE KAART, niet van het contentvlak (Tom, 13 aug 2026). Het teken
   hangt aan .card zelf — een broer van .inner — want binnen .inner zou het de halve
   systeemstrook te hoog staan én door de overflow worden afgeknipt. */
.ins-merkback .merkvlak-mark { position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); z-index: 3;
  width: 54%; max-width: 360px; aspect-ratio: 1;
  background: rgba(240,244,244,.5); pointer-events: none;
  -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; }

/* ── HET ZEGEL VAN EO ENA (13 aug 2026) ──────────────────────────────────────
   Vervangt de lijntekening die naast de spreuk stond. Een ring in de inkt van de
   KAART (het zegel is te gast) met daarin de figuur in het goud van EO ENA — exact
   de wereldkleur uit config/worlds/eoe.yml, zodat zij overal in haar eigen kleur
   spreekt. De figuur is een masker, dus zij neemt kleur aan i.p.v. mee te brengen. */
.ins-card { --eo-goud: #8a6a3a; }
.eo-badge { display: grid; place-items: center; flex: none;
  width: calc(68px * var(--fs, 1)); height: calc(68px * var(--fs, 1));
  margin-top: calc(20px * var(--fs, 1)); border-radius: 50%;
  border: 1.5px solid rgba(var(--base-rgb), .42); }
.eo-badge-fig { width: 58%; height: 74%; background-color: var(--eo-goud);
  -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; }
/* op het voorblad staat het zegel onder de spreuk, in de gecentreerde kolom */
.titleblock .eo-badge { margin-inline: auto; }