:root {
  --font-family-modern: "Figtree";
  --font-family-traditional: "PT Serif";

  --font-size-smallnote: 0.68em;
  --font-weight-smallnote: 700;
  --line-height-smallnote: 1.2;
  --letter-spacing-smallnote: 0.08em;

  --font-size-note: 0.78em;
  --font-weight-note: 700;
  --line-height-note: 1.35;
  --letter-spacing-note: 0.08em;

  --font-size-detail: 0.92em;
  --font-weight-detail: 400;
  --line-height-detail: 1.56;
  --letter-spacing-detail: 0;

  --font-size-body: 0.98em;
  --font-weight-body: 400;
  --line-height-body: 1.58;
  --letter-spacing-body: 0;

  --font-size-bodylarge: 1.02em;
  --font-weight-bodylarge: 600;
  --line-height-bodylarge: 1.45;
  --letter-spacing-bodylarge: 0;

  --font-size-reading: 1.18em;
  --font-weight-reading: 400;
  --line-height-reading: 1.48;
  --letter-spacing-reading: 0;
  --width-reading: 24em;

  --font-size-subtitle: clamp(1.05em, 3.2vw, 2em);
  --font-weight-subtitle: 600;
  --line-height-subtitle: 1.24;
  --letter-spacing-subtitle: -0.02em;
  --width-subtitle: 18em;

  --font-size-emphasis: clamp(1.1em, 3.4vw, 2.02em);
  --font-weight-emphasis: 500;
  --line-height-emphasis: 1.28;
  --letter-spacing-emphasis: -0.02em;

  --font-size-feature: clamp(1.28em, 2.8vw, 1.95em);
  --font-weight-feature: 500;
  --line-height-feature: 1.3;
  --letter-spacing-feature: -0.02em;
  --width-feature: 24em;

  --font-size-summary: 1.02em;
  --font-weight-summary: 600;
  --line-height-summary: 1.45;
  --letter-spacing-summary: 0;

  --font-size-closing: clamp(1.05em, 3.2vw, 1.8em);
  --font-weight-closing: 600;
  --line-height-closing: 1.3;
  --letter-spacing-closing: -0.02em;
  --width-closing: 24em;

  --font-size-title: clamp(2.4em, 9vw, 7.4em);
  --font-weight-title: 400;
  --line-height-title: 0.92;
  --letter-spacing-title: -0.02em;
  --width-title: 5.2em;

  --font-size-titlemodern: clamp(3.8em, 9vw, 7.1em);
  --font-weight-titlemodern: 500;
  --line-height-titlemodern: 0.88;
  --letter-spacing-titlemodern: -0.06em;
  --width-titlemodern: 5.2em;

  --font-size-extremetitle: clamp(2.6em, 10vw, 8.2em);
  --font-weight-extremetitle: 800;
  --line-height-extremetitle: 0.86;
  --letter-spacing-extremetitle: -0.07em;
  --width-extremetitle: 6.4em;

  --width-smalltext: 28em;
  --width-text: 34em;
  --width-mediumwide: 36em;
  --width-large: 38em;
  --width-xlarge: 40em;
  --width-xxlarge: 42em;
  --width-wide: 44em;

  --padding-micro: 0.08em;
  --padding-small: 0.18em;
  --padding-medium: 0.5em;
  --padding-large: 0.78em;
  --padding-xl: 1em;
  --padding-xxl: 1.15em;

  --gap-micro: 0.35em;
  --gap-soft: 0.38em;
  --gap-small: 0.55em;
  --gap-detail: 0.7em;
  --gap-medium: 0.8em;
  --gap-hero: 0.95em;
  --gap-large: 1em;
  --gap-xl: 1.35em;

  --margin-micro: 0.18em;
  --margin-small: 0.35em;
  --margin-medium: 0.55em;
  --margin-mediumlarge: 0.8em;
  --margin-large: 1em;
  --margin-xl: 1.35em;
  --margin-xxl: 1.8em;

  --padding-focuspoint-min: 1.4em;
  --padding-focuspoint-wide-min: 1.6em;
  --padding-focuspoint-max: 8em;
  --padding-focuspoint-wide-max: 8.5em;
  --padding-focuspoint-widest-max: 9.6em;

  --padding-block-small: 1.2em;
  --padding-block-medium: 1.7em;
  --padding-block-large: 1.8em;
  --padding-block-xl: 2.2em;
  --padding-block-hero: 2.6em;
  --padding-block-feature: 2.8em;
  --padding-block-page: 3.6em;
  --padding-block-page-large: 3.8em;
  --padding-block-page-xl: 4.2em;

  --line-height-link: 1.4;

  --size-line-thin: 1px;
  --size-line-bold: 2px;
  --size-rule-short: 3.4em;

  --radius-soft: 0.7em;
  --radius-round: 999px;
}

