/* ============================================================
   KAARTEN — projectkaarten, corporaties, preludes, achterkanten
   ============================================================ */

/* ---------- Generieke kaartdrager ---------- */
.card{
  position:relative; box-sizing:border-box;
  width:var(--card-w); height:var(--card-h);
  /* Witte buitenrand met daarbinnen een dunne lijn in de typekleur.
     De rand valt buiten het snijvlak, dus een kleine snijafwijking
     valt niet op. */
  border:calc(1.3 * var(--mm)) solid #fff;
  border-radius:calc(4.4 * var(--mm));
  box-shadow:inset 0 0 0 calc(0.4*var(--mm)) var(--c2);
  overflow:hidden;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  display:flex; flex-direction:column;
  --c1:var(--type-green-1); --c2:var(--type-green-2);
}
.card--green  {--c1:var(--type-green-1);  --c2:var(--type-green-2);}
.card--blue   {--c1:var(--type-blue-1);   --c2:var(--type-blue-2);}
.card--red    {--c1:var(--type-red-1);    --c2:var(--type-red-2);}
.card--corp   {--c1:var(--type-corp-1);   --c2:var(--type-corp-2);}
.card--prelude{--c1:var(--type-prelude-1);--c2:var(--type-prelude-2);}
.card--legacy {--c1:var(--type-legacy-1); --c2:var(--type-legacy-2);}

/* Subtiele papierstructuur zodat vlakken niet dood ogen */
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(100% 60% at 50% 100%, rgba(0,0,0,.10), transparent 70%);
  mix-blend-mode:multiply; opacity:.35;
}

/* ---------- Kop: kosten, vereiste, tags, naam ---------- */
.card__head{
  position:relative; flex:0 0 auto;
  padding:calc(1.3*var(--mm)) var(--card-pad) calc(1.2*var(--mm));
  background:var(--metal-dark);
  color:var(--ink);
  box-shadow:inset 0 calc(-0.3*var(--mm)) calc(0.6*var(--mm)) rgba(0,0,0,.22);
}
.card__topline{
  display:flex; align-items:flex-start; gap:calc(1*var(--mm));
  min-height:calc(7.6*var(--mm));
}
.cost{
  flex:0 0 auto;
  width:calc(9*var(--mm)); height:calc(9*var(--mm));
  margin-top:calc(-0.4*var(--mm));
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#ffe07a,var(--res-mc) 55%,#c8930f);
  color:var(--res-mc-ink);
  border:calc(0.4*var(--mm)) solid rgba(0,0,0,.55);
  border-radius:calc(1.2*var(--mm));
  font-family:var(--font-num); font-weight:700; font-size:var(--fs-cost);
  line-height:1; letter-spacing:-.02em;
  box-shadow:inset 0 calc(0.5*var(--mm)) 0 rgba(255,255,255,.55),
             0 calc(0.3*var(--mm)) calc(0.6*var(--mm)) rgba(0,0,0,.35);
}
.cost--none{ visibility:hidden; }

/* Krap vakje, ruime inhoud. De iconen zijn bewust groter dan het vakje
   zelf en steken er iets bovenuit; dat leest beter dan alles netjes
   binnen de lijntjes persen. */
