:root {
  color-scheme: light;

  --reading-width: 38rem;
  --page-gutter: 1.25rem;

  --body-text: clamp(1.0625rem, 1.02rem + 0.18vw, 1.125rem);
  --body-leading: 1.68;

  --card-tint-opacity: 0.52;
  --card-tint-opacity-interactive: 0;
  --card-tint-blend-mode: multiply;
  --card-tint-saturation: 1.2;
  --card-image-saturation: 0;
  --card-image-contrast: 0.88;
  --card-image-brightness: 1.1;
  --card-image-opacity: 0.86;

  --page-paper-purple: #efe4f8;
  --page-paper-yellow: #fff4c9;
  --page-background: linear-gradient(
    135deg,
    var(--page-paper-purple),
    var(--page-paper-yellow)
  );
  --page-text: #17151a;
  --page-heading-ink: #444;
  --muted-text: #555;
  --quiet-text: #666;
  --decorative-text: #777;
  --faint-text: #999;
  --rule-color: rgb(68 68 68 / 35%);
  --orbit-grey: rgb(126 92 155 / 26%);
  --orbit-light: rgb(151 115 177 / 19%);

  --text-highlight-shadow:
    0 0.12em 0.28em rgb(75 52 92 / 14%);
}

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

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  position: relative;

  margin: 0;
  padding: 0;

  background: var(--page-background);
  color: var(--page-text);

  font-family: system-ui, sans-serif;
  line-height: var(--body-leading);
}

.ambient-circles {
  position: absolute;
  inset: 0;
  z-index: 0;

  overflow: hidden;
  pointer-events: none;
}

.orbit-field {
  position: relative;
  height: 64rem;
}

.orbit-field span {
  position: absolute;

  width: 92vw;
  min-width: 52rem;
  aspect-ratio: 1;

  border: 1.5px dashed var(--orbit-grey);
  border-radius: 50%;
}

.orbit-field span:nth-child(1) {
  top: -38rem;
  left: -36vw;

  animation: orbit-drift-one 173s ease-in-out -37s infinite;
}

.orbit-field span:nth-child(2) {
  top: -24rem;
  right: -62vw;

  width: 118vw;
  border-color: var(--orbit-light);

  animation: orbit-drift-two 227s ease-in-out -91s infinite;
}

.orbit-field span:nth-child(3) {
  top: 8rem;
  left: 22vw;

  width: 82vw;
  border-color: var(--orbit-light);

  animation: orbit-drift-three 191s ease-in-out -124s infinite;
}

.orbit-field span:nth-child(4) {
  top: 22rem;
  left: -48vw;

  width: 136vw;

  animation: orbit-drift-four 263s ease-in-out -68s infinite;
}

.orbit-field:nth-child(3n + 2) span {
  animation-delay: -153s;
}

.orbit-field:nth-child(3n) span {
  animation-delay: -211s;
}

.orbit-field:nth-child(even) span:nth-child(1) {
  right: -30vw;
  left: auto;
}

.orbit-field:nth-child(even) span:nth-child(2) {
  right: auto;
  left: -58vw;
}

.orbit-field:nth-child(even) span:nth-child(3) {
  left: -18vw;
}

.orbit-field:nth-child(even) span:nth-child(4) {
  right: -44vw;
  left: auto;
}

.orbit-field:nth-child(3n) span:nth-child(1) {
  width: 106vw;
}

.orbit-field:nth-child(3n) span:nth-child(3) {
  width: 94vw;
}

.orbit-field:nth-child(4n) span:nth-child(2) {
  width: 128vw;
}

body > header,
body > main,
body > footer {
  position: relative;
  z-index: 1;
}

@keyframes orbit-drift-one {
  0% { transform: translate3d(-3vw, -1rem, 0) rotate(-0.5deg); }
  38% { transform: translate3d(5vw, 2rem, 0) rotate(0.4deg); }
  72% { transform: translate3d(1vw, 4rem, 0) rotate(0.7deg); }
  100% { transform: translate3d(-3vw, -1rem, 0) rotate(-0.5deg); }
}

@keyframes orbit-drift-two {
  0% { transform: translate3d(4vw, 2rem, 0) rotate(0.4deg); }
  31% { transform: translate3d(-2vw, -4rem, 0) rotate(-0.2deg); }
  67% { transform: translate3d(-7vw, 1rem, 0) rotate(-0.7deg); }
  100% { transform: translate3d(4vw, 2rem, 0) rotate(0.4deg); }
}

