/* language.css — the first-visit language chooser (/language.html). Tokens from site.css. */
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.chooser { display: flex; flex-direction: column; gap: 22px; padding-top: 8px; }
.chooser h1 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1.1; letter-spacing: -0.015em; }
.lede { margin: 0; color: var(--ink-soft); max-width: 58ch; }
.langs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.lang {
  width: 100%; text-align: start; display: flex; flex-direction: column; gap: 2px;
  padding: 14px 18px; border-radius: 16px; border: 2px solid var(--line); background: var(--card);
  color: var(--ink); font: inherit; cursor: pointer;
}
.lang:hover { border-color: var(--clay-dark); }
.lang b { font-family: var(--display); font-weight: 700; font-size: 1.25rem; }
.lang span { font-size: 0.92rem; color: var(--ink-soft); }
.lang[lang="ar"] { text-align: right; }
.lang[lang="ar"] b { font-weight: 700; }
.lang.suggest { border-color: var(--clay-dark); background: var(--clay-pale); }
.lang.suggest span { color: var(--ink); }
.lang .tag { display: none; font-style: normal; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--clay-dark); }
.lang.suggest .tag { display: block; }
.note { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }
.note a { color: var(--clay-dark); }