:root {
  color-scheme: light dark;
  --color-surface: var(--color-surface-light);
  --color-surface-secondary: var(--color-surface-secondary-light);
  --color-muted: var(--color-muted-light);
  --color-accent: var(--color-accent-light);
  --color-positive: #3ba860;
  --color-lightbox-overlay: var(--color-lightbox-overlay-light);
  --color-shader-background: #000000;
  --color-surface-light: #fafafa;
  --color-surface-secondary-light: #e6e6e6;
  --color-accent-light: #1a1a18;
  --color-muted-light: #8c8c8c;
  --color-lightbox-overlay-light: rgb(255 255 255 / 60%);
  --color-surface-dark: #050505;
  --color-surface-secondary-dark: #24231f;
  --color-accent-dark: #e6e6e6;
  --color-muted-dark: #737373;
  --color-lightbox-overlay-dark: rgb(0 0 0 / 60%);
  --title: "Wremena";
  --body: system-ui;
  --mono: "Geist Mono";
  --text-heading: 36px;
  --text-title: 24px;
  --text-body: 16px;
  --weight: 400;
  --letter-spacing-headline: -0.04em;
  --letter-spacing-title: -0.02em;
  --leading-body: 24px;
  --leading-title: 32px;
  --leading-heading: 40px;
  --breakpoint-small: 480px;
  --container-archive-preview: 360px;
  --container-project-content: 600px;
  --container-max: 640px;
  --ratio-archive-preview: 3 / 2;
  --spacing-0: 0px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-80: 80px;
  --radius-none: 0px;
  --radius-small: 6px;
  --radius-full: 9999px;
  --duration-role-swap: 37.5ms;
  --text-swap-dur: 75ms;
  --text-swap-translate-y: 4px;
  --text-swap-blur: 2px;
  --text-swap-ease: ease-in-out;
  --duration-preview: 230ms;
  --easing-preview: cubic-bezier(0.5, 0, 0.5, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-surface: var(--color-surface-dark);
    --color-surface-secondary: var(--color-surface-secondary-dark);
    --color-accent: var(--color-accent-dark);
    --color-muted: var(--color-muted-dark);
    --color-lightbox-overlay: var(--color-lightbox-overlay-dark);
  }
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--color-surface);
  color: var(--color-accent);
  font-family: var(--body), system-ui, sans-serif;
  font-size: var(--text-body);
  font-weight: var(--weight);
  line-height: var(--leading-body);
  font-style: normal;
  text-wrap: pretty;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--color-surface);
}

a {
  color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--color-muted);
  text-underline-offset: 0.16em;
}

a:focus-visible,
button:focus-visible {
  outline: 0.125rem solid var(--color-accent);
  outline-offset: var(--spacing-4);
}

.page-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(calc(var(--container-max) + (var(--spacing-20) * 2)), 100%);
  margin: 0 auto;
  padding: 0 var(--spacing-20);
}

.page-shell > * {
  grid-column: 1;
}

.site-header {
  position: fixed;
  top: 0;
  bottom: var(--spacing-20);
  left: max(var(--spacing-20), calc(((100vw - var(--container-max)) / 2) + var(--spacing-20)));
  z-index: 20;
  isolation: isolate;
  display: grid;
  flex: none;
  align-content: start;
  gap: var(--spacing-8);
  width: 12rem;
  padding: var(--spacing-40) var(--spacing-20) var(--spacing-20);
  background: var(--color-surface);
}

.site-header::before {
  content: "";
  display: none;
}

.site-brand,
.site-menu-toggle {
  flex: none;
  color: var(--color-muted);
  transition: color 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-brand {
  width: auto;
  text-decoration: none;
}

.site-menu-toggle {
  display: none;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  line-height: inherit;
  padding: 0;
}

.site-brand:hover,
.site-menu-toggle:hover {
  color: var(--color-accent);
}

@media (min-width: 48.0625rem) {
  .site-brand.site-brand--active {
    color: var(--color-accent);
  }
}

.intro-block {
  display: grid;
  row-gap: var(--spacing-20);
  width: 100%;
}

.intro-text {
  width: 100%;
  max-width: var(--container-max);
  margin: 0;
  color: var(--color-accent);
}

.intro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  align-items: center;
}

.contact-action,
.contact-action-group {
  height: calc(var(--leading-body) + (var(--spacing-8) * 2));
  border: 1px solid var(--color-surface-secondary);
  border-radius: var(--radius-full);
  background: transparent;
}

.contact-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--spacing-8) var(--spacing-16);
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
}

.contact-action:hover {
  text-decoration: none;
}

.intro-actions > .contact-action:hover,
.intro-actions > .contact-action:focus-visible,
.styles-actions-demo > .contact-action:hover,
.styles-actions-demo > .contact-action:focus-visible {
  border-color: transparent;
  background: var(--color-surface-secondary);
}