.pill {
  display: inline-block;
  justify-self: start;
  padding:
    calc(var(--padding-medium) - 0.04em)
    var(--padding-large)
    var(--padding-medium);
  border-radius: var(--radius-round);
  font-family: var(--font-family-modern);
  font-size: var(--font-size-smallnote);
  font-weight: var(--font-weight-smallnote);
  letter-spacing: var(--letter-spacing-smallnote);
  line-height: var(--line-height-smallnote);
  text-transform: uppercase;
}

.label {
  font-family: var(--font-family-modern);
  font-size: var(--font-size-note);
  font-weight: var(--font-weight-note);
  letter-spacing: var(--letter-spacing-note);
  line-height: var(--line-height-note);
  text-transform: uppercase;
}

.hero {
  display: grid;
  gap: var(--gap-large);
  min-width: 0;
}

.hero-soft {
  gap: var(--gap-hero);
}

.title-serif {
  width: 100%;
  min-width: 0;
  max-width: var(--width-title);
  font-family: var(--font-family-traditional);
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-title);
  line-height: var(--line-height-title);
  letter-spacing: var(--letter-spacing-title);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.title-modern {
  width: 100%;
  min-width: 0;
  max-width: var(--width-titlemodern);
  font-family: var(--font-family-modern);
  font-size: var(--font-size-titlemodern);
  font-weight: var(--font-weight-titlemodern);
  line-height: var(--line-height-titlemodern);
  letter-spacing: var(--letter-spacing-titlemodern);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.title-display {
  display: inline;
  width: 100%;
  min-width: 0;
  max-width: var(--width-extremetitle);
  padding:
    calc(var(--padding-micro) - 0.06em)
    calc(var(--padding-small) - 0.04em)
    var(--padding-micro);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-family: var(--font-family-modern);
  font-size: var(--font-size-extremetitle);
  font-weight: var(--font-weight-extremetitle);
  line-height: var(--line-height-extremetitle);
  letter-spacing: var(--letter-spacing-extremetitle);
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.subtitle {
  width: 100%;
  min-width: 0;
  max-width: var(--width-subtitle);
  font-family: var(--font-family-modern);
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-subtitle);
  line-height: var(--line-height-subtitle);
  letter-spacing: var(--letter-spacing-subtitle);
  overflow-wrap: anywhere;
}

.text {
  width: 100%;
  min-width: 0;
  max-width: var(--width-text);
  font-family: var(--font-family-modern);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
}

.text-detail {
  width: 100%;
  min-width: 0;
  font-family: var(--font-family-modern);
  font-size: var(--font-size-detail);
  font-weight: var(--font-weight-detail);
  line-height: var(--line-height-detail);
  letter-spacing: var(--letter-spacing-detail);
}

.text-large {
  width: 100%;
  min-width: 0;
  font-family: var(--font-family-modern);
  font-size: var(--font-size-emphasis);
  font-weight: var(--font-weight-emphasis);
  line-height: var(--line-height-emphasis);
  letter-spacing: var(--letter-spacing-emphasis);
  overflow-wrap: anywhere;
}

.text-feature {
  width: 100%;
  min-width: 0;
  max-width: var(--width-feature);
  font-family: var(--font-family-modern);
  font-size: var(--font-size-feature);
  font-weight: var(--font-weight-feature);
  line-height: var(--line-height-feature);
  letter-spacing: var(--letter-spacing-feature);
  overflow-wrap: anywhere;
}

.text-summary {
  width: 100%;
  min-width: 0;
  font-family: var(--font-family-modern);
  font-size: var(--font-size-summary);
  font-weight: var(--font-weight-summary);
  line-height: var(--line-height-summary);
  letter-spacing: var(--letter-spacing-summary);
}

.text-serif {
  width: 100%;
  min-width: 0;
  font-family: var(--font-family-traditional);
  font-size: var(--font-size-reading);
  font-weight: var(--font-weight-reading);
  line-height: var(--line-height-reading);
  letter-spacing: var(--letter-spacing-reading);
}

.text-strong {
  width: 100%;
  min-width: 0;
  max-width: var(--width-closing);
  font-family: var(--font-family-modern);
  font-size: var(--font-size-closing);
  font-weight: var(--font-weight-closing);
  line-height: var(--line-height-closing);
  letter-spacing: var(--letter-spacing-closing);
  overflow-wrap: anywhere;
}

.text-highlight {
  display: inline;
  padding:
    var(--padding-micro)
    var(--padding-small)
    calc(var(--padding-micro) + 0.04em);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.box {
  display: grid;
  gap: var(--gap-small);
  min-width: 0;
  padding:
    calc(var(--padding-xl) + 0.05em)
    var(--padding-xxl)
    var(--padding-xxl);
}

.card {
  display: grid;
  gap: var(--gap-small);
  min-width: 0;
  align-content: start;
  padding: var(--padding-xl);
}

.line-left {
  display: grid;
  gap: var(--gap-detail);
  min-width: 0;
  padding-left: var(--padding-xl);
  border-left-width: var(--size-line-bold);
  border-left-style: solid;
}

.line-left-soft {
  display: grid;
  gap: var(--gap-soft);
  min-width: 0;
  padding-left: var(--padding-xl);
  border-left-width: var(--size-line-bold);
  border-left-style: solid;
}

.line-top {
  min-width: 0;
  padding-top: calc(var(--padding-xl) + 0.2em);
  border-top-width: var(--size-line-thin);
  border-top-style: solid;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-large);
  min-width: 0;
}

.span-2 {
  grid-column: 1 / -1;
}

.value {
  font-family: var(--font-family-modern);
  font-size: var(--font-size-bodylarge);
  font-weight: var(--font-weight-bodylarge);
  line-height: var(--line-height-bodylarge);
  letter-spacing: var(--letter-spacing-bodylarge);
}

.note {
  font-family: var(--font-family-modern);
  font-size: var(--font-size-note);
  font-weight: var(--font-weight-body);
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-body);
}

