/* -- Reset ------------------------------------------------------------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, a,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strong, sub, sup, tt,
var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup,
menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0
}

input, select, option, optgroup, textarea {
  font: inherit
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

img {
  border: 0;
  -ms-interpolation-mode: bicubic;
  display: block;
}

img, object, embed {
  max-width: 100%;
  height: auto;
}

input {
  -webkit-appearance: none;
}

legend, fieldset, select, textarea, input, button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


/* -- Color ------------------------------------------------------------------------------------- */

:root {
  --color-background-light: hsl(0, 0%, 100%);
  --color-background-dark: hsl(27, 5%, 10%);
  --color-background: var(--color-background-light);

  --color-content-on-light-hsl: 27, 50%, 3%;
  --color-content-on-dark-hsl: 0, 0%, 100%;
  --color-content-hsl: var(--color-content-on-light-hsl);
  --color-content: hsla(var(--color-content-hsl), 0.9);
  --color-content-emphasized: hsla(var(--color-content-hsl), 1);
  --color-content-secondary: hsla(var(--color-content-hsl), 0.6);
  --color-content-subtle: hsla(var(--color-content-hsl), 0.3);
  --color-border: hsla(var(--color-content-hsl), 0.10);

  --color-accent-rgb: var(--color-eggplant-on-light-rgb);
  --color-accent: rgb(var(--color-accent-rgb));
  --color-accent-background: rgba(var(--color-accent-rgb), 0.10);

  /* Backgrounds and text */
  --color-light: #fff7ef;
  --color-light-selection: #c9bfb7;
  --color-subtle-on-light: #a39991;
  --color-subtle-on-dark: #847b74;
  --color-dark-selection: #5e564f;
  --color-dark: #211a14;

  /* Goji */
  --color-goji-on-dark: #f77fa0;
  --color-goji-bright: #b73060;
  --color-goji-on-light: #ae3d62;

  /* Peach */
  --color-peach-on-dark: #ff9279;
  --color-peach-bright: #de583a;
  --color-peach-on-light: #bc4c33;

  /* Tangerine */
  --color-tangerine-on-dark: #ffaf5e;
  --color-tangerine-bright: #f08e00;
  --color-tangerine-bright-background: #f08e001A;
  --color-tangerine-on-light: #b16801;

  /* Lemon */
  --color-lemon-on-dark: #ebc843;
  --color-lemon-bright: #f4cc25;
  --color-lemon-on-light: #987e00;

  /* Lime */
  --color-lime-on-dark: #b6db66;
  --color-lime-bright: #aed83f;
  --color-lime-on-light: #708d28;

  /* Turteal */
  --color-turteal-on-dark: #71e79d;
  --color-turteal-bright: #57db8c;
  --color-turteal-on-light: #36955d;

  /* Food coloring */
  --color-food-coloring-on-dark: #03e2cf;
  --color-food-coloring-bright: #21ccbb;
  --color-food-coloring-on-light: #029386;

  /* AMF */
  --color-amf-on-dark: #00d1f1;
  --color-amf-bright: #23b9d4;
  --color-amf-on-light: #008ba1;

  /* Blue raspberry */
  --color-blue-raspberry-on-dark: #68bcff;
  --color-blue-raspberry-bright: #1b94e0;
  --color-blue-raspberry-on-light: #267ab5;

  /* Blueberry */
  --color-blueberry-on-dark: #95a7ff;
  --color-blueberry-bright: #5765d5;
  --color-blueberry-on-light: #5664c1;

  /* Grape */
  --color-grape-on-dark: #be94f1;
  --color-grape-bright: #8046ba;
  --color-grape-on-light: #7f51b1;

  /* Eggplant */
  --color-eggplant-on-dark: #e384d2;
  --color-eggplant-on-dark-rgb: 227, 132, 210;
  --color-eggplant-bright: #a43594;
  --color-eggplant-on-light: #9d448f;
  --color-eggplant-on-light-rgb: 157, 68, 143;

  /* Text colors */
  --color-goji-text: var(--color-goji-on-light);
  --color-peach-text: var(--color-peach-on-light);
  --color-tangerine-text: var(--color-tangerine-on-light);
  --color-lemon-text: var(--color-lemon-on-light);
  --color-lime-text: var(--color-lime-on-light);
  --color-turteal-text: var(--color-turteal-on-light);
  --color-food-coloring-text: var(--color-food-coloring-on-light);
  --color-amf-text: var(--color-amf-on-light);
  --color-blue-raspberry-text: var(--color-blue-raspberry-on-light);
  --color-blueberry-text: var(--color-blueberry-on-light);
  --color-grape-text: var(--color-grape-on-light);
  --color-eggplant-text: var(--color-eggplant-on-light);
  --color-subtle-text: var(--color-subtle-on-light);
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--color-background-dark);
    --color-content-hsl: var(--color-content-on-dark-hsl);

    --color-content: hsla(var(--color-content-hsl), 0.9);
    --color-content-emphasized: hsla(var(--color-content-hsl), 1);
    --color-content-secondary: hsla(var(--color-content-hsl), 0.7);
    --color-content-subtle: hsla(var(--color-content-hsl), 0.5);

    --color-accent-rgb: var(--color-eggplant-on-dark-rgb);
    --color-accent: rgb(var(--color-accent-rgb));
    --color-accent-background: rgba(var(--color-accent-rgb), 0.15);

    --color-tangerine-bright-background: #f08e0026;

    /* Text colors */
    --color-goji-text: var(--color-goji-on-dark);
    --color-peach-text: var(--color-peach-on-dark);
    --color-tangerine-text: var(--color-tangerine-on-dark);
    --color-lemon-text: var(--color-lemon-on-dark);
    --color-lime-text: var(--color-lime-on-dark);
    --color-turteal-text: var(--color-turteal-on-dark);
    --color-food-coloring-text: var(--color-food-coloring-on-dark);
    --color-amf-text: var(--color-amf-on-dark);
    --color-blue-raspberry-text: var(--color-blue-raspberry-on-dark);
    --color-blueberry-text: var(--color-blueberry-on-dark);
    --color-grape-text: var(--color-grape-on-dark);
    --color-eggplant-text: var(--color-eggplant-on-dark);
    --color-subtle-text: var(--color-subtle-on-dark);
  }

  .always-light {
    --color-background: var(--color-background-light);

    --color-content-hsl: var(--color-content-on-light-hsl);
    --color-content: hsla(var(--color-content-hsl), 0.9);
    --color-content-emphasized: hsla(var(--color-content-hsl), 1);
    --color-content-secondary: hsla(var(--color-content-hsl), 0.6);
    --color-content-subtle: hsla(var(--color-content-hsl), 0.3);
    --color-border: hsla(var(--color-content-hsl), 0.10);

    --color-accent-rgb: var(--color-eggplant-on-light-rgb);
    --color-accent: rgb(var(--color-accent-rgb));
    --color-accent-background: rgba(var(--color-accent-rgb), 0.10);

    /* Text colors */
    --color-goji-text: var(--color-goji-on-light);
    --color-peach-text: var(--color-peach-on-light);
    --color-tangerine-text: var(--color-tangerine-on-light);
    --color-lemon-text: var(--color-lemon-on-light);
    --color-lime-text: var(--color-lime-on-light);
    --color-turteal-text: var(--color-turteal-on-light);
    --color-food-coloring-text: var(--color-food-coloring-on-light);
    --color-amf-text: var(--color-amf-on-light);
    --color-blue-raspberry-text: var(--color-blue-raspberry-on-light);
    --color-blueberry-text: var(--color-blueberry-on-light);
    --color-grape-text: var(--color-grape-on-light);
    --color-eggplant-text: var(--color-eggplant-on-light);
    --color-subtle-text: var(--color-subtle-on-light);

    background: var(--color-background);
    padding-top: 1px;
  }
}