.contact-action-group {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  transition:
    border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-action-group .contact-action {
  border: 0;
  background: transparent;
}

.contact-action--email {
  padding-right: var(--spacing-16);
  transition: padding-right 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-action-group:hover .contact-action--email,
.contact-action-group:focus-within .contact-action--email {
  padding-right: calc(var(--spacing-8) + (var(--spacing-4) / 2));
}

.contact-action-group:hover,
.contact-action-group:focus-within {
  border-color: transparent;
  background: var(--color-surface-secondary);
}

.contact-action__copy {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 0;
  min-width: 0;
  height: calc(var(--leading-body) + (var(--spacing-4) * 2));
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-accent);
  font: inherit;
  line-height: var(--leading-body);
  white-space: nowrap;
  opacity: 0;
  cursor: pointer;
  transition:
    width 220ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-action-group:hover .contact-action__copy,
.contact-action-group:focus-within .contact-action__copy {
  width: auto;
  min-width: calc((var(--text-body) * 2.5) + var(--spacing-16) + var(--spacing-4));
  margin-right: var(--spacing-4);
  padding: var(--spacing-4) calc(var(--spacing-8) + (var(--spacing-4) / 2));
  opacity: 1;
}

.contact-action-group:has(.contact-action__copy:hover),
.contact-action-group:has(.contact-action__copy:focus-visible) {
  border-color: var(--color-surface-secondary);
  background: transparent;
}

.contact-action__copy:hover,
.contact-action__copy:focus-visible,
.contact-action__copy.is-copied {
  background: var(--color-surface-secondary);
}

.bottom-tabs {
  position: sticky;
  top: 0;
  z-index: 10;
  display: none;
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-20);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: var(--spacing-20) 0;
  width: 100%;
  background: var(--color-surface);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.bottom-tabs::-webkit-scrollbar {
  display: none;
}

.works-view-navigation {
  position: sticky;
  top: 0;
  margin-top: calc(var(--spacing-40) * -1);
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  width: 12rem;
  padding: var(--spacing-40) var(--spacing-20) var(--spacing-20);
}

.works-view-navigation__list {
  display: grid;
  gap: var(--spacing-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.works-view-navigation .pill-tab {
  justify-content: flex-start;
}

.works-view-navigation .pill-tab.is-active {
  font-weight: var(--weight);
}

.works-tabs-block {
  width: 100%;
  display: grid;
  row-gap: 0;
}

.works-layout {
  width: 100%;
  margin-top: 0;
}

.works-index {
  display: grid;
  row-gap: 0;
  width: 100%;
}

.works-index__title {
  margin: 0 0 var(--spacing-20);
  color: var(--color-accent);
}

.works-card-grid {
  display: grid;
  row-gap: var(--spacing-40);
  width: 100%;
}

.works-card-grid--index {
  row-gap: var(--spacing-8);
}

.home-recent .works-card-grid--index {
  row-gap: var(--spacing-12);
}

.works-card-grid[hidden] {
  display: none;
}

.work-card {
  display: grid;
  row-gap: var(--spacing-8);
  min-width: 0;
  color: var(--color-accent);
  text-decoration: none;
}

.work-card__poster {
  width: 100%;
  overflow: hidden;
  background: var(--color-surface-secondary);
  border-radius: var(--radius-none);
}

.work-card__text {
  display: block;
  min-width: 0;
}

.work-card__text strong {
  color: var(--color-accent);
  font-weight: var(--weight);
}

.work-card__text {
  color: var(--color-muted);
}

.home-works {
  display: grid;
  row-gap: var(--spacing-20);
  width: 100%;
  min-width: 0;
}

.home-works__title {
  margin: 0;
}

.home-works__title a {
  color: var(--color-accent);
  text-decoration: none;
}

.home-works__carousel {
  background: var(--color-surface-secondary);
}

.home-recent__divider {
  width: 100%;
  height: 1px;
  background: var(--color-surface-secondary);
}

.home-recent {
  row-gap: var(--spacing-16);
}

.work-index-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--spacing-16);
  align-items: baseline;
  min-width: 0;
  color: var(--color-accent);
  text-decoration: none;
}

.work-index-card__title {
  color: var(--color-accent);
  font-weight: var(--weight);
}

.work-index-card--hidden {
  color: var(--color-muted);
}

.work-index-card--hidden .work-index-card__title {
  color: var(--color-muted);
  font-weight: var(--weight);
}

.work-index-card__year {
  color: var(--color-muted);
  text-align: right;
  white-space: nowrap;
}

.work-index-card__type {
  color: var(--color-muted);
  text-align: right;
  white-space: nowrap;
}

.works {
  display: grid;
  row-gap: var(--spacing-80);
  width: 100%;
}

.works[hidden] {
  display: none;
}

.work-project {
  display: grid;
  row-gap: var(--spacing-20);
  width: 100%;
  min-width: 0;
}

.work-project--detail {
  row-gap: var(--spacing-20);
}

.work-project__header {
  display: grid;
  row-gap: var(--spacing-20);
  min-width: 0;
}

.work-project__title {
  margin: 0;
}

.work-project__title {
  color: var(--color-accent);
}

.work-project__summary {
  display: grid;
  row-gap: var(--spacing-16);
  min-width: 0;
}

.related-works {
  display: grid;
  row-gap: var(--spacing-20);
  width: 100%;
  margin-top: var(--spacing-20);
}

.related-works__title {
  margin: 0;
  scroll-margin-top: var(--spacing-40);
  color: var(--color-accent);
}

.related-works__cards {
  display: grid;
  row-gap: var(--spacing-40);
  width: 100%;
}

.work-project__media-list {
  display: grid;
  row-gap: var(--spacing-20);
  width: 100%;
  min-width: 0;
}

.work-project__media-item {
  width: 100%;
  overflow: hidden;
  background: transparent;
  border-radius: var(--radius-none);
}

.work-project__media-carousel {
  width: 100%;
  overflow: hidden;
  background: transparent;
  border-radius: var(--radius-none);
}

.work-project__media-item[data-lightbox-trigger] {
  cursor: zoom-in;
}

.work-project__media-carousel[data-lightbox-trigger] {
  cursor: zoom-in;
}

.work-project__media-carousel-mount,
.work-project__media-carousel-asset {
  width: 100%;
  height: 100%;
}

.work-project__body-text,
.work-project__body-heading,
.work-project__body-list {
  margin: 0;
}

.work-project__body-heading {
  margin-top: var(--spacing-20);
  scroll-margin-top: var(--spacing-20);
}

h3.work-project__body-heading {
  scroll-margin-top: var(--spacing-40);
}

.work-project__body-heading + .work-project__body-text,
.work-project__body-heading + .work-project__body-list,
.work-project__body-heading + .work-project__media-item,
.work-project__body-heading + .work-project__media-carousel {
  margin-top: calc(var(--spacing-16) - var(--spacing-20));
}

.works-on-this-page {
  position: sticky;
  top: 0;
  margin-top: calc(var(--spacing-40) * -1);
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  width: 12rem;
  padding: var(--spacing-40) var(--spacing-20) var(--spacing-20);
}

.works-on-this-page__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.works-on-this-page__list > li + li {
  margin-top: var(--spacing-8);
  transition: margin-top 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.works-on-this-page__back-to-top-item:not(.is-visible) + li {
  margin-top: 0;
}

.works-on-this-page__back-to-top-item {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    height 200ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.works-on-this-page__back-to-top-item.is-visible {
  height: var(--leading-body);
  opacity: 1;
}

.works-on-this-page a,
.works-on-this-page__back-to-top {
  color: var(--color-muted);
  text-decoration: none;
  transition: color 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

.works-on-this-page__back-to-top {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.works-on-this-page a:hover,
.works-on-this-page__back-to-top:hover,
.works-on-this-page a.is-active,
.works-on-this-page a[aria-current="location"] {
  color: var(--color-accent);
}

.works-on-this-page a.is-active,
.works-on-this-page a[aria-current="location"] {
  font-weight: var(--weight);
}

.project-meta,
.project-meta__row dt,
.project-meta__row dd {
  margin: 0;
}

.project-meta__row dt {
  color: var(--color-muted);
}

.project-meta {
  display: grid;
  row-gap: var(--spacing-8);
}

.project-meta__row {
  display: grid;
  grid-template-columns: minmax(0, 5rem) minmax(0, 1fr);
  column-gap: var(--spacing-20);
  align-items: baseline;
}

.project-meta__row dd {
  color: var(--color-accent);
}

.media-fit {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.works-lightbox {
  --lightbox-space: var(--spacing-60);
  --lightbox-media-ratio: 1;
  --lightbox-natural-width: 100vw;
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--lightbox-space);
  background: var(--color-lightbox-overlay);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  cursor: zoom-out;
  pointer-events: none;
  transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.works-lightbox[hidden] {
  display: none;
}

.works-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.works-lightbox.is-close-zone {
  cursor: zoom-out;
}

.works-lightbox.is-left-zone {
  cursor: w-resize;
}

.works-lightbox.is-right-zone {
  cursor: e-resize;
}

.works-lightbox__stage {
  display: grid;
  place-items: center;
  width: min(1800px, var(--lightbox-natural-width), calc(100vw - (var(--lightbox-space) * 2)), calc((100svh - (var(--lightbox-space) * 2)) * var(--lightbox-media-ratio)));
  max-width: min(1800px, var(--lightbox-natural-width), calc(100vw - (var(--lightbox-space) * 2)), calc((100svh - (var(--lightbox-space) * 2)) * var(--lightbox-media-ratio)));
  max-height: calc(100svh - (var(--lightbox-space) * 2));
  cursor: e-resize;
}

.works-lightbox.is-left-zone .works-lightbox__stage {
  cursor: w-resize;
}

.works-lightbox.is-right-zone .works-lightbox__stage {
  cursor: e-resize;
}

.works-lightbox__media {
  width: 100%;
  max-height: calc(100svh - (var(--lightbox-space) * 2));
  overflow: hidden;
  background: transparent;
  border-radius: var(--radius-none);
  transform-origin: center;
}

.works-lightbox__asset {
  display: block;
  width: 100%;
  height: 100%;
  max-height: calc(100svh - (var(--lightbox-space) * 2));
  object-fit: contain;
}

.works-lightbox__close {
  position: fixed;
  top: var(--spacing-20);
  right: var(--spacing-20);
  z-index: 1;
  display: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-accent);
  cursor: pointer;
}

.panel-title {
  margin: 0 0 var(--spacing-40);
  color: var(--color-accent);
}

.contacts-page {
  display: grid;
  row-gap: var(--spacing-20);
}

.contacts-title {
  margin: 0;
  color: var(--color-accent);
}

.contact-list {
  display: grid;
  row-gap: var(--spacing-12);
  max-width: 40rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-list li {
  color: var(--color-muted);
}

.contact-list .contacts-availability {
  color: var(--color-accent);
}

.contact-list .contacts-time {
  color: var(--color-muted);
}

.text-link {
  color: var(--color-accent);
}

a:hover,
.text-link:hover {
  text-decoration-color: var(--color-accent);
}

.text-button {
  display: inline;
  width: fit-content;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-accent);
  cursor: pointer;
  text-align: left;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--color-muted);
  text-underline-offset: 0.16em;
}

.text-button:hover {
  text-decoration-color: var(--color-accent);
}

.page-shell--about {
  align-items: start;
}

.about-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.about-detail {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.about-intro-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
  width: 100%;
  padding: var(--spacing-40) var(--spacing-20) var(--spacing-0);
}

.about-intro__media {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 3 / 2;
  flex: none;
  overflow: hidden;
  background: var(--color-shader-background);
  border-radius: var(--radius-small);
}

.about-intro__media-fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-intro__media[data-about-shader-ready="true"] .about-intro__media-fallback {
  visibility: hidden;
}

.about-copy {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.about-copy__title,
.about-copy p {
  margin: 0;
  color: var(--color-accent);
}

.about-work-link {
  color: var(--color-muted);
  text-decoration: none;
}

.about-work-link:hover,
.about-work-link:focus-visible {
  color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--color-muted);
}

.about-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  scroll-margin-top: var(--spacing-20);
  padding: var(--spacing-20) var(--spacing-20) var(--spacing-80);
}

.about-section__title {
  margin: 0;
  color: var(--color-muted);
}

.about-section__divider {
  width: 100%;
  height: 1px;
  flex: none;
  background: var(--color-surface-secondary);
}

.plain-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  max-width: 42.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plain-list li {
  color: var(--color-muted);
}

.experience-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  width: 100%;
}

.experience-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--spacing-12);
  align-items: start;
  width: 100%;
}

.experience-item + .experience-item {
  margin-top: 0;
}

.experience-item__title {
  margin: 0;
  color: var(--color-accent);
}

.experience-item__date,
.experience-item__location {
  margin: 0;
  color: var(--color-muted);
}

.experience-item__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.experience-item__title .text-link {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.16em;
}

.experience-item__title .text-link:hover,
.experience-item__title .text-link:focus-visible {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.16em;
}

.about-external-arrow {
  display: inline-block;
  padding-left: 0.12em;
  color: var(--color-muted);
  transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

.text-link:hover .about-external-arrow,
.text-link:focus-visible .about-external-arrow {
  transform: translate(0.08em, -0.08em);
}

.styles-font-stack {
  margin-bottom: var(--spacing-40);
}

.styles-font-stack-code {
  display: inline-block;
  margin: 0 0 var(--spacing-16);
  color: var(--color-accent);
}

.styles-subtitle {
  margin: 0 0 var(--spacing-12);
  color: var(--color-accent);
}

.styles-subsection--typography .styles-subtitle {
  margin: 0 0 var(--spacing-20);
}

.styles-subsection--typography {
  margin-bottom: var(--spacing-60);
}

.styles-subsection--actions {
  margin-bottom: var(--spacing-60);
}

.styles-subsection--layout {
  margin-bottom: var(--spacing-60);
}

.styles-subsection--colors {
  margin-bottom: var(--spacing-60);
}

.styles-subsection--typography .styles-divider {
  margin-bottom: var(--spacing-20);
}

.styles-subsection--colors .styles-subtitle,
.styles-subsection--gaps .styles-subtitle {
  margin: 0 0 var(--spacing-20);
}

.styles-subsection--radius .styles-subtitle,
.styles-subsection--motion .styles-subtitle {
  margin: var(--spacing-40) 0 var(--spacing-20);
}

.styles-subsection--colors .styles-divider,
.styles-subsection--gaps .styles-divider {
  margin-bottom: var(--spacing-20);
}

.styles-grid {
  display: grid;
  column-gap: var(--spacing-20);
  row-gap: var(--spacing-20);
}

.styles-grid--2-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.styles-grid .styles-role,
.styles-grid .styles-color-row {
  margin: 0;
}

.styles-theme-block .styles-grid {
  padding-bottom: var(--spacing-20);
}

.styles-role {
  margin-bottom: var(--spacing-20);
  padding-bottom: 0;
}

.styles-divider {
  margin: 0 0 var(--spacing-20);
  height: 1px;
  border: 0;
  background: var(--color-surface-secondary);
  opacity: 0.75;
}

.styles-divider--section-gap {
  margin-bottom: var(--spacing-40);
}

.styles-role-title {
  margin: 0 0 var(--spacing-12);
  color: var(--color-accent);
}

.styles-role-name {
  margin: 0 0 var(--spacing-8);
  color: var(--color-accent);
}

.styles-role-name-box {
  height: var(--spacing-40);
}

.styles-role-name-box .styles-role-name {
  margin-bottom: 0;
}

.styles-theme-label {
  margin: 0 0 var(--spacing-20);
  color: var(--color-accent);
}

.styles-subsection--typography .styles-role-name--color-accent {
  color: var(--color-accent);
}

.styles-subsection--typography .styles-role-name--color-muted {
  color: var(--color-muted);
}

.styles-role-selector {
  margin: 0 0 var(--spacing-8);
  color: var(--color-muted);
}

.styles-role-prop {
  margin: 0 0 var(--spacing-4);
  color: var(--color-accent);
}

.styles-role-prop span {
  color: var(--color-muted);
  margin-right: var(--spacing-4);
}

.styles-actions-demo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-16);
}