.link-arrow {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  font-family: var(--font-family-modern);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bodylarge);
  line-height: var(--line-height-link);
  overflow-wrap: anywhere;
}

.link-arrow::before {
  content: "→ ";
}

.stack-xs {
  display: grid;
  gap: var(--gap-micro);
  min-width: 0;
}

.stack-sm {
  display: grid;
  gap: var(--gap-medium);
  min-width: 0;
}

.stack-md {
  display: grid;
  gap: var(--gap-large);
  min-width: 0;
}

.stack-lg {
  display: grid;
  gap: var(--gap-xl);
  min-width: 0;
}

.w-sm {
  width: 100%;
  min-width: 0;
  max-width: var(--width-reading);
}

.w-md {
  width: 100%;
  min-width: 0;
  max-width: var(--width-smalltext);
}

.w-text {
  width: 100%;
  min-width: 0;
  max-width: var(--width-text);
}

.w-mediumwide {
  width: 100%;
  min-width: 0;
  max-width: var(--width-mediumwide);
}

.w-large {
  width: 100%;
  min-width: 0;
  max-width: var(--width-large);
}

.w-xlarge {
  width: 100%;
  min-width: 0;
  max-width: var(--width-xlarge);
}

.w-xxlarge {
  width: 100%;
  min-width: 0;
  max-width: var(--width-xxlarge);
}

