@font-face {
  font-family: "Cascadia Mono";
  font-display: swap;
  src: url("/fonts/CascadiaMono.woff2") format("woff2");
}

@font-face {
  font-family: "Lexend";
  font-display: swap;
  font-weight: 400;
  src: url("/fonts/Lexend.woff2") format("woff2");
}

@font-face {
  font-family: "Lexend";
  font-display: swap;
  font-weight: 700;
  src: url("/fonts/Lexend-700.woff2") format("woff2");
}

@font-face {
  font-family: "Outfit";
  font-display: swap;
  src: url("/fonts/Outfit.woff") format("woff");
}

:root {
  --font-family-normal: "Outfit", sans-serif;
  --font-family-title: "Lexend", sans-serif;
  /*--font-family-monospace: "Cascadia Mono" "Roboto Mono", monospace;*/

  --color-charcoal: #2f2f2f;
  --color-lukewarm-charcoal: #313546;
  --color-warm-charcoal: #616682;
  --color-underwater-blue: #292d3e;
  --color-black: #1e1e1e;
  --color-blacker: #151515;
  --color-text-main: #f0eeff;
  --color-text-subtle: #c9cfea;
  --color-text-highlight: #fff;
  --color-white: #fefefc;
  --color-faff-pink: #ffaff3;
  --color-aged-plastic-yellow: #fffbe8;
  --color-unnamed-blue: #a6f0fc;
  --color-unexpected-aubergine: #584355;

  --color-code-blue: #9ce7ff;
  --color-code-green: #c8ffa7;
  --color-code-grey: #d4d4d4;
  --color-code-dark-grey: #848484;
  --color-code-yellow: #fdffab;
  --color-code-pink: var(--color-faff-pink);
  --color-code-red: #ff6262;
  --color-code-orange: #ffd596;
  --color-code-light-pink: #ffddfa;

  --opacity-mid: 0.65;

  --width-content: 960px;

  /* TODO: condense these into a few appopriatedly named variables */
  --font-size-small: 0.75rem;
  --font-size-code: 1rem;
  --font-size-normal: 1.125rem;
  --font-size-navbar: 1.125rem;
  --font-size-hero-button: 1.5rem;
  --font-size-pair-text: 1.375rem;
  --font-size-friendly-text: 1.5rem;
  --font-size-still-here-subtitle: 1.5rem;
  --font-size-still-here-button: 1.5rem;
  --font-size-hero-subtitle: 1.5rem;
  --font-size-logo: 1.75rem;
  --font-size-hero: 2.25rem;
  --font-size-pair-title: 2.25rem;
  --font-size-hero-title: 2.25rem;
  --font-size-still-here-title: 2.25rem;
  --font-size-footer-logo: 2.25rem;
  --font-size-friendly-title: 3rem;
  --font-size-sponsors-title: 3rem;

  --font-weight-normal: 400;
  --font-weight-title-bold: 700;

  --gap-1: 10px;
  --gap-2: calc(var(--gap-1) * 2);
  --gap-3: calc(var(--gap-1) * 3);
  --gap-4: calc(var(--gap-1) * 4);
  --gap-5: calc(var(--gap-1) * 5);
  --gap-6: calc(var(--gap-1) * 6);

  --waves-height: 100px;
  --waves-width: 1200px;

  --sponsor-size: 50px;
  --sponsors-gap: var(--gap-1);
  --sponsors-max-row-count: 8;
  --sponsors-row-height: calc(var(--sponsor-size) + var(--sponsors-gap));
  /* If this is renamed it must also be renamed in the JavaScript */
  --sponsors-max-height: calc(
    var(--sponsors-row-height) * var(--sponsors-max-row-count)
  );
  --sponsors-expand-transition: all 2s ease;
}

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  background-color: var(--color-underwater-blue);
  color: var(--color-text-main);
  font-family: var(--font-family-normal);
  font-size: var(--font-size-normal);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-normal);
}

p {
  letter-spacing: 0.5px;
  line-height: 1.3;
}

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

a:visited,
a {
  color: var(--color-white);
  text-decoration-color: var(--color-faff-pink);
}

pre {
  margin: 0;
}

li > code,
p > code {
  font-size: 0.85em;
  opacity: 0.75;
  margin: 0 2px;
}

pre code {
  font-size: var(--font-size-code);
  white-space: pre-wrap;
}

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  padding: 5px;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.content {
  max-width: 100%;
  width: var(--width-content);
  margin: 0 auto;
  padding: var(--gap-2);
}

main.content {
  padding-top: 0;
}

.navbar {
  font-family: var(--font-family-title);
  font-size: var(--font-size-navbar);
}

.navbar .content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.navbar .logo img {
  height: 1.5em;
  margin-right: var(--gap-1);
}