.styles-color-row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-16);
}

.styles-color-swatch {
  width: var(--spacing-40);
  height: var(--spacing-40);
  border: 1px solid var(--color-surface-secondary);
  border-radius: var(--radius-none);
  flex: 0 0 auto;
}

.styles-color-name {
  margin: 0;
}

.styles-gap-swatch {
  display: block;
  width: var(--gap-size);
  height: var(--gap-size);
  min-width: var(--spacing-4);
  min-height: var(--spacing-4);
  margin-bottom: var(--spacing-16);
  background: var(--color-accent);
  border: 1px solid var(--color-surface-secondary);
}

.styles-radius-swatch {
  display: block;
  width: var(--spacing-40);
  height: var(--spacing-40);
  margin-bottom: var(--spacing-16);
  border: 1px solid var(--color-surface-secondary);
  border-radius: var(--radius-value);
  background: var(--color-accent);
}

.styles-radius-swatch--pill {
  width: var(--spacing-60);
}

.styles-list {
  margin: 0 0 var(--spacing-16) 0;
  padding-left: var(--spacing-20);
  color: var(--color-accent);
  display: grid;
  row-gap: var(--spacing-8);
}

.styles-note {
  margin: 0;
  color: var(--color-muted);
}

.styles-page code {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.pill-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--color-muted);
  cursor: pointer;
  transition: color 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pill-tab.is-active {
  color: var(--color-accent);
}

