/* De letters van Charon Styx: klassieke kapitalen zoals op zijn poster,
   en een cursieve boekletter voor wat hij zegt. Alleen deze kaart
   gebruikt ze, dus ze worden hier geladen en niet op elke bladzijde. */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&display=swap");

/* ============================================================
   CHARON STYX — de opdracht als contract
   ------------------------------------------------------------
   Geen papiertje maar een overeenkomst met status: de nacht boven
   de Styx als ondergrond, een gouden lijst met ingezette hoeken
   zoals op een aandeelbewijs, zijn embleem bovenaan en een gouden
   zegel onderaan. Even groot als een projectkaart, met een zwarte
   rand in plaats van een witte; de kaartrug is zijn poster in een
   smalle zwarte rand (zie .card--backlijst in css/cards.css).

   De opbouw staat vast: kop, naam, verhaal, opdracht, voorwaarden.
   Alleen het verhaal rekt mee, dus de opdracht en het zegel staan
   op elke kaart op dezelfde plek.

   Alles is dicht van kleur. Een doorzichtig verloop wordt in Safari
   bij afdrukken een dicht vlak (zie docs/ontwerpgids.md, §3e); de
   gloed onderin is daarom een verloop dat in de ondergrondkleur
   eindigt, niet in doorzichtig.
   ============================================================ */
.card--styx{
  --c1:var(--styx-goud); --c2:var(--styx-rand);
  border-color:var(--styx-rand);
  box-shadow:none;
  background:linear-gradient(180deg, var(--styx-hemel) 0%, var(--styx-nacht) 46%);
  color:var(--styx-ivoor);
  text-align:center;
  padding:calc(4.6*var(--mm)) calc(5*var(--mm)) calc(3.4*var(--mm));
}
/* Geen papierschaduw: die maakt het goud vaal. */
.card--styx::after{ content:none; }

/* De zon die op het water ligt, onder het zegel. */
.card--styx::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:46%;
  background:radial-gradient(75% 95% at 50% 100%,
    var(--styx-gloed) 0%, var(--styx-nacht) 100%);
  pointer-events:none;
}
.card--styx > *{ position:relative; z-index:1; }

/* ---------- De gouden lijst ---------- */
.card--styx > .styx__lijst{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; pointer-events:none;
}
.styx__lijn{ fill:none; stroke:var(--styx-goud); stroke-width:.26; }
.styx__lijn--fijn{ stroke:var(--styx-goud-diep); stroke-width:.14; }
.styx__hoekster{ fill:var(--styx-goud); }

/* ---------- Kop: embleem, naam en nummer ---------- */
.styx__kop{
  flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center;
}
.styx__embleem{
  width:calc(8.2*var(--mm)); height:calc(8.2*var(--mm));
  color:var(--styx-goud);
  /* De sleuf tussen rivier en sikkel heeft de kleur van de lucht
     waar het embleem staat. */
  --gat:color-mix(in srgb, var(--styx-hemel) 82%, var(--styx-nacht));
}
.emb__vorm{ fill:currentColor; }
.emb__gat{ fill:none; stroke:var(--gat); stroke-width:2.2; stroke-linejoin:round; }

.styx__merk{
  margin-top:calc(0.9*var(--mm));
  font:600 calc(2.35*var(--mm))/1 var(--font-styx);
  letter-spacing:.36em; text-transform:uppercase;
  /* De spatiëring staat ook achter de laatste letter; zonder deze
     opvulling links staat de naam optisch uit het midden. */
  padding-left:.36em;
}
.styx__nr{
  align-self:stretch;
  display:flex; align-items:center; gap:calc(1.5*var(--mm));
  margin-top:calc(1.7*var(--mm));
  font:600 calc(1.45*var(--mm))/1 var(--font-styx);
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--styx-goud);
  white-space:nowrap;
}
.styx__nr::before, .styx__nr::after{
  content:""; flex:1 1 auto; height:calc(0.18*var(--mm));
  background:var(--styx-goud-diep);
}

/* ---------- De naam van de opdracht ---------- */
.styx__naam{
  flex:0 0 auto;
  margin:calc(2.5*var(--mm)) 0 0;
  font:700 calc(4*var(--mm))/1.1 var(--font-styx);
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--styx-goud-licht);
  overflow-wrap:break-word; text-wrap:balance;
}

/* ---------- Wat Styx erover zegt ----------
   Rekt mee met de ruimte die er is en krimpt als het niet past
   (T.fitCards). De automatische marges centreren de tekst, maar
   laten hem bij te veel tekst alleen onderaan overlopen; zo meet
   scrollHeight de echte overloop. */
