/**
 * Mobile Readability Refinement — warm off-white, larger type, middle-third verse.
 * Study: flat type + image overlay (no shadows/plates).
 * Exhibition: study v2 legibility (feather plates + subtle shadows) on bright artwork.
 * Enable: ?typography=mobile-refine
 */

html.kml-typography-mobile-refine {
  /* +30% keyword / +15% verse over mobile-v2 study baseline */
  --kml-size-keyword: clamp(2.37rem, 6.83vmin, 3.98rem);
  --kml-size-verse-jp: clamp(2.13rem, 7.48vmin, 4.31rem);
  --kml-size-verse-en: var(--kml-size-verse-en-display);

  /* Unified ivory — kanji, keyword, verses (study capture palette) */
  --kml-color-kanji: #f2eee6;
  --kml-color-keyword: var(--kml-color-kanji);
  --kml-color-verse-jp: #f0e8da;
  --kml-color-verse-en: #f0e8da;

  --kml-shadow-kanji: 0 1px 3px rgba(0, 0, 0, 0.45);
  --kml-shadow-keyword: var(--kml-shadow-kanji);
  --kml-shadow-verse-jp: 0 1px 3px rgba(0, 0, 0, 0.42);
  --kml-shadow-verse-en: 0 1px 3px rgba(0, 0, 0, 0.42);
  --kml-title-block-strength: 0;
  --kml-verse-block-strength: 0;
}

html.kml-typography-mobile-refine .ambient-kanji {
  color: var(--kml-color-kanji) !important;
}

html.kml-typography-mobile-refine .ambient-keyword {
  color: var(--kml-color-keyword);
}

html.kml-typography-mobile-refine .ambient-root.is-foundations .ambient-keyword,
html.kml-typography-mobile-refine .ambient-root.is-foundations .ambient-verse-jp,
html.kml-typography-mobile-refine .ambient-root.is-foundations .ambient-verse-en {
  text-shadow: none !important;
}

html.kml-typography-mobile-refine .ambient-root.is-foundations .kml-title-block::before,
html.kml-typography-mobile-refine .ambient-root.is-foundations .kml-verse-block::before {
  display: none;
}

/* ── Study (ambient / index.html) ── */

html.kml-typography-mobile-refine .ambient-root.is-foundations {
  --ambient-overlay: 0.38;
}

html.kml-typography-mobile-refine .ambient-root.is-foundations .ambient-stage {
  display: block;
  position: relative;
  height: 100%;
  padding: 0;
  gap: 0;
}

html.kml-typography-mobile-refine .ambient-root.is-foundations .ambient-kanji-block {
  position: absolute;
  top: clamp(2.5rem, 11vh, 5rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 34rem);
  z-index: 3;
}

html.kml-typography-mobile-refine .ambient-root.is-foundations .ambient-keyword {
  letter-spacing: 0.16em;
}

/* Verse — middle third (~100px+ above mobile-v2 lower-third at 1080p) */
html.kml-typography-mobile-refine .ambient-root.is-foundations .ambient-verses {
  position: absolute;
  left: 50%;
  top: var(--kml-verse-top, 50%);
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(94vw, 40rem);
  max-width: 40rem;
  padding: 0 clamp(0.75rem, 3.5vw, 1.5rem);
  z-index: 3;
}

html.kml-typography-mobile-refine .ambient-root.is-foundations .ambient-verse-jp,
html.kml-typography-mobile-refine .ambient-root.is-foundations .ambient-verse-en {
  font-weight: 400;
  letter-spacing: 0.02em;
}

html.kml-typography-mobile-refine .ambient-root.is-foundations .ambient-verse-jp {
  margin: 0;
  text-align: center;
  font-size: calc(var(--kml-size-verse-jp) * var(--kml-verse-scale, 1));
  line-height: 1.62;
  white-space: normal;
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: normal;
  text-wrap: wrap;
  hanging-punctuation: allow-end;
}

html.kml-typography-mobile-refine .ambient-verse-jp br {
  display: block;
  content: "";
  margin-top: 0.35em;
}

html.kml-typography-mobile-refine .ambient-verse-jp ruby {
  ruby-position: over;
}

html.kml-typography-mobile-refine .ambient-verse-jp ruby rt {
  opacity: 0;
}