.pill-tab:not(.is-active):hover {
  color: var(--color-accent);
}

.pill-tab:focus-visible {
  outline: 0.125rem solid var(--color-accent);
  outline-offset: var(--spacing-4);
}

.site-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: 0;
  padding: var(--spacing-8) var(--spacing-12);
  border: 1px solid var(--color-surface-secondary);
  border-radius: var(--radius-none);
  background: transparent;
  color: var(--color-accent);
  cursor: pointer;
  text-align: center;
}

.site-button:hover {
  border-color: var(--color-accent);
}

.site-button:disabled {
  color: var(--color-muted);
  cursor: default;
}

.site-button:disabled:hover {
  border-color: var(--color-surface-secondary);
}

.site-button--primary {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-surface);
}

.site-field {
  display: grid;
  row-gap: var(--spacing-8);
}

.site-label {
  color: var(--color-muted);
}

.site-input {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--spacing-12) var(--spacing-16);
  border: 1px solid var(--color-surface-secondary);
  border-radius: var(--radius-none);
  background: transparent;
  color: var(--color-accent);
  font: inherit;
}

.site-input:focus {
  outline: 0;
  border-color: var(--color-accent);
}

.site-textarea {
  min-height: 8rem;
  resize: vertical;
}

.site-textarea[data-autosize] {
  min-height: 0;
  overflow: hidden;
  resize: none;
}

.site-textarea--long {
  min-height: 16rem;
}

.site-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  color: var(--color-accent);
}

.site-checkbox input {
  accent-color: var(--color-accent);
}

@media (max-width: calc(80rem - 1px)) {
  .page-shell {
    grid-template-columns: 12rem minmax(0, var(--container-max));
  }

  .works-on-this-page {
    display: none;
  }

  .works-view-navigation {
    display: none;
  }

  .bottom-tabs {
    display: inline-flex;
  }
}