.dark {
  --color-background: var(--color-background-dark);
  --color-content-hsl: var(--color-content-on-dark-hsl);

  --color-content: hsla(var(--color-content-hsl), 0.9);
  --color-content-emphasized: hsla(var(--color-content-hsl), 1);
  --color-content-secondary: hsla(var(--color-content-hsl), 0.7);
  --color-content-subtle: hsla(var(--color-content-hsl), 0.5);
  --color-border: hsla(var(--color-content-hsl), 0.10);
}


/* -- Generated typography variables ------------------------------------------------------------ */
/* @link https://utopia.fyi/type/calculator?c=320,17,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 {
  --fluid-min-width: 320;
  --fluid-max-width: 1240;

  --fluid-screen: 100vw;
  --fluid-bp: calc(
      (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) /
      (var(--fluid-max-width) - var(--fluid-min-width))
  );
}

@media screen and (min-width: 1240px) {
  :root {
    --fluid-screen: calc(var(--fluid-max-width) * 1px);
  }
}

:root {
  --f--2-min: 11.81;
  --f--2-max: 12.80;
  --step--2: calc(
      ((var(--f--2-min) / 16) * 1rem) + (var(--f--2-max) - var(--f--2-min)) *
      var(--fluid-bp)
  );

  --f--1-min: 14.17;
  --f--1-max: 16.00;
  --step--1: calc(
      ((var(--f--1-min) / 16) * 1rem) + (var(--f--1-max) - var(--f--1-min)) *
      var(--fluid-bp)
  );

  --f-0-min: 17.00;
  --f-0-max: 20.00;
  --step-0: calc(
      ((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) *
      var(--fluid-bp)
  );

  --f-1-min: 20.40;
  --f-1-max: 25.00;
  --step-1: calc(
      ((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) *
      var(--fluid-bp)
  );

  --f-2-min: 24.48;
  --f-2-max: 31.25;
  --step-2: calc(
      ((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) *
      var(--fluid-bp)
  );

  --f-3-min: 29.38;
  --f-3-max: 39.06;
  --step-3: calc(
      ((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min)) *
      var(--fluid-bp)
  );

  --f-4-min: 35.25;
  --f-4-max: 48.83;
  --step-4: calc(
      ((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min)) *
      var(--fluid-bp)
  );

  --f-5-min: 42.30;
  --f-5-max: 61.04;
  --step-5: calc(
      ((var(--f-5-min) / 16) * 1rem) + (var(--f-5-max) - var(--f-5-min)) *
      var(--fluid-bp)
  );
}


/* -- Generated space variables ----------------------------------------------------------------- */
/* @link https://utopia.fyi/space/calculator?c=320,16,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 {
  --fc-3xs-min: calc(var(--fc-s-min) * 0.25);
  --fc-3xs-max: calc(var(--fc-s-max) * 0.25);

  --fc-2xs-min: calc(var(--fc-s-min) * 0.5);
  --fc-2xs-max: calc(var(--fc-s-max) * 0.5);

  --fc-xs-min: calc(var(--fc-s-min) * 0.75);
  --fc-xs-max: calc(var(--fc-s-max) * 0.75);

  --fc-s-min: calc(var(--f-0-min, 16));
  --fc-s-max: calc(var(--f-0-max, 20));

  --fc-m-min: calc(var(--fc-s-min) * 1.5);
  --fc-m-max: calc(var(--fc-s-max) * 1.5);

  --fc-l-min: calc(var(--fc-s-min) * 2);
  --fc-l-max: calc(var(--fc-s-max) * 2);

  --fc-xl-min: calc(var(--fc-s-min) * 3);
  --fc-xl-max: calc(var(--fc-s-max) * 3);

  --fc-2xl-min: calc(var(--fc-s-min) * 4);
  --fc-2xl-max: calc(var(--fc-s-max) * 4);

  --fc-3xl-min: calc(var(--fc-s-min) * 6);
  --fc-3xl-max: calc(var(--fc-s-max) * 6);

  /* T-shirt sizes */
  --space-3xs: calc(((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-3xs-max) - var(--fc-3xs-min)) * var(--fluid-bp));
  --space-2xs: calc(((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-2xs-min)) * var(--fluid-bp));
  --space-xs: calc(((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-xs-min)) * var(--fluid-bp));
  --space-s: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-s-min)) * var(--fluid-bp));
  --space-m: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-m-min)) * var(--fluid-bp));
  --space-l: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-l-min)) * var(--fluid-bp));
  --space-xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
  --space-2xl: calc(((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-2xl-min)) * var(--fluid-bp));
  --space-3xl: calc(((var(--fc-3xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-3xl-min)) * var(--fluid-bp));

  /* One-up pairs */
  --space-3xs-2xs: calc(((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-3xs-min)) * var(--fluid-bp));
  --space-2xs-xs: calc(((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-2xs-min)) * var(--fluid-bp));
  --space-xs-s: calc(((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-xs-min)) * var(--fluid-bp));
  --space-s-m: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-s-min)) * var(--fluid-bp));
  --space-m-l: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-m-min)) * var(--fluid-bp));
  --space-l-xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-l-min)) * var(--fluid-bp));
  --space-xl-2xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
  --space-2xl-3xl: calc(((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-2xl-min)) * var(--fluid-bp));

  /* Custom pairs */
  --space-s-l: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-s-min)) * var(--fluid-bp));
}


