@charset "UTF-8";

/* Shared, self-hosted typography. Only the six section titles use Serif. */
@font-face {
  font-family: "Noto Sans TC";
  src: url("assets/fonts/noto-sans-tc-400.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans TC";
  src: url("assets/fonts/noto-sans-tc-600.woff") format("woff");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans TC";
  src: url("assets/fonts/noto-sans-tc-700.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif TC";
  src: url("assets/fonts/noto-serif-tc-700.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
:root {
  --sans: "Noto Sans TC", sans-serif;
  --serif: "Noto Serif TC", serif;
  --body-size: 16px;
  --body-leading: 1.8;
  --section-title-size: 36px;
  --hero-question-size: 26px;
  --member-name-size: 36px;
  --capacity-number-size: 44px;
  --capacity-unit-size: 20px;
}
body {
  font-family: var(--sans);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: var(--body-leading);
  letter-spacing: 0;
}
button, input, select, option, optgroup, textarea { font: inherit; letter-spacing: 0; }
button { font-weight: 600; }
h1, h2, h3, h4, h5, h6 { font-family: inherit; font-weight: 700; line-height: 1.5; letter-spacing: 0; }
strong, b { font-weight: 700; }
:is(#about-title, #services-title, #team-title, #cases-title, #faq-title, #contact-title) {
  font-family: var(--serif);
  font-size: var(--section-title-size);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

/* Retain the wordmark's scale and spacing; its image is unchanged. */
.brand-type strong { font-size: 25px; font-weight: 600; letter-spacing: 3px; line-height: 1.5; }
.brand-type > span { font-size: 7.5px; letter-spacing: 1.74435px; line-height: 1.6; }
nav > a { font-size: 16px; font-weight: 600; line-height: 1.8; }
.button, .text-link, .nav-cta, #team :is(.brian-line-button, .brian-form), #contact .contact-action {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.7;
}
.hero-foot a { font-size: 14px; line-height: 1.8; }
.hero-foot a > span { font-size: 16px; }
.hero-explainer :is(h1, h2) { font-size: var(--hero-question-size); font-weight: 700; line-height: 1.5; }
.hero-emphasis-blue, .hero-emphasis-gold, .hero-explainer strong { font-size: inherit; font-weight: 700; }

/* Calculator: retain its distinct result and notice hierarchy. */
#grant-title { font-size: 24px; font-weight: 700; line-height: 1.5; }
#grant-calculator label { font-size: 16px; font-weight: 600; line-height: 1.8; }
#grant-calculator label span { font-size: 14px; font-weight: 400; }
#grant-calculator :is(input, select) { font-size: 16px; font-weight: 400; line-height: 1.6; }
#grant-calculator :is(.grant-intro, .grant-error) { font-size: 16px; font-weight: 400; line-height: 1.8; }
#grant-calculator .grant-people-hint { font-size: 16px; font-weight: 400; line-height: 1.6; }
#grant-calculator .grant-result-label { font-size: 16px; line-height: 1.8; }
#grant-calculator :is(.grant-result-label.grant-pending, .grant-note, .grant-studio-note) {
  font-size: 18px; font-weight: 700; line-height: 1.7;
}
#grant-calculator .grant-no-amount-card .grant-result-label { font-size: 20px; font-weight: 700; line-height: 1.6; }
#grant-calculator .grant-development-note { font-size: 16px; font-weight: 700; line-height: 1.7; }
#grant-calculator .grant-amount { line-height: 1.3; }
#grant-calculator .grant-amount strong { font-size: 40px; font-weight: 700; }
#grant-calculator .grant-amount span { font-size: 20px; font-weight: 700; }

/* About and Services. */
#about .about-recommendations h3 { font-size: 25px; font-weight: 700; line-height: 1.4; }
#about .about-account { font-weight: 600; }
#about .about-tweets li { font-size: 16px; font-weight: 400; line-height: 1.8; }
#services .service-number { font-size: 18px; font-weight: 400; line-height: 1.5; }
#services .service-item h3 { font-size: 20px; font-weight: 700; line-height: 1.6; }
#services .service-note { font-size: 16px; font-weight: 400; line-height: 1.8; }

/* People, qualifications and the two lower panels. */
#team .member-content > h3 { font-size: var(--member-name-size); font-weight: 700; line-height: 1.5; }
#team .member-content > h3 > span { display: inline-block; font-size: 24px; font-weight: 600; line-height: 1.5; }
#team :is(.member-role, .member-lead) { font-size: 20px; font-weight: 600; line-height: 1.8; }
#team .experience-list dt { font-size: 18px; font-weight: 700; }
#team :is(.mentoring-capacity h4, .brian-contact h4) { font-size: 22px; font-weight: 700; line-height: 1.5; }
#team .capacity-copy h5 { font-size: 20px; font-weight: 700; line-height: 1.7; }
#team .capacity-value { line-height: 1.25; font-weight: 700; }
#team .capacity-value strong { font-size: var(--capacity-number-size); font-weight: 700; }
#team .capacity-value span { font-size: var(--capacity-unit-size); font-weight: 700; }
#team .brian-form-description { font-size: 16px; font-weight: 700; line-height: 1.8; }

/* Cases and FAQ. */
#cases .case-meta { font-size: 14px; font-weight: 400; line-height: 1.8; }
#cases .case-item > h3 { font-size: 22px; font-weight: 700; line-height: 1.6; }
.faq-section .faq-list summary { font-size: 18px; font-weight: 700; line-height: 1.6; }
.faq-section .faq-list summary > span { font-size: 23px; font-weight: 400; line-height: 1; }
.faq-section .faq-list details p a { font-size: inherit; font-weight: 700; }

/* Contact entry points, process and LINE. */
#contact :is(.contact-entry h3, #contact-flow-title, .contact-line-info h3) {
  font-size: 22px; font-weight: 700; line-height: 1.5;
}
#contact .contact-action { font-size: 18px; font-weight: 600; line-height: 1.5; }
#contact .contact-steps p { font-size: 18px; font-weight: 700; line-height: 1.6; }
#contact :is(.contact-step-number, .contact-steps strong) { font: inherit; color: inherit; }

/* Footer company name is a heading; the information and copyright are body text. */
footer .footer-company-name { font-size: 18px; font-weight: 700; line-height: 1.8; }
footer .footer-company strong { font-size: inherit; font-weight: 700; }
footer .footer-bottom { font-size: 14px; font-weight: 400; line-height: 1.8; }
.back-top { font-size: 22px; font-weight: 400; line-height: 1; }

@media (max-width: 1200px) {
  .brand-type strong { font-size: 23px; letter-spacing: 2px; }
  .brand-type > span { letter-spacing: 1.05144px; }
}
@media (max-width: 1024px) {
  .brand-type > span { font-size: 7px; letter-spacing: 1.36575px; }
}
@media (max-width: 700px) {
  :root { --section-title-size: 28px; --hero-question-size: 22px; --member-name-size: 28px; --capacity-number-size: 36px; --capacity-unit-size: 18px; }
  .brand-type strong { font-size: 21px; letter-spacing: 1.5px; }
  .brand-type > span { font-size: 6px; letter-spacing: 1.41767px; line-height: 1.6; }
  #about .about-recommendations h3 { font-size: 23px; }
  #services .service-number { font-size: 17px; }
  #team .experience-list dt { font-size: 16px; }
  #team .capacity-copy h5 { font-size: 18px; }
  #grant-calculator .grant-amount strong { font-size: 36px; }
  .back-top { font-size: 20px; }
}
@media (max-width: 360px) {
  .brand-type strong { font-size: 19px; }
  .brand-type > span { font-size: 5.5px; letter-spacing: 1.27164px; }
}