@media (max-width: 48rem) {
  .styles-grid {
    grid-template-columns: 1fr;
  }

  .page-shell {
    grid-template-columns: 1fr;
    row-gap: var(--spacing-40);
    column-gap: var(--spacing-20);
    padding: var(--spacing-16) var(--spacing-20) 0;
  }

  .page-shell > * {
    grid-column: 1 / -1;
  }

  .site-header {
    --mobile-menu-start: calc(var(--spacing-20) + var(--leading-body) + var(--spacing-20) + var(--spacing-40));
    --mobile-menu-row: calc(var(--leading-heading) + var(--spacing-16));
    position: sticky;
    top: 0;
    bottom: auto;
    left: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--spacing-16);
    row-gap: var(--spacing-8);
    align-items: start;
    gap: 0;
    width: 100%;
    margin-top: calc(var(--spacing-16) * -1);
    padding: var(--spacing-20) 0;
    transform: translateY(var(--site-header-offset, 0));
    will-change: transform;
  }

  .site-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 calc((100vw - 100%) / -2);
    display: block;
    background: var(--color-surface);
  }

  .site-header[data-menu-open="true"] {
    transform: none;
    will-change: auto;
  }

  .site-brand,
  .site-menu-toggle {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
  }

  .site-brand.site-brand--home {
    grid-column: 1;
    grid-row: 1;
    min-height: auto;
    min-width: 0;
    color: var(--color-accent);
    font-weight: var(--weight);
    line-height: var(--leading-body);
    position: relative;
    z-index: 40;
  }

  .site-menu-toggle.site-brand {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    min-height: auto;
    color: var(--color-accent);
    font-weight: var(--weight);
    line-height: var(--leading-body);
    position: relative;
    z-index: 40;
  }

  .site-menu-link {
    display: none;
  }

  .site-header[data-menu-open="true"]::before {
    content: "";
    position: fixed;
    z-index: 30;
    inset: 0;
    background: var(--color-surface);
  }

  .site-header[data-menu-open="true"] .site-menu-link {
    position: fixed;
    z-index: 40;
    top: calc(var(--mobile-menu-start) + (var(--mobile-menu-row) * var(--menu-index)));
    right: var(--spacing-20);
    left: var(--spacing-20);
    display: inline-flex;
    min-height: auto;
    color: var(--color-accent);
    font-family: var(--body);
    font-size: var(--text-heading);
    font-weight: var(--weight);
    line-height: var(--leading-heading);
    font-style: normal;
  }

  .bottom-tabs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    top: var(--site-header-visible-height, 0);
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding: var(--spacing-20);
  }

  .pill-tab {
    white-space: nowrap;
  }

  .works-tabs-block {
    row-gap: 0;
  }

  .works-lightbox {
    --lightbox-space: var(--spacing-16);
  }

  .works-lightbox__close {
    top: var(--spacing-20);
    right: var(--spacing-20);
    display: inline-flex;
    min-height: auto;
    align-items: center;
    color: var(--color-accent);
    font-weight: var(--weight);
    line-height: var(--leading-body);
  }

}

@media (prefers-reduced-motion: reduce) {
  .tab,
  .home-tabs__index-toggle,
  .home-tabs__index-thumb {
    transition: none;
  }

  .works-lightbox,
  .works-on-this-page__back-to-top-item {
    transition-duration: 120ms;
  }
}

@media (max-width: 30rem) {
  .page-shell {
    padding-inline: var(--spacing-20);
  }
}

.typo-heading {
  font-family: var(--title), var(--body), system-ui, sans-serif;
  font-size: var(--text-heading);
  font-weight: var(--weight);
  line-height: var(--leading-heading);
  letter-spacing: var(--letter-spacing-headline);
  font-feature-settings: "tnum";
  font-style: normal;
}

.typo-title {
  font-family: var(--title), var(--body), system-ui, sans-serif;
  font-size: var(--text-title);
  font-weight: var(--weight);
  line-height: var(--leading-title);
  letter-spacing: var(--letter-spacing-title);
  font-feature-settings: "tnum";
  font-style: normal;
}

.typo-label {
  font-family: var(--body), system-ui, sans-serif;
  font-size: var(--text-body);
  font-weight: var(--weight);
  line-height: var(--leading-body);
  font-style: normal;
}

.typo-body {
  font-family: var(--body), system-ui, sans-serif;
  font-size: var(--text-body);
  font-weight: var(--weight);
  line-height: var(--leading-body);
  font-feature-settings: "case";
  font-style: normal;
}

/* Current single-column site architecture */

.page-shell {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
  width: min(var(--container-max), 100%);
  padding: var(--spacing-0);
}

.page-shell > * {
  grid-column: 1;
}

.not-found-page {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  padding: var(--spacing-20);
}

.not-found-page__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-muted);
}

.not-found-page__image {
  display: block;
  width: var(--spacing-80);
  height: var(--spacing-80);
  margin-bottom: var(--spacing-40);
}

.not-found-page__title {
  margin: 0 0 var(--spacing-8);
  color: var(--color-accent);
}

.not-found-page__link {
  color: var(--color-muted);
  text-decoration: none;
}

.not-found-page__link:hover,
.not-found-page__link:focus-visible {
  color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.16em;
}

.home-intro {
  display: grid;
  gap: var(--spacing-20);
  padding: var(--spacing-80) var(--spacing-20) var(--spacing-40);
}

.home-intro__identity {
  display: flex;
  flex-direction: column;
}

.home-intro__name {
  color: inherit;
  text-decoration: none;
}

.home-intro__name:hover,
.home-intro__name:focus-visible {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.16em;
}

.home-intro__role {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.home-intro__role:hover,
.home-intro__role:focus-visible {
  color: var(--color-accent);
}

.home-intro__role:hover .t-text-swap,
.home-intro__role:focus-visible .t-text-swap {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.16em;
}

.home-intro__role .t-text-swap {
  transition-duration: var(--duration-role-swap);
}

.t-text-swap {
  display: inline-block;
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
  transition:
    transform var(--text-swap-dur) var(--text-swap-ease),
    filter var(--text-swap-dur) var(--text-swap-ease),
    opacity var(--text-swap-dur) var(--text-swap-ease);
  will-change: transform, filter, opacity;
}

.t-text-swap.is-exit {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
}

.t-text-swap.is-enter-start {
  transform: translateY(var(--text-swap-translate-y));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .t-text-swap {
    transition: none !important;
  }

  .t-text-swap.is-exit,
  .t-text-swap.is-enter-start {
    transform: none;
    filter: none;
    opacity: 1;
  }
}

.home-intro__statement {
  width: 100%;
  max-width: var(--container-project-content);
  margin: 0 auto;
}

.home-intro__link,
[data-project-id="mempools"] .work-project__section-copy a {
  color: var(--color-muted);
  text-decoration: none;
}

.home-intro__link:hover,
.home-intro__link:focus-visible,
[data-project-id="mempools"] .work-project__section-copy a:hover,
[data-project-id="mempools"] .work-project__section-copy a:focus-visible {
  color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.16em;
}

.home-intro__actions {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-20);
}