.logo {
  font-size: var(--font-size-logo);
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.logo img {
  display: inline-block;
  height: 1.3em;
  margin-right: 0.25em;
}

.hero-lucy-container {
  flex-shrink: 0;
  height: 268px;
  width: 280px;
  margin: 0 var(--gap-5) var(--gap-2) var(--gap-5);
  overflow: hidden;
  /* Needed to not cut Lucy's corners when rotating: */
  padding: var(--gap-1);
  box-sizing: content-box;
}

.hero-lucy {
  height: 100%;
  width: 100%;
  transition: transform 0.2s ease;
}

.navbar-lucy,
.footer-lucy {
  transition: transform 200ms ease;
}

.logo:hover .navbar-lucy,
.logo:hover .footer-lucy,
.hero-lucy-container:hover .hero-lucy {
  content: url("/images/lucy/lucyhappy.svg");
  transform: rotate(23deg);
}

.navbar a {
  color: var(--color-blacker);
  text-decoration: none;
  margin-left: var(--gap-2);
}

.navbar .logo {
  margin-left: 0;
}

[data-show-pride] {
  user-select: none;
  cursor: pointer;
}

.hero {
  padding-top: var(--gap-4);
  color: var(--color-blacker);
  text-align: center;
}

.hero h1 {
  font-size: var(--font-size-hero-title);
  margin: 0;
}

.hero-subtitle {
  margin: 0;
  font-size: var(--font-size-hero-subtitle);
}

.page-header {
  background-color: var(--color-aged-plastic-yellow);
  transition: all 0.5s ease;
}

.page-banner {
  background-color: var(--color-faff-pink);
  text-align: center;
  padding: var(--gap-1);
  color: var(--color-black);
}

.page-banner a {
  color: var(--color-black);
  text-decoration: underline;
  text-decoration-color: var(--color-black);
}

.pride .page-header {
  background-image: url("/images/pride-wall.svg");
  background-size: cover;
  background-position: center;
}

.hero .content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-6);
  padding-top: var(--gap-2);
  padding-bottom: var(--gap-4);
}

.hero .text {
  font-size: var(--font-size-hero);
  font-family: var(--font-family-title);
  max-width: 600px;
}

.hero .text b {
  font-weight: var(--font-weight-title-bold);
}

.button {
  color: var(--color-white) !important;
  background-color: var(--color-unexpected-aubergine);
  padding: var(--gap-1) var(--gap-4);
  border-radius: 100px;
  text-decoration: none;
  display: inline-block;
}

.button:visited {
  color: var(--color-white);
}

.hero a {
  font-size: var(--font-size-hero-button);
  margin-top: var(--gap-2);
}

.home-pair {
  padding-top: var(--gap-4);
  padding-bottom: var(--gap-4);
  font-size: var(--font-size-pair-text);

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-4);
}

.home-pair:nth-of-type(2n) {
  flex-direction: row-reverse;
}

.home-pair.intro {
  padding-top: 0;
}

.home-pair > * {
  max-width: 100%;
  min-width: 250px;
  width: calc(var(--width-content) * 0.5);
  flex: 1;
}

.home-pair h2 {
  font-size: var(--font-size-pair-title);
}

.home-top-sponsors {
  padding: var(--gap-3) 0;
  color: var(--color-blacker);
  background-color: var(--color-faff-pink);
}

.home-top-sponsors h2 {
  margin: 0;
}

.home-top-sponsors ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  gap: var(--gap-2);
  padding: 0;
  margin: 0;
  width: 100%;
}

.home-top-sponsors li {
  list-style: none;
}

.home-top-sponsors img {
  max-width: 100%;
}

.home-top-sponsors a {
  color: var(--color-black);
}

.home-top-sponsors .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-3);
}

.sponsor-level0 img {
  transition: transform 100ms ease-in-out;
  max-height: 110px;
  max-width: 100%;
  animation: pulse-animation 2.2s infinite;
  border-radius: 100px;
}

.post .sponsor-level0 {
  display: block;
  text-align: center;
}

.pulse-animation {
  animation: pulse-animation 2.2s infinite;
}

.sponsor-level0 img:hover {
  transform: rotate(-10deg) scale(1.2);
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
  }

  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

.sponsor-level1,
.sponsor-level2 {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}

.sponsor-level1 > li,
.sponsor-level2 > li {
  display: block;
}

.sponsor-level1 img {
  max-height: 110px;
  max-width: 100%;
}

.sponsor-level2 img {
  max-height: 60px;
  max-width: 100%;
}

.sponsors-like-you,
.sponsors-like-you:visited {
  font-size: var(--font-size-hero-title);
  color: var(--black);
}

.home-friendly {
  color: var(--color-blacker);
  text-align: center;
  background: linear-gradient(
    0deg,
    var(--color-faff-pink) 0%,
    var(--color-white) 300%
  );
  padding-top: var(--gap-4);
  margin-bottom: -1px;
  font-size: var(--font-size-friendly-text);
}

.home-friendly h2 {
  font-size: var(--font-size-friendly-title);
  margin: var(--gap-2) 0 var(--gap-6) 0;
}

/* Position the waves appropriately. */
.home-friendly,
.hero {
  position: relative;
  padding-bottom: var(--waves-height);
  overflow: hidden;
}

.home-waves {
  --overlap: 5px;
  bottom: calc(var(--overlap) * -1);
  height: var(--waves-height);
  position: absolute;
  right: 0px;
  left: min(0px, calc(calc(100vw - var(--waves-width)) * 0.2));
  width: calc(max(100%, var(--waves-width)) + calc(var(--overlap) * 2));
}

.home-sponsors {
  text-align: center;
  padding-bottom: var(--gap-2);
}

.home-sponsors .content {
  padding-top: 0;
  padding-bottom: 0;
}

.home-sponsors h2 {
  font-size: var(--font-size-sponsors-title);
  margin: 0;
}

.home-sponsors p {
  margin: var(--gap-3) 0 var(--gap-5) 0;
}

.home-sponsors ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0 var(--gap-2);
  gap: var(--sponsors-gap);
  margin: 0;
}

.home-sponsors-list {
  transition: var(--sponsors-expand-transition);
  max-height: var(--sponsors-max-height);
  position: relative;
  overflow: hidden;
}

