.projects {
  column-gap: var(--canvas-gap);
  columns: 1;
  margin-inline: auto;
  padding-inline: var(--space-medium);
  position: relative;
  view-timeline: --projects block;
  width: 100%;
}

.projects--columns {
  align-items: start;
  display: flex;
  gap: var(--canvas-gap);
}

.projects__column {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--canvas-gap);
  min-width: 0;
}

.projects__card {
  break-inside: avoid;
  box-shadow:
    0 0.2em 2.0em -1.2em oklch(var(--oklch-black) / 0.1),
    0 0.4em 2.8em -1.4em oklch(var(--oklch-black) / 0.2),
    0 0.4em 1.2em -1.6em oklch(var(--oklch-black) / 0.3),
    0 0.8em 1.6em -2.2em oklch(var(--oklch-black) / 0.4),
    0 1.2em 2.0em -2.6em oklch(var(--oklch-black) / 0.5)
  ;
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
  margin-bottom: var(--canvas-gap);
  padding: 0 var(--space-medium) var(--space-medium);
  text-wrap: pretty;
  transition:
    scale 0.4s cubic-bezier(0.2, 0.9, 0.25, 1),
    box-shadow 0.4s cubic-bezier(0.2, 0.9, 0.25, 1)
  ;
}

.projects--columns .projects__card {
  margin-bottom: 0;
}

.projects__button {
  cursor: pointer;
  inset: 0;
  position: absolute;
  z-index: 2;
}

.projects__button:focus-visible {
  outline: none;
}

.projects__figure {
  border-bottom: var(--line);
  display: grid;
  margin-bottom: calc(var(--space-medium) - var(--space-small));
  margin-inline: calc(-1 * var(--space-medium));
}

.projects__figure img {
  display: block;
  height: auto;
  width: 100%;
}

.projects__header {
  font-size: var(--font-size-x-small);
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height);
  margin-bottom: -0.325em;
  margin-top: -0.4125em;
  text-wrap: balance;
}

.projects__text {
  font-size: var(--font-size-xx-small);
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height);
  margin-bottom: -0.325em;
  margin-top: -0.4125em;
}

@keyframes projects-drift {
  0% { transform: translateY(0); }
  12.5% { transform: translateY(calc(var(--projects-align, 0px) * 0.125 - var(--projects-amp, 0px) * 0.3827)); }
  25% { transform: translateY(calc(var(--projects-align, 0px) * 0.25 - var(--projects-amp, 0px) * 0.7071)); }
  37.5% { transform: translateY(calc(var(--projects-align, 0px) * 0.375 - var(--projects-amp, 0px) * 0.9239)); }
  50% { transform: translateY(calc(var(--projects-align, 0px) * 0.5 - var(--projects-amp, 0px))); }
  62.5% { transform: translateY(calc(var(--projects-align, 0px) * 0.625 - var(--projects-amp, 0px) * 0.9239)); }
  75% { transform: translateY(calc(var(--projects-align, 0px) * 0.75 - var(--projects-amp, 0px) * 0.7071)); }
  87.5% { transform: translateY(calc(var(--projects-align, 0px) * 0.875 - var(--projects-amp, 0px) * 0.3827)); }
  100% { transform: translateY(var(--projects-align, 0px)); }
}



@media(min-width: 35.5em) {

  .projects {
    columns: 2;
  }

}



@media(min-width: 64em) {

  .projects {
    max-width: 46em;
    padding-inline: var(--space-x-large);
  }

}



@supports(animation-timeline: view()) {

  @media(min-width: 64em) and (prefers-reduced-motion: no-preference) {

    .projects__column {
      animation: projects-drift linear both;
      animation-range: contain 0% contain 100%;
      animation-timeline: --projects;
      will-change: transform;
    }

  }

}



.index__button::after {
  content: "";
  cursor: pointer;
  inset: 0;
  position: absolute;
  z-index: 3;
}

.index__button:focus-visible::after {
  outline: calc(2 * var(--line-thickness)) solid var(--color-blue);
  outline-offset: calc(0.2 * var(--font-size));
}