.w-wide {
  width: 100%;
  min-width: 0;
  max-width: var(--width-wide);
}

.w-lg {
  width: 100%;
  min-width: 0;
  max-width: var(--width-wide);
}

.pad-block-small {
  padding-top: var(--padding-block-small);
  padding-bottom: var(--padding-block-small);
}

.pad-block-medium {
  padding-top: var(--padding-block-medium);
  padding-bottom: var(--padding-block-medium);
}

.pad-block-large {
  padding-top: var(--padding-block-large);
  padding-bottom: var(--padding-block-large);
}

.pad-block-xl {
  padding-top: var(--padding-block-xl);
  padding-bottom: var(--padding-block-xl);
}

.pad-block-hero {
  padding-top: var(--padding-block-hero);
  padding-bottom: var(--padding-block-hero);
}

.pad-block-feature {
  padding-top: var(--padding-block-feature);
  padding-bottom: var(--padding-block-feature);
}

.pad-page-small {
  padding-top: var(--padding-block-page);
  padding-bottom: var(--padding-block-page);
}

.pad-page-medium {
  padding-top: var(--padding-block-page-large);
  padding-bottom: var(--padding-block-page-large);
}

.pad-page-large {
  padding-top: var(--padding-block-page-xl);
  padding-bottom: var(--padding-block-page-xl);
}

.slide-pad-small {
  display: grid;
  padding-top: var(--padding-block-small);
  padding-bottom: var(--padding-block-small);
}

.slide-pad-medium {
  display: grid;
  padding-top: var(--padding-block-large);
  padding-bottom: var(--padding-block-large);
}

.slide-pad-large {
  display: grid;
  padding-top: var(--padding-block-page-large);
  padding-bottom: var(--padding-block-page-large);
}

.focuspoint-pad {
  padding-left: clamp(var(--padding-focuspoint-min), 7vw, var(--padding-focuspoint-max));
  padding-right: clamp(var(--padding-focuspoint-min), 7vw, var(--padding-focuspoint-max));
}

.focuspoint-pad-wide {
  padding-left: clamp(var(--padding-focuspoint-min), 8vw, var(--padding-focuspoint-wide-max));
  padding-right: clamp(var(--padding-focuspoint-min), 8vw, var(--padding-focuspoint-wide-max));
}

.focuspoint-pad-widest {
  padding-left: clamp(var(--padding-focuspoint-wide-min), 9vw, var(--padding-focuspoint-widest-max));
  padding-right: clamp(var(--padding-focuspoint-min), 7vw, var(--padding-focuspoint-max));
}

.rule-short {
  width: var(--size-rule-short);
  height: var(--size-line-bold);
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

@media (max-width: 900px) {
  .title-serif,
  .title-modern,
  .title-display,
  .subtitle,
  .text,
  .text-detail,
  .text-large,
  .text-feature,
  .text-summary,
  .text-serif,
  .text-strong,
  .w-sm,
  .w-md,
  .w-text,
  .w-mediumwide,
  .w-large,
  .w-xlarge,
  .w-xxlarge,
  .w-wide,
  .w-lg {
    max-width: 100%;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .span-2 {
    grid-column: auto;
  }

  .focuspoint-pad-widest {
    padding-left: clamp(var(--padding-focuspoint-min), 8vw, var(--padding-focuspoint-max));
  }
}