@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Inter+Tight:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');
@import url('/cinematic.css?v=2.0.0');

:root{
  --font-display:"Barlow Condensed","Arial Narrow","Helvetica Neue Condensed",Impact,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-ui:"Inter Tight","Helvetica Neue",Arial,"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-chinese-editorial:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",sans-serif;
}

html{
  font-kerning:normal;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
}

body{
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:.002em;
}

button,
select,
input,
textarea{
  font-family:var(--font-ui);
  font-weight:600;
  letter-spacing:.005em;
}

.brand{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:.12em;
}

.brand small{
  font-family:var(--font-ui);
  font-weight:600;
  letter-spacing:.205em;
}

.eyebrow,
.weather-facts span,
.weather-live-control,
.weather-source-note,
.mini{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:.16em;
}

.field label{
  font-family:var(--font-ui);
  font-weight:650;
  letter-spacing:.08em;
}

.hero h1{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.025em;
  line-height:.86;
  font-kerning:normal;
  text-wrap:balance;
  text-transform:uppercase;
  text-shadow:0 18px 50px rgba(0,0,0,.38);
}

.hero h1 span{
  font-family:var(--font-display);
  font-weight:500;
  font-style:normal;
  letter-spacing:.015em;
  -webkit-text-stroke:.8px rgba(255,241,189,.82);
}

.hero p,
.city-sub,
.weather-context p,
.list li,
.route-stop,
.alt-box,
.footer{
  font-family:var(--font-ui);
  font-weight:400;
  letter-spacing:.006em;
}

.city-title,
.weather-panel-title,
.card h3,
.form-card h3,
.itinerary h3,
.day-card h4{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.015em;
  font-kerning:normal;
}

.city-title{
  line-height:.92;
  text-wrap:balance;
  text-transform:uppercase;
}

.card h3,
.form-card h3,
.itinerary h3{
  font-size:clamp(22px,2.25vw,29px);
  line-height:1;
}

.weather-panel-title{
  line-height:.92;
  text-transform:uppercase;
}

.weather-temp,
.budget-total,
.day-number,
.weather-facts b,
.forecast-day strong{
  font-family:var(--font-display);
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
}

.weather-temp{
  font-weight:600;
  letter-spacing:-.035em;
}

.budget-total{
  font-weight:600;
  letter-spacing:-.02em;
}

.primary,
.pill,
.ghost,
.city-chip,
.weather-tab{
  font-family:var(--font-ui);
  font-weight:650;
}

.primary{
  letter-spacing:.015em;
}

.tag,
.day-weather,
.plan-summary,
.weather-note{
  font-family:var(--font-ui);
}

html[lang="zh-CN"] .brand,
html[lang="zh-CN"] .hero h1,
html[lang="zh-CN"] .hero h1 span,
html[lang="zh-CN"] .city-title,
html[lang="zh-CN"] .weather-panel-title,
html[lang="zh-CN"] .card h3,
html[lang="zh-CN"] .form-card h3,
html[lang="zh-CN"] .itinerary h3,
html[lang="zh-CN"] .day-card h4{
  font-family:var(--font-chinese-editorial);
  font-weight:700;
  text-transform:none;
}

html[lang="zh-CN"] .hero h1 span{
  font-weight:500;
}

html[lang="zh-CN"] body,
html[lang="zh-CN"] button,
html[lang="zh-CN"] select,
html[lang="zh-CN"] input{
  letter-spacing:.01em;
}

@media(max-width:620px){
  .hero h1{
    letter-spacing:-.015em;
    line-height:.88;
  }

  .city-title{
    line-height:1;
  }
}