/* Readable text scale; the display headings keep their existing proportions. */
.eyebrow{font-size:13px;letter-spacing:.11em}
.text-link{font-size:16px;line-height:1.6}
.button{font-size:16px}
.brand-name{font-size:26px}
.brand-name>span{font-size:10px;letter-spacing:.09em;line-height:1.3;margin-top:7px}
.site-nav{font-size:17px;gap:28px}
.header-discord{font-size:15px}
.hero-topline{font-size:12px;letter-spacing:.12em}
.hero-actions>span{font-size:14px;max-width:145px;line-height:1.7}
.hero-foot{font-size:11px;letter-spacing:.1em}
.about-copy p{font-size:19px;line-height:1.8}
.value-index{font-size:13px}
.value h3{font-size:22px;line-height:1.4}
.value p{font-size:17px;line-height:1.75;max-width:380px;margin-top:12px}
.direction-top .eyebrow{font-size:12px}
.direction-label{font-size:11px;letter-spacing:.08em}
.direction-content p{font-size:17px;line-height:1.8;max-width:440px}
.direction-content .text-link{font-size:15px}
.image-caption{font-size:10px;letter-spacing:.08em}
.section-note{font-size:16px;line-height:1.8}
.gallery-caption{font-size:12px;letter-spacing:.07em}
.gallery-source{font-size:12px;line-height:1.7}
.join-intro>p{font-size:18px;line-height:1.8}
.invite-copy{font-size:15px}
.copy-status{font-size:13px}
.join-steps li>span{font-size:13px}
.join-steps h3{font-size:23px;line-height:1.4}
.join-steps p{font-size:17px;line-height:1.7}
.faq .eyebrow{font-size:12px}
.faq summary{font-size:17px;line-height:1.6}
.faq details p{font-size:16px;line-height:1.8}
.footer-discord{font-size:14px;letter-spacing:.08em}
.footer-bottom{font-size:11px;letter-spacing:.04em;line-height:1.8;flex-wrap:wrap}
.lightbox-top p{font-size:17px;line-height:1.5}
.lightbox-bottom>span{font-size:11px;line-height:1.7;letter-spacing:.04em}
.lightbox-controls>span{font-size:15px}
.document-page p,.document-page li{font-size:18px;line-height:1.85}

@media(min-width:1700px){
  .site-nav{font-size:18px;gap:38px}
  .header-discord{font-size:16px}
  .about-copy p{font-size:22px}
  .value h3{font-size:24px}
  .value p{font-size:18px}
  .direction-content p{font-size:19px;max-width:490px}
  .join-intro>p{font-size:20px}
  .join-steps h3{font-size:25px}
  .join-steps p{font-size:18px}
  .faq summary{font-size:19px}
  .faq details p{font-size:18px}
  .button{font-size:18px}
}

/* The larger navigation uses the compact header on tablets too. */
@media(max-width:1024px){
  :root{scroll-padding-top:94px}
  .header-inner{height:96px;gap:15px}
  .is-scrolled .header-inner{height:84px}
  .brand-name{font-size:24px}
  .brand-name>span{font-size:10px}
  .brand img{width:40px;height:40px}
  .brand{gap:11px}
  .header-discord{margin-left:auto;justify-content:center;width:44px;height:44px;padding:11px;background:#ffffff10}
  .header-discord>span,.header-discord>.small{display:none}
  .menu-toggle{display:none}
  .enhanced .menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;order:3;background:#ffffff10;padding:11px;width:44px;height:44px;border-radius:4px}
  .menu-toggle span{display:block;width:22px;height:1px;background:var(--ink);transition:transform .2s}
  .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .site-nav{display:none}
  .enhanced .site-nav[data-open=true]{display:flex;position:absolute;top:84px;left:var(--gutter);right:var(--gutter);background:#171717;border:1px solid var(--line);border-radius:5px;flex-direction:column;gap:0;align-items:stretch;padding:10px 20px;box-shadow:0 20px 60px #0008}
  .site-nav a{font-size:18px;line-height:1.5;padding:17px 5px}
  .site-nav a+a{border-top:1px solid var(--line)}
  html:not(.enhanced) .site-header .site-nav{display:flex;position:absolute;top:92px;left:var(--gutter);right:var(--gutter);justify-content:space-between;gap:16px}
  html:not(.enhanced) .site-nav a{font-size:14px;padding:10px 0;border:0}
  .hero-actions>span{display:none}
  .about-copy p{font-size:17px}
  .value h3{font-size:20px}
  .value p{font-size:16px}
}

@media(max-width:760px){
  .eyebrow{font-size:11px;letter-spacing:.08em}
  .hero-topline{font-size:10px;letter-spacing:.09em}
  .hero-actions .button{font-size:15px;gap:20px}
  .hero-foot{font-size:10px;letter-spacing:.04em;gap:12px}
  .hero-foot>a{font-size:10px;gap:10px}
  .hero-foot>span:last-child{font-size:9px;gap:8px}
  .text-link,.about-copy .text-link{font-size:15px}
  .about-copy p{font-size:17px;line-height:1.8}
  .values{grid-template-columns:1fr;gap:27px}
  .value{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:14px}
  .value-index{grid-row:span 2;font-size:11px;margin:0;padding-top:4px}
  .value h3{font-size:19px;line-height:1.5}
  .value p{font-size:16px;line-height:1.75;margin-top:7px;max-width:none}
  .direction-top .eyebrow{font-size:10px;line-height:1.7;max-width:100px}
  .direction-label{font-size:9px;letter-spacing:.03em;padding:9px}
  .direction-content p{font-size:15px;line-height:1.8}
  .direction-content .text-link{font-size:14px}
  .image-caption{font-size:9px;letter-spacing:.04em}
  .gallery-caption{font-size:10px;letter-spacing:.04em}
  .gallery-source{font-size:12px}
  .join-intro>p{font-size:17px}
  .join-button{font-size:15px;gap:18px}
  .invite-copy{font-size:14px}
  .copy-status{font-size:12px}
  .join-steps li{grid-template-columns:28px minmax(0,1fr) 18px;gap:12px}
  .join-steps li>span{font-size:12px}
  .join-steps h3{font-size:20px}
  .join-steps p{font-size:16px;line-height:1.75}
  .faq .eyebrow{font-size:11px}
  .faq summary{font-size:16px;line-height:1.6;gap:18px}
  .faq summary>span{flex-shrink:0}
  .faq details p{font-size:16px;line-height:1.8}
  .footer-discord{font-size:12px}
  .footer-bottom{font-size:10px;gap:14px}
  .lightbox-top p{font-size:15px}
  .lightbox-bottom{flex-wrap:wrap}
  .lightbox-bottom>span{font-size:10px;max-width:180px;flex:1 1 150px}
  .lightbox-controls{margin-left:auto}
  .lightbox-controls>span{font-size:14px}
  .document-page p,.document-page li{font-size:16px}
}

@media(max-width:370px){
  .header-inner{gap:9px}
  .brand{gap:8px}
  .brand-name{font-size:20px}
  .brand-name>span{font-size:8px}
  .brand img{width:32px;height:32px}
  .header-discord,.enhanced .menu-toggle{width:36px;height:36px;padding:8px}
  .hero-topline{font-size:9px}
  .hero-foot>a{font-size:9px}
  .hero-foot>span:last-child{font-size:8px}
  .value p{font-size:15px}
  .join-button{font-size:14px;gap:14px}
}