.index__title .index__button {
  color: inherit;
  display: block;
  outline: none;
  text-decoration: none;
  transition: none;
}



[data-view][hidden] {
  display: none;
}

.canvas,
.projects {
  --canvas-gap: var(--space-neutral);
}

.projects__column:has(.projects__card:hover, :focus-visible) {
  position: relative;
  z-index: 1;
}

.projects__card:has(:focus-visible) {
  box-shadow:
    0 0.33em 0.6em -0.26em oklch(var(--oklch-black) / 0.14),
    0 0.9em 1.6em -0.52em oklch(var(--oklch-black) / 0.22)
  ;
  scale: 1.03;
  z-index: 2;
}

@media(hover: hover) and (pointer: fine) {

  .projects__card:hover {
    box-shadow:
      0 0.33em 0.6em -0.26em oklch(var(--oklch-black) / 0.14),
      0 0.9em 1.6em -0.52em oklch(var(--oklch-black) / 0.22)
    ;
    scale: 1.03;
    z-index: 2;
  }

}

.projects__card:has(:active) {
  box-shadow:
    0 0.23em 0.46em -0.23em oklch(var(--oklch-black) / 0.14),
    0 0.52em 1.05em -0.46em oklch(var(--oklch-black) / 0.18)
  ;
  scale: 1.015;
  transition:
    scale var(--transition),
    box-shadow var(--transition)
  ;
}



.index {
  margin-inline: auto;
  max-width: 36em;
  padding-inline: var(--space-medium);
  position: relative;
  width: 100%;
  z-index: 2;
}

html[data-projects-view] .index {
  visibility: hidden;
}

.index__row {
  border-top: var(--line);
  padding-block: 0.95em;
  position: relative;
  transition: border-color var(--transition);
}

.index__row:first-of-type {
  border-top: 0;
}

.index__row::before {
  --radius: 0.35em;
  border-radius: var(--radius);
  content: "";
  inset: calc(-1 * var(--line-thickness)) calc(-1 * var(--radius));
  position: absolute;
  transition: background-color var(--transition);
}

.index__title {
  font-size: var(--font-size-xx-large);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 auto;
  text-align: center;
  text-wrap: balance;
  transition: color var(--transition);
  width: fit-content;
}

.index__name {
  display: block;
  position: relative;
}

.index__text {
  display: none;
}

.index__sticker {
  aspect-ratio: var(--ratio, 1.3);
  display: block;
  pointer-events: none;
  position: absolute;
  rotate: calc(var(--tilt, 0deg) + var(--sway-r, 0deg));
  top: 50%;
  transition: scale var(--transition-slow);
  transition-timing-function: cubic-bezier(0.34, 1.2, 0.64, 1);
  translate:
    var(--sway-x, 0em)
    calc(-50% + var(--sway-y, 0em))
  ;
  width: var(--size, 3.2em);
  z-index: 1;
}

.index__sticker img,
.index__sticker::before,
.index__sticker::after {
  background: var(--color-white);
  border: 0.1em solid var(--color-white);
  box-shadow:
    0 0.03em 0.1em oklch(var(--oklch-black) / 0.12),
    0 0.2em 0.5em -0.2em oklch(var(--oklch-black) / 0.16)
  ;
}

.index__sticker img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: top;
  position: relative;
  width: 100%;
}

.index__sticker::before,
.index__sticker::after {
  box-shadow:
    0 0.02em 0.08em oklch(var(--oklch-black) / 0.08),
    0 0.15em 0.4em -0.2em oklch(var(--oklch-black) / 0.1)
  ;
  content: "";
  inset: 0;
  position: absolute;
  rotate: var(--card-r, 0deg);
  scale: var(--card-s, 1);
  transform-origin: var(--card-o, 50%) 100%;
  transition:
    rotate var(--transition-slow),
    translate var(--transition-slow)
  ;
  transition-timing-function: cubic-bezier(0.34, 1.2, 0.64, 1);
  translate: var(--card-x, 0em) var(--card-y, 0em);
  z-index: -1;
}