html.kml-typography-mobile-refine
  .ambient-root.is-foundations:has(.ambient-verse-jp.is-visible)
  .ambient-kanji-block {
  opacity: 0 !important;
  transition: opacity var(--ambient-fade) ease-in-out;
}

html.kml-typography-mobile-refine .ambient-root.is-foundations .ambient-verse-en {
  display: none;
}

/* ── Authored display lines (capture / exhibition; one <br> = one line) ── */

html.kml-typography-mobile-refine.kml-verse-authored .ambient-verse-jp.has-authored-lines .kml-verse-line,
html.kml-typography-mobile-refine.kml-verse-authored .exhibition-verse-jp.has-authored-lines .kml-verse-line {
  display: block;
  /* text-wrap:unset after nowrap resets wrap mode in Chromium (shorthand split) */
  white-space: nowrap;
  text-wrap: nowrap;
}

html.kml-typography-mobile-refine.kml-verse-authored .ambient-verse-jp.has-authored-lines br,
html.kml-typography-mobile-refine.kml-verse-authored .exhibition-verse-jp.has-authored-lines br {
  display: none;
}

html.kml-typography-mobile-refine.kml-verse-authored .kml-verse-line + .kml-verse-line {
  margin-top: 0.35em;
}

/* ── Exhibition (exhibition.html) — study legibility on bright artwork ── */

html.kml-typography-mobile-refine .exhibition-root {
  /* Study v2 legibility on bright artwork — feather plate + shadow (no full-image overlay) */
  --kml-title-block-strength: 0.58;
  --kml-verse-block-strength: 0.5;
  --kml-shadow-verse-jp:
    0 1px 3px rgba(0, 0, 0, 0.42),
    0 2px 12px rgba(0, 0, 0, 0.38);
  --kml-shadow-verse-en: var(--kml-shadow-verse-jp);
  /* Heart voice — Cormorant (Latin) + Noto Serif JP (CJK verses) */
  --kml-font-heart-voice: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --kml-font-heart-verse-jp: "Noto Serif JP", serif;
  --kml-exhibition-keyword-opacity: 1;
  --kml-exhibition-verse-opacity: 1;
}

html.kml-typography-mobile-refine .exhibition-kanji {
  color: var(--kml-color-kanji) !important;
  text-shadow: var(--kml-shadow-kanji);
}

/* Exhibition title — Cormorant upright (same family as EN verse), ~12% larger */
html.kml-typography-mobile-refine .exhibition-keyword {
  font-family: var(--kml-font-heart-voice);
  font-size: calc(var(--kml-size-keyword) * 1.125);
  color: var(--kml-color-kanji);
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.1em;
  text-shadow: var(--kml-shadow-kanji);
}

html.kml-typography-mobile-refine .exhibition-keyword.is-visible {
  opacity: var(--kml-exhibition-keyword-opacity, 1);
}

html.kml-typography-mobile-refine .exhibition-title.kml-title-block::before,
html.kml-typography-mobile-refine .exhibition-notes.kml-verse-block::before {
  display: block;
  opacity: 0;
}

/* Feather plates track visible title / verse — fade with text, not an abrupt pop-off */
html.kml-typography-mobile-refine .exhibition-title.kml-title-block:has(
  .exhibition-kanji.is-visible,
  .exhibition-keyword.is-visible
)::before {
  opacity: var(--kml-title-block-strength);
}

html.kml-typography-mobile-refine .exhibition-notes.kml-verse-block:has(
  .exhibition-verse-jp.is-visible,
  .exhibition-verse-en.is-visible
)::before {
  opacity: var(--kml-verse-block-strength);
}

html.kml-typography-mobile-refine .exhibition-verse-jp,
html.kml-typography-mobile-refine .exhibition-verse-en {
  color: var(--kml-color-verse-jp);
  letter-spacing: 0.02em;
  line-height: 1.68;
  white-space: normal;
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: normal;
  text-wrap: wrap;
  text-shadow: var(--kml-shadow-verse-jp);
}

html.kml-typography-mobile-refine .exhibition-verse-jp {
  font-family: var(--kml-font-heart-verse-jp);
  font-weight: 400;
  font-style: normal;
}

html.kml-typography-mobile-refine .exhibition-verse-en {
  font-family: var(--kml-font-heart-voice);
  font-weight: 400;
  font-style: italic;
  color: var(--kml-color-verse-en);
  text-shadow: var(--kml-shadow-verse-en);
}