/* -- Space ------------------------------------------------------------------------------------- */

:root {
  --margin-horizontal: var(--space-m);
  --margin-horizontal-small: var(--space-s-m);
  --marginv-media: var(--space-m);
  --corner-radius-media: var(--space-m);
  --corner-radius-button: var(--space-s);
  --corner-radius-thumbnail: var(--space-2xs);

  --screen-margin-width: calc(100vw - var(--margin-horizontal) * 2);
  --screen-small-margin-width: calc(100vw - var(--margin-horizontal-small) * 2);
  --content-max-width: calc(var(--step-0) * 35);
  --content-width: min(var(--screen-margin-width), var(--content-max-width));
  --full-bleed-max-width: calc(var(--content-width) + var(--space-xl) * 2);
  --full-bleed-width: min(var(--screen-small-margin-width), var(--full-bleed-max-width));
  --gallery-max-width: calc(var(--content-width) + var(--space-3xl) * 4);
  --gallery-width: min(var(--screen-small-margin-width), var(--gallery-max-width));

  --section-column-max-width: calc(var(--content-max-width) * 2 / 3);
  --section-column-width: min(var(--screen-margin-width), var(--section-column-max-width));

  --form-max-width: calc(var(--step--1) * 20);
}


/* -- Typography -------------------------------------------------------------------------------- */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(""), url("../fonts/fraunces-soft-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(""), url("../fonts/lato.woff2") format("woff2");
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local(""), url("../fonts/lato-bold.woff2") format("woff2");
}

