@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@800&family=Great+Vibes&display=swap');

/* ============================================================
   KOKA Pearls — logo component
   Requires Playfair Display (800) + Great Vibes (loaded by the
   @import above, so this works wherever logo.css is linked).

   Size the whole lockup with ONE value: font-size on .koka.
   Everything below scales in em, so it stays crisp at any size.
   ============================================================ */

.koka {
  --koka-sapphire: #1B2A6B;   /* frame + letters (light bg) */
  --koka-gold-key: #C9A24B;   /* inner keyline / swash */
  --koka-gold-script: #A9863A;/* "Pearls" script (light bg) */
  --koka-ivory: #F6F3EC;      /* letters on dark bg */
  --koka-gold-frame: #D9BE84; /* frame on dark bg */
  --koka-gold-light: #E7C879; /* script on dark bg */

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.42em;
  line-height: 1;
  font-size: 64px;            /* <-- change this to resize */
}

/* horizontal lockup: square on the left, Pearls on the right */
.koka--row { flex-direction: row; align-items: center; gap: 0.6em; }
.koka--row .koka__pearls { transform: translateY(0.04em); }

/* ---- the square monogram ---- */
.koka__sq {
  width: 2.95em; height: 2.95em;
  border-radius: 0.5em;
  padding: 0.22em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  border: 0.11em solid var(--koka-sapphire);     /* thick frame */
  border-top-width: 0.19em;                       /* top + bottom thicker */
  border-bottom-width: 0.19em;
  box-shadow: inset 0 0 0 0.026em rgba(201,162,75,0.5); /* fine gold keyline */
}
.koka__sq > span {
  display: grid; place-items: center; line-height: 0.78;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800; font-size: 1.3em;
  color: var(--koka-sapphire);
}
.koka__sq > span:nth-child(1) { align-self: end;   justify-self: end;   padding: 0 0.03em 0.04em 0; }
.koka__sq > span:nth-child(2) { align-self: end;   justify-self: start; padding: 0 0 0.04em 0.03em; }
.koka__sq > span:nth-child(3) { align-self: start; justify-self: end;   padding: 0.04em 0.03em 0 0; }
.koka__sq > span:nth-child(4) { align-self: start; justify-self: start; padding: 0.04em 0 0 0.03em; }

/* ---- the "Pearls" script (LIVE TEXT — never an image/canvas) ---- */
.koka__pearls { display: flex; flex-direction: column; align-items: center; gap: 0.06em; }
.koka__word {
  display: block;
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-size: 1.28em;
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--koka-gold-script);
  -webkit-text-stroke: 0.018em currentColor; /* faux-bold, stays vector-crisp */
}
.koka__swash { height: 0.025em; min-height: 1.6px; width: 2.1em; border-radius: 2px; background: var(--koka-gold-key); }

/* ---- light variant: for dark / jewel-tone backgrounds ---- */
.koka--light .koka__sq { border-color: var(--koka-gold-frame); box-shadow: inset 0 0 0 0.022em rgba(245,243,236,0.3); }
.koka--light .koka__sq > span { color: var(--koka-ivory); }
.koka--light .koka__word { color: var(--koka-gold-light); }
.koka--light .koka__swash { background: var(--koka-gold-light); }

/* ---- monogram only (hide the wordmark) ---- */
.koka--mark .koka__pearls { display: none; }