.styx__verhaal{
  flex:1 1 auto; min-height:0; overflow:hidden;
  display:flex; flex-direction:column;
  margin-top:calc(1.4*var(--mm));
  font:italic 500 calc(3*var(--mm))/1.22 var(--font-styx-tekst);
  color:var(--styx-ivoor-zacht);
}
/* pretty: geen los woordje op de laatste regel, waar de browser dat kan. */
.styx__verhaal p{ margin:auto 0; padding:0 calc(0.6*var(--mm)); text-wrap:pretty; }
.styx__verhaal p::before{ content:"\201E"; }
.styx__verhaal p::after{ content:"\201D"; }

/* ---------- I. De opdracht ---------- */
.styx__opdracht{
  flex:0 0 auto;
  margin-top:calc(1.6*var(--mm));
  padding-top:calc(1.7*var(--mm));
  border-top:calc(0.18*var(--mm)) solid var(--styx-goud-diep);
}
.styx__artikel, .styx__clausule b{
  font:600 calc(1.45*var(--mm))/1.1 var(--font-styx);
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--styx-goud);
}
.styx__artikel{ padding-left:.26em; }

/* Het getal en de fiches. Op elke kaart precies even hoog, zodat de
   opdracht en de voorwaarden overal op dezelfde plek staan; fiches die
   niet passen worden kleiner (T.fitCards). */
.styx__doel{
  display:flex; align-items:center; justify-content:center;
  gap:calc(1.8*var(--mm));
  /* Hoog genoeg voor een opstelling van drie rijen tegels. */
  height:calc(12.5*var(--mm));
  margin-top:calc(0.9*var(--mm));
  color:var(--styx-goud-licht);
}
.styx__getal{
  font:600 calc(8.6*var(--mm))/1 var(--font-styx);
  /* Cinzel staat iets hoog op zijn regel; zo staat het getal op
     dezelfde middellijn als de fiches. */
  padding-top:calc(0.5*var(--mm));
}
/* Altijd op één regel; past het niet, dan maakt T.fitCards de fiches
   kleiner. Twee halve rijen lezen slechter dan één kleine. */
.styx__fiches{
  display:inline-flex; align-items:center; flex-wrap:nowrap; justify-content:center;
  gap:calc(1.2*var(--mm));
  font-size:calc(5.4*var(--mm)); line-height:1;
}
.card--styx .of{ color:var(--styx-ivoor); }
/* Een woordje tussen de fiches ("NAAST") in de kapitalen van de kop. */
.styx__fiches .tekst{
  font:600 .5em/1.15 var(--font-styx);
  letter-spacing:.08em;
}

/* De opdracht in woorden: twee regels hoog, ook als hij op één regel
   past. Langer dan twee regels? Dan wordt hij kleiner (T.fitCards). */
.styx__tekst{
  display:flex; align-items:center; justify-content:center;
  height:calc(2 * 1.25 * 2.45 * var(--mm));
  margin-top:calc(0.9*var(--mm));
  font:500 calc(2.45*var(--mm))/1.25 var(--font-body);
  color:var(--styx-ivoor);
}
.styx__tekst strong{ color:var(--styx-goud-licht); }

/* ---------- II en III: de voorwaarden, met het zegel ertussen ---------- */
.styx__voorwaarden{
  flex:0 0 auto;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:calc(1*var(--mm));
  margin-top:calc(1.6*var(--mm));
}
.styx__clausule{
  display:flex; flex-direction:column; align-items:center;
  gap:calc(0.8*var(--mm));
}
.styx__clausule b{ letter-spacing:.18em; font-size:calc(1.3*var(--mm)); }
/* Alleen de tekst zelf, niet de fiches die erin staan. */
.styx__clausule > span{
  font:italic 500 calc(2.35*var(--mm))/1.1 var(--font-styx-tekst);
  color:var(--styx-ivoor-zacht);
}
.styx__clausule > .styx__straf{
  font:normal 600 calc(4.4*var(--mm))/1 var(--font-num);
  color:var(--styx-ivoor);
}

/* Het zegel steekt over de gouden lijst heen, zoals een zegel op een
   akte. */
.styx__zegel{
  width:calc(11.5*var(--mm)); height:calc(11.5*var(--mm));
  margin-bottom:calc(-2.4*var(--mm));
}
.zegel__schaduw{ fill:var(--styx-schaduw); }
.zegel__was{ fill:var(--styx-goud-diep); }
.zegel__licht{ fill:var(--styx-goud); }
.zegel__stempel{ fill:var(--styx-goud-midden); stroke:var(--styx-goud-diep); stroke-width:.45; }
.zegel__embleem{ --gat:var(--styx-goud-midden); }
.zegel__embleem .emb__vorm{ fill:var(--styx-goud-donker); }