.home-intro__email-group {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  padding-right: var(--spacing-0);
}

.home-intro__action {
  color: var(--color-muted);
  text-decoration: none;
}

.home-intro__email-copy {
  position: absolute;
  top: var(--spacing-0);
  left: 100%;
  display: inline-flex;
  margin: 0;
  padding: var(--spacing-0) var(--spacing-0) var(--spacing-0) var(--spacing-6);
  border: 0;
  background: transparent;
  font: inherit;
  transform: translateX(calc(var(--spacing-4) * -1));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .home-intro__email-group:hover .home-intro__email-copy {
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
    pointer-events: auto;
  }
}

.home-intro__email-group:focus-within .home-intro__email-copy {
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
  pointer-events: auto;
  transition: none;
}

.home-intro__action:hover,
.home-intro__action:focus-visible {
  color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.16em;
}

.home-intro__email-copy[data-copied="true"] {
  text-decoration: none;
}

.page-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--color-surface);
}

.page-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: var(--spacing-0);
  right: calc(50% - 50vw);
  bottom: var(--spacing-0);
  left: calc(50% - 50vw);
  background: var(--color-surface);
}

.archive-nav,
.page-header__trail,
.page-header__contact-links,
.work-project__meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.archive-nav {
  min-width: 0;
  padding: var(--spacing-8) var(--spacing-12);
}

.archive-nav--home {
  padding-block: var(--spacing-8);
}

.archive-nav__link {
  color: var(--color-muted);
  text-decoration: none;
}

.archive-nav__link:hover,
.archive-nav__link:focus-visible,
.archive-nav__link--active {
  color: var(--color-accent);
}

.home-tabs__sentinel {
  height: 1px;
  margin-bottom: -1px;
  pointer-events: none;
}

.home-tabs {
  position: sticky;
  top: 0;
  z-index: 30;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-block: var(--spacing-8);
  background: var(--color-surface);
}

.home-tabs::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--color-surface);
}

.home-tabs__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-16);
  justify-content: space-between;
  width: 100%;
  padding-inline: var(--spacing-20);
}

.tab-list {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
}

.home-tabs__primary {
  gap: var(--spacing-16);
}

.tab {
  display: flex;
  flex: none;
  align-items: flex-start;
  margin: 0;
  border: 0;
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.tab {
  padding: 0;
  transition:
    padding-inline 200ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tab:not([aria-pressed="true"]):hover,
.tab:not([aria-pressed="true"]):focus-visible {
  color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.16em;
}

.home-tabs__primary .tab[aria-pressed="true"]:hover,
.home-tabs__primary .tab[aria-pressed="true"]:focus-visible {
  color: var(--color-muted);
  text-decoration: none;
}

.tab[aria-pressed="true"] {
  padding-inline: calc(var(--spacing-4) + (var(--spacing-4) / 2));
  background: var(--color-surface-secondary);
  color: var(--color-accent);
}

.home-tabs__index {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--spacing-6);
  margin: var(--spacing-0);
  padding: var(--spacing-0);
  border: var(--spacing-0);
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  cursor: pointer;
}

.home-tabs__index:hover,
.home-tabs__index:focus-visible,
.home-tabs__index[aria-checked="true"] {
  color: var(--color-accent);
}

.home-tabs__index:hover .home-tabs__index-label,
.home-tabs__index:focus-visible .home-tabs__index-label {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: currentColor;
  text-underline-offset: 0.16em;
}

.home-tabs__index-toggle {
  position: relative;
  flex: none;
  width: calc(var(--spacing-16) + var(--spacing-12));
  height: var(--spacing-16);
  border-radius: var(--radius-full);
  background: var(--color-surface-secondary);
  transition: background-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.home-tabs__index-thumb {
  position: absolute;
  top: calc(var(--spacing-4) / 2);
  left: calc(var(--spacing-4) / 2);
  width: var(--spacing-12);
  height: var(--spacing-12);
  border-radius: var(--radius-full);
  background: var(--color-muted);
  transition:
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.home-tabs__index[aria-checked="true"] .home-tabs__index-toggle {
  background: var(--color-muted);
}

.home-tabs__index[aria-checked="true"] .home-tabs__index-thumb {
  transform: translateX(var(--spacing-12));
  background: var(--color-surface);
}

.home-tabs__index:not([aria-checked="true"]):hover .home-tabs__index-thumb,
.home-tabs__index:not([aria-checked="true"]):focus-visible .home-tabs__index-thumb {
  background: var(--color-accent);
}

.home-tabs__index[aria-checked="true"]:hover .home-tabs__index-toggle,
.home-tabs__index[aria-checked="true"]:focus-visible .home-tabs__index-toggle {
  background: var(--color-accent);
}

.archive-nav__link--active {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: currentColor;
  text-underline-offset: 0.16em;
}

.archive-content {
  min-width: 0;
}

.home-results__panel[hidden] {
  display: none;
}

.home-results,
.home-results__panel {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  min-width: 0;
}

.home-results {
  margin-block-start: var(--spacing-0);
  padding-bottom: var(--spacing-80);
}

.home-tabs__divider {
  width: 100%;
  margin-block-start: var(--spacing-8);
  padding-inline: var(--spacing-20);
}

.home-tabs__divider::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--color-surface-secondary);
}

.archive-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-0);
  min-width: 0;
  margin-block: calc(var(--spacing-6) * -1);
  padding: var(--spacing-8) var(--spacing-20);
}

.archive-year-groups {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  padding-top: var(--spacing-16);
}

.archive-year-group {
  display: flex;
  gap: var(--spacing-12);
  width: 100%;
  padding-inline: var(--spacing-20);
}