[data-expand-sponsors] {
  --height: calc(var(--sponsor-size) * 0.75);
  transition: var(--sponsors-expand-transition);
  width: 100%;
  height: var(--height);
  position: absolute;
  top: calc(var(--sponsors-max-height) - var(--height));
  left: 0;
  background: linear-gradient(
    0deg,
    var(--color-underwater-blue) 30%,
    transparent 100%
  );
  font-size: 75px;
  cursor: pointer;
}

[data-expand-sponsors]:before {
  content: "\2026";
  color: var(--color-white);
  text-align: center;
  position: absolute;
  transform: rotate(180deg);
  width: 100%;
  top: 0;
  left: 0;
}

.home-sponsors li {
  list-style: none;
}

.home-sponsors img {
  height: var(--sponsor-size);
  width: var(--sponsor-size);
}

.home-sponsors .round {
  border-radius: 100vw;
  background-color: rgba(256, 256, 256, 0.4);
  background-color: var(--color-faff-pink);
}

.home-still-here {
  --lucy-x: min(-80px, calc(100vw - var(--width-content) - 400px));

  background:
    url("/images/lucy/lucymail.svg") var(--lucy-x) 120% / 350px auto no-repeat,
    linear-gradient(180deg, var(--color-faff-pink) 0%, var(--color-white) 250%);
  color: var(--color-blacker);
  text-align: center;
}

.home-still-here a:visited,
.home-still-here a {
  color: var(--color-blacker);
}

.home-still-here .content {
  padding-top: var(--gap-6);
  padding-bottom: var(--gap-6);
}

.home-still-here h2 {
  font-size: var(--font-size-still-here-title);
}

.home-still-here h3 {
  font-size: var(--font-size-still-here-subtitle);
}

.home-still-here hr {
  border: 1px solid var(--color-underwater-blue);
  opacity: 0.2;
  margin: var(--gap-4);
}

.home-still-here h2,
.home-still-here h3,
.home-still-here p {
  margin: var(--gap-2) 0;
}

.home-still-here .go-read {
  margin: var(--gap-3) 0;
}

.home-still-here .button {
  font-size: var(--font-size-still-here-button);
}

.home-still-here a {
  text-decoration-color: var(--color-charcoal);
}

[data-form="ebfa5ade-6f63-11ed-8f94-ef3b2b6b307a"] {
  margin: 0 auto;
}

[data-form="ebfa5ade-6f63-11ed-8f94-ef3b2b6b307a"] .main-form {
  flex-wrap: nowrap !important;
}

[data-form="ebfa5ade-6f63-11ed-8f94-ef3b2b6b307a"] .main-form * {
  margin: 0 !important;
}

[data-form="ebfa5ade-6f63-11ed-8f94-ef3b2b6b307a"] input[type="email"] {
  font-size: var(--font-size-normal) !important;
  padding-left: var(--gap-2);
  border-radius: 100px 0 0 100px;
  border: none;
}

[data-form="ebfa5ade-6f63-11ed-8f94-ef3b2b6b307a"] input[type="submit"] {
  font-size: var(--font-size-normal) !important;
  color: var(--color-white);
  background-color: var(--color-unexpected-aubergine) !important;
  border-color: var(--color-unexpected-aubergine) !important;
  border-radius: 0 100px 100px 0;
  text-decoration: none;
}

/* Stack the email form for mobile devices */
@media (max-width: 500px) {
  [data-form="ebfa5ade-6f63-11ed-8f94-ef3b2b6b307a"] .main-form {
    flex-direction: column;
    align-items: center !important;
  }

  [data-form="ebfa5ade-6f63-11ed-8f94-ef3b2b6b307a"] input[type="submit"],
  [data-form="ebfa5ade-6f63-11ed-8f94-ef3b2b6b307a"] input[type="email"] {
    border-radius: 100px;
  }
}

.footer {
  padding: var(--gap-4) 0;
  background-color: var(--color-white);
  color: var(--color-blacker);
  font-family: var(--font-family-title);
}

.footer a,
.footer a:visited {
  color: var(--color-blacker);
}

.footer .content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--gap-4);
}

.footer .logo {
  font-size: var(--font-size-footer-logo);
}

.footer li {
  list-style: none;
  padding: 0;
  margin-bottom: var(--gap-2);
  opacity: 0.9;
}

.footer ul {
  padding: 0;
}

.footer .first {
  flex: 1;
  max-width: 250px;
}

