/* Inscription, brush and a quiet humanist UI. All families are served locally. */
:root {
  --serif: 'Marcellus', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  --sans: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  --chinese: 'Ma Shan Zheng', 'STKaiti', 'KaiTi', serif;
}
body { font-size: 15px; font-synthesis: none; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
em { font-style: normal; }
.brand > span:last-child { font-size: 30px; letter-spacing: .18em; }
.brand small { font-size: 8px; letter-spacing: .2em; font-weight: 600; }
.brand-seal { font-size: 35px; line-height: 1; }
.hero-copy h1 {
  font-size: clamp(55px, 5.65vw, 82px);
  letter-spacing: -.035em;
  line-height: 1.13;
  margin: 27px 0 26px;
}
.hero-copy h1 em { padding-right: 0; }
.hero-intro { font-size: 16px; line-height: 1.7; max-width: 405px; }
.hero-copy > .eyebrow { font-size: 10px; letter-spacing: .19em; font-weight: 600; }
.eyebrow { font-size: 10px; letter-spacing: .19em; font-weight: 600; }
.journey-choice strong { font-family: var(--sans); font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: .005em; }
.journey-choice small { font-size: 12px; line-height: 1.4; margin-top: 4px; }
.journey-choice { padding: 17px 19px 18px; }
.choice-icon { font-family: var(--serif); }
.private-note { font-size: 11px; line-height: 1.4; }
.quiet-button { font-size: 14px; }
.art-topline span:first-child { font-family: var(--chinese); font-size: 21px; letter-spacing: .7em; }
.art-topline span:last-child { font-size: 9px; font-weight: 600; letter-spacing: .23em; }
.element-node .node-hanzi { font-family: var(--chinese); font-size: 31px; line-height: 1.05; }
.element-node small { font-size: 9px; letter-spacing: .08em; }
.dial-core .hanzi { font-family: var(--chinese); font-size: clamp(49px, 5.7vw, 78px); line-height: 1; }
.dial-core .core-label { font-family: var(--serif); font-size: 12px; letter-spacing: .26em; padding-left: .26em; margin-top: 9px; }
.dial-core .core-sub { font-size: 7px; letter-spacing: .06em; line-height: 1.3; margin-top: 6px; }
.element-caption { font-family: var(--serif); font-size: 18px; line-height: 1.5; }
.element-caption small { font-size: 9px; font-weight: 600; letter-spacing: .18em; }
.home-footer { font-size: 8px; letter-spacing: .12em; }
.home-footer button { font-size: 10px; }
.back-button, .text-button { font-size: 13px; }
.section-heading h1 { font-size: clamp(34px, 4vw, 51px); letter-spacing: -.025em; line-height: 1.2; }
.section-heading > p:last-child { font-size: 15px; line-height: 1.65; }
.person-heading h2 { font-size: 26px; }
.person-heading p, .person-card label.field-label, .unknown-label { font-size: 12px; }
.person-heading .person-symbol { font-family: var(--chinese); font-size: 30px; }
.person-card label.field-label { font-weight: 600; letter-spacing: .02em; }
.person-card input:not([type=checkbox]) { font-size: 16px; }
.form-bottom > p, .form-bottom .text-button, .session-note { font-size: 11px; }
.gold-button, .outline-button { font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.pillar-label { font-size: 10px; font-weight: 600; letter-spacing: .17em; }
.pillar-characters { font-family: var(--chinese); font-size: 50px; }
.pillar-subtitle { font-size: 11px; }
.pillar-person { font-size: 10px; }
.ritual-progress { font-size: 11px; }
.reading-hero h1 { font-size: clamp(36px, 4vw, 52px); letter-spacing: -.025em; }
.reading-hero > p:not(.eyebrow) { font-size: 15px; line-height: 1.8; }
.reading-seal { font-family: var(--chinese); }
.reading-panel h2 { font-size: 27px; line-height: 1.25; }
.panel-kicker { font-size: 10px; font-weight: 600; letter-spacing: .14em; }
.element-bar { font-size: 13px; grid-template-columns: 76px 1fr 36px; }
.element-bar span { font-size: 12px; }
.element-bar small { font-size: 11px; }
.reading-panel .count-note { font-size: 12px; line-height: 1.7; }
.compact-pillar strong { font-family: var(--chinese); font-size: 32px; }
.compact-pillar small, .compact-pillar span { font-size: 10px; }
.theme-tabs button { font-size: 13px; font-weight: 600; }
.theme-content h2 { font-size: 31px; line-height: 1.25; }
.theme-content p { font-size: 16px; line-height: 1.8; }
.reflection > span { font-size: 10px; letter-spacing: .15em; }
.reflection p { font-family: var(--serif); font-size: 25px; line-height: 1.5; }
.chart-notes, .reading-disclaimer { font-size: 12px; line-height: 1.7; }
dialog h2 { font-size: 36px; } dialog h3 { font-size: 24px; }
dialog > p:not(.eyebrow) { font-size: 15px; line-height: 1.8; }
dialog .about-credit { font-size: 12px!important; }
#zodiac-intro .intro-top { font-size: 26px; letter-spacing: .19em; }
#zodiac-intro .intro-top small { font-size: 8px; letter-spacing: .18em; font-weight: 600; }
#zodiac-intro #skip-intro, #zodiac-intro #intro-motion { font-size: 12px; }
#zodiac-intro .intro-copy .eyebrow { font-size: 10px; letter-spacing: .19em; }
#zodiac-intro .intro-copy h1 { font-size: clamp(28px, 3vw, 39px); line-height: 1.24; letter-spacing: -.025em; }
#zodiac-intro .intro-copy h1 em { font-style: normal; }
#zodiac-intro .intro-copy p:not(.eyebrow) { font-size: 13px; line-height: 1.6; }
#zodiac-intro .intro-enter { font-size: 14px; font-weight: 600; letter-spacing: .025em; }
@media(max-width:1050px) and (min-width:761px) {
  .hero-copy h1 { font-size: clamp(47px, 5.8vw, 60px); }
  .hero-copy > .eyebrow { font-size: 9px; letter-spacing: .1em; }
  .hero-intro { font-size: 14px; }
  .journey-choice strong { font-size: 18px; }
  .element-node .node-hanzi { font-size: 28px; }
  .element-node small { font-size: 8px; }
  .dial-core .core-label { font-size: 10px; }.dial-core .core-sub { font-size: 6px; }
}
@media(max-width:760px) {
  .brand > span:last-child { font-size: 24px; }.brand small { font-size: 6px; }
  .brand-seal { font-size: 29px; }
  .hero-copy > .eyebrow { font-size: 8px; letter-spacing: .14em; }
  .hero-copy h1 { font-size: clamp(39px, 6.9vw, 55px); line-height: 1.13; margin: 20px 0 17px; }
  .hero-intro { font-size: 13px; line-height: 1.7; max-width: 330px; }
  .journey-choice strong { font-size: 19px; }.journey-choice small { font-size: 11px; }
  .journey-choice { padding: 14px 17px 16px; }
  .private-note { font-size: 10px; }
  .element-node .node-hanzi { font-size: 27px; }.element-node small { font-size: 8px; }
  .dial-core .hanzi { font-size: 47px; }.dial-core .core-label { font-size: 10px; margin-top: 6px; }
  .dial-core .core-sub { font-size: 5.5px; letter-spacing: 0; margin-top: 5px; }
  .element-caption { font-size: 16px; }.element-caption small { font-size: 8px; }
  .home-footer { font-size: 7px; }.home-footer button { font-size: 9px; max-width: 160px; }
  .section-heading h1 { font-size: 34px; }.section-heading > p:last-child { font-size: 13px; }
  .person-heading h2 { font-size: 24px; }
  .pillar-label { font-size: 9px; letter-spacing: .09em; }.pillar-characters { font-size: 38px; }
  .pillar-subtitle { font-size: 9px; }.pillar-person { font-size: 8px; }
  .pillar-double .pillar-characters { font-size: 29px; }
  .reading-hero h1 { font-size: 34px; }.reading-hero > p:not(.eyebrow) { font-size: 14px; }
  .reading-panel h2 { font-size: 25px; }.reading-panel .count-note { font-size: 11px; }
  .theme-tabs { gap: 22px; }.theme-tabs button { font-size: 12px; }
  .theme-content h2 { font-size: 28px; }.theme-content p { font-size: 15px; }
  .reflection p { font-size: 22px; }.reading-actions .gold-button,.reading-actions .outline-button { font-size: 12px; }
  .reading-disclaimer { font-size: 10px; }
  #zodiac-intro .intro-top { font-size: 23px; }#zodiac-intro .intro-top small { font-size: 7px; }
  #zodiac-intro #skip-intro,#zodiac-intro #intro-motion { font-size: 11px; }
  #zodiac-intro .intro-copy h1 { font-size: 27px; }
  #zodiac-intro .intro-copy .eyebrow { font-size: 9px; }
  #zodiac-intro .intro-copy p:not(.eyebrow) { font-size: 12px; }
}
@media(max-width:380px) {
  .hero-copy h1 { font-size: 36px; }.element-node .node-hanzi { font-size: 24px; }
  .element-node small { font-size: 7px; }.dial-core .hanzi { font-size: 42px; }
  #zodiac-intro .intro-controls { gap: 5px; }
  #zodiac-intro .intro-copy h1 { font-size: 24px; }
  #zodiac-intro #skip-intro,#zodiac-intro #intro-motion { font-size: 10px; }
}
@media(max-height:650px) {
  #zodiac-intro .intro-copy h1 { font-size: 23px; }
  #zodiac-intro .intro-copy p:not(.eyebrow) { font-size: 11px; }
  #zodiac-intro .intro-copy .eyebrow { font-size: 8px; }
}