/* V17 RHYTHM — one box size (Aurore's) for all three, and the position walks: RIGHT (Aurore) -> LEFT (Clarté) -> CENTRE (Hangyeol). Title weight answers the box on the opposite side. */
@media (min-width: 900px) {
  :root { --box: min(26vw, 380px); }
  /* ---- 02 CLARTÉ: box LEFT, title RIGHT ---- */
  .wk-clarte { --S: var(--box); }
  .wk-clarte .cx-plate { left: 8vw; right: auto; top: 150px; width: var(--S); height: var(--S); }
  .wk-clarte .cx-title { left: auto; right: 6.5vw; text-align: right; bottom: 190px; }
  .wk-clarte .cx-ko { left: auto; right: 6.5vw; text-align: right; bottom: 108px; }
  .wk-clarte::before { top: calc(150px + var(--S) / 2); }
  .wk-clarte::after { left: calc(8vw + var(--S) / 2); }
  .wk-clarte .side.r { color: color-mix(in srgb, var(--w-ink) 72%, transparent); mix-blend-mode: normal; }
  /* ---- 03 HANGYEOL: box CENTRE, the two glyphs stand either side of it ---- */
  .wk-hangyeol { --kr: clamp(150px, 22vw, 320px); }
  .wk-hangyeol .hx-frame { left: 50%; right: auto; top: 190px; bottom: auto; width: var(--box); transform: translateX(-50%); }
  .wk-hangyeol .hx-kr { left: 50%; top: calc(190px + var(--box) / 2 - var(--kr) * .39); font-size: var(--kr); letter-spacing: calc(var(--box) + 40px); translate: calc(-50% + (var(--box) + 40px) / 2) 0; text-align: center; white-space: nowrap; }
  .wk-hangyeol .hx-title { left: 50%; translate: -50% 0; top: calc(190px + var(--box) + 56px); text-align: center; }
  .wk-hangyeol .hx-ko { left: 50%; translate: -50% 0; top: calc(190px + var(--box) + 138px); text-align: center; max-width: 22em; }
  .wk-hangyeol .side.r { color: color-mix(in srgb, var(--w-ink) 72%, transparent); mix-blend-mode: normal; }
}