@keyframes orbit-drift-three {
  0% { transform: translate3d(-2vw, 3rem, 0) rotate(-0.3deg); }
  42% { transform: translate3d(5vw, -4rem, 0) rotate(0.8deg); }
  76% { transform: translate3d(7vw, 1rem, 0) rotate(0.2deg); }
  100% { transform: translate3d(-2vw, 3rem, 0) rotate(-0.3deg); }
}

@keyframes orbit-drift-four {
  0% { transform: translate3d(3vw, -3rem, 0) rotate(0.6deg); }
  35% { transform: translate3d(-5vw, 1rem, 0) rotate(-0.4deg); }
  69% { transform: translate3d(-1vw, 5rem, 0) rotate(-0.8deg); }
  100% { transform: translate3d(3vw, -3rem, 0) rotate(0.6deg); }
}

a {
  color: inherit;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.14em;
}

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

body > header,
body > main,
body > footer.site-footer {
  width: min(
    calc(100% - (2 * var(--page-gutter))),
    var(--reading-width)
  );

  margin-inline: auto;
}

body > header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 1.5rem;

  padding-block: 1.25rem;
}

.site-title {
  display: inline-flex;
  align-items: center;

  gap: 0.65rem;

  white-space: nowrap;
  text-decoration: none;
}

.site-title span {
  padding: 0.04em 0.2em;

  background: #fff7a4;
  color: #17151a;
  box-shadow: var(--text-highlight-shadow);

  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.4;

  letter-spacing: -0.025em;
}

.site-title img {
  display: block;

  width: 2.25rem;
  height: 2.25rem;

  object-fit: contain;
}

.site-title:hover span,
.site-title:focus-visible span {
  text-decoration: underline;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.14em;
}

body > header nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;

  gap: 0.9rem;
}

body > header nav a {
  padding: 0.04em 0.2em;

  color: #444;
  box-shadow: var(--text-highlight-shadow);
}

body > header nav a:nth-child(1) {
  background: #f3d8e8;
}

body > header nav a:nth-child(2) {
  background: #d8eeee;
}

body > header nav a:nth-child(3) {
  background: #e1eed8;
}

.site-footer nav a {
  padding: 0.04em 0.14em;

  box-shadow: var(--text-highlight-shadow);
}

.site-footer nav a:nth-of-type(1) {
  background: #f3d8e8;
  color: #74294f;
}

.site-footer nav a:nth-of-type(2) {
  background: #ccebea;
  color: #245d61;
}

.site-footer nav a:nth-of-type(3) {
  background: #f7dfb5;
  color: #704817;
}

.site-footer nav a:nth-of-type(4) {
  background: #ddd2f2;
  color: #4d3b78;
}

body > main {
  padding-top: 3rem;
  padding-bottom: 4rem;

  font-size: var(--body-text);
}

body > main > article,
body > main > .page-content {
  margin: 0;
  padding: 0;
}

main p,
main ul,
main ol,
main blockquote {
  margin-top: 0;
  margin-bottom: 1.35em;
}

main ul,
main ol {
  padding-left: 1.4rem;
}

main ul {
  list-style-type: "-  ";
}

main li + li {
  margin-top: 0.3em;
}

.page-content > :is(p, ul, ol, blockquote, figure):has(+ :is(h1, h2, h3)),
article > :is(p, ul, ol, blockquote, figure):has(+ :is(h2, h3, h4)) {
  margin-bottom: 4rem;
}

main h1,
main h2,
main h3,
main h4 {
  line-height: 1.15;
}

main h1 {
  margin-top: 0;
  margin-bottom: 1.5rem;

  font-size: clamp(1.75rem, 3.5vw, 2.25rem);

  line-height: 1.1;
  letter-spacing: -0.02em;

  text-wrap: pretty;
}

main h2 {
  margin-top: 2.75rem;
  margin-bottom: 1rem;

  font-size: clamp(1.4rem, 2.5vw, 1.875rem);

  text-wrap: balance;
}

main h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;

  font-size: clamp(1.2rem, 2vw, 1.4rem);

  text-wrap: balance;
}

main h4 {
  font-size: 1.125rem;
  text-wrap: balance;
}