.footer .middle {
  flex: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.footer .middle li {
  width: 150px;
  margin-right: var(--gap-4);
}

.footer .last {
  text-align: right;
}

.footer .last li {
  margin-bottom: var(--gap-1);
  opacity: 0.6;
  font-size: var(--font-size-small);
}

.footer a {
  text-decoration: none;
}

.footer a:visited {
  color: var(--color-blacker);
}

.grecaptcha-badge {
  visibility: hidden;
}

.code-warning,
.hl-keyword,
.hl-built_in,
.code-keyword {
  color: var(--color-code-orange);
}

.code-success {
  color: var(--color-code-green);
}

.hl-deletion,
.code-error {
  color: var(--color-code-red);
}

.hl-operator,
.code-progress,
.code-operator {
  color: var(--color-code-pink);
}

.hl-module,
.hl-variant,
.hl-symbol,
.hl-atom,
.hl-literal,
.code-type,
.code-module {
  color: var(--color-code-light-pink);
}

.hl-string,
.hl-addition,
.code-string {
  color: var(--color-code-green);
}

.hl-number,
.code-number {
  color: var(--color-code-yellow);
}

.hl-function,
.hl-fn,
.code-decoration,
.code-fn {
  color: var(--color-code-blue);
}

.hl-comment,
.code-comment {
  color: var(--color-code-grey);
  opacity: 0.6;
}

.code-prompt {
  color: var(--color-code-dark-grey);
}

pre code {
  white-space: pre-wrap;
}

.page.content {
  padding-bottom: var(--gap-4);
  overflow-wrap: break-word;
}

.page pre {
  overflow-x: auto;
  overflow-y: auto;
  margin: var(--gap-3) 0 var(--gap-4) 0;
  padding: var(--gap-2) var(--gap-2);
  background-color: var(--color-black);
  border-radius: 0.6rem;
}

.page pre,
.page .shadow {
  box-shadow: var(--gap-1) var(--gap-1) 0 0 var(--color-blacker);
}

@media (max-width: 960px) {
  .page pre {
    max-width: 100vw;
    margin: var(--gap-3) calc(var(--gap-2) * -1) var(--gap-4)
      calc(var(--gap-2) * -1);
    border-radius: 0;
    box-shadow: 0 var(--gap-1) 0 0 var(--color-blacker);
  }
}

.page h1,
.page h2 {
  margin-top: var(--gap-6);
}

.news-posts {
  margin: 0;
  padding: 0;
}

.news-posts li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  list-style: none;
  margin-bottom: var(--gap-5);
}

.news-posts h2 {
  transition: color 120ms ease-in-out;
  font-weight: var(--font-weight-title-bold);
  margin: 0;
  text-decoration: none;
  font-size: 1.4rem;
}

.news-posts p {
  margin: 0.5rem 0;
}

.news-posts a {
  text-decoration: none;
}

.news-posts .links:hover {
  color: var(--color-faff-pink);
}

.news-posts .news-meta {
  padding: 0;
  display: flex;
  gap: 2ch;
}

.news-posts .news-meta li {
  display: flex;
  flex-direction: row;
  margin: 0;
  gap: 0.6ch;
  align-items: center;
  font-size: 1rem;
  color: --color-text-subtle;
}

.mailing-list-page p {
  font-size: var(--font-size-normal);
}

.mailing-list-page .recaptcha-blerb,
.recaptcha-blerb a,
.recaptcha-blerb a:visited,
.recaptcha-blerb {
  color: var(--color-blacker);
  font-size: var(--font-size-small);
}

.recaptcha-blerb {
  opacity: 0.8;
}

.recaptcha-blerb a {
  text-decoration: underline;
}

.bar-chart {
  padding: 0;
  margin-bottom: var(--gap-2);
}

.bar-chart li {
  list-style: none;
  margin-bottom: var(--gap-1);
}

.bar-chart .bar {
  background-color: var(--color-faff-pink);
  display: inline-block;
  height: 1em;
  flex-grow: 0;
  margin-right: var(--gap-1);
}

.bar-chart li {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.bar-chart li > * {
  flex: 1;
}

.bar-chart li {
  flex-wrap: wrap;
  display: flex;
}

.bar-chart .label {
  flex-grow: 0;
  flex-basis: 100%;
  margin-right: var(--gap-1);
}

@media (min-width: 960px) {
  .bar-chart .label {
    flex-basis: 200px;
    text-align: right;
  }

  .community-socials {
    grid-template-columns: 1fr 1fr;
  }
}

.community-socials {
  padding-left: 0;
  margin: 0;
  list-style-type: none;
  gap: 2rem;
  display: grid;
  align-items: center;
}

.community-socials a {
  background: var(--color-lukewarm-charcoal);
  border: 1px solid var(--color-warm-charcoal);
  width: 100%;
  border-radius: 0.6rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  padding: 2rem;
  text-decoration: none;
}

.community-socials h3 {
  font-weight: var(--font-weight-title-bold);
  font-family: var(--font-family-title);
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 0;
}

.community-socials p {
  line-height: 1;
  margin: 0;
  color: var(--color-text-main);
  font-size: 1rem;
}

.community-socials li:hover img {
  transform: rotateZ(-10deg);
}

.community-socials__logo,
.community-socials img {
  width: 5rem;
  height: 5rem;
}

.community-socials img {
  padding: 0.35rem;
  transition: transform ease-in-out 150ms;
}

.community-secondary-links {
  display: grid;
  gap: 1rem;
  padding: 0;
  margin-top: 2rem;
  list-style: none;
}

.community-secondary-links a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  line-height: 1;
  color: var(--color-text-main);
}

.community-secondary-links p {
  margin: 0 0 0.3em;
  font-size: 0.9em;
}

.community-secondary-links h4 {
  margin: 0;
  color: var(--color-white);
  font-weight: var(--font-weight-title-bold);
  font-size: 1.2rem;
  font-family: var(--font-family-title);
}

.community-secondary-links .icon {
  background: var(--color-lukewarm-charcoal);
  border: 1px solid var(--color-warm-charcoal);
  border-radius: 0.6rem;
  padding: 1rem;
}

.community-secondary-links img {
  width: 2.5rem;
  height: 2.5rem;
  display: block;
}

.gleam-weekly-shoutout {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--gap-3);
  gap: var(--gap-3);
  align-items: center;
  justify-content: center;
}

.gleam-weekly-shoutout img {
  width: 8rem;
}

.gleam-weekly-shoutout p {
  max-width: 45ch;
}

