/* Avella carries the display voice; Source Sans keeps the chapters readable. */
@font-face{
  font-family:'Source Sans 3';
  src:url('assets/fonts/source-sans-3-upright.woff2') format('woff2');
  font-style:normal;
  font-weight:200 900;
  font-display:swap;
}
@font-face{
  font-family:'Avella';
  src:url('assets/fonts/Avella-Regular.woff2') format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:'Noto Serif SC';
  src:url('assets/fonts/noto-serif-sc-extrabold-bian-lian.woff2') format('woff2');
  font-style:normal;
  font-weight:800;
  font-display:swap;
  unicode-range:U+53D8,U+8138;
}
:root{
  --font-body:'Source Sans 3','Noto Serif SC',Arial,sans-serif;
  --font-display:'Avella',Georgia,serif;
  --font-chinese:'Noto Serif SC','Songti SC','SimSun',serif;
  font-family:var(--font-body);
  font-synthesis:none;
  font-kerning:normal;
}
body{font-family:var(--font-body)}
button,input,select,textarea{font-family:var(--font-body)}
.site-header .wordmark{
  font-family:var(--font-body);
  font-weight:500;
  font-size:15px;
  letter-spacing:.14em;
}
.cutout-screen text{font-family:var(--font-chinese);font-weight:800}
.hero-copy h1{font-family:var(--font-chinese)}
.wardrobe-copy{max-width:480px}
.wardrobe-copy h2,.film-heading h2,.fan-scene h3{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(42px,4.3vw,64px);
  line-height:1.04;
  letter-spacing:-.025em;
  word-spacing:normal;
  text-wrap:balance;
}
.wardrobe-copy h2{margin-bottom:28px}
.film-heading h2,.fan-scene h3{font-size:clamp(36px,3.5vw,52px)}
.wardrobe-copy p{
  font-family:var(--font-body);
  font-weight:400;
  font-size:19px;
  line-height:1.72;
  letter-spacing:0;
  text-wrap:pretty;
}
.wardrobe-copy .chapter-source,.film-heading p,.film-details,
.reveal-controls .wardrobe-disclosure,.site-footer{
  font-family:var(--font-body);
  font-weight:400;
  font-size:13px;
  line-height:1.6;
  letter-spacing:0;
}
.reveal-controls>p:first-child,.layer-description{
  font-family:var(--font-body);
  font-size:19px;
  line-height:1.6;
}
.gesture-hint,.interaction-status,.camera-note,.text-button,
.source-link,.load-film,.film-controls button,.site-footer>span{
  font-family:var(--font-body);
  letter-spacing:0;
}
#camera-dialog h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:38px;
  line-height:1.08;
  letter-spacing:-.02em;
}
#camera-dialog #gesture-instruction{
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.55;
}
#camera-dialog #camera-note,#camera-dialog .interaction-status{
  font-family:var(--font-body);
  font-size:13px;
  line-height:1.55;
}
#camera-dialog .camera-button,#camera-dialog .text-button{
  font-family:var(--font-body);
  font-size:15px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:0;
}
@media(max-width:760px){
  .wardrobe-copy p{font-size:17.5px;line-height:1.72}
  .wardrobe-copy h2{font-size:42px;margin-bottom:25px}
  .film-heading h2,.fan-scene h3{font-size:38px}
  .wardrobe-copy .chapter-source{font-size:12.5px;line-height:1.6}
  .reveal-controls>p:first-child,.layer-description{font-size:17.5px}
}
@media(max-width:360px){
  .wardrobe-copy h2{font-size:36px}
  .film-heading h2,.fan-scene h3{font-size:34px}
}