/* Typography, loaded last on every page.
   pier88 sets everything in two very light faces - a thin high-contrast
   display serif (Tan Mon Cheri) and a light geometric sans (Stevie Sans 300) -
   with a loose monoline hand for the accent lines (Golden Hopes). Those three
   are commercial, so the site uses the closest free matches:
     display  Italiana       thin, high-contrast, only ever one weight
     body     Jost 300       light geometric sans
     accent   Allison        loose monoline script
   Chinese pairs with Noto Serif SC 300 for headings and Noto Sans SC 300. */

:root {
  --font-display: "Italiana", "Noto Serif SC", "Times New Roman", serif;
  --font-head: "Italiana", "Noto Serif SC", "Times New Roman", serif;
  --font-script: "Allison", "Noto Serif SC", cursive;
  --font-body: "Jost", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
  --font-num: "Jost", "Helvetica Neue", Arial, sans-serif;
}

body {
  font-family: var(--font-body);
  font-weight: 300;
}

h1,
h2,
h3,
h4,
.section-title,
.page-hero__title,
.hero__title,
[class*="__title"],
[class*="__name"],
.site-menu__links a,
.footer-accordion__trigger,
.site-footer__tagline,
.btn,
.site-header__link,
.site-header__book,
.menu-item__name {
  font-weight: 400;
}

strong,
b {
  font-weight: 400;
}

/* Every big display line: thin, uppercase, a touch of air between letters. */
.section-title,
.page-hero__title,
[class$="__title"],
.journey__about-title,
.golden__copy h2,
.reserve__title {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

/* Accent lines: pier88's hand-lettered phrase under a heading, tilted a hair. */
.script,
.journey__signature,
.skybar__arch figcaption,
.signatures__note,
.golden__copy > span {
  display: block;
  margin: 0.05em auto 0;
  color: var(--gold);
  font-family: var(--font-script);
  font-size: 0.62em;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: none;
  transform: rotate(-3deg);
  vertical-align: baseline;
}

.section-title .script,
.page-hero__title .script {
  margin-top: 0.05em;
}

.golden__copy > span,
.skybar__arch figcaption,
.journey__signature,
.signatures__note {
  font-size: clamp(28px, 2.6vw, 40px);
}

/* Small caps labels stay in the light sans, widely tracked, like pier88. */
.kicker,
.footnote,
.btn,
.site-header__link,
.site-header__book {
  font-family: var(--font-body);
  font-weight: 400;
}

/* Chinese: light serif headings; the script face has no CJK, so accent lines
   fall back to the same light serif, upright. */
html[data-lang="zh"] .section-title,
html[data-lang="zh"] .page-hero__title,
html[data-lang="zh"] [class$="__title"],
html[data-lang="zh"] .journey__about-title,
html[data-lang="zh"] .golden__copy h2,
html[data-lang="zh"] .reserve__title {
  font-family: "Noto Serif SC", var(--font-display);
  font-weight: 300;
  letter-spacing: 0.08em;
}

html[data-lang="zh"] .script,
html[data-lang="zh"] .journey__signature,
html[data-lang="zh"] .skybar__arch figcaption,
html[data-lang="zh"] .signatures__note,
html[data-lang="zh"] .golden__copy > span {
  font-family: "Noto Serif SC", serif;
  font-size: 0.34em;
  font-weight: 300;
  letter-spacing: 0.14em;
  transform: none;
}

html[data-lang="zh"] .golden__copy > span,
html[data-lang="zh"] .skybar__arch figcaption,
html[data-lang="zh"] .journey__signature,
html[data-lang="zh"] .signatures__note {
  font-size: clamp(14px, 1.2vw, 17px);
}

html[data-lang="zh"] body {
  font-family: "Noto Sans SC", var(--font-body);
  font-weight: 300;
}

/* The home page hides the arch caption on phones (it would sit on the copy);
   the display:block above must not bring it back. */
@media (max-width: 760px) {
  .skybar__arch figcaption {
    display: none;
  }
}