@font-face {
  font-display: swap;
  font-family: "Vajunnie TOP 60";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/Vajunnie-TOP-mega-111-60.otf") format("opentype");
}

@font-face {
  font-display: swap;
  font-family: "Vajunnie TOP";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/Vajunnie-TOP-mega-111.otf") format("opentype");
}

:root {
  --acid: #dfff00;
  --black: #000;
  --magenta: #ff00ff;
  --red: #ff0000;
  --screen-overscan: 160px;
  --screen-height: 100lvh;
  --white: #fff;
  --font-scale-1-desktop: 1;
  --font-scale-2-desktop: 1;
  --font-scale-3-desktop: 1;
  --font-scale-4-desktop: 1;
  --font-scale-5-desktop: 1;
  --font-scale-6-desktop: 1;
  --font-scale-7-desktop: 1;
  --font-scale-8-desktop: 1;
  --font-scale-1-mobile: 1;
  --font-scale-2-mobile: 1;
  --font-scale-3-mobile: 1;
  --font-scale-4-mobile: 1;
  --font-scale-5-mobile: 1;
  --font-scale-6-mobile: 1;
  --font-scale-7-mobile: 1;
  --font-scale-8-mobile: 1;
  --social-icon-size-scale-desktop: 1;
  --social-icon-spacing-scale-desktop: 1;
  --social-icon-size-scale-mobile: 1;
  --social-icon-spacing-scale-mobile: 1;
  --merch-line-spacing-scale-desktop: 1;
  --merch-line-spacing-scale-mobile: 1;
  --hero-gap: 2rem;
  --page-width: min(91.25vw, 78rem);
  --header-height: 3.1rem;
  color-scheme: light;
  font-size: clamp(16.8px, 1.752vw, 22.8px);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

* {
  box-sizing: border-box;
}

html,
body {
  background-color: var(--black);
  margin: 0;
  min-height: 100%;
  overscroll-behavior: none;
}

body {
  color: var(--white);
  font-family: "Vajunnie TOP", sans-serif;
  overflow-x: clip;
}

body.motion-paused *,
body.motion-paused *::before,
body.motion-paused *::after {
  animation-play-state: paused !important;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: var(--red);
}

nav {
  font-family: "Vajunnie TOP 60", sans-serif;
  font-weight: 400;
}

a:focus-visible,
button:focus-visible,
video:focus-visible {
  outline: 3px solid var(--acid);
  outline-offset: 3px;
}

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

.site-background {
  background-color: var(--magenta);
  background-image: url("posters/bg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  z-index: 0;
}

.site-background__poster,
.site-background__video {
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.site-background__poster img,
.site-background__video {
  height: 100%;
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.site-background__video {
  visibility: hidden;
}

.site-background__video.is-playing {
  visibility: visible;
}

.site-content {
  position: relative;
  z-index: 1;
}

.site-header {
  align-items: stretch;
  background: rgb(255 0 255 / 51%);
  display: grid;
  grid-template-columns: 42fr 25fr 33fr;
  min-height: var(--header-height);
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 100;
}

.primary-nav,
.social-nav {
  align-items: center;
  display: flex;
  justify-content: space-around;
  min-width: 0;
}

.primary-nav {
  font-family: "Vajunnie TOP 60", sans-serif;
  line-height: 0.9;
  text-transform: uppercase;
}

.primary-nav a {
  padding: 0.45rem 0.3rem 0.3rem;
  white-space: nowrap;
}

.header-image {
  height: 100%;
  min-height: var(--header-height);
  object-fit: cover;
  width: 100%;
}

.social-nav {
  gap: clamp(
    calc(0.35rem * var(--social-icon-spacing-scale-desktop)),
    calc(2.4vw * var(--social-icon-spacing-scale-desktop)),
    calc(1.8rem * var(--social-icon-spacing-scale-desktop))
  );
  justify-content: center;
}

.social-nav a,
.coin-socials a {
  display: grid;
  place-items: center;
}

.social-nav svg {
  fill: var(--white);
  height: clamp(
    calc(1.45rem * var(--social-icon-size-scale-desktop)),
    calc(2.5vw * var(--social-icon-size-scale-desktop)),
    calc(2rem * var(--social-icon-size-scale-desktop))
  );
  width: clamp(
    calc(1.45rem * var(--social-icon-size-scale-desktop)),
    calc(2.5vw * var(--social-icon-size-scale-desktop)),
    calc(2rem * var(--social-icon-size-scale-desktop))
  );
}

.social-nav a:hover svg,
.social-nav a:focus-visible svg,
.coin-socials a:hover svg,
.coin-socials a:focus-visible svg {
  fill: var(--red);
}

main {
  padding-bottom: 1px;
}

section[id] {
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

.mind-palace {
  display: grid;
  gap: var(--hero-gap);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 2.4rem;
  width: 100%;
}

.mind-palace__column {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.media-frame {
  background: transparent;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.media-frame video {
  height: 100%;
  object-fit: contain;
  object-position: center;
  width: 100%;
}

.lazy-video {
  background: transparent;
  opacity: 0;
  visibility: hidden;
}

.lazy-video.is-media-ready {
  opacity: 1;
  visibility: visible;
}

.hero-left {
  align-self: center;
  aspect-ratio: 9 / 16;
  max-width: 100%;
  width: 25.25rem;
}

.hero-right {
  align-self: flex-end;
  aspect-ratio: 3 / 4;
  max-width: 100%;
  width: 29.375rem;
}

.hero-tall {
  align-self: center;
  aspect-ratio: 9 / 16;
  margin-top: 1.6rem;
  max-width: 100%;
  width: 10rem;
}

.hero-tall video {
  object-position: center 48%;
}

.hero-wide {
  align-self: flex-start;
  aspect-ratio: 16 / 9;
  margin-top: 0.75rem;
  max-width: 100%;
  width: 26.25rem;
}

.secondary-nav {
  align-content: center;
  display: flex;
  flex-direction: column;
  font-weight: 400;
  justify-content: center;
  line-height: 1.18;
  min-height: 21rem;
  padding: 0.35rem;
  text-align: right;
  text-shadow: 0 0 0.125rem var(--magenta);
  text-transform: uppercase;
}

.secondary-nav {
  align-items: flex-end;
}

.slideshow {
  align-self: flex-end;
  background: transparent;
  height: 37rem;
  margin-left: calc(var(--hero-gap) * -0.5);
  margin-top: 1.6rem;
  overflow: hidden;
  position: relative;
  width: calc(100% + var(--hero-gap) * 0.5);
}

.slideshow__slide {
  height: 100%;
  inset: 0;
  object-fit: contain;
  opacity: 0;
  position: absolute;
  width: 100%;
}

.slideshow__slide.is-current {
  opacity: 1;
}

.section {
  margin-inline: auto;
  width: var(--page-width);
}

.section--vaj {
  padding-top: 1.2rem;
}

.vaj-title {
  color: var(--magenta);
  font-family: "Vajunnie TOP", sans-serif;
  font-weight: 400;
  line-height: 0.75;
  margin: 0;
  text-align: center;
  text-shadow: 0 0 0.125rem #92ff3d;
}

.vaj-card {
  background: var(--black);
  color: var(--white);
  padding: 0.25rem 0.6rem 0.65rem;
  text-align: center;
  margin-inline: auto;
  width: min(100%, 23rem);
}

.coin-socials {
  display: flex;
  gap: 0.35rem;
  justify-content: center;
}

.coin-socials svg {
  fill: currentColor;
  height: 1.55rem;
  width: 1.55rem;
}

.contract-address {
  font-family: Arial, sans-serif;
  margin: 0.25rem 0 0;
  overflow-wrap: anywhere;
}

.center-stack {
  margin-inline: auto;
  width: min(100%, 48rem);
}

.education {
  padding-top: 0.1rem;
}

.education .media-frame + .media-frame,
.image-stack > * + * {
  margin-top: 0;
}

.banner-loop {
  aspect-ratio: 1;
  background: transparent;
  margin-inline: auto;
  width: min(100%, 17.25rem);
}

.educational-label {
  color: var(--magenta);
  font-family: "Vajunnie TOP", sans-serif;
  font-weight: 400;
  line-height: 0.875;
  margin: 0;
  padding: 0.7rem 0;
  text-align: center;
  text-shadow: 0 0 0.125rem #92ff3d;
}

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

.merch {
  padding-top: 0.3rem;
  text-align: center;
}

.display-kicker,
.merch h2,
.therapy-title {
  font-family: "Vajunnie TOP", sans-serif;
  font-weight: 400;
  margin: 0;
}

.display-kicker {
  color: var(--white);
  line-height: 0.75;
  text-shadow: 0 0 0.125rem #92ff3d;
}

.merch h2 {
  color: var(--magenta);
  line-height: 0.75;
  text-shadow: 0 0 0.125rem #92ff3d;
}

.product-list {
  color: var(--white);
  font-family: "Vajunnie TOP", sans-serif;
  font-weight: 400;
  line-height: calc(1.5 * var(--merch-line-spacing-scale-desktop));
  margin: 0.6rem 0 1rem;
  text-shadow: 0 0 0.125rem #92ff3d;
}

.therapy-title {
  color: var(--magenta);
  font-size: 3.42rem;
  line-height: 0.75;
  text-shadow: 0 0 0.125rem #92ff3d;
}

.mobile-break {
  display: none;
}

.image-stack img {
  height: auto;
  width: 100%;
}

.merch .image-stack img:nth-child(-n + 2) {
  margin-inline: auto;
  width: min(100%, 33.625rem);
}

.gallery {
  padding-top: 1rem;
}

.font-admin-toggle {
  background: rgb(0 0 0 / 72%);
  border: 1px solid var(--magenta);
  border-radius: 999px;
  bottom: calc(0.75rem + env(safe-area-inset-bottom));
  color: var(--white);
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1;
  padding: 0.65rem 0.85rem;
  position: fixed;
  right: 0.75rem;
  opacity: 0.72;
  transition: opacity 150ms linear, background-color 150ms linear;
  z-index: 110;
}

.font-admin-toggle:hover,
.font-admin-toggle:focus-visible {
  background: var(--red);
  opacity: 1;
}

.font-admin-toggle,
.font-admin-panel {
  display: none !important;
}

/* Canonical percentage-scaled typography groups. */
.font-group--1 {
  font-size: clamp(
    calc(1.2rem * var(--font-scale-1-desktop)),
    calc(3.36vw * var(--font-scale-1-desktop)),
    calc(2rem * var(--font-scale-1-desktop))
  );
}

.font-group--2 {
  font-size: clamp(
    calc(1.7rem * var(--font-scale-2-desktop)),
    calc(4.26vw * var(--font-scale-2-desktop)),
    calc(2.62rem * var(--font-scale-2-desktop))
  );
}

.font-group--3 {
  font-size: clamp(
    calc(5.25rem * var(--font-scale-3-desktop)),
    calc(16.08vw * var(--font-scale-3-desktop)),
    calc(11.5rem * var(--font-scale-3-desktop))
  );
}

.font-group--4 {
  font-size: calc(3.9rem * var(--font-scale-4-desktop));
}

.font-group--5 {
  font-size: calc(6.65rem * var(--font-scale-5-desktop));
}

.font-group--6 {
  font-size: calc(2rem * var(--font-scale-6-desktop));
}

.font-group--7 {
  font-size: clamp(
    calc(5.25rem * var(--font-scale-7-desktop)),
    calc(16.08vw * var(--font-scale-7-desktop)),
    calc(11.5rem * var(--font-scale-7-desktop))
  );
}

.font-group--8 {
  font-size: clamp(
    calc(0.66rem * var(--font-scale-8-desktop)),
    calc(1.8vw * var(--font-scale-8-desktop)),
    calc(1rem * var(--font-scale-8-desktop))
  );
}

.font-admin-panel[hidden] {
  display: none;
}

.font-admin-panel {
  background: rgb(0 0 0 / 92%);
  border: 1px solid var(--magenta);
  border-radius: 0.8rem;
  bottom: calc(3.8rem + env(safe-area-inset-bottom));
  color: var(--white);
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
  font-size: 0.8rem;
  max-height: min(58vh, 34rem);
  overflow: hidden;
  position: fixed;
  right: 0.75rem;
  width: min(22rem, calc(100vw - 1rem));
  z-index: 200;
}

.font-admin-panel button,
.font-admin-panel input {
  font: inherit;
}

.font-admin-panel button {
  background: #1c1c1c;
  border: 1px solid #666;
  border-radius: 0.4rem;
  color: var(--white);
  cursor: pointer;
  min-height: 2rem;
}

.font-admin-panel button:hover,
.font-admin-panel button:focus-visible,
.font-admin-panel button[aria-pressed="true"] {
  background: var(--magenta);
  border-color: var(--magenta);
}

.font-admin-panel__header {
  align-items: center;
  border-bottom: 1px solid #555;
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  padding: 0.45rem 0.55rem;
}

.font-admin-panel__header h2 {
  font-family: Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1;
  margin: 0;
}

.font-admin-close {
  font-size: 1.2rem !important;
  min-width: 2rem;
}

.font-admin-profiles {
  display: grid;
  flex: 0 0 auto;
  gap: 0.35rem;
  grid-template-columns: 1fr 1fr;
  padding: 0.5rem 0.55rem 0.2rem;
}

.font-admin-controls {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.35rem 0.55rem;
  -webkit-overflow-scrolling: touch;
}

.font-admin-control {
  align-items: center;
  display: grid;
  gap: 0.3rem 0.45rem;
  grid-template-columns: minmax(0, 1fr) 4.5rem;
  padding: 0.4rem 0;
}

.font-admin-control + .font-admin-control {
  border-top: 1px solid #333;
}

.font-admin-section-label {
  border-bottom: 1px solid #666;
  color: var(--magenta);
  font-family: Arial, sans-serif;
  font-size: 0.82rem;
  line-height: 1.2;
  margin: 0.55rem 0 0;
  padding: 0.45rem 0 0.3rem;
}

.font-admin-control label {
  grid-column: 1 / -1;
  line-height: 1.2;
}

.font-admin-control input[type="range"] {
  accent-color: var(--magenta);
  min-width: 0;
  width: 100%;
}

.font-admin-control input[type="number"] {
  background: #111;
  border: 1px solid #666;
  border-radius: 0.3rem;
  color: var(--white);
  padding: 0.3rem;
  width: 100%;
}

.font-admin-actions {
  display: grid;
  flex: 0 0 auto;
  gap: 0.35rem;
  grid-template-columns: 1fr 1fr;
  padding: 0.35rem 0.55rem;
}

.font-admin-actions [data-font-action="save"] {
  background: var(--magenta);
  border-color: var(--magenta);
}

.font-admin-status {
  flex: 0 0 auto;
  line-height: 1.2;
  margin: 0;
  min-height: 1.4rem;
  padding: 0 0.55rem 0.45rem;
}

@media (max-width: 768px) {
  .header-image {
    display: none;
  }
}

@media (max-width: 736px) {
  html,
  body {
    min-height: 0;
    overflow: hidden;
  }

  html {
    height: var(--screen-height);
  }

  body {
    height: var(--screen-height);
    position: relative;
  }

  :root {
    --header-height: 5.14rem;
    --page-width: min(85vw, 34rem);
    font-size: 17.6px;
    scroll-padding-top: calc(var(--header-height) + 1rem);
  }

  .font-group--1 {
    font-size: calc(1.5rem * var(--font-scale-1-mobile));
  }

  .font-group--2 {
    font-size: calc(1.62rem * var(--font-scale-2-mobile));
  }

  .font-group--3 {
    font-size: calc(5.45rem * var(--font-scale-3-mobile));
  }

  .font-group--4 {
    font-size: calc(1.5rem * var(--font-scale-4-mobile));
  }

  .font-group--5 {
    font-size: calc(2.5rem * var(--font-scale-5-mobile));
  }

  .font-group--6 {
    font-size: calc(0.78rem * var(--font-scale-6-mobile));
  }

  .font-group--7 {
    font-size: calc(5.45rem * var(--font-scale-7-mobile));
  }

  .font-group--8 {
    font-size: clamp(
      calc(0.66rem * var(--font-scale-8-mobile)),
      calc(1.8vw * var(--font-scale-8-mobile)),
      calc(1rem * var(--font-scale-8-mobile))
    );
  }

  .product-list {
    line-height: calc(1.5 * var(--merch-line-spacing-scale-mobile));
  }

  .site-background {
    background-image: url("posters/bg-mobile-cat.jpg");
    height: 100%;
    inset: 0;
    position: absolute;
  }

  .site-content {
    height: 100%;
    inset: 0;
    overflow-x: clip;
    overflow-y: auto;
    padding-top: var(--header-height);
    position: absolute;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 1rem);
    -webkit-overflow-scrolling: touch;
  }

  .site-header {
    grid-template-columns: 1fr;
    grid-template-rows: 2.6rem 2.54rem;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

  .social-nav {
    gap: clamp(
      calc(0.35rem * var(--social-icon-spacing-scale-mobile)),
      calc(2.4vw * var(--social-icon-spacing-scale-mobile)),
      calc(1.8rem * var(--social-icon-spacing-scale-mobile))
    );
    grid-row: 1;
    padding-inline: 0.8rem;
  }

  .social-nav svg {
    height: calc(2rem * var(--social-icon-size-scale-mobile));
    width: calc(2rem * var(--social-icon-size-scale-mobile));
  }

  .primary-nav {
    grid-row: 2;
    justify-content: space-evenly;
  }

  .primary-nav a {
    padding: 0.15rem;
  }

  .mind-palace {
    margin-top: 1.25rem;
  }

  .hero-left {
    aspect-ratio: 179 / 319;
    width: 100%;
  }

  .hero-right {
    aspect-ratio: 179 / 239;
    width: 100%;
  }

  .hero-tall {
    aspect-ratio: 9 / 16;
    margin-top: 1.2rem;
  }

  .hero-wide {
    aspect-ratio: 179 / 101;
    margin-top: 0.85rem;
  }

  .secondary-nav {
    line-height: 1.18;
    min-height: 18rem;
    padding-inline: 0.2rem;
  }

  .slideshow {
    height: 37rem;
    margin-top: 1.2rem;
  }

  .section--vaj {
    padding-top: 1.1rem;
  }

  .center-stack {
    width: 100%;
  }

  .therapy-title {
    font-size: 2.5rem;
  }

  .mobile-break {
    display: initial;
  }

  .font-admin-toggle {
    bottom: calc(var(--screen-overscan) + 0.5rem + env(safe-area-inset-bottom));
    font-size: 0.68rem;
    position: absolute;
    right: 0.5rem;
  }

  .font-admin-panel {
    bottom: calc(var(--screen-overscan) + 3.5rem + env(safe-area-inset-bottom));
    max-height: 44lvh;
    position: absolute;
    right: 0.5rem;
  }
}

@media (max-width: 340px) {
  :root {
    --hero-gap: 1.4rem;
    --page-width: 88vw;
  }

  .social-nav {
    gap: calc(1rem * var(--social-icon-spacing-scale-mobile));
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}