/* cascadia-code - latin */
/*@font-face {*/
/*  font-family: "Cascadia Code";*/
/*  font-style: normal;*/
/*  font-weight: 200 700;*/
/*  font-display: swap;*/
/*  src: local(""),*/
/*  url("../fonts/cascadia-code.woff2") format("woff2"); !* Chrome 26+, Opera 23+, Firefox 39+ *!*/
/*}*/

/* cascadia-code-italic - latin */
/*@font-face {*/
/*  font-family: "Cascadia Code";*/
/*  font-style: italic;*/
/*  font-weight: 200 700;*/
/*  font-display: swap;*/
/*  src: local(""),*/
/*  url("../fonts/cascadia-code-italic.woff2") format("woff2"); !* Chrome 26+, Opera 23+, Firefox 39+ *!*/
/*}*/

:root {
  --font-family-heading: Fraunces, serif;
  --font-weight-heading: 400;
  --font-weight-heading-code: 500;
  --font-family-body: Lato, -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Helvetica, sans-serif;
  --font-weight-body: 400;
  --font-weight-body-bold: 700;
  --font-weight-body-code: 375;
}

body {
  font-size: var(--step-0);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body);
  color: var(--color-content);
}

h1, h2, h3, h4 {
  font-weight: var(--font-weight-heading);
  font-family: var(--font-family-heading);
  font-variation-settings: "SOFT" 50, "WONK" 0;
  line-height: 1.15;
  color: var(--color-content);
}

