@font-face {
  font-family: 'Source Sans';
  src: url('../fonts/SourceSans3-Variable.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: 'Source Sans';
  src: url('../fonts/SourceSans3-Italic-Variable.woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: fallback;
}
@font-face {
  font-family: 'Greta Text';
  src: url('../fonts/GretaTextTRIAL-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: 'Greta Text';
  src: url('../fonts/GretaTextTRIAL-Medium.woff2') format('woff2');
  font-weight: 550;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: 'Greta Text Italic';
  src: url('../fonts/GretaTextTRIAL-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: fallback;
}
@font-face {
  font-family: 'Greta Text Italic';
  src: url('../fonts/GretaTextTRIAL-MediumItalic.woff2') format('woff2');
  font-weight: 550;
  font-style: italic;
  font-display: fallback;
}

/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
}

/* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vw, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vw, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vw, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vw, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vw, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vw, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vw, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vw, 7.5rem);

  /* Custom pairs */
  --space-s-l: clamp(1.125rem, 0.6467rem + 2.3913vw, 2.5rem);
}

/* @link https://utopia.fyi/grid/calculator?c=320,18,1.2,1380,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,xl,xl,12 */

:root {
  --grid-max-width: 93.75rem;
  --grid-gutter: var(
    --space-s-xl,
    clamp(1.125rem, 0.4131rem + 3.5593vw, 3.75rem)
  );
  --grid-columns: 12;
}

.kz-container {
  max-width: var(--grid-max-width);
  padding-inline: var(--grid-gutter);
  margin-inline: auto;
}

.kz-grid {
  display: grid;
  gap: var(--grid-gutter);
}

/* COLORS */

:root {
  --color-light: #ffffff;
  --color-light--shade-10: #ebebeb;
  --color-light--shade-30: #c4c4c4;

  --color-dark--tint-30: #747474;
  --color-dark--tint-10: #4d4d4d;
  --color-dark: #393939;

  --color-brand--tint-90: #f1edfd;
  --color-brand: #7047eb;
  --color-brand--shade-60: #4f3f80;

  --color-klezmer-earth--tint-70: #e8e3e8;
  --color-klezmer-earth--tint-50: #baabba;
  --color-klezmer-earth--tint-30: #8c738c;
  --color-klezmer-earth--tint-10: #544554;
  --color-klezmer-earth: #382e38;
  --color-klezmer-earth--shade-10: #1c171c;

  --color-klezmer-life: #ff884c;

  --color-klezmer-growth: #00846f;

  --color-klezmer-light: #ebe7e0;

  --color-utility-blue--tint-90: #e6f3fb;
  --color-utility-blue: #0683db;

  --color-utility-green--tint-90: #e7f6e9;
  --color-utility-green: #0ca626;

  --color-utility-orange--tint-90: #fdf1e8;
  --color-utility-orange: #ef7015;

  --color-utility-red--tint-90: #fdecee;
  --color-utility-red: #f04150;
}

/* TYPOGRAPHY */

:root {
  --font-main: 'Source Sans', sans-serif;
  --font-headings: 'Greta Text', serif;
  --font-headings-italic: 'Greta Text Italic', serif;

  --font-weight-normal: 400;
  --font-weight-headings: 550;
  --font-weight-bold: 600;

  --line-height-single: 1;
  --line-height-condensed: 1.2;
  --line-height-quote: 1.4;
  --line-height-relaxed: 1.5;
}

/* DEFAULT GLOBAL STYLES */

*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  color: var(--color-klezmer-light);
  background-color: var(--color-klezmer-earth);
  container-type: inline-size;
  font-family: var(--font-main);
  font-size: var(--step-0);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  min-block-size: 100vb;
  overflow-x: hidden;

  /* We're always on a dark background, so apply this universally. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.docblock-typeset {
  color: var(--color-klezmer-earth);
}

/* Make images easier to work with */
img,
picture {
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
  font-family: var(--font-headings);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-headings);
  font-weight: var(--font-weight-headings);
  line-height: var(--line-height-condensed);
}
h1 {
  font-size: var(--step-4);
}
h2 {
  font-size: var(--step-2);
}
h3 {
  font-size: var(--step-1);
}
h4 {
  font-size: var(--step-0);
}

sub,
sup {
  font-size: 40%;
}
sub {
  vertical-align: sub;
}
sup {
  vertical-align: super;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
  padding: 0;
}

a {
  color: var(--color-klezmer-life);
}
a:hover {
  text-decoration: none;
}

hr {
  border: 1px solid var(--color-klezmer-earth--tint-10);
}

/**
  * TYPESET UTILITY
  */
.typeset > * + * {
  margin-block-start: var(--space-s);
}
.typeset > * + h2,
.typeset > * + h3,
.typeset > * + h4 {
  margin-block-start: var(--space-l);
}
.typeset {
  & :is(p, ul) {
    font-family: var(--font-headings);
    font-size: var(--step-1);

    @container (inline-size < 45rem) {
      font-size: var(--step-0);
    }
  }

  p[dir='rtl'] {
    font-family: var(--font-main);
  }
}

/**
 * AUTO GRID
 * A flexible layout that will create an auto-fill grid with configurable grid item sizes.

 * CUSTOM PROPERTIES AND CONFIGURATION
 * --grid-gutter (var(--space-s-l)): This defines the space between each item.

 * --grid-min-item-size (16rem): How large each item should be ideally, as a minimum.

 * --grid-placement (auto-fill): Set either auto-fit or auto-fill to change how empty grid tracks are handled.
 */

.grid {
  display: grid;
  gap: var(--grid-gutter, var(--space-s-l));
  grid-template-columns: repeat(
    var(--grid-placement, auto-fill),
    minmax(var(--grid-min-item-size, 16rem), 1fr)
  );
}

/**
 * FLOW UTILITY
 * Info: https://piccalil.li/quick-tip/flow-utility/
 */
.flow > * + * {
  margin-top: var(--flow-space, 1em);
}
.flow[data-flow='2xs'] > * + * {
  --flow-space: var(--space-2xs);
}
.flow[data-flow='s'] > * + * {
  --flow-space: var(--space-s);
}
.flow[data-flow='l'] > * + * {
  --flow-space: var(--space-l);
}
.flow[data-flow='m-l'] > * + * {
  --flow-space: var(--space-m-l);
}
.flow[data-flow='xl'] > * + * {
  --flow-space: var(--space-xl);
}

/**
  * UTILITY CLASSES
  */
.operator {
  color: var(--color-klezmer-light) !important;
  display: block;
  font-weight: var(--font-weight-bold);
}
.character {
  background-color: var(--color-klezmer-earth);
  padding-inline: var(--space-2xs);
  mix-blend-mode: screen;
}
.relative {
  position: relative;
}

.view-toggle {
  justify-content: flex-end !important;
  width: 100%;
}