.archive-year-group__year {
  flex: 0 0 var(--spacing-80);
  width: var(--spacing-80);
  margin: var(--spacing-0);
  color: var(--color-muted);
}

.home-results .archive-year-group .archive-list {
  flex: 1;
  gap: var(--spacing-0);
  width: auto;
  padding: var(--spacing-0);
}

.home-results__empty {
  margin: var(--spacing-0);
  padding: var(--spacing-8) var(--spacing-20);
  color: var(--color-muted);
}

.archive-entry {
  display: flex;
  gap: var(--spacing-8);
  align-items: baseline;
  min-width: 0;
  margin: var(--spacing-0);
  padding: var(--spacing-6) var(--spacing-0);
  border-radius: var(--radius-small);
  color: var(--color-accent);
  text-decoration: none;
}

.archive-entry-preview {
  position: fixed;
  z-index: 40;
  top: var(--spacing-0);
  left: var(--spacing-0);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(var(--container-archive-preview), calc(100vw - (var(--spacing-20) * 2)));
  overflow: hidden;
  border-radius: var(--radius-small);
  background: var(--color-surface-secondary);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--archive-preview-x, -100vw), var(--archive-preview-y, -100vh), 0);
  transition: opacity var(--text-swap-dur) var(--text-swap-ease);
}

.archive-entry-preview.is-visible {
  opacity: 1;
}

.archive-entry-preview__media-frame {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: var(--archive-preview-media-ratio, var(--ratio-archive-preview));
  overflow: hidden;
  background: var(--color-surface-secondary);
}

.archive-entry-preview__media {
  position: absolute;
  inset: var(--spacing-0);
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--text-swap-dur) var(--text-swap-ease);
}

.archive-entry-preview__media.is-active {
  opacity: 1;
}

.archive-entry-preview__placeholder {
  position: absolute;
  inset: var(--spacing-0);
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  text-align: center;
  background: var(--color-surface-secondary);
}

.archive-entry-preview.is-placeholder .archive-entry-preview__placeholder {
  display: flex;
}

.archive-entry-preview__site {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--spacing-8);
  padding-block: var(--spacing-8);
  padding-left: calc(var(--spacing-8) + (var(--spacing-4) / 2));
  padding-right: var(--spacing-12);
  background: var(--color-surface-secondary);
}

.archive-entry-preview.is-external .archive-entry-preview__site {
  display: flex;
}

.archive-entry-preview__favicon {
  flex-shrink: 0;
  width: var(--spacing-20);
  height: var(--spacing-20);
  object-fit: contain;
}

.archive-entry-preview__site-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--color-accent);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-entry:hover,
.archive-entry:focus-visible {
  text-decoration: none;
}

.archive-entry:not(.archive-entry--hidden):hover .archive-entry__title,
.archive-entry:not(.archive-entry--hidden):focus-visible .archive-entry__title {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.16em;
}

.archive-entry--external .archive-entry__title::after {
  content: " ↗";
  visibility: hidden;
}

.archive-entry--external:hover .archive-entry__title::after,
.archive-entry--external:focus-visible .archive-entry__title::after {
  visibility: visible;
}

.archive-entry--hidden,
.archive-entry--hidden .archive-entry__title {
  color: var(--color-muted);
}

.archive-entry--hidden {
  cursor: default;
}

.archive-entry__thumbnail {
  flex: 0 0 var(--spacing-40);
  width: var(--spacing-40);
  height: var(--spacing-40);
  overflow: hidden;
  background: var(--color-surface-secondary);
  border-radius: var(--radius-none);
}

.archive-entry__thumbnail.media-fit,
.archive-entry__thumbnail .media-fit {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.archive-entry__copy {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: var(--spacing-8);
  min-width: 0;
}

.archive-entry__title,
.archive-entry__metadata {
  min-width: 0;
}

.archive-entry__title {
  flex: 1;
}

.archive-entry__metadata {
  display: grid;
  color: var(--color-muted);
  font-weight: var(--weight);
}

.archive-entry__metadata > .t-text-swap {
  grid-area: 1 / 1;
  text-align: right;
}

.archive-entry__year {
  transform: translateY(var(--text-swap-translate-y));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .archive-entry:hover .archive-entry__metadata--swappable .archive-entry__type {
    transform: translateY(calc(var(--text-swap-translate-y) * -1));
    filter: blur(var(--text-swap-blur));
    opacity: 0;
  }

  .archive-entry:hover .archive-entry__metadata--swappable .archive-entry__year {
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
  }
}

@media (hover: none), (pointer: coarse) {
  .archive-entry-preview {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .archive-entry-preview,
  .archive-entry-preview__media {
    transition: none;
  }
}

.archive-entry:not(.archive-entry--hidden):focus-visible .archive-entry__metadata--swappable .archive-entry__type {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
  transition: none;
}

.archive-entry:not(.archive-entry--hidden):focus-visible .archive-entry__metadata--swappable .archive-entry__year {
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
  transition: none;
}

.archive-entry__metadata--year-on-hover .archive-entry__year {
  transform: translateY(var(--text-swap-translate-y));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .archive-entry:hover .archive-entry__metadata--year-on-hover .archive-entry__year {
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
  }
}

.archive-entry:not(.archive-entry--hidden):focus-visible .archive-entry__metadata--year-on-hover .archive-entry__year {
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
  transition: none;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--spacing-8) var(--spacing-20);
}

.page-header__trail {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.page-header__trail > .archive-nav__link,
.page-header__project-separator {
  flex: none;
}

.page-header__project-trail {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: var(--spacing-8);
  min-width: 0;
  overflow: hidden;
}

.page-header__home-label--short {
  display: none;
}

.page-header__separator {
  color: var(--color-surface-secondary);
}

.page-header__contact {
  flex: none;
}

.page-header__contact-links {
  gap: var(--spacing-16);
}

.page-header__contact-links[hidden] {
  display: none;
}

.page-header__contact [data-header-contact-toggle][hidden] {
  display: none;
}

.page-header__project-trail[hidden] {
  display: none;
}

.page-header .page-header__project-title {
  display: block;
  flex: 1;
  min-width: 0;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-header .archive-nav__link,
.page-header .text-button,
.page-header .text-link,
.work-project__meta .text-link {
  display: flex;
  align-items: flex-start;
  padding: var(--spacing-0);
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--color-muted);
  text-decoration: none;
}

.page-header .archive-nav__link:hover,
.page-header .archive-nav__link:focus-visible,
.page-header .text-button:hover,
.page-header .text-button:focus-visible,
.page-header .text-link:hover,
.page-header .text-link:focus-visible,
.work-project__meta .text-link:hover,
.work-project__meta .text-link:focus-visible {
  color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.16em;
}

.work-project {
  display: grid;
  gap: 0;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  min-width: 0;
}

.work-project__header {
  display: grid;
  gap: var(--spacing-16);
  padding: var(--spacing-40) var(--spacing-20);
}

.work-project__title,
.work-project__summary-text {
  width: 100%;
  max-width: var(--container-project-content);
  margin: 0 auto;
}

.work-project__meta {
  width: 100%;
  max-width: var(--container-project-content);
  margin-inline: auto;
  gap: var(--spacing-16);
}

.work-project__meta > span.typo-body {
  color: var(--color-muted);
}

.work-project__meta > .typo-body:only-child {
  padding-inline: var(--spacing-0);
}

.work-project__sections {
  display: grid;
  gap: 0;
}

.work-project__section {
  display: grid;
  gap: var(--spacing-16);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--spacing-20) var(--spacing-20) var(--spacing-40);
}

.work-project__body-heading,
.work-project__body-subheading,
.work-project__body-text,
.work-project__body-list {
  margin: 0;
}

.work-project__gallery {
  display: grid;
  gap: var(--spacing-8);
}

.work-project__media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-16);
}