h1 {
  font-size: var(--step-4);
  margin-top: var(--space-xl);
}

h2 {
  font-size: var(--step-3);
  margin-top: var(--space-xl);
}

h3 {
  font-size: var(--step-2);
  margin-top: var(--space-l);
}

h4 {
  font-size: var(--step-1);
  margin-top: var(--space-l);
}

p, ul, ol, figcaption {
  font-size: var(--step-0);
  margin: var(--space-xs) 0;
  line-height: 1.6;
  color: var(--color-content);
}

li > ul, li > ol {
  margin: 0;
}

code {
  font-family: "Cascadia Code", Menlo, Monaco, Consolas, "Ubuntu Mono", "Courier New", monospace;
  font-weight: var(--font-weight-body-code);
}

p code, li code, figcaption code, h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
  position: relative;
  margin: 0 1px;
  padding: 6px;
  font-size: .95em;
  font-weight: var(--font-weight-body-code);
  background: var(--color-code-background);
  border-radius: 0.5em;
  white-space: pre-wrap;
  font-style: normal;
}

h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
  font-weight: var(--font-weight-heading-code);
  font-size: .97em;
}

.subtitle {
  color: var(--color-content-subtle);
}

caption, figcaption, .post-caption, .caption {
  font-size: var(--step--1);
}

a {
  color: var(--color-content-emphasized);
  text-decoration: none;
  transition-property: border-bottom-width, border-bottom-color, color;
  transition-duration: var(--anim-duration-slow);
  transition-timing-function: var(--anim-easing-emphasized);
}

a:hover {
  color: var(--color-accent);
  transition-duration: var(--anim-duration-fast);
  transition-timing-function: var(--anim-easing);
}

p a, li a, figcaption a {
  font-weight: var(--font-weight-body-bold);
  border-bottom: 2px solid var(--color-accent);
}

p a:hover, li a:hover, figcaption a:hover {
  border-bottom: 3px solid var(--color-accent);
}

p a code, li a code, figcaption a code {
  padding-bottom: 0.5px;
  border-radius: 0.5em 0.5em 0 0;
}

/* -- Forms ------------------------------------------------------------------------------------- */

.button {
  display: inline-block;
  color: var(--color-content-emphasized);
  padding: var(--space-s) var(--space-m);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body-bold);
  font-size: var(--step-0);
  line-height: 1;
  border-radius: var(--corner-radius-button);
  cursor: pointer;
  transition-property: filter, box-shadow, background-color;
  transition-duration: var(--anim-duration-slow);
  transition-timing-function: var(--anim-easing-emphasized);
}

.button.filled {
  background: var(--color-eggplant-bright);
  border: none !important;
}

.button.outlined {
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
}

.button:hover {
  transition-duration: var(--anim-duration-fast);
  transition-timing-function: var(--anim-easing);
}

.button.filled:hover {
  color: var(--color-content-emphasized);
  filter: brightness(110%);
}

.button.outlined:hover {
  background-color: var(--color-accent-background);
}

.button-inline {
  cursor: pointer;
}

.button .arrow, .button-inline .arrow {
  display: inline;
  vertical-align: middle;
  height: 1.25em;
  margin: -0.35em -0.15em -0.15em 0;
  transition-property: fill, translate;
  transition-timing-function: var(--anim-easing-emphasized);
  transition-duration: var(--anim-duration-slow);
}