.page-content > h1,
.page-content > h2,
.page-content > h3,
article > h2,
article > h3,
article > h4,
.grid-section-heading {
  display: inline;

  padding: 0.06em 0.14em;

  background: linear-gradient(
    135deg,
    var(--page-paper-yellow),
    var(--page-paper-purple)
  );
  background-attachment: fixed;
  background-size: 100vw 100vh;
  color: var(--page-heading-ink);
  box-shadow: var(--text-highlight-shadow);

  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.page-content > h1:has(+ h2),
.page-content > h2:has(+ h3),
article > h2:has(+ h3),
article > h3:has(+ h4) {
  display: table;

  width: fit-content;
  max-width: 100%;
}

.page-content > h1 + *,
.page-content > h2 + *,
.page-content > h3 + *,
article > h2 + *,
article > h3 + *,
article > h4 + * {
  margin-top: 2.5em;
}

.pastel-headings > h2:nth-of-type(6n + 1) { background: #f3d8e8; color: #74294f; }
.pastel-headings > h2:nth-of-type(6n + 2) { background: #ccebea; color: #245d61; }
.pastel-headings > h2:nth-of-type(6n + 3) { background: #f7dfb5; color: #704817; }
.pastel-headings > h2:nth-of-type(6n + 4) { background: #ddd2f2; color: #4d3b78; }
.pastel-headings > h2:nth-of-type(6n + 5) { background: #edcedd; color: #71324c; }
.pastel-headings > h2:nth-of-type(6n) { background: #d9edc9; color: #35552a; }

article > header {
  margin-bottom: 2.5rem;
}

.post,
.project,
.person,
.group {
  --article-title-background: color-mix(
    in srgb,
    var(--page-paper-yellow),
    var(--page-paper-purple) 50%
  );
  --article-title-ink: var(--page-heading-ink);
}

article > header h1.article-title {
  margin-top: 0;
  margin-bottom: 2rem;

  font-size: clamp(1.625rem, 2.75vw, 2rem);

  line-height: 1.25;
  letter-spacing: -0.02em;

  text-wrap: pretty;
}

article > header h1.article-title span {
  background: var(--article-title-background, #000);
  color: var(--article-title-ink, #fff);
  box-shadow: var(--text-highlight-shadow);

  padding: 0.06em 0.14em;

  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.post-date {
  margin: 0;

  text-align: right;

  font-size: 0.9rem;
  line-height: 1.4;
  font-weight: 400;

  color: var(--muted-text);
}

.post-authors {
  max-width: 60%;
  margin: 0.35rem 0 0 auto;

  text-align: right;

  font-size: 0.9rem;
  line-height: 1.4;

  color: var(--muted-text);
}

.project-label {
  margin: 0;

  text-align: right;

  font-size: 0.8rem;
  line-height: 1.4;
  font-weight: 400;

  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: var(--quiet-text);
}

main img {
  display: block;
  margin-inline: auto;
}

main figure {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

main figcaption {
  margin-top: 0.65rem;

  font-size: 0.875em;
  line-height: 1.45;
}

.image-contained {
  display: flex;
  justify-content: center;

  width: 100%;
  margin: 0 auto 2.5rem;
}

.image-contained > p {
  margin: 0;
}

.image-contained img {
  width: auto;
  max-height: min(70vh, 34rem);
}

.project > p:first-of-type img {
  width: 100%;
  margin: 0;
}

main blockquote {
  margin-left: 0;
  margin-right: 0;

  padding-left: 1.25rem;

  border-left: 0.2rem solid currentColor;
}

main a,
main code {
  overflow-wrap: anywhere;
}

main pre {
  max-width: 100%;
  overflow-x: auto;

  padding: 1rem;
}

.home-page {
  font-size: 1.15em;
  line-height: 1.55;
}

.home-name {
  padding: 0.04em 0.2em;

  background: #fff7a4;
  color: #17151a;
  box-shadow: var(--text-highlight-shadow);

  font-weight: 800;
  letter-spacing: -0.025em;
}

.home-highlight {
  background: transparent;
  color: inherit;
}

.home-highlight::before,
.home-highlight::after {
  color: var(--decorative-text);

  font-family: ui-monospace, monospace;
  font-size: 0.85em;

  opacity: 0.7;
}

.home-highlight::before {
  content: "{";
  margin-right: 0.08em;
}

.home-highlight::after {
  content: "}";
  margin-left: 0.08em;
}

.home-highlight-item {
  padding-inline: 0.12em;

  font-size: 0.89em;

  box-shadow: var(--text-highlight-shadow);

  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.home-highlight .home-highlight-item {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    monospace;
  font-size: 0.75em;
  letter-spacing: -0.025em;
}

.home-highlight-item:nth-child(24n + 1) { background: #f3d8e8; color: #74294f; }
.home-highlight-item:nth-child(24n + 2) { background: #ccebea; color: #245d61; }
.home-highlight-item:nth-child(24n + 3) { background: #f7dfb5; color: #704817; }
.home-highlight-item:nth-child(24n + 4) { background: #ddd2f2; color: #4d3b78; }
.home-highlight-item:nth-child(24n + 5) { background: #d9edc9; color: #35552a; }
.home-highlight-item:nth-child(24n + 6) { background: #edcedd; color: #71324c; }
.home-highlight-item:nth-child(24n + 7) { background: #d4e9f2; color: #28556b; }
.home-highlight-item:nth-child(24n + 8) { background: #f4d2ad; color: #704315; }
.home-highlight-item:nth-child(24n + 9) { background: #d7d4f3; color: #414070; }
.home-highlight-item:nth-child(24n + 10) { background: #c9eadf; color: #1f5a47; }
.home-highlight-item:nth-child(24n + 11) { background: #f5cfd0; color: #733437; }
.home-highlight-item:nth-child(24n + 12) { background: #f5edbd; color: #665719; }
.home-highlight-item:nth-child(24n + 13) { background: #cddff5; color: #294f78; }
.home-highlight-item:nth-child(24n + 14) { background: #ead3ee; color: #62366a; }
.home-highlight-item:nth-child(24n + 15) { background: #e3ecc1; color: #4d5d20; }
.home-highlight-item:nth-child(24n + 16) { background: #f1d1bd; color: #70402c; }
.home-highlight-item:nth-child(24n + 17) { background: #d8eeee; color: #285b60; }
.home-highlight-item:nth-child(24n + 18) { background: #e2d0dc; color: #613c55; }
.home-highlight-item:nth-child(24n + 19) { background: #e8e0bd; color: #63551e; }
.home-highlight-item:nth-child(24n + 20) { background: #cde8d8; color: #275b43; }
.home-highlight-item:nth-child(24n + 21) { background: #ded7ef; color: #4a3e72; }
.home-highlight-item:nth-child(24n + 22) { background: #f2d0c8; color: #733b31; }
.home-highlight-item:nth-child(24n + 23) { background: #d5e7ef; color: #34576a; }
.home-highlight-item:nth-child(24n) { background: #dcebb5; color: #4e5f1d; }

.home-stat.stat-lavender .home-highlight-item { background: #ddd2f2; color: #4d3b78; }
.home-stat.stat-peach .home-highlight-item { background: #f1d1bd; color: #70402c; }
.home-stat.stat-aqua .home-highlight-item { background: #ccebea; color: #245d61; }
.home-stat.stat-sage .home-highlight-item { background: #d9edc9; color: #35552a; }

.directory-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 0.8rem 1.25rem;

  width: min(
    70rem,
    calc(100vw - (2 * var(--page-gutter)))
  );

  margin-top: 2.5rem;
  margin-left: 50%;
  padding-left: 0;

  transform: translateX(-50%);

  list-style: none;
}

.directory-list li {
  display: flex;

  margin: 0;
}

.directory-list a {
  display: flex;
  align-items: center;

  width: 100%;
  min-height: 4.5rem;

  padding: 0.75em 0.85em;

  font-size: 0.84em;
  line-height: 1.35;
  text-decoration: none;

  box-shadow: var(--text-highlight-shadow);
}

.directory-list a:hover,
.directory-list a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.14em;
}

.directory-list li:nth-child(12n + 1) a { background: #f3d8e8; color: #74294f; }
.directory-list li:nth-child(12n + 2) a { background: #ccebea; color: #245d61; }
.directory-list li:nth-child(12n + 3) a { background: #f7dfb5; color: #704817; }
.directory-list li:nth-child(12n + 4) a { background: #ddd2f2; color: #4d3b78; }
.directory-list li:nth-child(12n + 5) a { background: #d9edc9; color: #35552a; }
.directory-list li:nth-child(12n + 6) a { background: #edcedd; color: #71324c; }
.directory-list li:nth-child(12n + 7) a { background: #d4e9f2; color: #28556b; }
.directory-list li:nth-child(12n + 8) a { background: #f4d2ad; color: #704315; }
.directory-list li:nth-child(12n + 9) a { background: #d7d4f3; color: #414070; }
.directory-list li:nth-child(12n + 10) a { background: #c9eadf; color: #1f5a47; }
.directory-list li:nth-child(12n + 11) a { background: #f5cfd0; color: #733437; }
.directory-list li:nth-child(12n) a { background: #f5edbd; color: #665719; }

:is(
  .spacer-1,
  .spacer-2,
  .spacer-3,
  .spacer-4,
  .spacer-5,
  .spacer-6,
  .spacer-7,
  .spacer-8,
  .spacer-9,
  .spacer-10,
  .spacer-11,
  .spacer-12,
  .spacer-13,
  .spacer-14,
  .spacer-15
) {
  margin: 0;
}

.spacer-1 { height: 1rem; }
.spacer-2 { height: 2rem; }
.spacer-3 { height: 3rem; }
.spacer-4 { height: 4rem; }
.spacer-5 { height: 5rem; }
.spacer-6 { height: 6rem; }
.spacer-7 { height: 7rem; }
.spacer-8 { height: 8rem; }
.spacer-9 { height: 9rem; }
.spacer-10 { height: 10rem; }
.spacer-11 { height: 11rem; }
.spacer-12 { height: 12rem; }
.spacer-13 { height: 13rem; }
.spacer-14 { height: 14rem; }
.spacer-15 { height: 15rem; }

.pastel-toc {
  display: grid;

  gap: 0.55rem;

  margin: 0;
  padding: 0 0 0 0.8rem;

  list-style: none;
}

.pastel-toc li {
  margin: 0;
}

.pastel-toc li::before {
  content: "↳";

  margin-right: 0.45rem;

  color: var(--decorative-text);
}

.pastel-toc a {
  padding: 0.04em 0.16em;

  box-shadow: var(--text-highlight-shadow);
}

.pastel-toc li:nth-child(6n + 1) a { background: #f3d8e8; color: #74294f; }
.pastel-toc li:nth-child(6n + 2) a { background: #ccebea; color: #245d61; }
.pastel-toc li:nth-child(6n + 3) a { background: #f7dfb5; color: #704817; }
.pastel-toc li:nth-child(6n + 4) a { background: #ddd2f2; color: #4d3b78; }
.pastel-toc li:nth-child(6n + 5) a { background: #edcedd; color: #71324c; }
.pastel-toc li:nth-child(6n) a { background: #d9edc9; color: #35552a; }

.back-to-top {
  margin: 1.5rem 0 5rem;

  font-size: 0.875em;
  text-align: right;
}

.back-to-top a {
  padding: 0.04em 0.16em;

  color: #666;
  background: #eee7f6;
  box-shadow: var(--text-highlight-shadow);
}

.project-grid {
  --project-card-min: 13.5rem;

  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, var(--project-card-min)), 1fr)
    );

  column-gap: 1.25rem;
  row-gap: 2.75rem;

  width: min(
    76rem,
    calc(100vw - (2 * var(--page-gutter)))
  );

  margin-top: 1.75rem;
  margin-left: 50%;

  transform: translateX(-50%);

  align-items: start;
}

.project-grid + .grid-section-heading {
  display: table;

  margin-top: 4rem;
}

.grid-section-heading {
  font-size: clamp(1.2rem, 2vw, 1.4rem);
}

.page-content > .grid-section-heading:nth-of-type(6n + 1),
.person > section:nth-of-type(6n + 1) > .grid-section-heading {
  background: #f3d8e8;
  color: #74294f;
}

.page-content > .grid-section-heading:nth-of-type(6n + 2),
.person > section:nth-of-type(6n + 2) > .grid-section-heading {
  background: #ccebea;
  color: #245d61;
}

.page-content > .grid-section-heading:nth-of-type(6n + 3),
.person > section:nth-of-type(6n + 3) > .grid-section-heading {
  background: #f7dfb5;
  color: #704817;
}

.page-content > .grid-section-heading:nth-of-type(6n + 4),
.person > section:nth-of-type(6n + 4) > .grid-section-heading {
  background: #ddd2f2;
  color: #4d3b78;
}

.page-content > .grid-section-heading:nth-of-type(6n + 5),
.person > section:nth-of-type(6n + 5) > .grid-section-heading {
  background: #d9edc9;
  color: #35552a;
}

.page-content > .grid-section-heading:nth-of-type(6n),
.person > section:nth-of-type(6n) > .grid-section-heading {
  background: #edcedd;
  color: #71324c;
}

.grid-section-heading + :is(.project-grid, .blog-grid) {
  margin-top: 2.25rem;
}

.person .project-grid,
.person .blog-grid,
.group .project-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));

  width: 100%;
  margin-left: 0;

  transform: none;
}

.person > section + section {
  margin-top: 4rem;
}

.project-card,
.blog-card {
  --card-tint: #dfa0b6;
  --card-title-background: color-mix(
    in srgb,
    var(--page-paper-yellow),
    var(--page-paper-purple) var(--card-title-progress, 0%)
  );
  --card-title-ink: var(--page-heading-ink);
}

.project-card {
  min-width: 0;
  margin: 0;
}

.project-card:nth-child(6n + 1),
.blog-card:nth-child(6n + 1) { --card-tint: #dfa0b6; }
.project-card:nth-child(6n + 2),
.blog-card:nth-child(6n + 2) { --card-tint: #9fb7d8; }
.project-card:nth-child(6n + 3),
.blog-card:nth-child(6n + 3) { --card-tint: #b6cfb2; }
.project-card:nth-child(6n + 4),
.blog-card:nth-child(6n + 4) { --card-tint: #e3b98a; }
.project-card:nth-child(6n + 5),
.blog-card:nth-child(6n + 5) { --card-tint: #c2b1d7; }
.project-card:nth-child(6n),
.blog-card:nth-child(6n) { --card-tint: #a8d2cf; }

.project-card a {
  display: grid;
  grid-template-rows: auto auto;

  gap: 0.7rem;

  text-decoration: none;
}

.project-card-image,
.blog-card-image {
  position: relative;
  isolation: isolate;

  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--card-tint);
}

.project-card-image {
  margin: 0;
}

.project-card-image::after,
.blog-card-image::after,
.post-placeholder::after {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    radial-gradient(
      circle,
      rgb(255 255 255 / 40%) 0 0.75px,
      transparent 0.95px
    ) 0 0 / 3px 3px,
    radial-gradient(
      circle,
      rgb(0 0 0 / 16%) 0 0.65px,
      transparent 0.9px
    ) 1px 1px / 4px 4px,
    var(--card-tint);
  mix-blend-mode: var(--card-tint-blend-mode);
  opacity: var(--card-tint-opacity);
  filter: saturate(var(--card-tint-saturation));
  pointer-events: none;

  transition: opacity 180ms ease;
}

.project-card a:hover .project-card-image::after,
.project-card a:focus-visible .project-card-image::after,
.blog-card a:hover .blog-card-image::after,
.blog-card a:focus-visible .blog-card-image::after {
  opacity: var(--card-tint-opacity-interactive);
}

.project-card a:hover .project-card-image img,
.project-card a:focus-visible .project-card-image img,
.blog-card a:hover .blog-card-image img,
.blog-card a:focus-visible .blog-card-image img,
.blog-card a:hover .blog-card-emoji,
.blog-card a:focus-visible .blog-card-emoji {
  filter: none;
  opacity: 1;
}

.project-card-image img,
.blog-card-image img {
  display: block;

  position: relative;
  z-index: 0;

  width: 100%;
  height: 100%;

  margin: 0;

  object-fit: cover;
  filter:
    saturate(var(--card-image-saturation))
    contrast(var(--card-image-contrast))
    brightness(var(--card-image-brightness));
  opacity: var(--card-image-opacity);
}

.project-card-image img {
  transition:
    transform 180ms ease,
    filter 180ms ease,
    opacity 180ms ease;
}

.project-grid .project-card h3 {
  margin: 0;

  font-size: 0.95rem;
  line-height: 1.45;
  font-weight: 700;

  text-wrap: pretty;
}

.project-card h3 span,
.blog-card h2 span {
  background: var(--card-title-background);
  color: var(--card-title-ink);
  box-shadow: var(--text-highlight-shadow);

  padding: 0.04em 0.12em;

  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.project-card a:hover img {
  transform: scale(1.025);
}

.project-card a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 0.3rem;
}

:is(.project-people, .project-groups) {
  margin-top: 3rem;
}

:is(.project-people, .project-groups) h2 span {
  padding: 0.06em 0.14em;

  background: var(--article-title-background);
  color: var(--page-heading-ink);
  box-shadow: var(--text-highlight-shadow);

  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

:is(.project-people, .project-groups) ul {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;

  gap: 0.18em 0.28em;

  margin-bottom: 0;
  padding-left: 0;

  list-style: none;
}

:is(.project-people, .project-groups) ul::before,
:is(.project-people, .project-groups) ul::after {
  color: var(--decorative-text);

  font-family: ui-monospace, monospace;
  font-size: 0.85em;

  opacity: 0.7;
}

:is(.project-people, .project-groups) ul::before {
  content: "{";
}

:is(.project-people, .project-groups) ul::after {
  content: "}";
}

:is(.project-people, .project-groups) li {
  margin: 0;
}

:is(.project-people, .project-groups) li:not(:last-child)::after {
  content: ",";
}

:is(.project-people, .project-groups) li a {
  padding-inline: 0.12em;

  box-shadow: var(--text-highlight-shadow);

  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.project-people .project-coordinator a {
  font-weight: 700;
}

:is(.project-people, .project-groups) li:nth-child(12n + 1) a { background: #f3d8e8; color: #74294f; }
:is(.project-people, .project-groups) li:nth-child(12n + 2) a { background: #ccebea; color: #245d61; }
:is(.project-people, .project-groups) li:nth-child(12n + 3) a { background: #f7dfb5; color: #704817; }
:is(.project-people, .project-groups) li:nth-child(12n + 4) a { background: #ddd2f2; color: #4d3b78; }
:is(.project-people, .project-groups) li:nth-child(12n + 5) a { background: #d9edc9; color: #35552a; }
:is(.project-people, .project-groups) li:nth-child(12n + 6) a { background: #edcedd; color: #71324c; }
:is(.project-people, .project-groups) li:nth-child(12n + 7) a { background: #d4e9f2; color: #28556b; }
:is(.project-people, .project-groups) li:nth-child(12n + 8) a { background: #f4d2ad; color: #704315; }
:is(.project-people, .project-groups) li:nth-child(12n + 9) a { background: #d7d4f3; color: #414070; }
:is(.project-people, .project-groups) li:nth-child(12n + 10) a { background: #c9eadf; color: #1f5a47; }
:is(.project-people, .project-groups) li:nth-child(12n + 11) a { background: #f5cfd0; color: #733437; }
:is(.project-people, .project-groups) li:nth-child(12n) a { background: #f5edbd; color: #665719; }

.post-navigation,
.project-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 1.5rem;

  margin-top: 5rem;
}

.post-navigation a,
.project-navigation a {
  font-size: 0.9rem;
  font-weight: 400;

  color: var(--muted-text);

  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.14em;
}

.post-navigation-next,
.project-navigation-next {
  text-align: right;
}

.person-bio {
  margin-top: 2.5rem;
}

.person-links {
  margin-top: 1.5rem;
  margin-bottom: 5rem;
}

.person-link-list {
  margin: 0;

  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: var(--body-leading);
}

.person-link-brace {
  color: var(--faint-text);
}

.person-links a {
  padding: 0.08em 0.22em;

  box-shadow: var(--text-highlight-shadow);
}

.person-links a:nth-of-type(24n + 1) { background: #f3d8e8; color: #74294f; }
.person-links a:nth-of-type(24n + 2) { background: #ccebea; color: #245d61; }
.person-links a:nth-of-type(24n + 3) { background: #f7dfb5; color: #704817; }
.person-links a:nth-of-type(24n + 4) { background: #ddd2f2; color: #4d3b78; }
.person-links a:nth-of-type(24n + 5) { background: #d9edc9; color: #35552a; }
.person-links a:nth-of-type(24n + 6) { background: #edcedd; color: #71324c; }
.person-links a:nth-of-type(24n + 7) { background: #d4e9f2; color: #28556b; }
.person-links a:nth-of-type(24n + 8) { background: #f4d2ad; color: #704315; }
.person-links a:nth-of-type(24n + 9) { background: #d7d4f3; color: #414070; }
.person-links a:nth-of-type(24n + 10) { background: #c9eadf; color: #1f5a47; }
.person-links a:nth-of-type(24n + 11) { background: #f5cfd0; color: #733437; }
.person-links a:nth-of-type(24n + 12) { background: #f5edbd; color: #665719; }
.person-links a:nth-of-type(24n + 13) { background: #cddff5; color: #294f78; }
.person-links a:nth-of-type(24n + 14) { background: #ead3ee; color: #62366a; }
.person-links a:nth-of-type(24n + 15) { background: #e3ecc1; color: #4d5d20; }
.person-links a:nth-of-type(24n + 16) { background: #f1d1bd; color: #70402c; }
.person-links a:nth-of-type(24n + 17) { background: #d8eeee; color: #285b60; }
.person-links a:nth-of-type(24n + 18) { background: #e2d0dc; color: #613c55; }
.person-links a:nth-of-type(24n + 19) { background: #e8e0bd; color: #63551e; }
.person-links a:nth-of-type(24n + 20) { background: #cde8d8; color: #275b43; }
.person-links a:nth-of-type(24n + 21) { background: #ded7ef; color: #4a3e72; }
.person-links a:nth-of-type(24n + 22) { background: #f2d0c8; color: #733b31; }
.person-links a:nth-of-type(24n + 23) { background: #d5e7ef; color: #34576a; }
.person-links a:nth-of-type(24n) { background: #dcebb5; color: #4e5f1d; }

.blog-grid {
  --blog-card-min: 18rem;

  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, var(--blog-card-min)), 1fr)
    );

  gap: 3rem 1.5rem;

  width: min(
    64rem,
    calc(100vw - (2 * var(--page-gutter)))
  );

  margin-left: 50%;
  transform: translateX(-50%);
}

.blog-card a {
  text-decoration: none;
}

.blog-card-image {
  margin-bottom: 0.7rem;
}

.blog-card-image img {
  object-position: var(--cover-position, 50% 50%);

  transition:
    filter 180ms ease,
    opacity 180ms ease;
}

.blog-card h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
}

.blog-card-date {
  margin: 0.55rem 0 0;
  font-size: 0.8rem;
  color: var(--quiet-text);
}

.blog-card-placeholder {
  display: grid;
  place-items: center;

  background: var(--card-tint);
  transition: filter 180ms ease;
}

.blog-card-emoji {
  position: relative;
  z-index: 0;

  font-size: clamp(3rem, 8vw, 5rem);
  line-height: 1;

  filter:
    saturate(var(--card-image-saturation))
    contrast(var(--card-image-contrast))
    brightness(var(--card-image-brightness));
  opacity: var(--card-image-opacity);

  transition:
    filter 180ms ease,
    opacity 180ms ease;
}

.blog-card a:hover .blog-card-placeholder {
  filter: brightness(0.97);
}

.post-placeholder {
  --card-tint: #dfa0b6;

  display: grid;
  place-items: center;

  position: relative;
  isolation: isolate;

  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin-bottom: 2.5rem;

  background: var(--card-tint);
}

.post-placeholder-1 { --card-tint: #dfa0b6; }
.post-placeholder-2 { --card-tint: #9fb7d8; }
.post-placeholder-3 { --card-tint: #b6cfb2; }
.post-placeholder-4 { --card-tint: #e3b98a; }
.post-placeholder-5 { --card-tint: #c2b1d7; }
.post-placeholder-6 { --card-tint: #a8d2cf; }

.post-placeholder .blog-card-emoji {
  font-size: clamp(4rem, 14vw, 8rem);
}

.site-footer {
  margin-top: 4rem;
  padding-bottom: 2rem;

  font-size: 0.95rem;
}

.site-footer hr {
  margin-bottom: 1.5rem;
  border-color: var(--rule-color);
}

.site-footer p {
  margin: 0 0 1rem;
}

.theme-toggle {
  display: none;

  margin-left: auto;
  padding: 0.15rem 0.25rem;

  border: 0;
  background: transparent;
  color: inherit;

  font: inherit;
  font-size: 1.25rem;
  line-height: 1;

  cursor: pointer;
}

.js .theme-toggle {
  display: block;
}

.theme-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 0.25rem;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --page-paper-purple: #28577f;
  --page-paper-yellow: #52697a;
  --page-background: linear-gradient(
    180deg,
    #28577f 0%,
    #3b6380 48%,
    #52697a 100%
  );
  --page-text: #f4efe8;
  --page-heading-ink: #f4efe8;
  --muted-text: #d6d3dc;
  --quiet-text: #c5c3ce;
  --decorative-text: #b7b7c6;
  --faint-text: #aaaabd;
  --rule-color: rgb(230 226 238 / 35%);
  --orbit-grey: rgb(255 244 92 / 28%);
  --orbit-light: rgb(255 255 255 / 31%);
  --text-highlight-shadow:
    0 0.12em 0.32em rgb(3 7 20 / 40%);
}

:root[data-theme="dark"] .site-title span {
  background: #725f9f;
  color: #fff45c;
  box-shadow:
    0 0.12em 0.32em rgb(7 10 30 / 45%),
    0 0 0.65rem rgb(220 196 255 / 24%);
}

:root[data-theme="dark"] main img {
  background: #fff;
}

@media (max-width: 52rem) {
  .directory-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 34rem) {
  .orbit-field span {
    min-width: 38rem;
  }

  body > header {
    flex-direction: column;
    align-items: stretch;

    gap: 0.9rem;
  }

  .site-title img {
    width: 2rem;
    height: 2rem;
  }

  body > header nav {
    flex-wrap: nowrap;
    justify-content: flex-end;

    gap: 0.65rem;
  }

  body > main {
    padding-top: 2.25rem;
    padding-bottom: 3rem;

    font-size: 1.0625rem;
  }

  main h1 {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
  }

  article > header h1.article-title {
    font-size: clamp(1.625rem, 7.5vw, 2rem);
  }

  .project-grid {
    width: calc(
      100vw - (2 * var(--page-gutter))
    );

    row-gap: 3rem;
  }

  .person .project-grid,
  .person .blog-grid,
  .group .project-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .directory-list {
    grid-template-columns: 1fr;
  }

  .post-navigation,
  .project-navigation {
    gap: 1rem;

    margin-top: 4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .project-card-image::after,
  .blog-card-image::after,
  .post-placeholder::after,
  .project-card-image img,
  .blog-card-image img,
  .blog-card-emoji,
  .blog-card-placeholder {
    transition: none;
  }

  .project-card a:hover img {
    transform: none;
  }

  .orbit-field span {
    animation: none;
  }
}