/* CityMETER canonical typography roles — Landometer Design System v0.8.9 */

/* Thai and Latin webfont subsets must declare their coverage. Without these
   ranges Safari may select the Latin subset and fall back to a device font
   for Thai glyphs. */
@font-face {
  font-family: "Bai Jamjuree";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("./bai-jamjuree-thai-400-normal-CvLA45ZU.woff2") format("woff2"),
       url("./bai-jamjuree-thai-400-normal-DQvRJNNu.woff") format("woff");
  unicode-range: U+0020, U+00A0, U+02BC, U+0303, U+0331, U+0E01-0E3A, U+0E3F-0E5B;
}

@font-face {
  font-family: "Bai Jamjuree";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("./bai-jamjuree-latin-400-normal-C8Ab1JOR.woff2") format("woff2"),
       url("./bai-jamjuree-latin-400-normal-D7asZ9Ds.woff") format("woff");
  unicode-range: U+0020-007E, U+00A0-00B4, U+00B6-00FF, U+0131, U+0152-0153,
    U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304,
    U+0308-0309, U+0323, U+2013-2014, U+2018-201A, U+201C-201E, U+2022,
    U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215;
}

@font-face {
  font-family: "Bai Jamjuree";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("./bai-jamjuree-thai-600-normal-CzTxzpuq.woff2") format("woff2"),
       url("./bai-jamjuree-thai-600-normal-DfF4rXK8.woff") format("woff");
  unicode-range: U+0020, U+00A0, U+02BC, U+0303, U+0331, U+0E01-0E3A, U+0E3F-0E5B;
}

@font-face {
  font-family: "Bai Jamjuree";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("./bai-jamjuree-latin-600-normal-CgeOh7Cx.woff2") format("woff2"),
       url("./bai-jamjuree-latin-600-normal-D119NnP2.woff") format("woff");
  unicode-range: U+0020-007E, U+00A0-00B4, U+00B6-00FF, U+0131, U+0152-0153,
    U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304,
    U+0308-0309, U+0323, U+2013-2014, U+2018-201A, U+201C-201E, U+2022,
    U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215;
}

@font-face {
  font-family: "IBM Plex Sans Thai Looped";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("./ibm-plex-sans-thai-looped-thai-700-normal-CeC2XeGp.woff2") format("woff2"),
       url("./ibm-plex-sans-thai-looped-thai-700-normal-C75_92AR.woff") format("woff");
  unicode-range: U+0020, U+00A0, U+02BC, U+02D7, U+0303, U+0331,
    U+0E01-0E3A, U+0E3F-0E5B, U+200B-200D, U+25CC;
}

@font-face {
  font-family: "IBM Plex Sans Thai Looped";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("./ibm-plex-sans-thai-looped-latin-700-normal-CTbTsSQg.woff2") format("woff2"),
       url("./ibm-plex-sans-thai-looped-latin-700-normal-Bv6OPIRs.woff") format("woff");
  unicode-range: U+0020-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0303, U+200B, U+2013-2014, U+2018-201A,
    U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215;
}

@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("./ibm-plex-sans-thai-thai-400-normal-2d66381c.woff2") format("woff2");
  unicode-range: U+0020, U+00A0, U+02BC, U+02D7, U+0303, U+0331,
    U+0E01-0E3A, U+0E3F-0E5B, U+200B-200D, U+25CC;
  size-adjust: 102%;
}

@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("./ibm-plex-sans-thai-latin-400-normal-82ddd365.woff2") format("woff2");
  unicode-range: U+0020-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0303, U+200B, U+2013-2014, U+2018-201A,
    U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215;
  size-adjust: 102%;
}

:root {
  --leading-display-en: 1.02;
  --leading-display-th: 1.16;
  --leading-editorial-en: 1.15;
  --leading-ui-heading-en: 1.22;
  --leading-ui-heading-th: 1.32;
  --leading-body: 1.60;
  --leading-body-compact: 1.45;
  --leading-label: 1.35;
  --leading-number: 1.25;
  --font-display-en-fallback: Georgia, Cambria, "Times New Roman", serif;
  --font-display-th-fallback: "Noto Sans Thai Looped", "Leelawadee UI", Tahoma, sans-serif;
  --font-body-fallback: "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
  --font-number-fallback: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-display-en: "Arvo", var(--font-display-en-fallback);
  --font-display-th: "IBM Plex Sans Thai Looped", var(--font-display-th-fallback);
  --font-ui-heading-en: "Arvo", var(--font-display-en-fallback);
  --font-ui-heading-th: "IBM Plex Sans Thai Looped", var(--font-display-th-fallback);
  --font-body: "Bai Jamjuree", var(--font-body-fallback);
  --font-technical-latin: "JetBrains Mono", var(--font-number-fallback);
  --font-technical-th: "IBM Plex Sans Thai", var(--font-body-fallback);
  --font-technical: "JetBrains Mono", "IBM Plex Sans Thai", "SFMono-Regular", Consolas, monospace;
  --font-number: var(--font-technical-latin);
  font-synthesis: none;
}

body {
  font-family: var(--font-body);
  line-height: var(--leading-body);
}

h1,
h2,
h3 {
  font-family: var(--font-display-th);
}

html[lang="en"] h2 {
  line-height: var(--leading-editorial-en);
}

html[lang="en"] h3 {
  line-height: var(--leading-ui-heading-en);
}

html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3 {
  font-family: var(--font-display-en);
}

/* CityMETER is an English display name even when the surrounding route is Thai. */
#page-title {
  font-family: var(--font-display-en);
  font-weight: 700;
  line-height: var(--leading-display-en);
}

html[lang="th"] h2 {
  line-height: var(--leading-display-th);
}

html[lang="th"] h3,
html[lang="th"] .demo-story-caption strong {
  line-height: var(--leading-ui-heading-th);
}

.citymeter-label {
  font-family: var(--font-technical-latin);
  font-weight: 400;
  line-height: var(--leading-label);
}

.eyebrow,
.demo-story-caption span,
.demo-figure figcaption span:first-child,
.record-group,
.dataset-kicker,
.group-filters button span,
.results-line strong,
.footer-grid small {
  font-family: var(--font-technical);
  font-weight: 400;
  line-height: var(--leading-label);
}

html[lang="th"] .eyebrow,
html[lang="th"] .demo-story-caption span,
html[lang="th"] .demo-figure figcaption span:first-child,
html[lang="th"] .record-group,
html[lang="th"] .dataset-kicker,
html[lang="th"] .group-filters button span,
html[lang="th"] .results-line strong,
html[lang="th"] .footer-grid small {
  letter-spacing: .008em;
  line-height: 1.48;
}

.results-line strong {
  line-height: var(--leading-number);
}

html[lang="th"] .results-line strong {
  line-height: 1.48;
}