.button-inline .arrow {
  fill: var(--color-content);
}

.button.filled .arrow {
  fill: var(--color-content-emphasized);
}

.button.outlined .arrow {
  fill: var(--color-accent);
}

.button:hover .arrow, .button:focus .arrow, .button-inline:hover .arrow {
  translate: 0.3em;
  transition-timing-function: var(--anim-easing);
  transition-duration: var(--anim-duration-fast);
}

.button.filled:hover .arrow, .button.filled:focus .arrow {
  fill: var(--color-content-emphasized)
}

.button.outlined:hover .arrow, .button.outlined:focus .arrow, .button-inline:hover .arrow {
  fill: var(--color-accent);
}


/* -- Animation --------------------------------------------------------------------------------- */

:root {
  --anim-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --anim-easing-emphasized: cubic-bezier(0.4, 0, 0, 1);
  --anim-duration-fast: 0.15s;
  --anim-duration-slow: 0.5s;

  transition-duration: var(--anim-duration-fast);
  transition-timing-function: var(--anim-easing);
}


/* -- Global styles ----------------------------------------------------------------------------- */

.intro {
  margin-bottom: var(--space-m);
}

.intro > :last-child {
  margin-bottom: 0;
}

.centered {
  text-align: center;
}

.content > :first-child {
  margin-top: 0;
}

.content > :last-child {
  margin-bottom: 0;
}


/* -- Header and navigation --------------------------------------------------------------------- */

.nav-container {
  border-bottom: var(--color-border) solid 1px;
}

nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--space-s);
  padding: var(--space-s) 0;
  width: var(--full-bleed-width);
  margin: 0 auto;
}

nav ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  max-width: 100%;
}

nav ul :last-child {
  margin-right: 0;
}

.nav-list {
  column-gap: var(--space-s);
  row-gap: var(--space-2xs);
}

.nav-list li {
}

.active-nav-item {
  border-bottom-width: 4px;
}

.nav-brand {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  font-size: var(--step-1);
  flex-grow: 1;
  flex-shrink: 0;
}

.nav-brand img {
  height: var(--step-2);
}

footer {
  text-align: center;
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-l);
}

footer p {
  font-size: var(--step--1);
  color: var(--color-content-subtle);
}

footer a, .footer-link a {
  color: var(--color-content-subtle);
  border-bottom-color: var(--color-content-subtle);
  border-bottom-width: 1px;
}

footer a:hover, .footer-link a:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}


/* -- Home -------------------------------------------------------------------------------------- */

html, body {
  font-family: var(--font-family-body);
  background-color: var(--color-background);
  color: var(--color-content);
  transition: background-color 300ms, color 300ms;
}

p, ul, ol, caption, figcaption, h1, h2, h3, h4, summary {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

ul, ol {
  padding-left: calc(var(--space-m));
}

details {
  max-width: var(--full-bleed-width);
  margin: var(--space-m) auto;
}

details[open] {
  margin-bottom: var(--space-l);
  border-left: 2px outset var(--color-content-subtle);
  border-right: 2px outset transparent;
}

summary {
  font-family: var(--font-family-heading);
  font-size: var(--step-1);
  cursor: pointer;
  user-select: none;
}

li p {
  margin-top: 0;
  margin-bottom: 0;
}

.home li {
  margin-bottom: var(--space-s);
}

.home li:last-child {
  margin-bottom: 0;
}

.home section {
  border-bottom: var(--color-border) solid 1px;
  width: 100vw;
}

section h1:first-child, section h2:first-child {
  margin-top: 0;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

section.hero {
  min-height: 65vh;
  height: auto;
  padding: var(--space-xl-2xl) 0;
}

.hero p, .hero h1 {
  text-align: center;
  transition: color 300ms;
}

.hero .inside {
  display: flex;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
  flex: 1;
  justify-content: center;
}

.hero .inside .caption {
  margin: 0 0 var(--space-m) 0;
  text-align: center;
}

.wordmark {
  height: var(--space-xl);
  width: auto;
}

.wordmark img {
  height: var(--space-xl);
  width: auto;
}

.logo {
  height: var(--space-3xl);
  width: auto;
  margin-bottom: var(--space-l);
}

.logo img {
  height: var(--space-3xl);
  width: auto;
}

h1.below-logo {
  margin-top: 0;
  max-width: none;
}

#split-object {
  transition: width var(--anim-duration-slow) var(--anim-easing-emphasized);
  color: var(--color-eggplant-text);
  display: inline-block;
}

#split-content {
  display: inline-block;
}

