:root{
  --black:#050505;
  --bone:#e6d6b0;
  --white:#f5f2ea;
  --muted:rgba(245,242,234,.72);
  --line:rgba(245,242,234,.22);
  --safe-top:max(20px,env(safe-area-inset-top));
  --safe-right:max(20px,env(safe-area-inset-right));
  --safe-bottom:max(20px,env(safe-area-inset-bottom));
  --safe-left:max(20px,env(safe-area-inset-left));
}

*{box-sizing:border-box}

html,body{
  width:100%;
  min-height:100%;
  margin:0;
  background:var(--black);
}

body{
  color:var(--white);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.page{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
  display:grid;
  grid-template-rows:auto 1fr;
  padding:
    var(--safe-top)
    var(--safe-right)
    var(--safe-bottom)
    var(--safe-left);
}

.background-video{
  position:fixed;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.95) contrast(1.02) brightness(.72);
}

.background-overlay{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      rgba(5,5,5,.92) 0%,
      rgba(5,5,5,.82) 28%,
      rgba(5,5,5,.44) 58%,
      rgba(5,5,5,.15) 100%
    ),
    linear-gradient(
      180deg,
      rgba(5,5,5,.28) 0%,
      transparent 32%,
      rgba(5,5,5,.28) 100%
    );
}

.chromatic-bands{
  position:fixed;
  inset:-10% -6%;
  z-index:0;
  pointer-events:none;
  opacity:.72;
  mix-blend-mode:screen;
  filter:blur(16px) saturate(1.5);
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 11%,
      rgba(255,0,184,.34) 14%,
      rgba(139,92,255,.28) 16%,
      rgba(0,229,255,.34) 18%,
      rgba(199,255,0,.20) 20%,
      transparent 24%,

      transparent 43%,
      rgba(255,0,184,.28) 47%,
      rgba(139,92,255,.24) 49%,
      rgba(0,229,255,.30) 51%,
      rgba(199,255,0,.18) 53%,
      transparent 57%,

      transparent 76%,
      rgba(255,0,184,.24) 80%,
      rgba(139,92,255,.22) 82%,
      rgba(0,229,255,.28) 84%,
      rgba(199,255,0,.16) 86%,
      transparent 90%
    );
  transform:translateY(-3%);
  animation:chromaticDrift 14s ease-in-out infinite alternate;
}

.chromatic-bands::before,
.chromatic-bands::after{
  content:"";
  position:absolute;
  left:-10%;
  right:-10%;
  height:2.5%;
  border-radius:999px;
  opacity:.82;
  filter:blur(6px);
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,0,184,.65) 18%,
    rgba(139,92,255,.58) 36%,
    rgba(0,229,255,.72) 58%,
    rgba(199,255,0,.50) 78%,
    transparent 100%
  );
}

.chromatic-bands::before{
  top:30%;
  animation:bandGlide 8s ease-in-out infinite alternate;
}

.chromatic-bands::after{
  top:69%;
  animation:bandGlide 11s ease-in-out infinite alternate-reverse;
}

.neon-edge-glow{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  box-shadow:
    inset 2px 0 0 rgba(255,0,184,.48),
    inset -2px 0 0 rgba(0,229,255,.44),
    inset 0 2px 0 rgba(139,92,255,.34),
    inset 0 -2px 0 rgba(199,255,0,.24),
    inset 0 0 70px rgba(255,0,184,.08),
    inset 0 0 110px rgba(0,229,255,.07);
}

.site-header{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.wordmark{
  color:var(--bone);
  text-decoration:none;
  font-size:clamp(15px,1.7vw,21px);
  font-weight:700;
  letter-spacing:.01em;
  text-shadow:
    -1px 0 10px rgba(0,229,255,.26),
    1px 0 12px rgba(255,0,184,.28);
}

.page-label{
  color:rgba(245,242,234,.56);
  font-size:10px;
  font-weight:600;
  letter-spacing:.24em;
}

.about-layout{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  padding:clamp(54px,8vh,100px) 0;
}

.about-copy{
  width:min(100%,640px);
}

h1{
  margin:0 0 36px;
  color:var(--white);
  font-size:clamp(46px,7vw,84px);
  font-weight:800;
  line-height:.95;
  letter-spacing:-.055em;
  text-shadow:
    -2px 0 14px rgba(0,229,255,.24),
    2px 0 16px rgba(255,0,184,.26),
    0 0 28px rgba(255,255,255,.10);
}

.about-copy p{
  max-width:610px;
  margin:0 0 1.15em;
  color:var(--muted);
  font-size:clamp(15px,1.45vw,18px);
  font-weight:400;
  line-height:1.65;
}

.about-copy strong{
  color:var(--white);
  font-weight:600;
}

.about-copy .lead{
  margin-bottom:1.5em;
  color:rgba(245,242,234,.9);
  font-size:clamp(18px,2vw,25px);
  line-height:1.48;
  letter-spacing:-.015em;
}

.about-copy .closing{
  margin-top:1.8em;
  color:rgba(245,242,234,.82);
  font-size:clamp(18px,2vw,24px);
  line-height:1.45;
}

.shop-link{
  display:inline-flex;
  align-items:center;
  gap:18px;
  margin-top:22px;
  padding:14px 0;
  border-bottom:1px solid rgba(0,229,255,.55);
  color:var(--white);
  text-shadow:
    -1px 0 8px rgba(0,229,255,.26),
    1px 0 9px rgba(255,0,184,.28);
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  transition:
    border-color .18s ease,
    gap .18s ease,
    color .18s ease;
}

.shop-link span{
  font-size:18px;
  font-weight:400;
}

.shop-link:hover,
.shop-link:focus-visible{
  gap:24px;
  border-color:var(--white);
  color:var(--bone);
  outline:none;
}


@keyframes chromaticDrift{
  0%{transform:translateY(-4%) scaleY(1)}
  100%{transform:translateY(4%) scaleY(1.03)}
}

@keyframes bandGlide{
  0%{transform:translateX(-3%) skewX(-4deg);opacity:.48}
  50%{transform:translateX(2%) skewX(1deg);opacity:.88}
  100%{transform:translateX(5%) skewX(-2deg);opacity:.58}
}

@media(min-width:900px){
  .page{
    padding-left:max(5vw,var(--safe-left));
    padding-right:max(5vw,var(--safe-right));
  }
}

@media(max-width:700px){
  .page{
    overflow:auto;
    min-height:100svh;
  }

  .background-video{
    object-position:center top;
    filter:saturate(.95) contrast(1.02) brightness(.62);
  }

  .background-overlay{
    background:
      linear-gradient(
        180deg,
        rgba(5,5,5,.12) 0%,
        rgba(5,5,5,.18) 24%,
        rgba(5,5,5,.80) 48%,
        rgba(5,5,5,.97) 68%,
        rgba(5,5,5,1) 100%
      );
  }

  .chromatic-bands{
    opacity:.56;
    filter:blur(18px) saturate(1.4);
  }

  .site-header{
    align-items:flex-start;
  }

  .page-label{
    padding-top:4px;
  }

  .about-layout{
    align-items:flex-end;
    padding:42vh 0 36px;
  }

  h1{
    margin-bottom:26px;
    font-size:48px;
  }

  .about-copy p{
    font-size:15px;
    line-height:1.6;
  }

  .about-copy .lead{
    font-size:21px;
    line-height:1.45;
  }

  .about-copy .closing{
    font-size:21px;
  }
}