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

* {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

img, picture, video, canvas, svg {
  max-width: 100%;
  display: block;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

#root, #__next {
  isolation: isolate;
}

:root {
  --color-background: oklch(12% .04 265);
  --color-foreground: oklch(96% .02 89.22);
  --color-foreground-muted: oklch(170% .01 89.22);
  --color-surface: oklch(16% .02 275.09);
  --color-border: oklch(27.4% .006 286.033);
  --base: 1rem;
  --space: calc(var(--base) * .25);
  --space-global: calc(var(--space) * 8);
}

@font-face {
  font-family: Inter;
  src: url("/public/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --base: 1rem;
  --h1-size: calc(var(--base) * 2.5);
  --h2-size: calc(var(--base) * 2);
  --h3-size: calc(var(--base) * 1.75);
  --h4-size: calc(var(--base) * 1.5);
  --h5-size: calc(var(--base) * 1.25);
  --h6-size: calc(var(--base) * 1.125);
  --p-size: var(--base);
  --h1-height: 1.2;
  --h2-height: 1.25;
  --h3-height: 1.3;
  --h4-height: 1.35;
  --h5-height: 1.4;
  --h6-height: 1.45;
  --p-height: 1.6;
  --h1-spacing: calc(var(--base) * 2.5);
  --h2-spacing: calc(var(--base) * 2);
  --h3-spacing: calc(var(--base) * 1.75);
  --h4-spacing: calc(var(--base) * 1.5);
  --h5-spacing: calc(var(--base) * 1.25);
  --h6-spacing: calc(var(--base) * 1);
  --p-spacing: calc(var(--base) * 1);
}

html, body {
  font-family: Inter, sans-serif;
}

h1, h2, h3, h4, h5, h6, p {
  font-weight: 300;
}

h1 {
  font-size: var(--h1-size);
  line-height: var(--h1-height);
  margin: 0 0 var(--h1-spacing) 0;
}

h2 {
  font-size: var(--h2-size);
  line-height: var(--h2-height);
  margin: var(--h2-spacing) 0 var(--h2-spacing) 0;
}

h3 {
  font-size: var(--h3-size);
  line-height: var(--h3-height);
  margin: var(--h3-spacing) 0 var(--h3-spacing) 0;
}

h4 {
  font-size: var(--h4-size);
  line-height: var(--h4-height);
  margin: var(--h4-spacing) 0 var(--h4-spacing) 0;
}

h5 {
  font-size: var(--h5-size);
  line-height: var(--h5-height);
  margin: var(--h5-spacing) 0 var(--h5-spacing) 0;
}

h6 {
  font-size: var(--h6-size);
  line-height: var(--h6-height);
  margin: var(--h6-spacing) 0 var(--h6-spacing) 0;
}

p {
  font-size: var(--p-size);
  line-height: var(--p-height);
  margin: 0 0 var(--p-spacing) 0;
}

.copy {
  color: var(--color-foreground-muted);
  font-size: var(--h6-size);
  text-wrap: balance;
}

html, body {
  background: var(--color-background);
  color: var(--color-foreground);
  cursor: url("/public/images/uploads/cursor.png"), url("/public/images/uploads/cursor.svg"), auto;
}

a {
  color: var(--color-foreground);
  text-decoration-color: var(--color-foreground);
}

:root {
  --transition: .5s ease;
  --transition-short: .25s ease;
  --layout: 72rem;
}

.layout {
  min-height: 100lvh;
}

.layout:before {
  content: "";
  pointer-events: none;
  z-index: 999;
  background: linear-gradient(oklch(16% .02 275.09), oklch(16% .02 275.09 / 0));
  height: 10vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.layout:after {
  content: "";
  pointer-events: none;
  z-index: 999;
  background: linear-gradient(to top, oklch(16% .02 275.09), oklch(16% .02 275.09 / 0));
  height: 10lvh;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.layout__content {
  max-width: var(--layout);
  padding: var(--space-global);
  gap: var(--space-global);
  flex-direction: column;
  margin: 0 auto;
  display: flex;
}

.image {
  display: block;
}

.image--rounded {
  border-radius: var(--base);
  overflow: hidden;
}

.stage {
  gap: var(--space-global);
  width: 100%;
  padding: var(--space-global) 0;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  display: grid;
}

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

.stage__image {
  border-radius: var(--base);
  aspect-ratio: 1;
  overflow: hidden;
}

.stage__image img, .stage__image picture {
  aspect-ratio: 1;
}

.stage__copy {
  margin-top: calc(var(--space-global)  + var(--header-logo-padding) * 10);
  color: var(--color-foreground-muted);
  font-size: var(--h6-size);
}

@media (width >= 1020px) {
  .stage {
    grid-template-columns: 3fr 2fr;
  }

  .stage__copy {
    margin-top: calc(var(--space-global)  + var(--header-logo-padding) * 8);
  }
}

.section {
  scroll-margin-top: calc(var(--header-logo-padding)  + var(--space-global));
}

.section__copy {
  color: var(--color-foreground-muted);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--base);
  overflow: hidden;
}

.card--square {
  aspect-ratio: 1;
}

.card--video {
  aspect-ratio: 16 / 9;
}

.grid__container {
  container-type: inline-size;
}

.grid {
  --grid-gap: calc(var(--spacing) * var(--base));
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fill, minmax(var(--column), 1fr));
  width: 100cqi;
  display: grid;
  position: relative;
}

.grid--fixed-columns {
  grid-template-columns: var(--columns-mobile, 1fr);
}

.grid--hide-more {
  --hide-more-offset: calc(var(--item-height) / 2);
  max-height: calc(3 * (var(--item-height)  + var(--grid-gap))  + var(--hide-more-offset));
  grid-auto-rows: var(--item-height);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.grid--hide-more:after {
  content: "";
  height: var(--hide-more-offset);
  z-index: 1;
  background: linear-gradient(to top, oklch(12% .04 265) 48%, oklch(12% .04 265 / .5) 100%, oklch(12% .04 265 / 0));
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.grid--hide-more.grid--hide-more-open {
  max-height: unset;
}

.grid--hide-more.grid--hide-more-open:after {
  display: none;
}

.grid__hide-more-container {
  padding: var(--space);
  z-index: 2;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.grid--hide-more.grid--hide-more-open .grid__hide-more-container {
  display: none;
}

.grid__hide-more-button {
  font-size: var(--p-size);
  color: var(--foreground);
  cursor: url("/public/images/uploads/cursor-pointer.png"), url("/public/images/uploads/cursor-pointer.svg"), auto;
  background: none;
  border: none;
  outline: none;
}

@media (width >= 1020px) {
  .grid--fixed-columns {
    grid-template-columns: var(--columns-desktop, 1fr);
  }
}

.link {
  align-items: center;
  gap: var(--space);
  color: var(--color-foreground);
  max-width: fit-content;
  font-weight: 400;
  text-decoration: none;
  display: flex;
}

.link:hover {
  border-bottom: 1px solid var(--color-foreground);
}

.link__icon {
  --size: calc(var(--space) * 5);
  height: var(--size);
  width: var(--size);
}

.footer {
  border-top: 1px solid var(--color-border);
  gap: var(--space-global);
  padding-top: var(--space-global);
  flex-direction: column;
  display: flex;
}

.footer__link {
  text-transform: uppercase;
  font-size: var(--base);
  color: var(--color-foreground);
  max-width: fit-content;
  font-weight: 300;
}

.footer__link:hover {
  text-decoration-line: underline;
  text-decoration-color: var(--color-foreground);
  cursor: url("/public/images/uploads/cursor-pointer.png"), url("/public/images/uploads/cursor-pointer.svg"), auto;
}

.footer__social-link {
  justify-content: center;
  align-items: center;
  display: flex;
}

.footer__social {
  gap: var(--base);
  justify-content: center;
  display: flex;
}

.footer__social-link, .footer__social-link svg {
  height: calc(var(--base) * 2);
  color: var(--color-foreground);
  transition: opacity var(--transition);
}

.footer__social-link:hover, .footer__social-link svg:hover {
  opacity: .7;
  cursor: url("/public/images/uploads/cursor-pointer.png"), url("/public/images/uploads/cursor-pointer.svg"), auto;
}

.footer__meta {
  justify-content: center;
  display: flex;
}

.footer__meta-link {
  text-transform: uppercase;
  font-size: calc(var(--base) * .75);
  color: var(--color-foreground-muted);
  max-width: fit-content;
  padding: var(--space);
  font-weight: 300;
  text-decoration: none;
}

.footer__meta-link:hover {
  text-decoration: underline;
}

.footer__meta-link:not(:last-child):after {
  content: "|";
  padding-left: var(--space);
  padding-right: calc(var(--space) * -1);
}

.footer__meta-link:hover {
  text-decoration-line: underline;
  text-decoration-color: var(--color-foreground-muted);
  cursor: url("/public/images/uploads/cursor-pointer.png"), url("/public/images/uploads/cursor-pointer.svg"), auto;
}

.video-card {
  aspect-ratio: 16 / 9;
  position: relative;
}

.video-card__thumb, .video-card__embed {
  transition: opacity var(--transition);
  position: absolute;
  inset: 0;
}

.video-card__thumb, .video-card__thumb img, .video-card__thumb picture, .video-card__embed, .video-card__embed iframe {
  aspect-ratio: 16 / 9;
}

.video-card__embed iframe {
  width: 100%;
  height: 100%;
}

.video-card__thumb, .video-card__thumb img, .video-card__thumb picture {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.video-card__embed {
  opacity: 0;
  pointer-events: none;
}

.video-card:has(.video-card__embed-iframe--ready) .video-card__embed {
  opacity: 1;
  pointer-events: all;
}

.video-card:has(.video-card__embed-iframe--ready) .video-card__thumb {
  opacity: 0;
  pointer-events: all;
}

.music-card, .music-card__image {
  aspect-ratio: 1;
  position: relative;
}

.music-card__image img, .music-card__image picture {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.music-card__image img {
  transition: transform var(--transition), filter var(--transition);
  transform-origin: center;
  filter: blur();
  will-change: blur, transform;
  transform: scale(1);
}

.music-card__meta {
  gap: var(--space);
  background: oklch(from var(--color-background) l c h / .7);
  opacity: 0;
  transition: opacity var(--transition);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.music-card:hover {
  cursor: url("/public/images/uploads/cursor-pointer.png"), url("/public/images/uploads/cursor-pointer.svg"), auto;
}

.music-card:hover .music-card__meta {
  opacity: 1;
}

.music-card:hover .music-card__image img {
  filter: blur(1px);
  transform: scale(1.05);
}

.music-card__meta-title {
  font-size: calc(var(--base));
  text-align: center;
  font-weight: 600;
}

.music-card__meta-work {
  font-size: calc(var(--base) * .7);
  text-align: center;
}

.music-modal[open] {
  --size: 480px;
  background: var(--color-background);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--base);
  width: min(80vw, var(--size));
  min-height: min(80vw, var(--size));
  outline: none;
  padding: 0;
  display: flex;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.music-modal__image {
  z-index: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.music-modal__meta {
  z-index: 1;
  background: oklch(from var(--color-background) l c h / .9);
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: calc(var(--space) * 8);
  gap: var(--base);
  min-height: min(80vw, var(--size));
  flex-direction: column;
  display: flex;
  position: relative;
}

.music-modal__image img, .music-modal__image picture {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.music-modal::backdrop {
  background: oklch(from var(--color-background) l c h / .7);
}

.music-modal__title {
  color: var(--color-foreground);
  margin-top: 0;
  font-weight: 500;
}

.music-modal__links {
  gap: var(--base);
  flex-direction: column;
  margin-top: auto;
  display: flex;
}

.music-modal__link {
  --color: var(--color-foreground);
  text-align: center;
  font-size: calc(var(--base) * 1.2);
  color: var(--color-foreground);
  padding: calc(var(--space) * 3);
  border: 1px solid oklch(from var(--color) l c h / .3);
  border-radius: var(--base);
  background: oklch(from var(--color) l c h / .1);
  transition: border var(--transition);
  outline: none;
  text-decoration: none;
}

.music-modal__link:hover {
  border: 1px solid oklch(from var(--color) l c h / .8);
}

.music-modal__link[href=""] {
  display: none;
}

:root {
  --header-logo-padding: calc(var(--space) * 4);
  --header-logo-scale: 2.5;
  --header-logo-size: 80px;
}

.header {
  z-index: 999;
  mix-blend-mode: difference;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.header__container {
  max-width: var(--layout);
  padding: 0 var(--space-global);
  margin: 0 auto;
  position: relative;
}

.header__logo {
  left: calc(var(--space-global)  + var(--space));
  top: var(--header-logo-padding);
  height: var(--header-logo-size);
  width: var(--header-logo-size);
  transform-origin: 0 0;
  transition: transform var(--transition-short);
  transform: scale(var(--header-logo-scale)) translateY(calc(var(--header-logo-padding) / 2));
  filter: grayscale();
  position: absolute;
}

.header--scroll .header__logo {
  transform: scale(1)translateY(0);
}

.header__logo-image {
  object-fit: contain;
  filter: grayscale();
  position: absolute;
  inset: 0;
}

.header__spacer {
  height: 200px;
}

@media (width >= 1020px) {
  .header__logo {
    transform: scale(var(--header-logo-scale)) translateY(var(--header-logo-padding));
  }
}