/* ==========================================================================
   kotobạn — annotated hero wordmark
   Drop-in snippet. Semantic HTML, no JavaScript, responsive down to 360px.

   The wordmark is set as three segments — "koto" | "bạ" | "n" — so the
   name reads as ONE word while each part carries its own annotation,
   furigana-style, on leader lines:

     "koto"  →  言葉 (kotoba), "word" — Japanese        (label above)
     "bạ"    →  the overlap, shared by BOTH words        (label below, vermilion)
     "n"     →  bạn, "friend" — Vietnamese              (label above)

   The shared "bạ" is set in hanko vermilion with an underline bracket and
   keeps bạn's nặng tone mark (ạ) — both languages stay visible in the name.

   Include tokens.css BEFORE this file. Every var() carries a fallback so
   the snippet still renders sanely on its own.
   ========================================================================== */

.kb-wordmark-wrap {
  text-align: center;
  padding: clamp(2rem, 8vw, 4.5rem) 1rem 0;
}

.kb-wordmark {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 0;
  font-family: var(--kb-font-display, "Iowan Old Style", "Palatino Linotype",
    Palatino, Georgia, "Hiragino Mincho ProN", "Noto Serif", serif);
  font-weight: 600;
  font-size: clamp(3rem, 15vw, 7rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--kb-ink, #201914);
}

/* One segment of the word: annotation + glyphs, stacked */
.kb-wm-seg {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* ---- annotations ------------------------------------------------------
   Labels sit above their segment (furigana-style) with a 1px leader line
   dropping to the glyphs — except the shared "bạ", whose label hangs
   BELOW so its bracket reads as an underline. The middle segment keeps
   its top zone empty, which lets the outer labels breathe at 360px. */

.kb-wm-note {
  font-family: var(--kb-font-body, system-ui, -apple-system, "Segoe UI",
    "Hiragino Sans", "Noto Sans", sans-serif);
  font-size: clamp(0.52rem, 2.5vw, 0.82rem);
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  color: var(--kb-muted, #8a7c63);
}

.kb-wm-note-src {
  display: block;
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 700;
  font-size: 1.12em;
  color: var(--kb-ink, #201914);
}

.kb-wm-note-gloss {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  font-size: 0.92em;
}

.kb-wm-note--top {
  order: -1;
  margin-bottom: 0.5em;
}

.kb-wm-note--top::after {
  content: "";
  display: block;
  width: 1px;
  height: clamp(10px, 3.2vw, 22px);
  margin: 0.4em auto 0;
  background: var(--kb-line, #e6dac0);
}

.kb-wm-note--bottom {
  order: 1;
  margin-top: 0.5em;
}

.kb-wm-note--bottom::before {
  content: "";
  display: block;
  width: 1px;
  height: clamp(10px, 3.2vw, 22px);
  margin: 0 auto 0.4em;
  background: var(--kb-line, #e6dac0);
}

/* ---- the shared "bạ" ----------------------------------------------------
   Hanko vermilion + an underline bracket: the overlap belongs to both. */

.kb-wm-seg--shared .kb-wm-glyph {
  color: var(--kb-primary, #bc3b1a);
  border-bottom: 0.05em solid var(--kb-primary, #bc3b1a);
  padding-bottom: 0.05em;
}

.kb-wm-seg--shared .kb-wm-note-src {
  color: var(--kb-primary, #bc3b1a);
}

/* ---- legend: the full origin story, dictionary-entry style ------------- */

.kb-wordmark-legend {
  max-width: 36rem;
  margin: 1.75rem auto 0;
  padding: 0 0.5rem;
  font-size: clamp(0.85rem, 3.6vw, 1rem);
  line-height: 1.7;
  color: var(--kb-ink-soft, #4e4536);
}

.kb-wordmark-legend .kb-wm-legend-word {
  font-family: var(--kb-font-display, Georgia, serif);
  font-weight: 700;
  color: var(--kb-ink, #201914);
}

.kb-wordmark-legend .kb-wm-legend-shared {
  color: var(--kb-primary, #bc3b1a);
  font-weight: 700;
}

/* Tighten gracefully on the smallest screens */
@media (max-width: 380px) {
  .kb-wordmark {
    font-size: clamp(2.6rem, 15vw, 3rem);
  }
}