.index__sticker::before {
  --card-o: var(--b1-o);
  --card-r: var(--b1-r);
  --card-s: var(--b1-s);
  --card-x: var(--b1-x);
  --card-y: var(--b1-y);
}

.index__sticker::after {
  --card-o: var(--b2-o);
  --card-r: var(--b2-r);
  --card-s: var(--b2-s);
  --card-x: var(--b2-x);
  --card-y: var(--b2-y);
}

.index__sticker--left {
  right: calc(100% + var(--gap, 1.05em));
  transform-origin: 100% 50%;
}

.index__sticker--right {
  left: calc(100% + var(--gap, 1.05em));
  transform-origin: 0% 50%;
}

@media(hover: hover) and (pointer: fine) {

  .index:has(.index__row:hover) .index__row:not(:hover) .index__title {
    color: color-mix(in oklch, var(--color-ink) 25%, transparent);
  }

  .index__row:hover,
  .index__row:hover + .index__row {
    border-top-color: transparent;
  }

  .index__row:hover::before {
    background-color: color-mix(in oklch, var(--color-ink) 4%, transparent);
  }

  .index__row:hover .index__sticker {
    scale: 1.25;
    z-index: 2;
  }

  .index__row:hover .index__sticker::before,
  .index__row:hover .index__sticker::after {
    rotate: calc(var(--card-r, 0deg) * var(--fan, 2.2));
    translate: calc(var(--card-x, 0em) * var(--fan, 2.2)) calc(var(--card-y, 0em) * var(--fan, 2.2));
  }

}

.index:has(.index__button:focus-visible) .index__row:not(:has(:focus-visible)) .index__title {
  color: color-mix(in oklch, var(--color-ink) 25%, transparent);
}

.index__row:has(:focus-visible),
.index__row:has(:focus-visible) + .index__row {
  border-top-color: transparent;
}

.index__row:has(:focus-visible)::before {
  background-color: color-mix(in oklch, var(--color-ink) 4%, transparent);
}

.index__row:has(:focus-visible) .index__sticker {
  scale: 1.25;
  z-index: 2;
}

.index__row:has(:focus-visible) .index__sticker::before,
.index__row:has(:focus-visible) .index__sticker::after {
  rotate: calc(var(--card-r, 0deg) * var(--fan, 2.2));
  translate: calc(var(--card-x, 0em) * var(--fan, 2.2)) calc(var(--card-y, 0em) * var(--fan, 2.2));
}

.index__row:has(.index__button:active) .index__sticker {
  scale: 1.15;
}

.index__row:has(.index__button:active) .index__sticker::before,
.index__row:has(.index__button:active) .index__sticker::after {
  rotate: var(--card-r, 0deg);
  translate: var(--card-x, 0em) var(--card-y, 0em);
}

@media(prefers-reduced-motion: reduce) {

  .index__sticker,
  .index__sticker::before,
  .index__sticker::after,
  .view-toggle--ready::before {
    transition: none;
  }

}

@media(min-width: 40.0625em) {

  .index {
    padding-inline: var(--space-xxxx-large);
  }

}

@media(max-width: 63.99em) {

  .index__title {
    font-size: var(--font-size-x-large);
    letter-spacing: var(--letter-spacing-tight);
  }

}

@media(max-width: 40em) {

  .index {
    padding-inline: var(--space-x-large);
  }

  .index__row {
    display: flex;
    justify-content: center;
    padding-block: 0.75em;
  }

  .index__title {
    flex: none;
    max-width: calc(100vw - 2 * var(--space-medium) - 2 * 1.6em);
    width: max-content;
  }

  .index__sticker {
    --gap: 0.6em !important;
    width: min(var(--size, 3.2em), 2.6em);
  }

}



html:has(.canvas),
body:has(.canvas) {
  overflow-anchor: none;
  overflow-x: clip;
}

body:has(.canvas) .site {
  overflow: visible;
}

