/* Register-kaart (almanak mini-card) — gegenereerd uit card-textile-exp, CSS-relatieve paden */
/* ── 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 {
    --base: #3d2747;            /* per-kaart randkleur */
    --green: var(--base);
    --ink: #2a2520; --muted: #8a8077;
    --gold: #a8905a;
    --paper:     #f9f5ef;
    --paper-top: #f7f0e2;
    --paper-mid: #fdf9f3;
    --paper-blend: color-mix(in srgb, var(--paper-top) 50%, var(--paper-mid) 50%);
    --serif: "Lora", Georgia, "Times New Roman", serif;
    --body:  "EB Garamond", Georgia, serif;
    --mono:  grayscale(1) sepia(.72) saturate(.8) brightness(.97) contrast(1.06);
    --tilemono: grayscale(1) sepia(.92) saturate(1.5) hue-rotate(-8deg) brightness(1.12) contrast(.9);
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; min-height: 100vh; padding: 34px 16px; overflow-x: hidden;
    display: grid; place-items: center; color: var(--ink); font-family: var(--body);
    background: #f1e9da;   /* EXPERIMENT: vlakke crème pagina-achtergrond (zoals mallet-pagina) */
  }

  /* ════════════ DE KAART ════════════ */
  .card { width: 100%; max-width: 478px; margin-inline: auto; height: 774px;
    /* crème rand met materiaal-tint (zelfde familie/effect als de achterkant) */
    --frame: color-mix(in srgb, var(--base) 70%, #ddcdac);
    --rule: color-mix(in srgb, var(--base) 32%, transparent);
    border-radius: 30px; padding: 12px; position: relative; isolation: isolate;
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--base) 70%, #e4d6bb) 0%,
        color-mix(in srgb, var(--base) 70%, #d9c9a6) 100%);
    box-shadow: 0 30px 60px rgba(0,0,0,.30), 0 4px 10px rgba(0,0,0,.20),
      inset 0 0 0 1px rgba(255,255,255,.22), inset 0 0 22px rgba(0,0,0,.30); }
  .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
    background-image: repeating-linear-gradient(92deg, rgba(0,0,0,.05) 0 2px, rgba(255,255,255,.03) 2px 4px);
    mix-blend-mode: overlay; opacity: .5; pointer-events: none; }

  .inner { position: relative; overflow: hidden; border-radius: 21px;
    height: 100%; 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%),
      radial-gradient(600px 160px at -80px -40px, rgba(120,80,50,.05), rgba(0,0,0,0) 70%),
      radial-gradient(600px 160px at calc(100% + 80px) -40px, rgba(120,80,50,.05), rgba(0,0,0,0) 70%),
      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);
    background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    box-shadow: inset 0 0 0 4px rgba(255,255,255,.5), inset 0 0 0 6px color-mix(in srgb, var(--base) 14%, transparent), inset 0 0 40px rgba(120,95,55,.10); }
  .inner::before { content: ""; position: absolute; inset: 11px; border: 0;
    border-radius: 15px; pointer-events: none; z-index: 25; }
  .inner::after { content: ""; position: absolute; inset: 0; z-index: 26; pointer-events: none;
    opacity: .22; mix-blend-mode: multiply;
    background-image: none; }

  .head { position: relative; z-index: 3; display: grid; grid-template-columns: 72px 1fr auto; gap: 10px;
    align-items: start; padding: 22px 22px 12px 18px; }
  .badge { position: relative; width: 72px; height: 72px; margin: 0 0 0 4px; border-radius: 999px;
    display: grid; place-items: center; padding: 0;
    background: radial-gradient(circle at 34% 22%, rgba(255,255,255,.16), transparent 40%), color-mix(in srgb, var(--base) 78%, #6b675c);
    border: 6px solid #f7f1e6;
    box-shadow: 0 1px 3px rgba(60,45,20,.16), inset 0 0 0 1px rgba(255,255,255,.14); }
  .badge .glyph { width: 42px; height: 42px; background-color: #ecdcb0;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain; }
  .badge .lbl { font: 600 8.5px/1 var(--body); letter-spacing: .16em; color: #ecdcb0; }
  .title { padding-top: 5px; min-width: 0; text-align: center; }
  .title h1 { margin: 0; font-family: var(--body); font-weight: 700;
    font-size: clamp(23px, 5.8vw, 30px); line-height: 1.05; letter-spacing: -.005em; color: #251f1b; }
  .title p { margin: 5px 0 0; font-family: var(--serif); font-style: italic; font-weight: 500;
    font-size: 16px; line-height: 1; color: #4a423a; }
  .fire { width: 26px; height: 40px; margin-top: 4px; color: #8d8475; }
  .num { padding: 5px 0 0 12px; border-left: 1px solid rgba(0,0,0,.18); text-align: right; }
  .num strong { display: block; font-family: var(--serif); font-weight: 600; font-size: 16px; letter-spacing: .02em; color: #2c2620; white-space: nowrap; }
  .num span { display: block; margin-top: 6px; font: 600 8.5px/1.5 var(--body); letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }

  .art { position: relative; z-index: 2; flex: 0 0 auto; height: 400px; margin: 2px 6px 0; overflow: hidden; background: #16120f;
    border-top: 2px solid rgba(168,144,90,.85); border-bottom: 2px solid rgba(168,144,90,.85); }
  .art > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block;
    filter: saturate(1.04) contrast(1.04); }
  .cartouche { position: absolute; top: -1px; left: 0; width: 100%; height: 70px; z-index: 4; display: block; }
  .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%); }
  .art > img.seal { position: absolute; top: 62px; right: 16px; width: 82px; height: 82px; object-fit: contain; z-index: 6; display: block; transform: rotate(4deg); }

  .lede { position: relative; z-index: 3; flex: 0 0 auto;
    display: flex; flex-direction: column; justify-content: center;
    margin: 0 6px; padding: 16px 22px;
    background: transparent; border-bottom: 1px solid var(--rule); }
  .lede p { margin: 0; font-family: var(--serif); font-size: 16px; line-height: 1.5; letter-spacing: 0; color: #2d2722; }

  /* Beschikbaarheids-strip (voorkant): prominent maar luchtig.
     Beschikbaar = materiaalkleur; niet-beschikbaar = gedimd. */
  .reg-avail { position: relative; z-index: 3; flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; gap: 13px;
    margin: 0 6px; padding: 18px 16px 20px; }
  .reg-avail .ra-eyebrow { margin: 0; font: 700 9px/1 var(--body);
    letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
  .reg-avail .ra-row { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; width: 100%; }
  .reg-avail .ra-item { display: inline-flex; flex-direction: column; align-items: center; gap: 9px;
    font-family: var(--body); font-weight: 700; font-size: 12.5px; letter-spacing: .06em;
    text-transform: uppercase; line-height: 1; white-space: nowrap; }
  .reg-avail .ra-ic { width: 30px; height: 30px; flex: 0 0 auto;
    -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; }
  .reg-avail .on  { color: color-mix(in srgb, var(--base), #000 22%); }
  .reg-avail .on  .ra-ic { background-color: color-mix(in srgb, var(--base), #000 22%); }
  .reg-avail .off { color: var(--muted); opacity: .34; }
  .reg-avail .off .ra-ic { background-color: var(--muted); }

  /* Maker-rij */
  .makerrow { position: relative; z-index: 3; display: flex; align-items: center; gap: 13px;
    margin: 0 6px; padding: 15px 18px; background: rgba(246,240,230,.9); }
  .makerrow .k { font: 600 10px/1 var(--body); letter-spacing: .16em; color: var(--muted); }
  .makerrow .v { font-family: var(--serif); font-size: 18px; font-weight: 600; color: #2b2620; }

  /* OPEN KAART-knop */
  .open { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 16px;
    height: 50px; margin: 13px 16px; border-radius: 14px; text-decoration: none; color: #f3e9d2;
    font-family: var(--body); font-weight: 600; letter-spacing: .32em; font-size: 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--base), #fff 8%) 0%, color-mix(in srgb, var(--base), #000 34%) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(168,144,90,.25), 0 3px 7px rgba(0,0,0,.22); }
  .open:hover { filter: brightness(1.08); }
  .open .arrow { font-size: 22px; letter-spacing: 0; line-height: 1; transform: translateY(-2px); }

  /* Colofon-footer (overgenomen van card-pottery-almanac) */
  .colophon { position: relative; z-index: 3; flex: 1 1 auto;
    display: flex; flex-direction: column; justify-content: center; padding: 12px 14px 22px; }
  .footerline { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
  .footerline .seg { height: 2px; }
  .footerline .seg.left  { background: linear-gradient(to right, transparent, color-mix(in srgb, var(--base) 30%, transparent)); }
  /* Rechterkant = pijl-naar-rechts (flip-symbool): lijntje dat "inloopt" naar een pijlpunt. */
  .footerline .seg.right { position: relative;
    background: linear-gradient(to right, transparent, color-mix(in srgb, var(--base) 34%, transparent)); }
  .footerline .seg.right::after { content: ""; position: absolute; right: -2px; top: 50%; transform: translateY(-50%);
    width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
    border-left: 7px solid color-mix(in srgb, var(--base) 50%, transparent); }
  .footerline .mark { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
  .footerline .mark .label { font: 600 9.5px/1 var(--body); letter-spacing: .2em; color: var(--muted); text-transform: uppercase; }
  .footerline .mark .seal-ico { width: 22px; height: 22px; display: block; background-color: var(--muted);
    -webkit-mask: url(../img/stamp.png) center/contain no-repeat; mask: url(../img/stamp.png) center/contain no-repeat; }


  @media (max-width: 460px) {
    .head { grid-template-columns: 54px 1fr auto; gap: 7px; padding: 14px 20px 8px; }
    .num { padding-left: 7px; } .num strong { font-size: 13px; } .num span { font-size: 8px; }
    .badge { width: 54px; height: 54px; border-width: 4px; margin: 4px 0 0 0; } .badge .glyph { width: 30px; height: 30px; }
    .brandmark { width: 46px; height: 46px; margin: 8px 0 0 4px; }
    .fire { display: none; }
    .title h1 { font-size: 18px; white-space: nowrap; } .title p { font-size: 13px; }
    .art { min-height: 180px; }
    .art > img.seal { width: 64px; height: 64px; top: 54px; right: 14px; }
    .lede { padding: 17px; } .lede p { font-size: 15px; }
    .reg-avail { gap: 11px; padding: 15px 8px 16px; } .reg-avail .ra-item { font-size: 11px; letter-spacing: .03em; gap: 7px; } .reg-avail .ra-ic { width: 26px; height: 26px; }
    .open { letter-spacing: .26em; font-size: 12px; }
    /* Footer op mobiel op de oude positie houden (de +6px-omhoog geldt alleen op desktop).
       Achterkant-footer op mobiel op gelijke hoogte als de voorkant (die gecentreerd hoger zit). */
    .colophon { padding-bottom: 4px; }
    .card.back .ena-foot { padding-bottom: 34px; }
    .footerline { transform: translateY(4px); }   /* beide footers nog 4px lager op mobiel */
  }

  /* ════════════════════════ ACHTERKANT (flip-zijde) ════════════════════════ */
  /* Achterkant: zelfde materiaal-hue als de voorkant, maar zachtere rand-tint (30% i.p.v. 70%).
     Inner (papier + effect) erft van .inner. */
  .card.back {
    --frame: color-mix(in srgb, var(--base) 30%, #ddcdac);
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--base) 30%, #e4d6bb) 0%,
      color-mix(in srgb, var(--base) 30%, #d9c9a6) 100%); }

  .back2 { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column;
    padding: 24px 20px 16px; gap: 13px; }
  .eyebrow { text-align: center; margin: 0; font: 700 9px/1 var(--body);
    letter-spacing: .28em; text-transform: uppercase; color: #8a7a5f; }
  /* Brandstempel = zelfde maat/positie als de bruine disc binnen de voorkant-badge
     (badge 72px met 6px rand → disc 60px, 6px naar binnen) */
  .brandmark { width: 60px; height: 60px; margin: 6px 0 0 10px; align-self: start;
    background-color: var(--muted);
    -webkit-mask: url(../img/sba-stamp.png) center/contain no-repeat; mask: url(../img/sba-stamp.png) center/contain no-repeat; }

  .panel { background: linear-gradient(180deg, #faf6ee, #f1e8d6);
    border: 1px solid rgba(120,95,55,.22); border-radius: 16px;
    box-shadow: 0 3px 9px rgba(70,45,20,.14), inset 0 1px 0 rgba(255,255,255,.55);
    display: flex; flex-direction: column; align-items: center; text-align: center;
    text-decoration: none; color: inherit; cursor: pointer;
    transition: border-color .18s ease; }
  .panel:hover { border-color: color-mix(in srgb, var(--disc) 55%, rgba(120,95,55,.22)); }
  .panel:focus-visible { outline: 3px solid color-mix(in srgb, var(--disc) 70%, transparent); outline-offset: 3px; }
  .mid { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; gap: 13px; padding: 14px 20px 2px; }
  .featured { flex: 0 0 auto; justify-content: center; padding: 20px 18px; gap: 9px; }
  .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; flex: 0 0 auto; }
  .pair .panel { padding: 18px 12px; gap: 7px; }

  /* Open badge: cirkelrand in de materiaalkleur, symbool in diezelfde kleur */
  .b-badge { border-radius: 999px; display: grid; place-items: center; flex: 0 0 auto;
    background: transparent; border: 3px solid var(--disc);
    box-shadow: 0 1px 3px rgba(60,45,20,.12); }
  .featured .b-badge { width: 104px; height: 104px; border-width: 2.5px; }
  .pair .b-badge { width: 72px; height: 72px; border-width: 2px; }
  .b-badge .ico { width: 64%; height: 64%; background-color: var(--disc);
    -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; }

  .p-name { font-family: var(--body); font-weight: 700; letter-spacing: .01em; color: var(--accent); line-height: 1; }
  .featured .p-name { font-size: 21px; margin-top: 2px; }
  .pair .p-name { font-size: 16px; }
  .p-sub { font-family: var(--serif); font-style: italic; font-size: 12.5px; color: #6b6055; line-height: 1; }
  .p-price { font-family: var(--body); font-weight: 700; color: #463a29; letter-spacing: .02em; line-height: 1; }
  .featured .p-price { font-size: 17px; }
  .pair .p-price { font-size: 14px; }

  .btn { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; width: 100%;
    font-family: var(--body); font-weight: 700; letter-spacing: .03em; border-radius: 11px; margin-top: 13px; }
  .btn .arr { transition: transform .18s ease; }
  .btn:hover .arr { transform: translateX(3px); }
  .btn-strong { height: 46px; font-size: 16px; color: #f4ead2;
    background: linear-gradient(180deg, #557040, #38502a);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.20), inset 0 0 0 1px rgba(168,144,90,.30), 0 5px 12px rgba(30,40,18,.30); }
  .btn-strong:hover { filter: brightness(1.06); }
  .btn-mid { height: 40px; font-size: 14px; color: #eef2f7;
    background: linear-gradient(180deg, #3f6388, #2c4a6c);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 3px 8px rgba(20,35,55,.24); }
  .btn-mid:hover { filter: brightness(1.07); }
  .btn-ghost { height: 40px; font-size: 14px; color: #6f4030; background: transparent;
    border: 1.5px solid color-mix(in srgb, #7c3b2b 42%, transparent); }
  .btn-ghost:hover { background: rgba(124,59,43,.07); }

  .built { --disc: #4f6a39; --accent: #3e5930; }
  .kit   { --disc: #2e4f70; --accent: #274768; }
  .self  { --disc: #7c3b2b; --accent: #6f3525; }

  .ena-foot { flex: 0 0 auto; padding: 12px 14px 21px; }
  .ena-foot .ena-img { display: block; height: 17px; width: 14px; background-color: #5f513c;
    -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; }
  .ena-foot .seg.left  { background: linear-gradient(to right, transparent, color-mix(in srgb, var(--gold) 55%, transparent)); }
  .ena-foot .seg.right { background: linear-gradient(to right, transparent, color-mix(in srgb, var(--gold) 55%, transparent)); }
  .ena-foot .seg.right::after { border-left-color: color-mix(in srgb, var(--gold) 62%, transparent); }

  /* ════════════════════════ FLIP (voor ↔ achter) ════════════════════════ */
  .flip { width: 478px; margin-inline: auto; perspective: 2200px; cursor: pointer; }   /* vaste ontwerp-maat; JS schaalt 'm met zoom op smalle schermen */
  .flip-inner { position: relative; width: 100%; height: 774px;
    transition: transform .85s cubic-bezier(.2,.75,.2,1); transform-style: preserve-3d; }
  .flip.flipped .flip-inner { transform: rotateY(180deg); }
  .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
  .face.back { transform: rotateY(180deg); }
  .flip:focus-visible { outline: 3px solid rgba(120,90,50,.6); outline-offset: 8px; border-radius: 30px; }
  @media (prefers-reduced-motion: reduce) { .flip-inner { transition: none; } }