:root {
  --django-primary-green: #0c4b33;
  --django-secondary-green: #187f58;
  --django-accent: #93d7b7;
  --django-accent-hover: #c9f0dd;
  --django-surface-1: #0e1117;
  --django-surface-2: #181d27;
  --django-white: #c1cad2;

  --surface-1: var(--django-surface-1);
  --surface-2: var(--django-surface-2);
  --text-1: var(--django-white);
  --text-2: var(--django-white);
  --primary: var(--django-primary-green);
  --secondary: var(--django-secondary-green);
  --accent: var(--django-accent);
  --accent-hover: var(--django-accent-hover);
  --link-color: var(--accent);
  --link-color-hover: var(--accent-hover);

  --recursive--weight--bold: 800;
  --recursive--weight--normal: 400;
  --recursive--weight: var(--recursive--weight--normal);
  --recursive--mono: 0;
  --recursive--linear: 0;
  --recursive--casual: 1;
  --recursive--cursive--default: 0.5;
  --recursive--cursive: var(--recursive--cursive--default);

  /* Fluid type scale (base 18px/1.2 @360px -> 20px/1.25 @1240px) */
  /* https://utopia.fyi/type/calculator?c=360,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 */
  --step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
  --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);

  color-scheme: dark;
  background-color: var(--django-surface-1);
  color: var(--django-white);
}

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

body {
  font-family:
    "Recursive",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
  font-variation-settings:
    "MONO" var(--recursive--mono),
    "CASL" var(--recursive--linear),
    "wght" var(--recursive--weight),
    "CRSV" var(--recursive--cursive);
  display: grid;
  row-gap: 1rem;
  min-block-size: 100vh;
  grid-template-rows: max-content 1fr max-content;

  @supports (min-block-size: 100dvb) {
    min-block-size: 100dvb;
  }

  :link {
    color: var(--link-color);
    text-decoration: none;

    &:where(:hover, :focus-visible, :active) {
      color: var(--link-color-hover);
      text-decoration: underline;
    }
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  --recursive--weight: var(--recursive--weight--bold);

  font-variation-settings:
    "MONO" var(--recursive--mono),
    "CASL" 0,
    "wght" var(--recursive--weight),
    "CRSV" var(--recursive--cursive);
}

h1 {
  font-size: var(--step-5);
}

h2 {
  font-size: var(--step-4);
}

h3 {
  font-size: var(--step-3);
}

h4 {
  font-size: var(--step-2);
}

h5 {
  font-size: var(--step-1);
}

h6 {
  font-size: var(--step-0);
}

em {
  font-variation-settings:
    "MONO" var(--recursive--mono),
    "CASL" var(--recursive--linear),
    "wght" var(--recursive--weight),
    "slnt" -14,
    "CRSV" var(--recursive--cursive);
}

strong {
  --recursive--weight: var(--recursive--weight--bold);

  font-variation-settings:
    "MONO" var(--recursive--mono),
    "CASL" var(--recursive--linear),
    "wght" var(--recursive--weight),
    "CRSV" var(--recursive--cursive);
}

header,
footer {
  padding: 1rem;
}

p {
  text-wrap: pretty;
}

header {
  text-align: center;
  background-color: var(--primary);

  h1 {
    margin: 0;
    font-size: var(--step-0);
  }
}

footer {
  text-align: center;
  background-color: var(--surface-1);

  .byline,
  p {
    margin: 0;
    text-wrap: balance;
  }
}

h1,
h2,
h3 {
  text-wrap: balance;
  max-inline-size: 80ch;
}

main {
  text-align: center;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

dryan-slideshow {
  display: flow-root;
  min-block-size: 100%;

  &[role="list"] {
    padding: 0;
    margin: 0;
    list-style-type: "";
    display: grid;
    grid-auto-columns: 100vi;
    grid-auto-flow: column;

    @media (orientation: portrait) {
      grid-auto-columns: unset;
      grid-auto-rows: minmax(max-content, 80vb);
      grid-auto-flow: row;
      row-gap: 1rem;
    }

    > li {
      padding-inline: 1rem;
      scroll-snap-align: start;
      container-name: --slide;
      container-type: inline-size;
    }
  }

  article {
    padding: 1rem;
    display: grid;
    row-gap: 1rem;
    align-items: center;
    justify-content: center;
    grid-auto-rows: max-content;
    place-content: center;
    min-block-size: 100%;
    border-radius: 0.5rem;
    background-color: var(--surface-2);
    box-shadow:
      rgba(3, 4, 7, 0.12) 0px -1px 2px 0px,
      rgba(3, 4, 7, 0.13) 0px 3px 2px -2px,
      rgba(3, 4, 7, 0.13) 0px 7px 5px -2px,
      rgba(3, 4, 7, 0.14) 0px 12px 10px -2px,
      rgba(3, 4, 7, 0.15) 0px 22px 18px -2px,
      rgba(3, 4, 7, 0.16) 0px 41px 33px -2px,
      rgba(3, 4, 7, 0.17) 0px 100px 80px -2px;
    border: 1pt solid #495057;

    h2 {
      font-size: var(--step-4);
      margin: 0 auto;

      &:only-child {
        font-size: var(--step-5);
        margin-block-end: 1em;
      }
    }

    h3 {
      font-size: var(--step-2);
      margin: 0 auto;
    }

    p {
      margin: 0;
      font-size: var(--step-2);
    }

    ul,
    ol {
      text-align: start;
      font-size: var(--step-2);
      display: grid;
      row-gap: 1rem;
    }

    p,
    ol,
    ul {
      max-inline-size: 60ch;
      margin-inline: auto;
    }

    blockquote {
      padding: 1rem;
      padding-inline-start: calc(2rem + 1ch);
      background-color: color-mix(in oklch, var(--surface-2) 90%, white);
      border-radius: 0.5rem;
      text-align: start;
      display: grid;
      row-gap: 1rem;
      max-inline-size: 60ch;
      margin-inline: auto;
      position: relative;

      &::before {
        content: "“";
        font-size: 3rem;
        line-height: 1;
        margin-inline-end: 0.5rem;
        position: absolute;
        inset-block-start: 0.5rem;
        inset-inline-start: 0.5rem;
        color: var(--accent);
      }

      p {
        margin-inline: 0;
      }

      cite {
        justify-self: end;
        margin-block-start: auto;
      }
    }

    figure {
      margin: 0;

      figcaption {
        color: var(--accent);
      }
    }
  }

  article:has(> :is(blockquote, figure):nth-of-type(2)) {
    @container --slide (width >= 32rem) {
      grid-template-columns: 1fr 2fr;
      column-gap: 2rem;

      &:has(figure) {
        grid-template-columns: 1fr 1fr;
      }

      &[data-layout="vertical"] {
        grid-template-columns: 1fr;
        row-gap: 2rem;
      }

      h2 {
        grid-column: 1 / -1;
      }

      :is(blockquote, figure) {
        margin-block: 0;
        min-block-size: 100%;
        min-inline-size: 100%;
      }
    }
  }
}