/* The grid is the last thing on the page while it's showing, so there's no footer */
body:has(.canvas:not([hidden])) .site {
  padding-bottom: 0;
}

body:has(.canvas:not([hidden])) .footer {
  display: none;
}

.canvas {
  --canvas-columns: 2.5;
  --canvas-cell: calc(100vw / var(--canvas-columns) - var(--canvas-gap));
  --canvas-bleed: 0em;
  --canvas-stagger: 0.14;

  margin-inline: calc(-1 * var(--canvas-bleed));
  position: relative;
}

.canvas__stage {
  height: 100vh;
  height: 100svh;
  position: sticky;
  top: 0;
}

@media(min-width: 64em) {

  .canvas {
    --canvas-bleed: var(--space-medium);
  }

}

.canvas__viewport {
  cursor: grab;
  inset: calc(var(--canvas-gap) / -2) 0 0;
  overflow: hidden;
  position: absolute;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.canvas--dragging .canvas__viewport {
  cursor: grabbing;
}

.canvas__world {
  left: 0;
  position: absolute;
  top: 0;
}

.canvas__block {
  display: grid;
  gap: var(--canvas-gap);
  grid-template-columns: repeat(9, var(--canvas-cell));
  padding: calc(var(--canvas-gap) / 2);
}

.canvas__column {
  display: flex;
  flex-direction: column;
  gap: var(--canvas-gap);
  left: 0;
  padding: calc(var(--canvas-gap) / 2);
  position: absolute;
  top: 0;
  width: calc(var(--canvas-cell) + var(--canvas-gap));
}

.canvas__column:has(.canvas__tile:hover, :focus-visible) {
  z-index: 1;
}

.canvas__tile {
  background: var(--color-white);
  box-shadow:
    0 0.13em 0.65em -0.2em oklch(var(--oklch-black) / 0.25)
  ;
  overflow: hidden;
  position: relative;
  transition:
    scale 0.4s cubic-bezier(0.2, 0.9, 0.25, 1),
    box-shadow 0.4s cubic-bezier(0.2, 0.9, 0.25, 1)
  ;
}

.canvas__tile img {
  display: block;
  height: auto;
  pointer-events: none;
  width: 100%;
  -webkit-user-drag: none;
}

.canvas__button {
  cursor: inherit;
  inset: 0;
  outline: none;
  position: absolute;
  z-index: 3;
}

.canvas__label {
  background: var(--color-blue);
  box-shadow:
    0 0.12em 0.24em oklch(var(--oklch-black) / 0.12),
    0 0.47em 1.4em -0.24em oklch(var(--oklch-black) / 0.3)
  ;
  color: var(--color-white);
  font-size: var(--font-size-x-small);
  font-weight: 600;
  left: 50%;
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height-tight);
  margin: 0;
  max-width: 85%;
  opacity: 0;
  padding: calc(0.8em - 0.29em) 0.8em;
  position: absolute;
  text-align: center;
  text-wrap: balance;
  top: 50%;
  transition:
    opacity var(--transition),
    translate var(--transition-slow)
  ;
  translate: -50% calc(-50% + 0.4em);
  width: max-content;
}

.canvas:not(.canvas--dragging) .canvas__tile:hover,
.canvas__tile:has(:focus-visible) {
  box-shadow:
    0 0.33em 0.6em -0.26em oklch(var(--oklch-black) / 0.25),
    0 0.9em 1.6em -0.52em oklch(var(--oklch-black) / 0.4)
  ;
  scale: 1.04;
  z-index: 2;
}

.canvas:not(.canvas--dragging) .canvas__tile:has(:active) {
  box-shadow:
    0 0.23em 0.46em -0.23em oklch(var(--oklch-black) / 0.25),
    0 0.52em 1.05em -0.46em oklch(var(--oklch-black) / 0.32)
  ;
  scale: 1.02;
  transition:
    scale var(--transition),
    box-shadow var(--transition)
  ;
}

.canvas:not(.canvas--dragging) .canvas__tile:hover .canvas__label,
.canvas__tile:has(:focus-visible) .canvas__label {
  opacity: 1;
  translate: -50% -50%;
}

