/* ==========================================================================
   Brown — the site's typeface

   Self-hosted woff2 files made from Marcus' own Brown (Lineto) fonts:
   Light, Regular and Bold, and the Regular and Bold italics.

   Brown is for titles only: every heading (h1 to h6, and whatever is
   inside one, like the letters of the project pages' big titles) and the
   chapter labels of the final presentation (.pitch-block-label), which
   are titles too though not marked up as headings. Body text, links,
   buttons and captions keep the Inter that Framer and the hand-written
   components give them. Framer sets its fonts through its own classes
   and inline variables, so the rule needs !important to win. Weights
   carry over as they were: Framer's 400 and 500 land on Regular,
   anything from 600 up on Bold.

   Linked on the portfolio's own pages (the front page and works/), not
   on the brand profiles under Designhjelpen-portfolio, which are other
   companies' type.
   ========================================================================== */

@font-face {
  font-family: 'Brown';
  src: url('/assets/fonts/brown/Brown-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Brown';
  src: url('/assets/fonts/brown/Brown-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Brown';
  src: url('/assets/fonts/brown/Brown-Regular-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Brown';
  src: url('/assets/fonts/brown/Brown-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Brown';
  src: url('/assets/fonts/brown/Brown-Bold-Italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

h1,
h1 *,
h2,
h2 *,
h3,
h3 *,
h4,
h4 *,
h5,
h5 *,
h6,
h6 *,
.pitch-block-label {
  font-family: 'Brown', 'Inter Display', 'Inter', sans-serif !important;
}

/* Brown runs wider than the Inter it replaced, so some headings that
   used to fit on one line now take two. Balanced, the lines come out
   about the same length instead of leaving one word on a line of its
   own. Framer's text takes its wrapping from --framer-text-wrap-override
   when that is set, so it is set here as well as text-wrap itself. */
h1,
h2,
h3,
h4,
h5,
h6 {
  --framer-text-wrap-override: balance;
  text-wrap: balance;
}