.community-talks {
  padding: 1.2rem 0;
  background: var(--color-lukewarm-charcoal);
}

.community-talks h2 {
  color: var(--color-white);
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-title-bold);
}

.featured-talks {
  display: grid;
  gap: var(--gap-3);
  padding: 0;
  list-style: none;
}

.community-talk {
  text-decoration: none;
  display: block;
}

.community-talk .talk-thumbnail {
  /* Approximately 16x9 */
  padding-bottom: 56%;
  background-size: cover;
  background-position: center;
  border-radius: 0.6rem;
  background-color: var(--color-blacker);
  margin: 0 0 1rem;
  /* Using this very silly trick to stop strange image artifacting */
  box-shadow: inset 0 0 0 1px var(--color-warm-charcoal);
}

.community-talk h4 {
  font-weight: var(--font-weight-title-bold);
  font-family: var(--font-family-title);
  color: var(--color-white);
  margin: 0;
}

.community-talk h5 {
  color: var(--color-text-main);
  font-size: 0.9em;
  margin: 0.2rem 0 0;
}

.community-talk p {
  color: var(--color-text-subtle);
  font-size: 0.9em;
  display: flex;
  align-items: center;
  gap: 0.8ch;
  margin: 0.6rem 0 0;
}

@media (min-width: 960px) {
  .featured-talks,
  .community-secondary-links {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* Same as --width-content */
@media (max-width: 960px) {
  .wide-only {
    display: none;
  }

  .navbar .content {
    flex-direction: column;
    justify-content: center;
  }

  .navbar .content > *:first-child {
    margin-bottom: var(--gap-2);
  }

  .hero {
    padding-top: 0;
  }

  .community-socials {
    flex-direction: column;
    align-items: start;
  }

  .community-socials a {
    flex-direction: row;
  }
}

/* Roadmap */

.roadmap-buttons {
  margin: 0 0 var(--gap-5);
  padding: 0;
  display: grid;
  gap: var(--gap-2);
  list-style: none;
}

.roadmap-buttons a {
  display: block;
  background: var(--color-lukewarm-charcoal);
  border: 1px solid var(--color-warm-charcoal);
  border-radius: 0.6rem;
  text-decoration: none;
  padding: var(--gap-2);
  font-size: 0.9rem;
  color: var(--color-text-subtle);
  transition: 120ms ease-in-out border-color;
}

.roadmap-buttons a#changelog-button:hover {
  border-color: var(--color-faff-pink);
}

.roadmap-buttons a#issues-button:hover {
  border-color: var(--color-code-yellow);
}

.roadmap-buttons a#versions-button:hover {
  border-color: var(--color-text-subtle);
}

.roadmap-buttons h3 {
  border: none;
  margin: 0 0 0.4rem;
  padding: 0;
  font-size: 1.2rem;
  color: var(--color-white);
  display: flex;
  align-items: center;
  gap: var(--gap-1);
}

.roadmap-buttons img {
  width: 24px;
  height: 24px;
}

.roadmap-buttons p {
  margin: 0;
}

.roadmap-star {
  width: 48px;
  height: 48px;
  background: url("/images/lucy/lucy-outline-faff-pink.svg") center no-repeat;
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-title-bold);
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  /* Hide on Mobile - too chunky and space-taking for small screens. */
  display: none;
}

.roadmap-section {
  margin-bottom: 3rem;
  gap: 2ch;
}

.roadmap-section#version-history {
  display: grid;
  grid-template-columns: 2px 1fr;
}

.roadmap-section#in-progress .roadmap-star {
  background-image: url("/images/lucy/lucy-outline-faff-pink.svg");
}

.roadmap-section#planned .roadmap-star {
  background-image: url("/images/lucy/lucy-outline-yellow.svg");
}

.roadmap-section#version-history .roadmap-star {
  background-image: url("/images/lucy/lucy-outline-grey.svg");
}

.roadmap-section header {
  margin-bottom: 2rem;
}

.roadmap-section header h2 {
  border: none;
  padding: 0;
  margin: 0 0 0.4rem;
  font-family: var(--font-family-title);
  color: var(--color-white);
}

.roadmap-section header h5 {
  color: var(--color-text-subtle);
  margin: 0;
  font-family: var(--font-family-title);
}

.roadmap-section .filler-line {
  width: 2px;
  background: var(--color-warm-charcoal);
  position: absolute;
  left: calc(50% - 1px);
  top: 40px;
  bottom: 0;
}

.roadmap-section aside {
  position: relative;
}

.roadmap-section#version-history main > ul {
  padding: 0;
  margin: 0;
}

.roadmap-section .previous-release {
  margin: 0 0 3rem;
  padding: 0;
  display: block;
  position: relative;
}

.roadmap-section .previous-release:before {
  content: "";
  width: 16px;
  height: 16px;
  background: var(--color-underwater-blue);
  border: 2px solid var(--color-text-subtle);
  position: absolute;
  left: -34px;
  top: 0px;
  border-radius: 100%;
}

.roadmap-section .previous-release:first-child:before {
  border-color: var(--color-faff-pink);
}

.roadmap-section .previous-release h4 {
  margin: 0 0 0.2rem;
  font-size: 1.4rem;
  color: var(--color-white);
}

.roadmap-section .previous-release h5 {
  font-family: var(--font-family-title);
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--color-text-subtle);
}

