/* ===========================================================================
   EYOX phone-case designs 21-30 (na het founderbesluit van 28-08).
   Richting uit dat gesprek: licht teal als primaire hoeskleur (mist als
   secundaire vergelijking), het merk nadrukkelijk aanwezig, een contrasterend
   merkeigen grafisch vlak, en directe herkenning wanneer het toestel met de
   voorkant naar beneden in de winkel ligt. De rug zet de wereld van de app
   voort via palet, horizon, gloed, straalritme, de aanmeldcirkels en de
   haarlijn-discipline; nooit via letterlijke UI-panelen, kaarten of knoppen.
   Elke print gebruikt de echte merkgeometrie (dome, stralen, gloedcirkel)
   onvervormd; duotone-inkting volgt het geaccepteerde precedent van print 14.
   De composities zelf staan als inline SVG in print-21..30.html; dit bestand
   plaatst alleen woordmerken en zet gedeelde regels.
   =========================================================================== */

/* wordmark rows reuse the .logo pattern from mockup.css (absolute, flex) */
.q21 .logo { top: auto; bottom: 52px; } .q21 .logo .wm { width: 100px; }
.q22 .logo { top: auto; bottom: 52px; } .q22 .logo .wm { width: 100px; }
.q23 .logo { top: 208px; }              .q23 .logo .wm { width: 96px; }
.q25 .logo { top: auto; bottom: 52px; } .q25 .logo .wm { width: 100px; }
.q26 .logo { top: auto; bottom: 52px; } .q26 .logo .wm { width: 96px; }
.q27 .logo { top: auto; bottom: 52px; } .q27 .logo .wm { width: 104px; }
.q28 .logo { top: 272px; }              .q28 .logo .wm { width: 92px; }
.q29 .logo { left: 0; right: 118px; top: auto; bottom: 52px; } .q29 .logo .wm { width: 96px; }

/* gedeelde onderste lockup (24 en de boog-variaties): logo en naam dicht
   bij elkaar, onderaan uitgelijnd, conform Rubens review van 28-08 */
.b-lockup {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 52px;
  display: flex; flex-direction: column; align-items: center; gap: 24px; z-index: 4;
}
.b-lockup .mk { width: 92px; height: 92px; display: block; }
.b-lockup img.wm { width: 100px; display: block; }
.b-lockup.small { bottom: 52px; gap: 21px; }
.b-lockup.small .mk { width: 82px; height: 82px; }
.b-lockup.small img.wm { width: 92px; }

/* streep-reeks (37-40) */
.q37 .logo { top: auto; bottom: 52px; } .q37 .logo .wm { width: 100px; }
.q38 .logo { top: auto; bottom: 52px; } .q38 .logo .wm { width: 96px; }
.b-lockup.hem { bottom: 78px; gap: 22px; }
.b-lockup.hem .mk { width: 88px; height: 88px; }
.b-lockup.hem img.wm { width: 96px; }

/* wordmark rows for the horizon-variaties */
.q31 .logo { top: auto; bottom: 68px; } .q31 .logo .wm { width: 108px; }
.q32 .logo { top: auto; bottom: 52px; } .q32 .logo .wm { width: 100px; }
.q33 .logo { top: 436px; }              .q33 .logo .wm { width: 96px; }

/* q30: kleine inkt-lockup laag op het hoesje; de rest is spot-UV simulatie */
.q30 .lockup {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 48px;
  display: flex; flex-direction: column; align-items: center; gap: 18px; z-index: 4;
}
.q30 .lockup .mk { width: 72px; height: 72px; display: block; }
.q30 .lockup img.wm { width: 84px; display: block; }