@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/anton.ttf) format('truetype');
}
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/archivoblack.ttf) format('truetype');
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/rajdhani.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/spacegrotesk.ttf) format('truetype');
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/unbounded.ttf) format('truetype');
}
@font-face {
  font-family: 'Saira';
  font-style: italic;
  font-weight: 700;
  font-stretch: normal;
  font-display: swap;
  src: url(assets/fonts/saira.ttf) format('truetype');
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/barlowcondensed.ttf) format('truetype');
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/chakrapetch.ttf) format('truetype');
}
@font-face {
  font-family: 'Exo 2';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/exo2.ttf) format('truetype');
}
@font-face {
  font-family: 'Teko';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/teko.ttf) format('truetype');
}

@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 300 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/fonts/google-sans-flex-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 300 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/fonts/google-sans-flex-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{--font-body:'Google Sans Flex',Helvetica,Arial,sans-serif;--font-heading:Helvetica,Arial,sans-serif}
[data-heading-font="sora"]{--font-heading:'Sora',Helvetica,Arial,sans-serif}
[data-heading-font="sansflex"]{--font-heading:'Google Sans Flex',Helvetica,Arial,sans-serif}
[data-heading-font="georgia"]{--font-heading:Georgia,'Times New Roman',serif}
[data-body-font="helvetica"]{--font-body:Helvetica,Arial,sans-serif}
[data-body-font="sora"]{--font-body:'Sora',Helvetica,Arial,sans-serif}
[data-body-font="sansflex"]{--font-body:'Google Sans Flex',Helvetica,Arial,sans-serif}
body{font-family:var(--font-body)}
h1,h2{font-family:var(--font-heading)}
[data-heading-font="sora"] h1,[data-heading-font="sora"] h2{letter-spacing:-.05em}
[data-heading-font="georgia"] h1,[data-heading-font="georgia"] h2{letter-spacing:-.04em;line-height:1.08}

/* Display choices echo the condensed, angular and slanted wordmark. */
:root{--heading-weight:400;--heading-style:normal;--hero-weight:max(500,var(--heading-weight))}
h1,h2{font-weight:var(--heading-weight);font-style:var(--heading-style)}
.hero h1{font-weight:var(--hero-weight)}
[data-heading-font="barlow"]{--font-heading:'Barlow Condensed',Helvetica,Arial,sans-serif;--heading-weight:700;--heading-style:italic}
[data-heading-font="exo"]{--font-heading:'Exo 2',Helvetica,Arial,sans-serif;--heading-weight:700;--heading-style:italic}
[data-heading-font="chakra"]{--font-heading:'Chakra Petch',Helvetica,Arial,sans-serif;--heading-weight:600}
[data-heading-font="teko"]{--font-heading:'Teko',Helvetica,Arial,sans-serif;--heading-weight:600}
[data-heading-font="barlow"] h1,[data-heading-font="barlow"] h2,[data-heading-font="teko"] h1,[data-heading-font="teko"] h2{letter-spacing:-.02em;line-height:1.02}
[data-heading-font="exo"] h1,[data-heading-font="exo"] h2,[data-heading-font="chakra"] h1,[data-heading-font="chakra"] h2{letter-spacing:-.04em;line-height:1.08}

/* Further heading choices, with each face's own weight and spacing. */
[data-heading-font="anton"]{--font-heading:'Anton',Helvetica,Arial,sans-serif;--heading-weight:400;--heading-track:-.01em}
[data-heading-font="archivo"]{--font-heading:'Archivo Black',Helvetica,Arial,sans-serif;--heading-weight:400;--heading-track:-.045em}
[data-heading-font="rajdhani"]{--font-heading:'Rajdhani',Helvetica,Arial,sans-serif;--heading-weight:700;--heading-track:-.025em}
[data-heading-font="saira"]{--font-heading:'Saira',Helvetica,Arial,sans-serif;--heading-weight:700;--heading-style:italic;--heading-track:-.04em}
[data-heading-font="space"]{--font-heading:'Space Grotesk',Helvetica,Arial,sans-serif;--heading-weight:600;--heading-track:-.055em}
[data-heading-font="unbounded"]{--font-heading:'Unbounded',Helvetica,Arial,sans-serif;--heading-weight:600;--heading-track:-.055em;--wide-heading-scale:.8}
[data-heading-font="unbounded"] h1{font-size:calc(var(--hero)*var(--wide-heading-scale))}
[data-heading-font="unbounded"] h2{font-size:calc(var(--heading)*var(--wide-heading-scale))}

:is([data-heading-font="anton"],[data-heading-font="archivo"],[data-heading-font="rajdhani"],[data-heading-font="saira"],[data-heading-font="space"],[data-heading-font="unbounded"]) :is(h1,h2){letter-spacing:var(--heading-track);line-height:1.08}
[data-heading-font="anton"] :is(h1,h2){line-height:1.16}

/* Alternative weights use the existing variable fonts; the serif keeps its native italic. */
[data-heading-font="sansflex-bold"]{--font-heading:'Google Sans Flex',Helvetica,Arial,sans-serif;--heading-weight:800}
[data-heading-font="sora-bold"]{--font-heading:'Sora',Helvetica,Arial,sans-serif;--heading-weight:700}
[data-heading-font="georgia-italic"]{--font-heading:Georgia,'Times New Roman',serif;--heading-style:italic}
[data-heading-font="sora-bold"] :is(h1,h2){letter-spacing:-.05em;line-height:1.08}
[data-heading-font="georgia-italic"] :is(h1,h2){letter-spacing:-.04em;line-height:1.08}

/* IBM Plex Sans, official Google Fonts variable asset; normal width (not Condensed). */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans.ttf') format('truetype');
}
[data-heading-font="ibmplex"] { --font-heading: 'IBM Plex Sans', Helvetica, Arial, sans-serif; }

/* Let Czech accents and descenders breathe beyond a line's tight display leading.
   Each mask grows by the bleed on both sides through padding and gives the space
   back with negative margins, so every line stays exactly where the split put it
   and the heading keeps its height; the heading is a flow-root so the outer masks'
   negative margins cannot collapse through it. This works in every engine, unlike
   overflow-clip-margin, which Safari does not implement. The reveal starts each
   line at --line-reveal-offset, which must exceed 100 % plus the bleed plus the
   tallest mark above a line box, or a sliver would show before the line rises. */
:root { --line-mask-bleed: .2em; --line-reveal-offset: 130; }
[data-split="heading"] { display: flow-root; }
[data-split="heading"] .line-mask { padding: var(--line-mask-bleed) 0; margin-bottom: calc(var(--line-mask-bleed) * -2); }
[data-split="heading"] .line-mask:first-child { margin-top: calc(var(--line-mask-bleed) * -1); }
[data-split="heading"] .line-mask:last-child { margin-bottom: calc(var(--line-mask-bleed) * -1); }
/* Each line gets its compositor layer at split time, not on the first animated frame. */
[data-split="heading"] .line { will-change: transform; }