.roadmap-section .previous-release ul {
  margin: 0;
  padding: 0 0 0 0.7rem;
  display: grid;
  grid-gap: 0.75rem;
  list-style: disc;
  color: var(--color-text-main);
  font-size: 1.1rem;
}

.roadmap-section .previous-release ul li::marker {
  color: var(--color-warm-charcoal);
  font-size: 13px;
}

.roadmap-section .previous-release ul li {
  padding-left: 0.6rem;
}

.roadmap-issues {
  display: grid;
  margin: 0;
  padding: 0;
  gap: var(--gap-2);
}

.roadmap-issue {
  display: block;
  padding: var(--gap-3) var(--gap-2);
  margin: 0;
  border: 1px solid var(--color-warm-charcoal);
  border-radius: 0.6rem;
  position: relative;
}

.roadmap-issue h4 {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-title);
  color: var(--color-white);
  font-weight: var(--font-weight-title-bold);
}

.roadmap-issue p {
  color: var(--color-text-main);
  font-size: 1rem;
  margin: 0.4rem 0 0;
}

.roadmap-issue:before {
  content: "";
  background: var(--color-faff-pink);
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: -2px;
  width: 3px;
  border-radius: 100rem;
}

.roadmap-issue.roadmap-planned:before {
  background: var(--color-code-yellow);
}

.roadmap-issue.roadmap-research:before {
  background: var(--color-code-blue);
}

.roadmap-issue h6 {
  margin: 0 0 0.4rem;
  padding: 0;
  font-family: var(--font-family-title);
  color: var(--color-text-subtle);
  font-weight: var(--font-weight-title-bold);
  text-transform: uppercase;
}

@media (min-width: 960px) {
  .roadmap-star {
    display: flex;
  }

  /* A little duplication here... but we need to override the mobile
   * style for #version-history. Better than a whole other @media query */
  .roadmap-section,
  .roadmap-section#version-history {
    display: grid;
    grid-template-columns: 48px 1fr;
  }

  .roadmap-section .previous-release:before {
    left: -57px;
  }

  .roadmap-buttons {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .roadmap-issues {
    grid-template-columns: 1fr 1fr;
  }
}

/* Prose-specific styling */

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5 {
  font-weight: var(--font-weight-title-bold);
  color: var(--color-white);
  margin-top: 2.4em;
  margin-bottom: 0.75em;
}

.prose .alert-info,
.prose .alert-warning,
.prose .alert-error {
  border-left: 3px solid var(--alert-color);
  padding: var(--gap-2);
  margin: var(--gap-4) 0;
}

.prose .alert-info h3,
.prose .alert-warning h3,
.prose .alert-error h3 {
  color: var(--alert-color);
  margin: 0 0 0.4rem;
  font-size: 1em;
}

.prose .alert-info h3:before,
.prose .alert-warning h3:before,
.prose .alert-error h3:before {
  content: var(--alert-emoji);
  margin-right: 0.8ch;
}

.prose .alert-info p,
.prose .alert-warning p,
.prose .alert-error p {
  margin: 0;
  line-height: 1.4;
}

.prose .alert-info {
  --alert-color: var(--color-code-blue);
  --alert-emoji: "ℹ️";
}

.prose .alert-error {
  --alert-color: var(--color-code-red);
  --alert-emoji: "❗";
}

.prose .alert-warning {
  --alert-color: var(--color-code-orange);
  --alert-emoji: "🔔";
}

.prose > :nth-of-type(1) {
  margin-top: 0;
}

.prose p {
  line-height: 1.4em;
}

.prose :not(pre) > code {
  color: var(--color-code-orange);
  opacity: 1;
  border: var(--color-warm-charcoal) 1px solid;
  border-radius: 0.2rem;
  padding: 0 0.3rem;
  display: inline-block;
  white-space: pre-wrap;
  word-break: break-word;
}

.prose > iframe,
.prose > video,
.prose > img {
  display: block;
  margin: var(--gap-3) auto;
  max-width: 100%;
}

.prose details {
  border: 1px solid var(--color-warm-charcoal);
  padding: 1.2rem;
  border-radius: 0.6rem;
}

.prose details > summary {
  font-size: 1rem;
  font-family: var(--font-family-title);
  color: var(--color-white);
  margin: 0 -1.2rem;
  display: flex;
  padding: 0 1.2rem;
  align-items: center;
  justify-content: space-between;
}

.prose details[open] > summary {
  border-bottom: var(--color-warm-charcoal) 1px solid;
  padding-bottom: 1.2rem;
}

.prose details > summary:after {
  content: "";
  border: 6px solid transparent;
  border-top-color: var(--color-warm-charcoal);
  border-bottom: 0px;
}

.prose details[open] > summary::after {
  transform: rotate(180deg);
}

.prose dl dt {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-title-bold);
  color: var(--color-text-subtle);
  font-size: 1rem;
}

.prose dl dd {
  padding: 0;
  margin: 0.2rem 0 1rem;
}

.post {
  position: relative;
}

.post-published {
  text-align: right;
  margin-top: 0;
}

.post blockquote {
  font-style: italic;
  border-left: 4px solid var(--color-faff-pink);
  margin: 0;
  padding: 0 var(--gap-2);
}

details {
  margin-bottom: var(--gap-2);
  padding-left: var(--gap-2);
}

details > summary {
  margin-left: calc(var(--gap-2) * -1);
  cursor: pointer;
}

.post .top-sponsors {
  margin: var(--gap-4);
  padding: 0;
  text-align: center;
}

.post .top-sponsors li {
  list-style: none;
}

