/*
 * Modern numeral system.
 * Kept separate so the typography experiment can be reverted with one link.
 */

@font-face {
  font-family: "Crossroad Numerals";
  src: local("Bahnschrift SemiCondensed"), local("Bahnschrift");
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 75% 100%;
  unicode-range: U+0030-0039, U+FF10-FF19;
}

@font-face {
  font-family: "Crossroad Latin";
  src: url("assets/fonts/barlow-condensed-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  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: "Crossroad Latin";
  src: url("assets/fonts/barlow-condensed-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  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: "Crossroad Latin";
  src: url("assets/fonts/barlow-condensed-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  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: "Crossroad Latin";
  src: url("assets/fonts/barlow-condensed-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  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: "Crossroad Latin";
  src: url("assets/fonts/barlow-condensed-800.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  unicode-range: U+0021-007E;
}

:root {
  --numeral: "Crossroad Latin", "Bahnschrift Condensed", "Bahnschrift SemiCondensed", "Bahnschrift", "Arial Narrow", sans-serif;
  --jp: "Crossroad Latin", "Crossroad Numerals", "Yu Gothic UI", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  --mono: "Crossroad Latin", "Crossroad Numerals", "Cascadia Mono", "IBM Plex Mono", Consolas, monospace;
  --display: "Crossroad Latin", "Crossroad Numerals", "Bahnschrift Condensed", "Segoe UI Variable Display", sans-serif;
}

/* Dedicated number and date readouts share one DIN-like voice. */
:where(
  #featured-days,
  .count-question,
  .launch-count-target,
  .prediction-date,
  .prediction-days-ahead,
  .origin-today,
  .surface-launch strong,
  .official-date,
  .launch-projection-estimate b,
  .trailer-rail-index,
  .trailer-rail-date,
  .trailer-preview-count,
  .trailer-feature-date,
  .editor-current-date
) {
  font-family: var(--numeral) !important;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* Dates: naturally condensed, without mechanically squashing the glyphs. */
:where(
  .prediction-date,
  .prediction-days-ahead,
  .origin-today,
  .surface-launch strong,
  .official-date
) {
  font-stretch: condensed;
  font-weight: 520;
  letter-spacing: .075em;
  transform: none !important;
}

/* The editable surface launch label follows the exact TODAY date metrics. */
.surface-launch {
  transform: none !important;
}

.surface::after {
  font-family: var(--numeral) !important;
  font-stretch: condensed;
  font-weight: 520;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  letter-spacing: .075em;
  transform: none !important;
}

/* The launch number stays monumental, but is cleaner and less blocky. */
.countdown-deck .featured-panel .launch-countdown-button b,
.cutout-days {
  font-family: var(--numeral) !important;
  font-stretch: condensed;
  font-weight: 650;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  letter-spacing: -.045em;
}

.count-question {
  font-stretch: condensed;
  font-weight: 320;
  letter-spacing: -.08em;
}

.launch-count-target,
.trailer-rail-index,
.trailer-rail-date,
.trailer-preview-count,
.trailer-feature-date,
.editor-current-date {
  font-stretch: condensed;
  font-weight: 560;
}

@media (max-width: 760px) {
  :where(
    .prediction-date,
    .prediction-days-ahead,
    .official-date
  ) {
    letter-spacing: .065em;
  }
}