@media(max-width: 64em) {

  .canvas {
    --canvas-columns: 1.75;
  }

}

@media(max-width: 40em) {

  .canvas {
    --canvas-columns: 1.25;
  }

  .canvas,
  .projects {
    --canvas-gap: var(--space-medium);
  }

}



.showcase__stage,
.showcase__captions {
  --showcase-gutter: var(--space-large);
}

.showcase__stage {
  position: relative;
}

.showcase__image {
  padding-inline: var(--showcase-gutter);
}

.showcase__image picture {
  display: block;
}

.showcase__image img {
  box-shadow: var(--box-shadow-card);
  display: block;
  height: auto;
  width: 100%;
}

.showcase__preface {
  font-family: var(--font-family-monaspace);
  font-size: var(--font-size-xxx-small);
  letter-spacing: normal;
  line-height: var(--line-height);
  margin-inline: auto;
  max-width: 50em;
  text-wrap: balance;
}

.showcase__captions {
  color: var(--color-ink);
  display: flex;
  gap: var(--space-neutral);
  justify-content: space-between;
  margin-top: var(--space-medium);
  padding-inline: var(--showcase-gutter);
}

.showcase__captions p {
  font-size: var(--font-size-xx-small);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.39em;
  margin-top: -0.39em;
  text-wrap: pretty;
}

.showcase__caption {
  max-width: 48em;
}

.tool {
  --tool-size: 1.35em;
  background: oklch(var(--oklch-ink) / 0.08);
  border-radius: calc(var(--tool-size) / 2) 0.3em 0.3em calc(var(--tool-size) / 2);
  display: inline-block;
  font-weight: 500;
  padding-block: calc((var(--tool-size) - 1cap) / 2);
  padding-inline: calc(var(--tool-size) + 0.25em) 0.3em;
  position: relative;
  text-box: trim-both cap alphabetic;
  white-space: nowrap;
}

.tool::before {
  background: var(--tool-color) var(--tool-icon) center / 55% no-repeat;
  border-radius: 50%;
  content: "";
  inset: 0 auto 0 0;
  position: absolute;
  width: var(--tool-size);
}

.tool-group {
  white-space: nowrap;
}

@supports not (text-box: trim-both cap alphabetic) {

  .tool {
    line-height: var(--tool-size);
    padding-block: 0;
  }

}

.tool--card-table {
  --tool-color: hsl(34.6 98.4% 48.4%);
  --tool-icon: url(/assets/images/tools/card-table.svg);
}

.tool--chat {
  --tool-color: hsl(184.7 87.4% 40.4%);
  --tool-icon: url(/assets/images/tools/chat.svg);
}

.tool--check-ins {
  --tool-color: hsl(238.4 100% 77.6%);
  --tool-icon: url(/assets/images/tools/check-ins.svg);
}

.tool--docs-files {
  --tool-color: hsl(46 87.9% 48.6%);
  --tool-icon: url(/assets/images/tools/docs-files.svg);
}

.tool--email-forwards {
  --tool-color: hsl(261.7 100% 75.1%);
  --tool-icon: url(/assets/images/tools/email-forwards.svg);
}

.tool--message-board {
  --tool-color: hsl(209.2 100% 62.9%);
  --tool-icon: url(/assets/images/tools/message-board.svg);
}

.tool--schedule {
  --tool-color: hsl(323.6 81.4% 66.3%);
  --tool-icon: url(/assets/images/tools/schedule.svg);
}

.tool--todos {
  --tool-color: hsl(135.6 39.7% 52.5%);
  --tool-icon: url(/assets/images/tools/todos.svg);
}

.showcase__captions .showcase__credit {
  --credit-icon: 1.35em;
  align-items: center;
  display: flex;
  flex: none;
  font-size: var(--font-size-xxx-small);
  gap: 0.3em;
  justify-content: flex-end;
  letter-spacing: var(--letter-spacing-loose);
  margin-block: calc((1cap - var(--credit-icon)) / 2);
}