.work-project__media-grid-item {
  min-width: 0;
}

.work-project__media-item,
.work-project__media-placeholder {
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-small);
}

.work-project__media-item {
  position: relative;
  background: var(--color-surface-secondary);
}

.work-project__media-placeholder {
  background: var(--color-surface);
}

.work-project__gallery-mount,
.work-project__gallery-asset {
  width: 100%;
  height: 100%;
}

.work-project__gallery-count {
  position: absolute;
  bottom: var(--spacing-12);
  left: 50%;
  z-index: 1;
  display: inline-flex;
  gap: var(--spacing-4);
  padding-inline: var(--spacing-6);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  color: var(--color-muted);
  font-family: var(--mono), ui-monospace, monospace;
  font-size: var(--text-body);
  font-weight: var(--weight);
  line-height: var(--leading-body);
  pointer-events: none;
  transform: translateX(-50%);
}

.work-project__gallery-count-divider {
  color: var(--color-surface-secondary);
}

.work-project__media-item.is-work-gallery-preview {
  cursor: default;
  outline: none;
  will-change: transform;
}

.work-project__media-item.is-work-gallery-preview .work-project__gallery-count {
  display: none;
}

.work-project__media-item.is-work-gallery-preview.is-previous-zone {
  cursor: w-resize;
}

.work-project__media-item.is-work-gallery-preview.is-next-zone {
  cursor: e-resize;
}

.work-gallery-preview-content {
  will-change: opacity, transform;
}

.work-gallery-preview-content.is-work-gallery-preview-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(var(--work-gallery-preview-shift));
}

body.has-work-gallery-preview {
  cursor: zoom-out;
  user-select: none;
}

.work-project__section-copy {
  display: grid;
  gap: var(--spacing-12);
}

[data-project-id="mempools"] .work-project__section-copy + .work-project__gallery {
  margin-top: var(--spacing-16);
}

@media (hover: hover) and (pointer: fine) {
  .work-project__media-item[data-work-gallery-media] {
    cursor: zoom-in;
  }

  .work-project__media-item.is-work-gallery-preview {
    cursor: default;
  }
}

.related-works {
  display: grid;
  gap: var(--spacing-12);
  padding: var(--spacing-20) var(--spacing-0) var(--spacing-80);
}

.availability-callout {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--spacing-12);
  padding: var(--spacing-40) var(--spacing-20);
}

.availability-callout__indicator {
  flex: none;
  width: var(--spacing-12);
  height: var(--spacing-12);
  border-radius: var(--radius-full);
  background: var(--color-positive);
}

.availability-callout__text {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.related-works--connected {
  padding-bottom: var(--spacing-40);
}

.related-works__title {
  margin: 0;
  padding: var(--spacing-0) var(--spacing-20);
  color: var(--color-muted);
}

.related-works__divider {
  height: 1px;
  margin: var(--spacing-0) var(--spacing-20);
  background: var(--color-surface-secondary);
}

.related-works .archive-list {
  padding: var(--spacing-0) var(--spacing-20);
}

.page-updated {
  padding: var(--spacing-8) var(--spacing-20);
  color: var(--color-muted);
}

.works-lightbox__header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr minmax(0, 1fr) 1fr;
  align-items: center;
  width: 100%;
  padding: var(--spacing-8);
}

.works-lightbox__header-spacer {
  visibility: hidden;
}

.works-lightbox__title {
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.works-lightbox__close {
  position: static;
  display: block;
  justify-self: end;
}

.works-lightbox__arrow {
  position: fixed;
  top: 50%;
  z-index: 2;
  padding: var(--spacing-12);
  border: 0;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  transform: translateY(-50%);
}

.works-lightbox__arrow--previous {
  left: 0;
}

.works-lightbox__arrow--next {
  right: 0;
}

.works-lightbox__count {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 2;
  padding: var(--spacing-8);
  color: var(--color-muted);
  transform: translateX(-50%);
}

@media (max-width: 30rem) {
  .page-shell {
    padding: var(--spacing-0);
  }

  .work-project__media-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-tabs__inner {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .archive-nav {
    overflow-x: auto;
  }

  .page-header {
    overflow: hidden;
  }

  .archive-nav__link,
  .page-header__trail,
  .page-header__contact {
    white-space: nowrap;
  }

  .page-header__home-label--full {
    display: none;
  }

  .page-header__home-label--short {
    display: inline;
  }

  .page-header__project-trail {
    display: none;
  }

  .archive-entry {
    align-items: flex-start;
  }

  .works-lightbox__header {
    grid-template-columns: 1fr minmax(0, 2fr) 1fr;
  }
}