@font-face {
  font-family: "MD UI";
  src: url("/fonts/mdui-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MD UI";
  src: url("/fonts/mdui-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MD IO";
  src: url("/fonts/mdio-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MD IO";
  src: url("/fonts/mdio-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MD Lorien";
  src: url("/fonts/mdlorien-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MD Lorien";
  src: url("/fonts/mdlorien-book.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Degular";
  src: url("/fonts/degular.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Swear";
  src: url("/fonts/swear.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Swear";
  src: url("/fonts/swear-cilati.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Retail";
  src: url("/fonts/retail.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Softie";
  src: url("/fonts/softie.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tilda Grande";
  src: url("/fonts/tilda-grande.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html {
  font-size: 100%;
}

:root {
  --color-ink: #322d2a;
  --color-paper: #fffdf8;
  --color-accent: #fcff28;
  --font-text: "GT Alpina", Georgia, serif;
  --font-ui: "Circular", system-ui, sans-serif;
  --space: 1rem;
}

:root {
  --ui: "MD UI", system-ui, sans-serif;
  --display: "MD Lorien", serif;
  --mono: "MD IO", monospace;
  --script: "Tilda Grande", "Snell Roundhand", "Apple Chancery", "Brush Script MT", cursive;
  --paper: #fff;
  --ink: #17171a;
  --ink2: color-mix(in oklab, var(--ink) 75%, var(--panel));
  --ink3: color-mix(in oklab, var(--ink) 60%, var(--panel));
  --hint: oklch(from var(--brand) 0.55 calc(c * 0.5) h);
  --rule2: #cfcbc2;
  --brand: #3E45A3;
  --brand-fill: oklch(from var(--brand) min(l, 0.82) c h);
  --green: oklch(0.54 0.15 152);
  --fill: var(--green);
  --on-fill: #fff;
  --acting: var(--fill);
  --late: #8a3b12;
  --highlight: #fff388;
  --u: .5rem;
  --stroke: .125rem;
  --hairline: .0625rem;
  --content: 59rem;
  --space-xxs: calc(0.25 * var(--u));
  --space-xs: calc(0.5 * var(--u));
  --space-xs-sm: calc(0.75 * var(--u));
  --space-sm: var(--u);
  --space-sm-md: calc(1.25 * var(--u));
  --space-md: calc(1.5 * var(--u));
  --space-md-lg: calc(1.75 * var(--u));
  --space-lg: calc(2 * var(--u));
  --space-lg-xl: calc(2.5 * var(--u));
  --space-xl: calc(3 * var(--u));
  --space-xxl: calc(4 * var(--u));
  --space-xxl-xxxl: calc(5 * var(--u));
  --space-xxxl: calc(6 * var(--u));
  --space-xxxxl: calc(8 * var(--u));
  --text-xxs: .6875rem;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-sm-md: .9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-lg-xl: 1.25rem;
  --text-xl: 1.375rem;
  --text-xxl: 1.625rem;
  --text-xxl-xxxl: 1.875rem;
  --text-xxxl: 2.125rem;
  --text-xxxxl: 3rem;
  --script-lg: 3rem;
  --script-md: 2.25rem;
  --script-sm: 1.75rem;
  --tracking-wide: .08em;
  --eyebrow-font: 500 var(--text-xxs)/1 var(--ui);
  --eyebrow-tracking: var(--tracking-wide);
  --eyebrow-casing: uppercase;
  --action-font: 500 var(--text-xs)/1 var(--ui);
  --action-tracking: var(--tracking-wide);
  --action-casing: uppercase;
  --title-font: 400 var(--text-xxxl)/1.1 var(--display);
  --item-title-font: 400 var(--text-xl)/1.25 var(--display);
  --paragraph-font: 400 var(--text-md)/1.5 var(--ui);
  --row-font: 400 var(--text-md)/1.4 var(--ui);
  --label-font: 500 var(--text-sm)/1 var(--ui);
  --explainer-font: 400 var(--text-xs)/1.5 var(--ui);
  --metadata-font: 400 var(--text-xs)/1.4 var(--ui);
  --figure-font: 400 var(--text-sm) var(--mono);
  --sum-font: 500 var(--text-lg-xl)/1 var(--mono);
  --sum-font-lg: 500 var(--text-xxxl)/1.1 var(--mono);
  --sum-font-xl: 500 var(--text-xxxxl)/1 var(--mono);
  --edge-fluid: clamp(var(--space-lg), 3vw, var(--space-xxl-xxxl));
  --edge-inset: var(--space-xl);
  --gx: var(--edge-fluid);
  --rail-w: 11.5rem;
  --tint: color-mix(in oklab, var(--brand) 6%, white);
  --panel: color-mix(in oklab, var(--brand) 14%, white);
  --rail: color-mix(in oklab, var(--brand) 10%, white);
  --rule: color-mix(in oklab, var(--brand) 18%, white);
  --field: color-mix(in oklab, oklch(from var(--brand) min(l, 0.5) c h) 40%, white);
  --outside: color-mix(in oklab, var(--brand) 22%, white);
  --bg: var(--tint);
  --fh: calc(6 * var(--u));
  --fh-button: calc(5 * var(--u));
  --bar: calc(9 * var(--u));
  --mast: calc(var(--bar) + var(--stroke));
  --foot: calc(var(--bar) + var(--stroke));
  --line: var(--stroke) solid var(--field);
  --content-edge: calc(var(--edge-fluid) + var(--edge-inset));
  --pick-w: 7.875rem;
  --mast-min: calc(2 * var(--content-edge) + 4 * var(--u) * 294.2 / 40.2 + var(--space-lg) + 2 * var(--pick-w) + var(--space-sm));
  --side: calc(48 * var(--u));
}

@media (max-width:53.4375rem) {
  :root {
    --edge-inset: var(--u);
  }
}

body.studio {
  --ink2: color-mix(in oklab, var(--ink) 75%, var(--panel));
  --ink3: color-mix(in oklab, var(--ink) 60%, var(--panel));
  --hint: oklch(from var(--brand) 0.55 calc(c * 0.5) h);
  --brand-fill: oklch(from var(--brand) min(l, 0.82) c h);
  --acting: var(--fill);
  --tint: color-mix(in oklab, var(--brand) 6%, white);
  --panel: color-mix(in oklab, var(--brand) 14%, white);
  --rail: color-mix(in oklab, var(--brand) 10%, white);
  --rule: color-mix(in oklab, var(--brand) 18%, white);
  --field: color-mix(in oklab, oklch(from var(--brand) min(l, 0.5) c h) 40%, white);
  --outside: color-mix(in oklab, var(--brand) 22%, white);
  --bg: var(--tint);
  --line: var(--stroke) solid var(--field);
  --eyebrow-font: 500 var(--text-xxs)/1 var(--ui);
  --action-font: 500 var(--text-xs)/1 var(--ui);
  --title-font: 400 var(--text-xxxl)/1.1 var(--display);
  --item-title-font: 400 var(--text-xl)/1.25 var(--display);
  --paragraph-font: 400 var(--text-md)/1.5 var(--ui);
  --row-font: 400 var(--text-md)/1.4 var(--ui);
  --label-font: 500 var(--text-sm)/1 var(--ui);
  --explainer-font: 400 var(--text-xs)/1.5 var(--ui);
  --metadata-font: 400 var(--text-xs)/1.4 var(--ui);
  --figure-font: 400 var(--text-sm) var(--mono);
  --sum-font: 500 var(--text-lg-xl)/1 var(--mono);
  --sum-font-lg: 500 var(--text-xxxl)/1.1 var(--mono);
  --sum-font-xl: 500 var(--text-xxxxl)/1 var(--mono);
}

input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  display: inline-grid;
  place-content: center;
  width: 1rem;
  height: 1rem;
  margin: 0;
  padding: 0;
  border: var(--line);
  border-radius: 0;
  background: var(--paper);
  color: var(--on-fill);
  cursor: pointer;
  flex: 0 0 auto;
  vertical-align: middle;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

input[type=checkbox]::after {
  content: "";
  width: .25rem;
  height: .5rem;
  border: solid currentColor;
  border-width: 0 var(--stroke) var(--stroke) 0;
  transform: translateY(-.0625rem) rotate(45deg);
  opacity: 0;
}

input[type=checkbox]:checked {
  background: var(--acting);
  border-color: var(--acting);
}

input[type=checkbox]:checked::after {
  opacity: 1;
}

input[type=checkbox]:focus-visible {
  outline: var(--stroke) solid var(--ink);
  outline-offset: .125rem;
}

input[type=checkbox]:disabled {
  cursor: default;
  border-color: var(--rule2);
  background: var(--panel);
}

input[type=checkbox]:disabled:checked {
  background: var(--ink3);
  border-color: var(--ink3);
}