html.kml-typography-mobile-refine .exhibition-verse-jp.is-visible,
html.kml-typography-mobile-refine .exhibition-verse-en.is-visible {
  opacity: var(--kml-exhibition-verse-opacity, 1);
}

html.kml-typography-mobile-refine .exhibition-verse-jp br,
html.kml-typography-mobile-refine .exhibition-verse-en br {
  display: block;
  content: "";
  margin-top: 0.35em;
}

html.kml-typography-mobile-refine .exhibition-verse-jp ruby {
  ruby-position: over;
}

html.kml-typography-mobile-refine .exhibition-title {
  top: clamp(2rem, 10vh, 5rem);
}

html.kml-typography-mobile-refine .exhibition-notes {
  top: 50%;
  bottom: auto;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(94vw, 40rem);
}

html.kml-typography-mobile-refine.kml-verse-sequential .exhibition-notes {
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(94vw, 40rem);
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

html.kml-typography-mobile-refine.kml-verse-sequential .exhibition-verse-jp,
html.kml-typography-mobile-refine.kml-verse-sequential .exhibition-verse-en {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  bottom: auto;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 clamp(0.5rem, 2vw, 1rem);
  text-align: center;
  transform: translateY(-50%) !important;
  transition: opacity var(--ex-verse-fade, var(--ex-fade)) ease-in-out;
}

html.kml-typography-mobile-refine.kml-verse-sequential
  .exhibition-root.is-fixed-kanji
  .exhibition-verse-jp,
html.kml-typography-mobile-refine.kml-verse-sequential
  .exhibition-root.is-fixed-kanji
  .exhibition-verse-en,
html.kml-typography-mobile-refine.kml-verse-sequential
  .exhibition-root.is-fixed-kanji
  .exhibition-verse-jp.is-visible,
html.kml-typography-mobile-refine.kml-verse-sequential
  .exhibition-root.is-fixed-kanji
  .exhibition-verse-en.is-visible {
  transform: translateY(-50%) !important;
  transition: opacity var(--ex-verse-fade, var(--ex-fade)) ease-in-out;
}

/* Sequential — EN: Cormorant italic, same slot as JP */
html.kml-typography-mobile-refine.kml-verse-sequential .exhibition-verse-en {
  font-family: var(--kml-font-heart-voice);
  font-size: var(--kml-size-verse-en);
  line-height: 1.68;
  letter-spacing: 0.02em;
  color: var(--kml-color-verse-en);
  font-style: italic;
  font-weight: 400;
  white-space: pre-line;
  text-shadow: var(--kml-shadow-verse-en);
}

/* Heart exhibition — ambient study typography on bright artwork */
html.kml-typography-mobile-refine .exhibition-root.is-foundations-typography .exhibition-keyword {
  color: var(--kml-color-kanji) !important;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-shadow: var(--kml-shadow-kanji);
}

html.kml-typography-mobile-refine .exhibition-root.is-foundations-typography {
  --kml-size-verse-jp: var(--kml-foundations-exhibition-verse-jp);
  --kml-size-verse-en: var(--kml-foundations-exhibition-verse-en);
}

html.kml-typography-mobile-refine .exhibition-root.is-foundations-typography .exhibition-verse-jp {
  font-size: var(--kml-foundations-exhibition-verse-jp);
}

html.kml-typography-mobile-refine.kml-verse-sequential
  .exhibition-root.is-foundations-typography
  .exhibition-verse-jp {
  font-size: var(--kml-foundations-exhibition-verse-jp);
}

html.kml-typography-mobile-refine.kml-verse-sequential
  .exhibition-root.is-foundations-typography
  .exhibition-verse-en {
  font-size: var(--kml-foundations-exhibition-verse-en);
}

/* Staggered — JP first, EN fades in later as supporting translation */
html.kml-typography-mobile-refine.kml-verse-staggered {
  --kml-verse-en-support-opacity: 0.55;
  --kml-color-verse-en: rgba(242, 238, 230, 0.72);
}

html.kml-typography-mobile-refine.kml-verse-staggered .exhibition-verse-jp {
  margin-bottom: 0;
}

html.kml-typography-mobile-refine.kml-verse-staggered .exhibition-verse-en {
  margin-top: clamp(0.85rem, 2.8vh, 1.35rem);
}

html.kml-typography-mobile-refine.kml-verse-staggered .exhibition-verse-en.is-visible {
  opacity: var(--kml-verse-en-support-opacity);
}