/* 1923 ATF catalogue: Bodoni (pp. 52-65), Goudy Oldstyle (pp. 32-51).
   Digital revivals and their licenses are bundled in assets/fonts. */
@font-face {
  font-family: 'Libre Bodoni';
  src: url('assets/fonts/LibreBodoni.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Sorts Mill Goudy';
  src: url('assets/fonts/SortsMillGoudy-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Sorts Mill Goudy';
  src: url('assets/fonts/SortsMillGoudy-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: block;
}
:root {
  --display-font: 'Libre Bodoni', 'Sorts Mill Goudy';
  --text-font: 'Sorts Mill Goudy', 'Libre Bodoni';
}
body { font-synthesis: none; font-size: 19px; }
h1, h2, h3, .services summary strong {
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .025em;
  line-height: 1.22;
}
em { font-family: var(--text-font); font-weight: 400; }
h1 em, h2 em, h3 em {
  font-family: inherit;
  font-style: normal;
}
.brand > span { font-size: 44px; text-transform: uppercase; letter-spacing: .035em; }
.brand-small { font-size: 10px; letter-spacing: .22em; margin-top: 10px; }
.main-nav { font-size: 16px; gap: 25px; }
.button { font-size: 16px; }
.hero h1 { font-size: clamp(50px, 4.9vw, 70px); line-height: 1.16; letter-spacing: .015em; margin-block: 23px 27px; }
.hero h1 em:after { bottom: -.07em; height: 3px; }
.hero-description, .page-intro > p:last-child { font-size: 23px; line-height: 1.6; }
.body-copy, .intro-copy { font-size: 19px; line-height: 1.75; }
.small-note { font-size: 14px; }
.eyebrow { font-size: 12px; letter-spacing: .17em; }
.art-note p, .approach-art span, .approach-quote p { font-family: var(--text-font); font-weight: 400; }
.art-note p { font-size: 26px; line-height: 1.25; }
.section-heading h2 { font-size: 30px; }
.value h3 { font-size: 25px; letter-spacing: .02em; line-height: 1.22; }
.values-section > *, .value > * { min-width: 0; }
.value h3 { white-space: normal; }
.value p, .invitation p:not(.eyebrow), .service-aside > p, .service-body, .steps p:last-child, .corner-feature p:not(.eyebrow), .corner-items p, dialog p:not(.eyebrow) { font-size: 19px; line-height: 1.7; }
.invitation h2 { font-size: 36px; }
.footer-brand { font-family: var(--text-font); font-size: 25px; }
.site-footer > p, .site-footer > button { font-size: 17px; }
.footer-bottom { font-size: 13px; }
.page-intro h1 { font-size: 64px; line-height: 1.18; letter-spacing: .02em; }
.service-aside h2 { font-size: 35px; }
.services summary strong { font-size: 32px; }
.services summary small { font-size: 12px; }
.service-aside .placeholder-label { font-size: 15px; }
.service-number, .steps article > span { font-family: var(--text-font); }
.text-banner h2 { font-size: 32px; }
.steps h2 { font-size: 31px; }
.corner-feature h2 { font-size: 39px; }
.corner-items h3 { font-size: 29px; }
dialog h2 { font-size: 38px; }
@media (max-width: 1150px) {
  .main-nav { font-size: 17px; gap: 19px; }
  .hero h1 { font-size: 52px; }
  .value h3 { font-size: 23px; }
  .invitation h2 { font-size: 27px; }
  .service-aside h2 { font-size: 30px; }
}
@media (max-width: 900px) {
  .main-nav { gap: 33px; font-size: 17px; }
  .brand > span { font-size: 43px; }
  .hero h1 { font-size: 44px; letter-spacing: .01em; }
  .hero-description { font-size: 21px; }
  .hero .button { font-size: 17px; }
  .page-intro h1 { font-size: 50px; }
  .service-aside h2 { font-size: 28px; }
  .services summary strong { font-size: 29px; }
}
@media (max-width: 700px) {
  .values-section { grid-template-columns: minmax(0, 1fr); }
  .value { grid-template-columns: 35px minmax(0, 1fr); }
  .section-heading h2 br { display: block; }
  .brand > span { font-size: 36px; }
  .brand-small { font-size: 9px; }
  .header-contact { font-size: 16px; }
  .main-nav { font-size: 13px; justify-content: space-between; gap: 0; }
  .hero h1 { font-size: clamp(30px, 9.8vw, 62px); letter-spacing: .012em; line-height: 1.18; }
  .hero-description { font-size: 23px; }
  .intro-copy { font-size: 19px; }
  .hero .button { font-size: 16px; }
  .small-note { font-size: 13px; }
  .value h3 { font-size: 22px; }
  .section-heading h2 { font-size: 27px; }
  .invitation h2 { font-size: 27px; }
  .footer-brand { font-size: 22px; }
  .site-footer > p { font-size: 16px; }
  .page-intro h1 { font-size: clamp(30px, 8.6vw, 50px); line-height: 1.2; letter-spacing: .015em; }
  .page-intro > p:last-child { font-size: 21px; }
  .service-aside h2 { font-size: 27px; }
  .services summary strong { font-size: 23px; }
  .services summary { gap: 16px; }
  .services summary small { font-size: 11px; letter-spacing: .11em; }
  .text-banner h2 { font-size: 31px; }
  .text-banner .button { font-size: 17px; }
  .steps h2 { font-size: 29px; }
  .corner-feature h2 { font-size: 27px; }
  .corner-items h3 { font-size: 28px; }
  dialog h2 { font-size: 27px; }
}
@media (max-width: 370px) {
  .brand > span { font-size: 29px; }
  .brand-cat { width: 32px; }
  .brand { gap: 9px; }
  .main-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; font-size: 16px; text-align: center; }
  .header-contact { font-size: 14px; }
  .hero h1 { font-size: 30px; }
  .hero .button { font-size: 16px; }
  .invitation h2, .service-aside h2, .corner-feature h2, dialog h2 { font-size: 27px; }
  .services summary strong { font-size: 23px; }
}

/* Period families also cover controls and punctuation; ornaments use vector art. */
html { font-family: var(--text-font); }
button, input, select, textarea { font-family: inherit; font-synthesis: none; }
svg.tiny-flower { width: 20px; height: 20px; vertical-align: -5px; }
.footer-arrow { width: 19px; height: 19px; transform: rotate(-45deg); vertical-align: -4px; }
.dialog-close svg { width: 22px; height: 22px; }
.type-separator { width: 5px; height: 5px; margin-inline: 3px; vertical-align: 2px; fill: currentColor; stroke: none; }

/* The 1923 catalogue families are the only typefaces used. */
.service-aside h2, .corner-feature h2, .invitation h2, dialog h2 { overflow-wrap: normal; }
.services summary > span:nth-child(2) { min-width: 0; }
.services summary strong { display: block; }
@media (max-width: 370px) {
  .hero .button { font-size: 14px; gap: 10px; }
  .service-aside h2, .corner-feature h2, .invitation h2, dialog h2 { font-size: 23px; }
  .services summary strong { font-size: 20px; }
}