@import url('/assets/belleza.css');
@import url('/assets/brygada.css');
@import url('/assets/courier-prime.css');
@import url('/assets/bricolage.css');
@import url('/assets/dm-sans.css');

/* The selected hybrid is the default. Earlier typography studies remain available. */
html[data-typography="approved"],
html[data-typography="butternut"] {
  --sans: 'Courier Prime', 'Courier New', monospace;
  --serif: 'Belleza', Georgia, serif;
  --name-font: 'Courier Prime', 'Courier New', monospace;
  --title-weight: 400;
  --title-spacing: .005em;
}
html[data-typography="magnolia"] {
  --sans: 'Courier Prime', 'Courier New', monospace;
  --serif: 'Brygada 1918', Georgia, serif;
  --name-font: 'Courier Prime', 'Courier New', monospace;
  --title-weight: 700;
  --title-spacing: -.025em;
}
html[data-typography="birdie"] {
  --sans: 'DM Sans', Arial, sans-serif;
  --serif: 'Bricolage Grotesque', Arial, sans-serif;
  --name-font: 'Bricolage Grotesque', Arial, sans-serif;
  --title-weight: 500;
  --title-spacing: .065em;
}
html[data-typography] body { font-weight: 400; }
html[data-typography] :is(.card-title, .project-title, .next-title) {
  font-weight: var(--title-weight);
  letter-spacing: var(--title-spacing);
  text-transform: uppercase;
  line-height: 1.08;
}
html[data-typography] .card-title { font-size: clamp(38px, 4.9vw, 80px); }
html[data-typography] .project-title { font-size: clamp(36px, 4vw, 66px); }
html[data-typography] .next-title { font-size: 26px; }
html[data-typography] :is(.wordmark, .footer-name, .contact-title) {
  font-family: var(--name-font);
  font-weight: 400;
}
html[data-typography] .wordmark { font-size: 16px; letter-spacing: .12em; }
html[data-typography] .navigation a { letter-spacing: .10em; }
html[data-typography] .credits { font-weight: 400; letter-spacing: 0; }
html[data-typography] .credits strong { font-weight: 700; }
html[data-typography] .footer-name { font-size: 25px; }
html[data-typography] .contact-title { font-size: clamp(32px, 5.8vw, 80px); letter-spacing: -.03em; }
html[data-typography="birdie"] :is(.wordmark, .footer-name, .contact-title) {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .10em;
}
html[data-typography="birdie"] .wordmark { font-size: 18px; }
html[data-typography="birdie"] .footer-name { font-size: 24px; }
html[data-typography="birdie"] .contact-title { font-size: clamp(30px, 5.5vw, 76px); }
html[data-typography="birdie"] .credits strong { font-weight: 500; }
@media (hover:none) {
  html[data-typography] .card-title { font-size: clamp(30px, 4.9vw, 60px); }
}
@media (max-width:700px) {
  html[data-typography] .wordmark { font-size: 12px; letter-spacing: .07em; }
  html[data-typography="birdie"] .wordmark { font-size: 12px; letter-spacing: .10em; }
  html[data-typography] .navigation a { letter-spacing: .07em; }
  html[data-typography] .card-title { font-size: clamp(27px, 6.9vw, 42px); }
  html[data-typography] .project-title { font-size: clamp(30px, 7.7vw, 45px); }
  html[data-typography] .next-title { font-size: 21px; }
  html[data-typography] .footer-name { font-size: 22px; }
}
@media (max-width:370px) {
  html[data-typography] .wordmark { font-size: 10px; }
}

/* Approved: Butternut titles and credits, original Jost wordmark and menu. */
html[data-typography="approved"] { --name-font: 'Jost', Arial, sans-serif; }
html[data-typography="approved"] .wordmark {
  font-family: 'Jost', Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .25em;
}
html[data-typography="approved"] .navigation {
  font-family: 'Jost', Arial, sans-serif;
  font-weight: 300;
}
html[data-typography="approved"] .navigation a { letter-spacing: .2em; }
@media (max-width:700px) {
  html[data-typography="approved"] .wordmark { font-size: 12px; letter-spacing: .16em; }
  html[data-typography="approved"] .navigation a { letter-spacing: .14em; }
}
@media (max-width:370px) {
  html[data-typography="approved"] .wordmark { font-size: 10px; }
}