.showcase__credit::before {
  background: currentColor;
  content: "";
  flex: none;
  height: var(--credit-icon);
  mask: url(/assets/images/general/photo.svg) center / contain no-repeat;
  width: var(--credit-icon);
}

.showcase__credit span {
  text-box: trim-both cap alphabetic;
}

@supports not (text-box: trim-both cap alphabetic) {

  .showcase__credit span {
    line-height: 1cap;
  }

}

.showcase__tour {
  padding-inline: var(--space-medium);
}

.showcase__tour .hero__tour {
  justify-content: center;
  margin-bottom: var(--space-neutral);
}

.showcase__tour .hero__tour-button {
  flex: none;
}

.showcase__demo {
  font-size: var(--font-size-xxx-small);
  text-align: center;
}

.showcase__demo p {
  font-size: var(--font-size-xx-large);
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height);
  margin-bottom: -0.337em;
  margin-top: -0.48em;
  text-wrap: pretty;
}

.view-toggle {
  --view-toggle-line: oklch(var(--oklch-ink) / 0.13);
  --view-toggle-pill: var(--color-white);

  background: oklch(var(--oklch-ink) / 0.05);
  border: var(--line-thickness) solid var(--view-toggle-line);
  border-radius: 0.35em;
  display: flex;
  font-size: var(--font-size-small);
  overflow: clip;
  position: absolute;
  right: calc(0.75 * var(--font-size));
  top: calc(0.92 * var(--font-size));
  z-index: 5;
}

.view-toggle::before {
  background: var(--view-toggle-pill);
  border: var(--line-thickness) solid var(--view-toggle-line);
  border-radius: 0.35em;
  box-shadow: 0 1px 2px oklch(var(--oklch-black) / 0.06);
  content: "";
  height: 1.85em;
  left: calc(-1 * var(--line-thickness));
  position: absolute;
  top: calc(-1 * var(--line-thickness));
  translate: calc(var(--view-toggle-index, 0) * (1.95em - 2 * var(--line-thickness))) 0;
  width: 1.95em;
}

.view-toggle--ready::before {
  transition: translate var(--transition);
}

.view-toggle:has(> :nth-child(2)[aria-pressed="true"]) {
  --view-toggle-index: 1;
}

.view-toggle:has(> :nth-child(3)[aria-pressed="true"]) {
  --view-toggle-index: 2;
}

.view-toggle__button {
  border: var(--line-thickness) solid transparent;
  border-radius: 0.35em;
  color: oklch(var(--oklch-ink) / 0.5);
  cursor: pointer;
  display: grid;
  height: 1.85em;
  margin: calc(-1 * var(--line-thickness));
  place-content: center;
  position: relative;
  width: 1.95em;
}

.view-toggle__button svg {
  fill: currentColor;
  height: 0.9em;
  pointer-events: none;
  width: auto;
}

.view-toggle__button[aria-pressed="true"] {
  color: var(--color-ink);
}

.view-toggle__button:focus-visible {
  outline: calc(2 * var(--line-thickness)) solid var(--color-blue);
  outline-offset: -0.2em;
}

@media(hover: hover) {

  .view-toggle__button {
    transition: color var(--transition);
  }

  .view-toggle__button:hover {
    color: var(--color-ink);
  }

}

@media(prefers-color-scheme: dark) {

  .view-toggle {
    --view-toggle-pill: oklch(var(--oklch-ink) / 0.18);
  }

}

body.dark .view-toggle {
  --view-toggle-pill: oklch(var(--oklch-ink) / 0.18);
}

.showcase__steps {
  align-items: flex-start;
  display: flex;
  inset: 0;
  justify-content: space-between;
  padding: 0 calc((var(--showcase-gutter) - 1.4em) / 2);
  pointer-events: none;
  position: absolute;
}

.showcase__step {
  border-radius: 100%;
  color: var(--color-ink-5);
  cursor: pointer;
  display: grid;
  font-size: var(--font-size-small);
  height: 2.24em;
  place-content: center;
  pointer-events: auto;
  position: sticky;
  text-decoration: none;
  top: calc(50vh - 1.12em);
  width: 2.24em;
}