.flow-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-s);
  margin-top: var(--space-m);
  margin-bottom: var(--space-m);
}

.flow-row a {
  border-bottom: none !important;
}

.store-icon {
  height: calc(var(--space-s) * 2.5)
}

.receipt .two-column, .groups .two-column {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-l);
  max-width: var(--screen-margin-width);
  padding: var(--space-xl-2xl) 0;
  margin-right: auto;
  margin-left: auto;
}

.receipt .two-column {
  flex-direction: row;
}

.groups .two-column {
  flex-direction: row-reverse;
}

.half-column {
  flex-grow: 1;
  max-width: var(--section-column-max-width);
}

.half-column.screenshots {
  margin-top: calc(var(--space-l) - var(--space-xl-2xl));
  margin-bottom: calc(-1 * var(--space-xl-2xl))
}

section.groups h2 {
}

/* -- Premium ----------------------------------------------------------------------------------- */

h1.premium {
  text-align: center;
  margin-bottom: var(--space-l);
}

.premium .wordmark img {
  margin-right: auto;
  margin-left: auto;
}

ul.premium-list {
  list-style-type: "✓";
  padding-left: var(--space-s);
}

ul.premium-list > li {
  padding-left: var(--space-2xs);
}

ul.premium-list > li .caption {
  color: var(--color-content-secondary);
}

.premium-warning {
  background-color: var(--color-tangerine-bright-background);
  max-width: var(--full-bleed-width);
  margin: var(--marginv-media) auto;
  padding: var(--space-m);
  border-radius: var(--corner-radius-media);
}

.premium-warning > :first-child {
  margin-top: 0;
}

.premium-warning > :last-child {
  margin-bottom: 0;
}

.premium-price {
  font-weight: var(--font-weight-body-bold);
  color: var(--color-tangerine-text);
}

.stack {
  display: inline-block;
}
.stack.middle {
  margin: 0 var(--space-2xs);
}

.stacked {
  display: block;
}
.stacked.caption {
  margin-top: calc(-1 * var(--space-3xs));
  color: var(--color-content-secondary);
}

.premium-heading {
  font-size: var(--step-3);
}

.premium-heading svg {
  height: var(--step-3);
  width: auto;
  display: inline-block;
  vertical-align: middle;
  color: var(--color-tangerine-bright);
}

.premium-tag {
  font-family: var(--font-family-heading);
  font-size: var(--step-1);
  margin-top: var(--space-3xs);
  font-variation-settings: "SOFT" 50, "WONK" 0;
}

.premium-tag svg {
  height: var(--step-1);
  width: auto;
  display: inline-block;
  vertical-align: middle;
  color: var(--color-tangerine-bright);
}

.premium-tag a, a.premium-link {
  border-bottom: none !important;
  font-weight: var(--font-weight-heading);
}

.premium-tag a:hover, a.premium-link:hover {
  color: var(--color-tangerine-bright);
}

h1.join-title {
  margin-bottom: var(--space-m);
}

.join-description {
  margin-bottom: 0;
}

/* -- Footer ------------------------------------------------------------------------------------ */

footer.compact, .home .compact {
  margin-top: var(--space-m);
  margin-bottom: 0;
}

.footer-link {
  color: var(--color-content-subtle);
  font-size: var(--step--1);
  margin: var(--space-3xs);
}