/* Languages: the header's language menu, the suggestion bar, and type set
   for scripts the Latin display faces do not carry. See docs/multilingual.md. */

/* ── The menu ── */
.lang { position:relative; flex:none; }
.lang__btn { display:inline-flex; align-items:center; gap:.4rem; height:2.35rem; padding:0 .65rem; border:1px solid var(--rule); border-radius:var(--radius); color:var(--ink-2); font-family:var(--mono); font-size:var(--t-label); letter-spacing:.06em; cursor:pointer; list-style:none; user-select:none; transition:border-color .2s var(--ease), color .2s var(--ease); }
.lang__btn::-webkit-details-marker { display:none; }
.lang__btn:hover, .lang[open] .lang__btn { border-color:var(--ink); color:var(--ink); }
.lang__btn:focus-visible { outline:2px solid var(--mark); outline-offset:3px; }
.lang__caret { transition:transform .2s var(--ease); }
.lang[open] .lang__caret { transform:rotate(180deg); }
.lang__list { position:absolute; top:calc(100% + .55rem); inset-inline-end:0; z-index:60; display:grid; min-width:13.5rem; margin:0; padding:.35rem; list-style:none; background:var(--stone-hi); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--lift-2); }
.lang__link { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.6rem .75rem; border-radius:2px; color:var(--ink-2); font-size:var(--t-small); text-decoration:none; }
.lang__link:hover, .lang__link:focus-visible { background:var(--stone); color:var(--ink); outline:none; }
.lang__link[aria-current] { color:var(--ink); font-weight:600; }
.lang__link[aria-current]::before { content:""; order:2; width:.4rem; height:.4rem; margin-inline-start:auto; border-radius:50%; background:var(--mark); }
.lang__link[aria-current] .lang__short { order:3; }
.lang__short { font-family:var(--mono); font-size:var(--t-label); letter-spacing:.06em; color:var(--ink-3); }

/* On the dark header (over an ink band) and while the mobile menu is open. */
.nav[data-over="ink"] .lang__btn { border-color:var(--rule-ink); color:var(--on-ink-2); }
.nav[data-over="ink"] .lang__btn:hover, .nav[data-over="ink"] .lang[open] .lang__btn { border-color:var(--on-ink); color:var(--on-ink); }
.nav[data-menu="open"] .lang { opacity:0; visibility:hidden; transition:opacity .2s var(--ease), visibility 0s .2s; }

@media (max-width:860px) {
  .lang__btn { height:2.25rem; padding:0 .5rem; }
  .lang__caret { display:none; }
}
@media (max-width:420px) { .lang__globe { display:none; } }

/* ── The suggestion bar: offered, never forced ── */
.lang-hint { position:fixed; inset-inline:1rem; bottom:1rem; z-index:70; display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1rem; max-width:36rem; margin-inline:auto; padding:.85rem .9rem .85rem 1.1rem; background:var(--ink); color:var(--on-ink); border-radius:var(--radius); box-shadow:0 18px 40px -18px #000a; font-size:var(--t-small); animation:lang-hint-in .45s var(--ease-out) both; }
.lang-hint p { flex:1 1 14rem; margin:0; line-height:1.45; }
.lang-hint__go { display:inline-flex; align-items:center; padding:.5rem .9rem; background:var(--on-ink); color:var(--ink); border-radius:var(--radius); font-weight:600; text-decoration:none; white-space:nowrap; }
.lang-hint__go:hover { background:#fff; }
.lang-hint__x { display:grid; place-items:center; width:2rem; height:2rem; border:1px solid var(--rule-ink); border-radius:var(--radius); background:none; color:var(--on-ink-2); cursor:pointer; font-size:1rem; line-height:1; }
.lang-hint__x:hover { color:var(--on-ink); border-color:var(--on-ink-3); }
.lang-hint :focus-visible { outline:2px solid var(--mark-lit); outline-offset:2px; }
@keyframes lang-hint-in { from { opacity:0; translate:0 12px; } }
@media (prefers-reduced-motion:reduce) { .lang-hint { animation:none; } }

.journal-lang-note { margin-top:var(--s3); font-size:var(--t-small); color:var(--ink-3); }

/* ── Type for other scripts ──────────────────────────────────────────
   The Latin faces stay first, so Latin words (WordPress, Laravel) keep
   them; the script's own system faces follow for everything else. */
:root:lang(zh) { --display:"Bricolage","PingFang SC","Hiragino Sans GB","Noto Sans SC","Source Han Sans SC","Microsoft YaHei",sans-serif; --body:"Instrument","PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",-apple-system,sans-serif; }
:root:lang(ja) { --display:"Bricolage","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic","Meiryo",sans-serif; --body:"Instrument","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic","Meiryo",-apple-system,sans-serif; }
:root:lang(ar) { --display:"Bricolage","Geeza Pro","Noto Sans Arabic","Noto Kufi Arabic","Segoe UI","Tahoma",sans-serif; --body:"Instrument","Geeza Pro","Noto Sans Arabic","Segoe UI","Tahoma",-apple-system,sans-serif; }

/* Negative tracking and tight leading suit Latin display type only. */
:root:lang(zh) :is(h1,h2,h3,.display,.head__title), :root:lang(ja) :is(h1,h2,h3,.display,.head__title) { letter-spacing:.01em; line-height:1.22; }
:root:lang(zh) body, :root:lang(ja) body { line-height:1.75; }
:root:lang(zh) .label, :root:lang(ja) .label { letter-spacing:.04em; }
:root:lang(ja) :is(h1,h2,h3,.display,.head__title) { word-break:auto-phrase; }
:root:lang(zh) :is(p,li,dd), :root:lang(ja) :is(p,li,dd) { line-break:strict; }

/* Arabic joins its letters: any tracking breaks the words apart. */
:root:lang(ar) * { letter-spacing:0 !important; }
:root:lang(ar) :is(h1,h2,h3,.display,.head__title) { line-height:1.3; }
:root:lang(ar) body { line-height:1.8; }
:root:lang(ar) .label { text-transform:none; font-family:var(--body); font-size:.78rem; }

/* Cyrillic and long German compounds: let the largest headings break rather than overflow. */
:root:lang(ru) :is(h1,.display), :root:lang(de) :is(h1,.display) { hyphens:auto; overflow-wrap:break-word; }

/* The header's call to action: translated, it is often longer than "Start a project".
   It never wraps; on a phone it gives way (the menu repeats it). English is untouched. */
:root:not(:lang(en)) .nav__in > .btn { white-space:nowrap; }
@media (max-width:560px) { :root:not(:lang(en)) .nav__in > .btn { display:none; } }

/* Phones: the header keeps its own row (logo, call to action, Menu); the
   languages move into the menu panel, under the contact line. */
.menu__langs { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:var(--s5); }
.menu__langs a { padding:.45rem .7rem; border:1px solid var(--rule-ink); border-radius:var(--radius); color:var(--on-ink-2); font-size:var(--t-small); text-decoration:none; }
.menu__langs a:hover, .menu__langs a:focus-visible { color:var(--on-ink); border-color:var(--on-ink-3); }
.menu__langs a[aria-current] { color:var(--ink); background:var(--on-ink); border-color:var(--on-ink); }
@media (max-width:860px) { .js-ok .nav__in > .lang { display:none; } }