.post .sponsor-fly {
  height: 100px;
  margin-bottom: var(--space);
}

.post .sponsor-alembic {
  height: 38px;
}

.post .top-sponsors + ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--gap-2);
  padding: 0;
}

.post .top-sponsors + ul li {
  list-style: none;
  max-width: 100%;
}

/* Article Meta bar - Including publish date, author, and share button */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.post-meta .meta-button,
.case-study-meta .meta-button {
  appearance: normal;
  background: none;
  color: var(--color-text-main);
  font-weight: var(--font-weight-title-bold);
  font-size: 1rem;
  border: #616682 1px solid;
  border-radius: 0.3rem;
  padding: 0.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  gap: 0.6rem;
  transition-property: color, border-color;
  transition-timing-function: ease-in-out;
  transition-duration: 120ms;
}

.post-meta .share-button {
  margin-left: auto;
  text-decoration: none;
  padding: 0.6rem 1rem;
  cursor: pointer;
}

.post-meta .meta-button:hover,
.case-study-meta .meta-button:hover {
  border-color: var(--color-faff-pink);
  color: #fff;
}

.case-study-quote {
  font-size: 2rem;
  border-left: none;
  margin: 0 0 2rem;
  position: relative;
  font-style: normal;
  color: var(--color-text-highlight);
}

.case-study-quote:before {
  position: relative;
  top: 1rem;
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-title-bold);
  font-size: 4rem;
  content: open-quote;
  color: var(--color-warm-charcoal);
  display: inline-block;
  margin-right: 0.4rem;
}

@media (min-width: 960px) {
  .case-study-quote:before {
    position: absolute;
    left: -4rem;
    top: -1rem;
    font-size: 5rem;
  }
}

.case-study-quote p {
  margin: 0;
}

.case-study-meta {
  padding: 1rem;
  border: var(--color-warm-charcoal) 1px solid;
  border-radius: 0.6rem;
  margin: 0 0 1rem 0;
  gap: 1rem;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

@media (min-width: 960px) {
  .case-study-meta {
    float: right;
    max-width: 240px;
    margin: 0 0 1rem 1rem;
  }
}

.case-study-meta > li:first-child {
  display: flex;
  flex-direction: column;
}

.case-study-meta li {
  display: block;
}

.case-study-meta li h4 {
  margin: 0;
  font-weight: var(--font-weight-title-bold);
  font-family: var(--font-family-title);
  font-size: 1rem;
}

.case-study-meta li p {
  margin: 0.4rem 0 0;
  font-size: 1rem;
}

.page-cta {
  background: var(--color-lukewarm-charcoal);
  padding: 2rem;
  margin-top: 2rem;
  border: 1px solid var(--color-warm-charcoal);
  border-radius: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: center;
}

.page-cta img {
  max-width: 8rem;
}

.page-cta h4 {
  font-weight: var(--font-weight-title-bold);
  color: var(--color-white);
  margin: 0 0 1rem;
  font-size: 1.4rem;
}

.page-cta p {
  max-width: 40ch;
  margin: 0.4rem 0 0;
}

.stacked-articles > article {
  max-width: 70ch;
  margin: 0 auto;
}

.sponsor-page-callout {
  background-color: var(--color-faff-pink);
  padding: 3rem 0 5rem;
  margin: 3rem 0 -4.5rem;
  text-align: center;
  color: var(--color-black);
}

.sponsor-page-callout h2 {
  font-weight: var(--font-weight-title-bold);
}

.sponsor-project {
  background-color: var(--color-lukewarm-charcoal);
  border: 0 solid var(--color-warm-charcoal);
  border-width: 1px 0;
  max-width: 980px;
  margin: -3rem auto 2rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  color: var(--color-white);
  padding: 2.4rem 1.2rem;
  gap: 2rem;
  position: relative;
}

.sponsor-project img {
  width: 8rem;
}

.sponsor-project article {
  flex: 0 1 600px;
}

.sponsor-project h3 {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-title-bold);
  margin: 0 0 0.3rem;
  font-size: 1.5rem;
}

.sponsor-project p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-text-main);
}

.sponsor-project .sponsor-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.sponsor-project .sponsor-btn-group a {
  display: inline-flex;
  color: var(--color-blacker);
  background: var(--color-faff-pink);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 0.4rem;
  font-size: 1rem;
  font-weight: var(--font-weight-title-bold);
  font-family: var(--font-family-title);
}

.sponsees {
  max-width: var(--width-content);
  margin: 2rem auto 6rem;
  padding: 0 1rem;
  max-width: 840px;
  display: grid;
  position: relative;
  justify-content: center;
  gap: 2rem;
}

.sponsee {
  background: var(--color-lukewarm-charcoal);
  border: 1px solid var(--color-warm-charcoal);
  width: 100%;
  border-radius: 0.6rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1.3rem;
}

@media (min-width: 960px) {
  .sponsor-project {
    border-radius: 0.6rem;
    border-width: 1px 1px;
    padding: 3rem 2rem;
  }

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

  .sponsee:nth-of-type(even) {
    transform: translateY(20%);
  }
}

.sponsee img {
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 100rem;
}

.sponsee h4 {
  font-weight: var(--font-weight-title-bold);
  color: var(--color-white);
  font-size: 1.2rem;
  margin: 0;
}

.sponsee p {
  margin: 0;
}

