/* Monster Intern wordmark: Funnel Display, all lowercase, with the mascot "o" in yellow. */
@font-face { font-family: 'Funnel Display'; src: url('fonts/funnel-display-var-latin.woff2') format('woff2-variations'); font-weight: 300 800; font-style: normal; font-display: swap; }

.wordmark, .footer-brand { align-items: baseline; gap: .22em; font-family: 'Funnel Display', sans-serif; letter-spacing: -.016em; white-space: nowrap; }
.wordmark { display: inline-flex; font-size: 27px; line-height: 1; }
/* 800 is the heaviest this font goes. */
.wordmark .brand-monster, .footer-brand .brand-monster { font-weight: 800; }
.wordmark .brand-intern, .footer-brand .brand-intern { font-weight: 320; }

/* Sized in ex so the head matches the lowercase letters. The eyes are cut out, so the background shows through,
   and they glance right, towards "intern". The right margin stands in for the letter-spacing a letter would get. */
.brand-o { display: inline-block; width: 1.06ex; height: 1.06ex; margin: 0 .014em 0 .03em; vertical-align: -.02ex; fill: var(--brand-yellow); }

/* One line on desktop, two on phones. The footer stacks in lower-page.css. */
@media (max-width: 760px) {
  .nav-shell .wordmark { flex-direction: column; align-items: flex-start; gap: 0; font-size: 22px; line-height: .88; }
}
@media (max-width: 360px) { .nav-shell .wordmark { font-size: 20px; } }

/* The brief carries the real wordmark as a fixed document signature. */
.opportunity-paper-top .opportunity-wordmark { font-size: 17px; color: var(--ink); letter-spacing: -.016em; }
@media (max-width: 380px) { .opportunity-paper-top .opportunity-wordmark { font-size: 14px; } }

.opportunity-wordmark .brand-o { fill: var(--brand-blue); }