.req{
  /* Breedte volgt de inhoud: niet meegroeien met de vrije ruimte, maar
     strak om de tekst heen. Het vakje staat daardoor naast het
     kostenvakje in plaats van in het midden te zweven. */
  flex:0 1 auto; align-self:center;
  display:inline-flex; align-items:center; gap:.24em;
  /* Vaste, krappe hoogte: de fiches zijn hoger dan het vakje en steken
     er bewust bovenuit. Zonder vaste hoogte zou het vakje meegroeien. */
  height:calc(4.5 * var(--mm));
  padding:0 calc(1.05*var(--mm));
  border-radius:calc(0.85*var(--mm));
  font-family:var(--font-num); font-weight:700;
  font-size:calc(3.5 * var(--mm));
  line-height:1; text-align:center; justify-content:center;
  white-space:nowrap;
  border:calc(0.25*var(--mm)) solid rgba(0,0,0,.4);
  max-width:calc(32*var(--mm));
  overflow:visible;
}
.req--min{ background:#dff3e2; color:#123a1b; }
.req--max{ background:#ffdcd6; color:#5a1109; }
.req--any{ background:#e8e4d6; color:#2b2519; }
.req:empty{ display:none; }

.tags{
  flex:0 0 auto; display:flex; gap:calc(0.7*var(--mm));
  font-size:calc(4.6*var(--mm)); margin-left:auto;
}

/* De titelbalk loopt van rand tot rand, dus buiten de padding van de
   kopstrook om. Vandaar de negatieve marges. */
/* De titelbalk is een losse band met afgeronde uiteinden die net binnen
   de kopstrook ligt, zoals op de echte kaarten. */
.card__name{
  margin:calc(1*var(--mm)) 0 0;
  padding:calc(0.7*var(--mm)) calc(2*var(--mm)) calc(0.9*var(--mm));
  border-radius:calc(1.6*var(--mm));
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--c1) 82%, #fff) 0%, var(--c1) 30%, var(--c2) 100%);
  color:#fff; text-align:center;
  box-shadow:inset 0 calc(0.4*var(--mm)) 0 rgba(255,255,255,.3),
             inset 0 calc(-0.4*var(--mm)) calc(0.7*var(--mm)) rgba(0,0,0,.35);
  font-family:var(--font-display); font-weight:600;
  font-size:var(--fs-title); line-height:1.02;
  letter-spacing:.01em; text-transform:uppercase;
  text-shadow:0 calc(0.25*var(--mm)) 0 rgba(0,0,0,.5);
  overflow-wrap:break-word; hyphens:auto;
}
.card__name .sub{
  display:block; font-size:calc(2.2*var(--mm)); font-weight:400;
  text-transform:none; opacity:.85; letter-spacing:.02em;
}

/* ---------- Illustratievlak ---------- */
.card__art{
  position:relative; flex:1 1 auto;
  min-height:calc(12*var(--mm));
  overflow:hidden;
  border-bottom:calc(0.35*var(--mm)) solid rgba(0,0,0,.35);
  background:var(--art-bg,linear-gradient(160deg,var(--mars-500),var(--mars-800)));
}
.card__art--tall{ height:calc(32*var(--mm)); }
.card__art--short{ height:calc(17*var(--mm)); }
.card__art img{ width:100%; height:100%; object-fit:cover; display:block; }
.card__art .watermark{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:calc(17*var(--mm)); color:rgba(255,255,255,.22);
}
.card__art .watermark .ic{ filter:drop-shadow(0 calc(0.4*var(--mm)) calc(0.6*var(--mm)) rgba(0,0,0,.5)); }
.card__art::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 45%,rgba(0,0,0,.28));
}

/* ---------- Regeltekst ---------- */
.card__body{
  flex:0 0 auto; min-height:0;
  padding:calc(1.6*var(--mm)) var(--card-pad) calc(1*var(--mm));
  display:flex; flex-direction:column; gap:calc(1.1*var(--mm));
  background:var(--metal-light);
}
.card__action{
  padding:calc(1*var(--mm)) calc(1.2*var(--mm));
  border:calc(0.3*var(--mm)) dashed rgba(0,0,0,.4);
  border-radius:calc(0.8*var(--mm));
  background:rgba(255,255,255,.5);
}
.card__action .lbl{
  display:block; font:700 calc(1.7*var(--mm))/1 var(--font-display);
  text-transform:uppercase; letter-spacing:.08em; opacity:.6;
  margin-bottom:calc(0.5*var(--mm));
}
.card__effect{ line-height:1.28; }
.card__effect p{ margin:0 0 calc(0.9*var(--mm)); }
.card__effect p:last-child{ margin-bottom:0; }
.card__effect strong{ font-weight:700; }
.card__flavor{
  margin-top:auto;
  font-size:var(--fs-tiny); font-style:italic; line-height:1.2;
  color:var(--ink-soft); opacity:.85;
}

