@charset "UTF-8";

/* Local OFL webfont subsets: handwritten display type paired with a quiet sans serif. */
@font-face {
  font-family: "Guangyou WenKai";
  src: url("assets/fonts/guangyou-wenkai.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Guangyou Sans";
  src: url("assets/fonts/guangyou-sans.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --font-display: "Guangyou WenKai", "Kaiti SC", KaiTi, serif;
  --font-ui: "Guangyou Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-family: var(--font-ui);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.brand,
.brand-mark,
h1,
.scene-number b,
.scene-caption,
.journey h2,
.destination-name,
.finish h2,
dialog h2,
.photo-credit h3 {
  font-family: var(--font-display);
  font-weight: 400;
}

.brand { letter-spacing: 1.5px; font-size: 23px; }
.brand-mark { font-size: 32px; }
.brand small { letter-spacing: 1.6px; }

h1 {
  font-size: clamp(32px, 3.8vw, 58px);
  line-height: 1.4;
  letter-spacing: .025em;
}

.intro-copy { line-height: 2; letter-spacing: .2px; }
.eyebrow { letter-spacing: 1.2px; }
.scene-number b { font-size: 18px; letter-spacing: .12em; }
.scene-caption { font-size: 16px; line-height: 1.7; letter-spacing: .04em; }
.destination-name { font-size: 20px; letter-spacing: .04em; }
.destination-name small { font-family: var(--font-ui); font-size: 9px; letter-spacing: .5px; }
.journey h2 { font-size: 25px; line-height: 1.3; letter-spacing: .06em; }
.chapter-description { font-size: 11px; line-height: 1.7; letter-spacing: .15px; }
.fly-button { font-size: 14px; letter-spacing: .7px; }
.finish h2 { letter-spacing: .06em; }
dialog h2 { line-height: 1.55; letter-spacing: .025em; }
.photo-credit h3 { font-size: 20px; letter-spacing: .04em; }

@media (max-width: 1100px) {
  .destination-name { font-size: 18px; }
}

@media (max-width: 900px) {
  .destination-name { font-size: 16px; }
  .scene-caption { font-size: 14px; }
}

@media (max-width: 640px) {
  .brand { font-size: 20px; letter-spacing: 1px; }
  .brand-mark { font-size: 28px; }
  h1 { font-size: clamp(26px, 7.5vw, 32px); letter-spacing: .015em; }
  .intro-copy { font-size: 11px; letter-spacing: 0; }
  .intro-copy br { display: initial; }
  .destination-name { font-size: 15px; letter-spacing: 0; }
  .destination-name small { font-size: 8px; letter-spacing: 0; }
  .scene-number b { font-size: 15px; letter-spacing: .08em; }
  .scene-caption { font-size: 13px; line-height: 1.65; letter-spacing: .025em; }
  .journey h2 { font-size: 22px; letter-spacing: .02em; }
  .journey { gap: 20px 16px; }
  .journey-info { gap: 9px; }
  .journey-info .eyebrow { font-size: 8px; letter-spacing: .4px; white-space: nowrap; }
  .step-index { font-size: 26px; padding-right: 9px; }
  .route { flex-basis: 85px; }
  .chapter-description { font-size: 10px; }
  .fly-button { font-size: 14px; }
}