/* Three complementary roles: Garamond for reading, Playfair for titles,
   and Comfortaa for the supporting headlines. */
@font-face{font-family:'Comfortaa';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/comfortaa-latin-600.woff2') format('woff2')}
:root{--body:'EB Garamond',Georgia,serif;--subheading:'Comfortaa','Trebuchet MS',sans-serif}
body{font-family:var(--body);font-size:19px}
button,input,select,textarea{font-family:var(--body)}
.site-header nav,.button,.text-link,.hero-perspectives button{font-size:1rem}
.hero-detail{font-size:1.2rem}
.eyebrow,.welcome-label{font-family:var(--body)}
@media(max-width:720px){body{font-size:18px}.hero .text-link,.hero-perspectives button{font-size:.95rem}}

h1 em,h2 em,h3 em,h4 em,h5 em,h6 em,.footer-signoff em,.ribbon-track em{font-family:var(--heading)}

/* Optical balance for the serif families, shared by every page. */
h1,h2,h3,h4,h5,h6{text-wrap:balance}
h1,h2{line-height:1.16}
h3,h4,h5,h6{line-height:1.25}
.hero h2.hero-headline{font-size:clamp(3rem,5vw,5rem)}
.hero h2.hero-headline em{letter-spacing:inherit}
.welcome-surface h1{font-size:clamp(3rem,6.2vw,6rem);max-width:18ch}
body .eyebrow,body .welcome-label{font-size:.8125rem;letter-spacing:.12em;line-height:1.6}
body .site-header nav{font-size:1.0625rem}
body .button,body .text-link{font-size:1.0625rem}
body .hero-detail{font-size:1.25rem;line-height:1.6;max-width:38ch}
body .workplace-step>p:not(.eyebrow){font-size:1.25rem;line-height:1.6;max-width:48ch}
body .perspective-bottom p{font-size:1.1875rem;line-height:1.55;max-width:48ch}
body .story-cue{font-size:.875rem}
body .perspective-nav button{font-size:1rem}
body .footer-top>div{font-size:1rem;line-height:1.6}
body .footer-bottom{font-size:.875rem}
body .kind-paper blockquote{line-height:1.5}
body .catalog-prose p{max-width:55ch}
body .prose{font-size:1.1875rem;line-height:1.65}
body .catalog-card .catalog-headline,
body .catalog-card .catalog-headline strong,
body .catalog-group-heading p,
body .workplace-step h3,
body .perspective-bottom h3,
body .prose h3,
body .prose h4{font-family:var(--subheading);font-weight:600;font-style:normal;letter-spacing:-.025em;line-height:1.4;text-wrap:balance}
body .catalog-card .catalog-headline{font-size:clamp(1.125rem,1.55vw,1.4rem)}
body .catalog-group-heading p{font-size:clamp(1rem,1.45vw,1.25rem);line-height:1.55}
body .workplace-step h3{font-size:clamp(1.5rem,2.25vw,2rem);line-height:1.35}
body .perspective-bottom h3{font-size:clamp(1.25rem,1.8vw,1.6rem)}
body input,body select,body textarea{font-size:1.125rem}
@media(max-width:720px){
 .welcome-surface h1{font-size:clamp(2.5rem,8.3vw,3.75rem);line-height:1.17}
 .hero h2.hero-headline{font-size:clamp(2.75rem,10.5vw,4.25rem);line-height:1.14}
 body .eyebrow,body .welcome-label{font-size:.75rem;letter-spacing:.1em}
 body .hero-detail,body .workplace-step>p:not(.eyebrow){font-size:1.1875rem;line-height:1.55}
 body .perspective-bottom p{font-size:1.125rem}
 body .closing-copy h2{font-size:clamp(2.8rem,10.5vw,3.7rem)}
 body .site-header nav,body .button,body .text-link{font-size:1rem}
 body .footer-top>div{font-size:.9375rem}
}

/* Keep the complete navigation comfortable on tablet-sized screens. */
@media(min-width:1101px) and (max-width:1250px){body .site-header nav{gap:24px}}
@media(min-width:721px) and (max-width:1100px){
 body .menu-toggle{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:30px;background:transparent;padding:9px 16px;font-size:1rem}
 body .site-header nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:40;background:var(--cream);color:var(--ink);padding:20px 5.3vw 28px;box-shadow:0 10px 15px #163e3510;border-bottom:1px solid var(--line);align-items:stretch;gap:8px;max-height:calc(100dvh - 112px);overflow-y:auto}
 body .site-header nav.is-open{display:flex;flex-direction:column}
 body .site-header nav .button{margin-top:10px;align-self:flex-start}
}