/* ---------- Voet ---------- */
.card__foot{
  flex:0 0 auto; position:relative;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:calc(1*var(--mm));
  padding:calc(0.5*var(--mm)) var(--card-pad) calc(0.8*var(--mm));
  background:var(--metal-light);
  border-top:calc(0.25*var(--mm)) solid rgba(0,0,0,.16);
}
.card__meta{
  font:600 var(--fs-tiny)/1.15 var(--font-num);
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
}
.card__meta .dot{ opacity:.4; padding:0 .25em; }
/* De puntenwaarde is een ronde schijf, geen zeshoek. */
/* Puntenwaarde als Mars-bolletje. De donkere kern is een tweede
   achtergrondlaag BOVEN de foto: zo blijft het getal leesbaar zonder
   dat er een vlakje overheen hoeft. De negatieve bovenmarge tilt het
   bolletje in het tekstvlak, waardoor het van de kaart af lijkt te komen. */
.vp{
  flex:0 0 auto; position:relative;
  width:calc(9.6*var(--mm)); height:calc(9.6*var(--mm));
  margin-top:calc(-2.4*var(--mm));
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(0,0,0,.6) 0%, rgba(0,0,0,.3) 46%, rgba(0,0,0,0) 72%),
    url("../assets/upstream/images/mars.png") center/cover no-repeat;
  box-shadow:
    0 calc(0.6*var(--mm)) calc(1.4*var(--mm)) rgba(0,0,0,.6),
    inset 0 calc(-0.75*var(--mm)) calc(1.5*var(--mm)) rgba(0,0,0,.55),
    inset 0 calc(0.55*var(--mm)) calc(0.9*var(--mm)) rgba(255,255,255,.22);
  color:#fff;
  font-family:var(--font-num); font-weight:700;
  font-size:calc(5.8*var(--mm)); line-height:1;
  text-shadow:
    calc(0.2*var(--mm)) calc(0.2*var(--mm)) 0 rgba(0,0,0,.9),
    calc(-0.2*var(--mm)) calc(0.2*var(--mm)) 0 rgba(0,0,0,.9),
    calc(0.2*var(--mm)) calc(-0.2*var(--mm)) 0 rgba(0,0,0,.9),
    calc(-0.2*var(--mm)) calc(-0.2*var(--mm)) 0 rgba(0,0,0,.9),
    0 0 calc(1*var(--mm)) rgba(0,0,0,.95);
}
/* Staat er een zin in plaats van een cijfer, dan wordt het een ovaal. */
.vp--text{
  width:auto; min-width:calc(18*var(--mm)); height:calc(8.4*var(--mm));
  padding:0 calc(1.5*var(--mm));
  border-radius:calc(4.2*var(--mm));
  font-size:calc(2.4*var(--mm)); line-height:1.1;
  margin-top:calc(-1.6*var(--mm));
}
.vp--none{ display:none; }