.showcase__step:focus-visible {
  outline: calc(2 * var(--line-thickness)) solid var(--color-blue);
  outline-offset: 0.16em;
}

.showcase__icon {
  background: currentColor;
  height: 0.85em;
  mask: url('/assets/images/general/icon-next.svg') center / contain no-repeat;
  width: 0.85em;
}

.showcase__nav--previous .showcase__icon {
  mask-image: url('/assets/images/general/icon-previous.svg');
}

.showcase__label {
  display: none;
}

@media(hover: hover) and (min-width: 35.5625em) {

  .showcase__step {
    transition:
      background var(--transition),
      color var(--transition),
      transform var(--transition)
    ;
  }

  .showcase__step:focus,
  .showcase__step:hover {
    background: oklch(var(--oklch-ink) / 0.08);
    color: var(--color-ink);
  }

  .showcase__step:active {
    transform: scale(0.9);
  }

}

@media(max-width: 63.99em) {

  .showcase__stage,
  .showcase__captions {
    margin-inline: auto;
    max-width: calc(26em + 2 * var(--showcase-gutter));
    width: 100%;
  }

  .showcase__captions {
    flex-direction: column;
    gap: var(--space-medium);
  }

  .showcase__captions .showcase__credit {
    justify-content: flex-start;
  }

  .showcase__intro.space-top--x-large {
    margin-top: var(--space-neutral) !important;
  }

  .showcase__preface + header {
    margin-top: calc(var(--space-neutral) - var(--intro-gap));
  }

  .showcase__preface {
    margin-bottom: -0.47em;
    margin-top: -0.3em;
  }

}

@media(min-width: 64em) {

  .showcase__preface {
    inset-inline: var(--space-medium);
    position: absolute;
    top: calc(-1.5 * var(--font-size));
    translate: 0 calc(-50% + (0.47em - 0.3em) / 2);
  }

  .showcase__stage,
  .showcase__captions {
    --showcase-gutter: var(--space-x-large);
  }

  .showcase__steps {
    padding-inline: calc(var(--space-x-large) / 2);
  }

  .showcase__step {
    margin-inline: -1.12em;
  }

  .showcase__captions .showcase__credit {
    align-self: flex-start;
    font-size: var(--font-size-xxxx-small);
  }

}

@media(max-width: 35.5em) {

  .showcase__stage,
  .showcase__captions {
    --showcase-gutter: var(--space-medium);
  }

  .showcase__stage {
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
  }

  .showcase__steps {
    display: grid;
    gap: var(--space-small);
    grid-template-columns: 1fr 1fr;
    order: -1;
    padding-inline: var(--showcase-gutter);
    position: static;
  }

  .showcase__step {
    align-items: center;
    border-radius: 0;
    color: var(--color-ink);
    display: flex;
    font-feature-settings: 'c2sc', 'smcp', 'ss05';
    font-size: var(--font-size-xx-small);
    font-weight: 500;
    gap: 0.325em;
    height: auto;
    letter-spacing: var(--letter-spacing);
    line-height: 1em;
    padding: 0;
    place-content: center;
    position: static;
    transition: none;
    width: auto;
  }

  .showcase__icon {
    height: 1.0625em;
    margin-block: calc((0.6em - 1.0625em) / 2);
    width: 1.0625em;
  }

  .showcase__label {
    display: block;
    margin-bottom: -0.1875em;
    margin-top: -0.2125em;
  }

  .showcase__nav--previous {
    justify-content: flex-start;
  }

  .showcase__nav--next {
    justify-content: flex-end;
  }

  .showcase__nav--next .showcase__label {
    order: -1;
  }

  .showcase__captions p {
    text-align: center;
  }

  .showcase__captions .showcase__credit {
    justify-content: center;
  }

  .showcase__captions .showcase__caption {
    font-size: var(--font-size-x-small);
    max-width: none;
  }

}