.sponsee .sponsor-button {
  padding: 0.9rem 1rem;
  border-radius: 0.4rem;
  background: var(--color-faff-pink);
  font-weight: var(--font-weight-title-bold);
  color: var(--color-black);
  grid-column: 1 / span 2;
  text-align: center;
  font-family: var(--font-family-title);
  transition: opacity 120ms ease-in-out;
}

.sponsee .sponsor-button:hover {
  opacity: 0.9;
}

.sponsor-faqs {
  background: var(--color-lukewarm-charcoal);
  margin-top: 2rem;
}

.sponsor-faqs,
.sponsor-bank-transfer {
  padding: 3rem 0;
}

.sponsor-featured {
  position: relative;
  overflow: hidden;
  background: var(--color-faff-pink);
  color: var(--color-black);
  padding: 2rem 0 5rem;
  text-align: center;
}

.tooltip-container {
  position: relative;
}

.tooltip-container .tooltip {
  position: absolute;
  top: 120%;
  background-color: var(--color-black);
  color: var(--color-text-main);
  font-size: 0.9rem;
  font-weight: normal;
  font-family: var(--font-family-normal);
  width: max-content;
  padding: 1px 8px;
  border-radius: 0.3rem;
  transition: opacity 120ms ease-in-out;
  opacity: 0;
  pointer-events: none;
}

.tooltip-container[data-tooltip-position="left"] .tooltip {
  left: 0;
}

.tooltip-container[data-tooltip-position="right"] .tooltip {
  right: 0;
}

.tooltip-container[data-tooltip-trigger="hover"]:hover .tooltip,
.tooltip-container[data-tooltip-state="open"] .tooltip {
  opacity: 1;
}

/* Table of Contents layout */
.toc-layout {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 300px auto;
  gap: var(--gap-2);
  padding: 0 var(--gap-2);
}

/* This just gives us a nice bit of padding atop the headings */
.toc-layout .prose h1,
.toc-layout .prose h2,
.toc-layout .prose h3 {
  scroll-margin-top: 1em;
}

/* Hide the table of contents on mobile, it is very impracticle and bulky there. */
@media (max-width: 960px) {
  .toc-layout {
    display: block;
  }

  .toc-layout .table-of-contents {
    display: none;
  }
}

.table-of-contents {
  position: sticky;
  top: 16px;
  background: var(--color-lukewarm-charcoal);
  border: 1px solid var(--color-warm-charcoal);
  overflow-y: auto;
  /* 16px from top and bottom */
  max-height: calc(100dvh - 32px);
  border-radius: 0.4rem;
  font-size: 1rem;
  padding-bottom: var(--gap-2);
  margin-bottom: var(--gap-2);
}

.table-of-contents h4 {
  margin: 0;
  padding: 2rem 1.4rem 0.4rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text-subtle);
}

.table-of-contents ul {
  padding: 0;
  margin: 0;
}

.table-of-contents li {
  display: block;
  position: relative;
}

.table-of-contents ul ul li:before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  bottom: 0;
  background-color: var(--color-warm-charcoal);
  width: 2px;
  pointer-events: none;
}

.table-of-contents ul ul li:last-child:before {
  bottom: calc(50% - 2px);
}

.table-of-contents ul ul li:after {
  content: "";
  position: absolute;
  top: 50%;
  height: 2px;
  background-color: var(--color-warm-charcoal);
  width: 1ch;
  left: 24px;
  pointer-events: none;
}

.table-of-contents ul ul a {
  padding-left: 2.8rem;
}

.table-of-contents a {
  text-decoration: none;
  padding: 0.6rem 1.4rem;
  color: #eef1ff;
  display: flex;
}

/* Link cards */
.link-cards {
  display: grid;
  gap: 1rem;
  padding: 0;
}

@media screen and (min-width: 992px) {
  .link-cards {
    grid-template-columns: 1fr 1fr;
  }
}

.link-cards>li {
  display: block;
}

.link-cards .link {
  background: var(--color-lukewarm-charcoal);
  border: var(--color-warm-charcoal) 1px solid;
  height: 100%;
  border-radius: .4rem;
  padding: 1.2rem;
  display: block;
  text-decoration: none !important;
  transition: 120ms all ease-in-out;
}

.link-cards .link:hover {
  transform: translateY(-.2rem);
  background: #3a3f53;
  border-color: #686d82;
}

.link-cards h4 {
  font-weight: 700;
  padding: 0;
  margin: 0;
}

.link-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.4rem;
  padding: 0;
  margin-top: .5rem;
  color: var(--color-text-main);
}

.link-meta li {
  display: flex;
  font-size: 1rem;
  align-items: center;
  gap: .4rem;
  padding: 0;
}

.install-options {
  padding: 0;
  list-style: none;
  gap: var(--gap-2);
  display: grid;
  align-items: center;
}

@media (min-width: 600px) {
  .install-options {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 960px) {
  .install-options {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .install-options.erlang-step,
  .install-options.gleam-step {
    grid-template-columns: 1fr 1fr;
  }
}

.install-options img {
  width: 100%;
  transition: transform ease-in-out 100ms;
}

.install-options a:hover .icon img {
  transform: scale(1.08);
}

.install-options li {
  background: var(--color-lukewarm-charcoal);
  border: 1px solid var(--color-warm-charcoal);
  border-radius: 0.6rem;
  padding: 1rem;
}

.install-options.erlang-step li,
.install-options.gleam-step li {
  min-width: 40%;
}

.install-options a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-white);
}

.install-options .icon {
  width: 75px;
  aspect-ratio: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--gap-2);
}

.install-options .icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  aspect-ratio: 1;
}