/* Self-hosted Latin + Latin-ext subsets of the three site faces, as variable fonts.
   Built from the Google Fonts css2 API. Served from this origin so the site renders
   everywhere, including networks that cannot reach fonts.googleapis.com. */

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ---------------------------------------------------------------------------
   Font stacks as custom properties.
   Markup references var(--display) / var(--mono) / var(--sans) instead of
   naming faces inline, so adding a script's fallback chain is a one-line
   change here rather than an edit to every element.
   --------------------------------------------------------------------------- */
:root {
  --sans:    'Hanken Grotesk', system-ui, sans-serif;
  --display: 'Space Grotesk', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;
}

/* Simplified and Traditional Chinese: none of the three Latin faces carry CJK
   glyphs, so fall through to the platform CJK face (Apple, then Windows,
   then Noto on Linux/Android) while keeping the Latin brand faces first for
   the Latin words that appear inside Chinese copy. */
html[lang^="zh"] {
  --cjk:     'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Source Han Sans SC';
  --sans:    'Hanken Grotesk', var(--cjk), system-ui, sans-serif;
  --display: 'Space Grotesk', var(--cjk), system-ui, sans-serif;
  --mono:    'JetBrains Mono', var(--cjk), ui-monospace, monospace;
}

/* --- Base ----------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: #f4f3ee;
  color: #16161a;
  font-family: var(--sans);
}
::selection { background: rgba(39,72,216,.25); color: #16161a; }

/* CJK breaks between characters, so prohibit line-start/end punctuation
   and let long Latin runs (URLs, patent numbers) wrap instead of overflow. */
html[lang^="zh"] body { line-break: strict; overflow-wrap: break-word; }

/* --- Language switcher ---------------------------------------------------- */
.nav-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.lang {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .02em;
}
.lang a { color: #8a8a86; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; }
.lang a:hover { color: #16161a; border-bottom-color: rgba(0,0,0,.3); }
.lang [aria-current="true"] { color: #16161a; border-bottom: 1px solid #16161a; padding-bottom: 2px; }
.lang .sep { color: #c4c3bd; }

/* --- Voice showcase module ------------------------------------------------ */
.vx-tabs { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.vx-tab { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; padding: 8px 15px; border: 1px solid rgba(0,0,0,.28); background: transparent; color: #3a3a40; cursor: pointer; transition: border-color .15s, color .15s; }
.vx-tab.is-active { background: #16161a; color: #f4f3ee; border-color: #16161a; }
.vx-explain { margin: 0 0 20px; font-size: 14.5px; line-height: 1.55; color: #3a3a40; max-width: 62ch; }
.vx-label { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #8a8a86; margin: 0 0 8px; }
.vx-controls { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.vx-row { display: flex; flex-wrap: wrap; gap: 6px; }
.vx-row button { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; padding: 8px 13px; border: 1px solid rgba(0,0,0,.26); background: #f4f3ee; color: #16161a; cursor: pointer; min-width: 40px; text-align: center; transition: border-color .15s, background .15s, color .15s; }
.vx-row button:hover { border-color: #2748d8; }
.vx-row button.is-active { background: #2748d8; color: #fff; border-color: #2748d8; }
.vx-players { display: flex; flex-wrap: wrap; gap: 10px; }
.vx-play { display: inline-flex; align-items: center; gap: 11px; font-family: var(--mono); font-size: 13px; letter-spacing: .02em; padding: 13px 20px; border: 1px solid #16161a; background: #f4f3ee; color: #16161a; cursor: pointer; transition: background .15s, color .15s; }
.vx-play:hover { background: #eceae2; }
.vx-play.is-playing { background: #16161a; color: #f4f3ee; }
.vx-play .ic { font-size: 10px; line-height: 1; width: 10px; text-align: center; }
.vx-attr { margin: 18px 0 0; font-size: 11px; line-height: 1.55; color: #9a9a96; max-width: 74ch; }
.vx-attr a { color: #9a9a96; text-decoration: underline; }

/* Chinese adjustments for the module. A `ch` is the advance of "0", and a CJK
   glyph is about two of those, so ch-based measures halve; lines also need
   more leading and no tracking. */
html[lang^="zh"] .vx-explain { line-height: 1.8; max-width: 40em; }
html[lang^="zh"] .vx-label   { letter-spacing: .08em; }
html[lang^="zh"] .vx-tab     { letter-spacing: 0; }
html[lang^="zh"] .vx-row button { letter-spacing: 0; }
html[lang^="zh"] .vx-play    { letter-spacing: 0; }
html[lang^="zh"] .vx-attr    { line-height: 1.7; max-width: 74ch; }