/* ---------- Corporatiekaart ---------- */
.card--corp .card__head{ padding-bottom:calc(1.6*var(--mm)); }
.card--corp .card__name{ font-size:calc(4.6*var(--mm)); letter-spacing:.02em; }
.card--corp .card__body{ background:linear-gradient(180deg,#f6f2e7,#e3dbc8); }
.corp__start{
  display:flex; flex-wrap:wrap; align-items:center; gap:calc(0.8*var(--mm));
  padding:calc(1*var(--mm)) calc(1.2*var(--mm));
  background:rgba(0,0,0,.07);
  border-left:calc(0.9*var(--mm)) solid var(--c1);
  border-radius:calc(0.6*var(--mm));
  font-size:var(--fs-small);
}
.corp__start .lbl{
  width:100%; font:700 calc(1.7*var(--mm))/1 var(--font-display);
  text-transform:uppercase; letter-spacing:.08em; opacity:.6;
}

/* ---------- Achterkant ---------- */
.card--back{
  background:radial-gradient(120% 100% at 50% 15%,var(--c1),var(--c2) 60%,#0b0d12);
  color:#fff; align-items:center; justify-content:center; text-align:center;
  padding:calc(6*var(--mm));
}
.card--back .back__mark{ font-size:calc(26*var(--mm)); opacity:.9; }
.card--back .back__title{
  margin-top:calc(3*var(--mm));
  font:600 calc(5*var(--mm))/1.05 var(--font-display);
  text-transform:uppercase; letter-spacing:.12em;
}
.card--back .back__sub{
  margin-top:calc(1.2*var(--mm));
  font:400 calc(2.4*var(--mm))/1.2 var(--font-body);
  letter-spacing:.22em; text-transform:uppercase; opacity:.7;
}
.card--back::before{
  content:""; position:absolute; inset:calc(3*var(--mm));
  border:calc(0.4*var(--mm)) solid rgba(255,255,255,.25);
  border-radius:calc(1.6*var(--mm));
}

/* ---------- Mini-kaart ---------- */
.card--mini{ width:var(--mini-w); height:var(--mini-h); }
.card--mini .card__art{ height:calc(15*var(--mm)); }
.card--mini{ --fs-title:calc(3.1*var(--mm)); --fs-body:calc(2.1*var(--mm)); --fs-cost:calc(4.8*var(--mm)); }

/* ---------- Liggende brede kaart ---------- */
.card--wide{ width:var(--wide-w); height:var(--wide-h); }
.card--wide .card__art{ height:calc(14*var(--mm)); }

/* Nodig voor de automatische tekstverkleiner in js/app.js */
.card__body{ overflow:hidden; }

/* ---------- Officiële skin: kostenvakje en vereistenbalk ---------- */
html[data-skin="officieel"] .cost{
  background:url("../assets/upstream/images/megacredits/megacredit.png") center/100% 100% no-repeat;
  border:0; border-radius:0; box-shadow:none; color:#20180a;
  padding-bottom:calc(0.4*var(--mm));
}
html[data-skin="officieel"] .req--min{
  background:url("../assets/upstream/images/requisites/min_big.png") center/100% 100% no-repeat;
  border:0; color:#2a1c00;
}
html[data-skin="officieel"] .req--max{
  background:url("../assets/upstream/images/requisites/max_big.png") center/100% 100% no-repeat;
  border:0; color:#fff; text-shadow:0 calc(0.2*var(--mm)) calc(0.3*var(--mm)) rgba(0,0,0,.6);
}

/* ============================================================
   KAARTBLOKKEN — voordeel, effect en actie
   Eén opmaak voor alles wat een gespeelde kaart doet.
   ============================================================ */
.cblocks{
  display:flex; flex-direction:column;
  gap:calc(0.8 * var(--mm));
}

.cb{
  /* Gecentreerd en gestapeld: de icoonrij is het beeldmerk van de kaart,
     dus die staat vrij in het midden en niet naast een kopje. */
  display:flex; flex-direction:column; align-items:center;
  gap:calc(0.5 * var(--mm));
  padding:calc(0.8*var(--mm)) calc(1*var(--mm)) calc(0.9*var(--mm));
  border-radius:calc(0.9 * var(--mm));
  background:rgba(255,255,255,.5);
  box-shadow:inset 0 0 0 calc(0.22*var(--mm)) rgba(0,0,0,.14);
}

/* Een actie kost iets en mag je maar één keer per beurt doen; de
   streepjesrand markeert dat, net als in het originele spel. */
.cb--action{
  background:rgba(255,255,255,.6);
  border:calc(0.3 * var(--mm)) dashed rgba(0,0,0,.45);
  box-shadow:none;
}

.cb__lbl{
  font:700 calc(1.8*var(--mm))/1 var(--font-display);
  text-transform:uppercase; letter-spacing:.09em;
  opacity:.5;
}

.cb__row{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:calc(1.5 * var(--mm));
  font-size:calc(4.7 * var(--mm));
}

.cb__note{
  font-size:calc(2.1 * var(--mm)); font-style:italic; line-height:1.28;
  color:var(--ink-soft); text-align:center;
}
.cb__note::before{ content:"("; }
.cb__note::after{ content:")"; }


/* ============================================================
   GEBOGEN PANELEN
   De echte kaarten stapelen geen rechthoeken: de vlakken hebben
   gebogen randen die over de illustratie heen vallen. Dat doen we
   met een border-radius waarvan de horizontale straal veel groter
   is dan de verticale — dan lopen de twee hoeken in het midden in
   elkaar over tot één vloeiende boog.
   ============================================================ */
.card__panel{
  position:relative; z-index:2; flex:0 0 auto;
  padding:calc(1.3*var(--mm)) calc(1.7*var(--mm)) calc(1.4*var(--mm));
  background:var(--metal-light);
}
.card__panel--top{
  border-radius:0 0 50% 50% / 0 0 calc(2.6*var(--mm)) calc(2.6*var(--mm));
  margin-bottom:calc(-1.6*var(--mm));
  padding-bottom:calc(2.4*var(--mm));
  box-shadow:
    inset 0 calc(-0.45*var(--mm)) 0 rgba(255,255,255,.85),
    inset 0 calc(-0.9*var(--mm)) calc(0.9*var(--mm)) rgba(0,0,0,.12),
    0 calc(0.5*var(--mm)) calc(1*var(--mm)) rgba(0,0,0,.32);
}
.card__panel--bot{
  border-radius:50% 50% 0 0 / calc(2.6*var(--mm)) calc(2.6*var(--mm)) 0 0;
  margin-top:calc(-1.6*var(--mm));
  padding-top:calc(2.4*var(--mm));
  box-shadow:
    inset 0 calc(0.45*var(--mm)) 0 rgba(255,255,255,.9),
    inset 0 calc(0.9*var(--mm)) calc(0.9*var(--mm)) rgba(0,0,0,.1),
    0 calc(-0.5*var(--mm)) calc(1*var(--mm)) rgba(0,0,0,.32);
}

/* Het kaartnummer als klein plaatje onderaan de illustratie */
.card__pill{
  position:absolute; left:50%; bottom:calc(0.9*var(--mm));
  transform:translateX(-50%); z-index:3;
  padding:calc(0.35*var(--mm)) calc(1.6*var(--mm)) calc(0.5*var(--mm));
  border-radius:99px;
  background:linear-gradient(180deg,rgba(20,28,38,.9),rgba(8,12,18,.92));
  box-shadow:inset 0 calc(0.25*var(--mm)) 0 rgba(255,255,255,.28),
             0 calc(0.2*var(--mm)) calc(0.4*var(--mm)) rgba(0,0,0,.5);
  font:600 calc(1.8*var(--mm))/1 var(--font-num);
  letter-spacing:.16em; color:#9fd0ef;
}


/* Staan er twee blokken boven elkaar in één paneel, dan is er simpelweg
   geen ruimte voor iconen op volle grootte. Ze schalen dan een stap
   terug, zodat de illustratie niet wordt platgedrukt. */
.card__panel:has(.cb + .cb) .cb__row{
  font-size:calc(3.9 * var(--mm));
  gap:calc(1.1 * var(--mm));
}
.card__panel:has(.cb + .cb) .cb__note{ font-size:calc(1.95 * var(--mm)); }


/* Dunne scheidingslijn boven de sfeerzin, zoals op de echte kaarten. */
.card__flavor{
  border-top:calc(0.22*var(--mm)) solid rgba(0,0,0,.22);
  padding-top:calc(0.9*var(--mm));
  text-align:center;
}
/* Het kostenvakje steekt iets boven de kopstrook uit. */
.cost{ margin-top:calc(-0.7*var(--mm)); }

/* ============================================================
   WERKNEMERSKAART
   Drie zones: CEO-bonus boven, medewerkerbonus onder, en daartussen
   een strook met foto, naam en tags.

   De strook staat op top:50% met een verschuiving van de halve eigen
   hoogte, en beide helften worden berekend als calc(50% - strook/2).
   Procenten gaan over de binnenmaat van de kaart, dus de randdikte
   hoeft nergens in de som voor te komen — en inhoud in de ene helft
   kan de strook nooit verschuiven.
   ============================================================ */
.card--crew{ --c1:var(--type-crew-1); --c2:var(--type-crew-2); }

.card--crew .wn__helft{
  position:absolute; left:0; right:0;
  display:flex; flex-direction:column;
  padding:calc(2.2*var(--mm)) var(--card-pad);
  background:var(--metal-light);
  overflow:hidden;
}
.wn__helft--ceo{ top:0;    height:calc(50% - var(--wn-strip-h) / 2); }
.wn__helft--mw { bottom:0; height:calc(50% - var(--wn-strip-h) / 2);
                 padding-bottom:calc(6.2*var(--mm)); }

/* De inhoud zoekt het midden van zijn eigen helft op. */
.wn__inhoud{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; justify-content:center;
  gap:calc(1.1*var(--mm));
}

/* Symmetrische marge houdt het label gecentreerd op de kaart, maar
   zorgt dat de tekst nooit onder het kostenvakje linksboven of het
   puntenbolletje rechtsonder kan lopen. Een lang label breekt af. */
.wn__kop{
  flex:0 0 auto; text-align:center;
  padding:0 calc(11*var(--mm));
  font:700 calc(2*var(--mm))/1.2 var(--font-display);
  text-transform:uppercase; letter-spacing:.15em;
  color:var(--c2); opacity:.7;
}
.wn__helft--ceo .wn__kop{ margin-bottom:calc(1.5*var(--mm)); }
.wn__helft--mw  .wn__kop{ margin-top:calc(1.5*var(--mm)); }

/* ---------- De middenstrook ---------- */
.wn__strip{
  position:absolute; left:0; right:0; z-index:2;
  top:50%; transform:translateY(-50%);
  height:var(--wn-strip-h);
  display:flex; align-items:center; gap:calc(1.7*var(--mm));
  padding:0 var(--card-pad);
  background:linear-gradient(180deg,var(--c1),var(--c2));
  color:#fff;
  box-shadow:
    inset 0 calc(0.45*var(--mm)) 0 rgba(255,255,255,.32),
    inset 0 calc(-0.45*var(--mm)) 0 rgba(0,0,0,.3),
    0 calc(0.3*var(--mm)) calc(0.9*var(--mm)) rgba(0,0,0,.4);
}

.wn__foto{
  flex:0 0 auto;
  width:calc(11.4*var(--mm)); height:calc(11.4*var(--mm));
  border-radius:50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--art-bg, var(--type-crew-2));
  border:calc(0.45*var(--mm)) solid rgba(255,255,255,.6);
  box-shadow:0 calc(0.25*var(--mm)) calc(0.6*var(--mm)) rgba(0,0,0,.5);
}
.wn__foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.wn__ic{ font-size:calc(6*var(--mm)); color:rgba(255,255,255,.9); }

.wn__naam{
  flex:1 1 auto; min-width:0;
  font-family:var(--font-display); font-weight:600;
  font-size:calc(3.7*var(--mm)); line-height:1.03;
  text-transform:uppercase; letter-spacing:.01em;
  text-shadow:0 calc(0.25*var(--mm)) 0 rgba(0,0,0,.5);
  overflow-wrap:break-word; hyphens:auto;
}
.wn__rol{
  display:block; margin-top:calc(0.4*var(--mm));
  font:400 calc(2.1*var(--mm))/1.15 var(--font-body);
  text-transform:none; letter-spacing:.02em; opacity:.85;
}

.wn__tags{
  flex:0 0 auto; display:flex; gap:calc(0.7*var(--mm));
  font-size:calc(4.3*var(--mm));
}

/* ---------- Kosten, punten en herkomst ---------- */
.wn__cost{
  position:absolute; z-index:3;
  left:calc(1.7*var(--mm)); top:calc(1.7*var(--mm));
}
.wn__voet{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:calc(1*var(--mm));
  padding:calc(0.8*var(--mm)) var(--card-pad) calc(1.2*var(--mm));
}

/* Op een halve kaart is minder ruimte, dus de blokken iets compacter. */
.card--crew .cb{ padding:calc(0.9*var(--mm)) calc(1*var(--mm)) calc(1.1*var(--mm)); }
.card--crew .cb__row{ font-size:calc(4.3*var(--mm)); gap:calc(1.3*var(--mm)); }
.card--crew .cblocks{ gap:calc(0.9*var(--mm)); }