.brand-logo {
  --brand-ink: currentColor;
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  color: inherit;
  font: 760 15px/.8 "Manrope", sans-serif;
  letter-spacing: -.055em;
}
.brand-logo i {
  display: block;
  width: 2.2em;
  height: 3px;
  margin: 0 .48em;
  background: var(--lime);
  box-shadow: 0 0 14px rgba(199,255,49,.42);
  transform: skewX(-18deg);
  transform-origin: left center;
}
.brand-logo span:last-child {
  color: currentColor;
}
.brand-lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.brand-lockup small {
  color: var(--lime);
  font: 650 5px/1 "Manrope", sans-serif;
  letter-spacing: .34em;
}
.site-header .brand-lockup { justify-self: start; }
.site-header .brand-logo { font-size: 15px; }

.brand-intro {
  position: fixed;
  z-index: 20000;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--paper);
  background: var(--ink);
  pointer-events: none;
  animation: brand-intro-exit 2.25s cubic-bezier(.7,0,.2,1) forwards;
}
.brand-intro::before,
.brand-intro::after {
  content: "";
  position: absolute;
  top: 42px;
  bottom: 42px;
  width: 1px;
  opacity: .2;
  background: var(--paper);
}
.brand-intro::before { left: 42px; }
.brand-intro::after { right: 42px; }
.brand-intro-inner { text-align: center; }
.brand-intro .brand-logo {
  font-size: clamp(54px, 9.4vw, 142px);
  opacity: 0;
  animation: brand-word-arrive 1.7s cubic-bezier(.22,1,.36,1) .08s forwards;
}
.brand-intro .brand-logo i {
  width: clamp(70px,8vw,115px);
  height: clamp(7px, .8vw, 12px);
  animation: brand-beam-arrive 1.7s cubic-bezier(.22,1,.36,1) .08s both;
}
.brand-intro .brand-logo span:last-child {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--paper);
}
.brand-intro p {
  margin: 24px 0 0;
  color: rgba(241,240,233,.48);
  font: 600 8px/1 "Manrope",sans-serif;
  letter-spacing: .24em;
  opacity: 0;
  animation: brand-caption .55s ease .9s forwards;
}
@keyframes brand-word-arrive {
  0%,12% { opacity: 0; filter: blur(15px); transform: translateY(18px); }
  48%,100% { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes brand-beam-arrive {
  0%,15% { opacity: 0; transform: skewX(-18deg) scaleX(0); }
  50%,100% { opacity: 1; transform: skewX(-18deg) scaleX(1); }
}
@keyframes brand-caption { to { opacity: 1; } }
@keyframes brand-intro-exit {
  0%,72% { opacity: 1; visibility: visible; }
  99% { opacity: 0; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

.hero-brand-stamp {
  position: absolute;
  z-index: 2;
  right: clamp(22px,5.5vw,88px);
  top: 132px;
  display: grid;
  grid-template-columns: 54px auto;
  align-items: center;
  gap: 14px;
  color: rgba(241,240,233,.68);
}
.hero-brand-stamp img { width: 54px; height: 54px; }
.hero-brand-stamp span {
  max-width: 120px;
  font: 600 7px/1.55 "Manrope",sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.site-footer .brand-logo { font-size: clamp(19px,2vw,28px); }
.site-footer .brand-lockup { align-items: flex-start; }
.site-footer .brand-lockup small { font-size: 6px; }
.site-footer > div:first-child > p { margin-top: 22px; }

@media (max-width:760px) {
  .site-header .brand-logo { font-size:12px; }
  .site-header .brand-logo i { width:13px; margin-inline:.35em; height:2px; }
  .brand-lockup small { display:none; }
  .brand-intro::before { left:18px; }
  .brand-intro::after { right:18px; }
  .brand-intro .brand-logo { font-size:15vw; }
  .brand-intro .brand-logo i { width:34px; margin-inline:9px; height:6px; }
  .hero-brand-stamp { top:112px; grid-template-columns:42px auto; }
  .hero-brand-stamp img { width:42px; height:42px; }
  .hero-brand-stamp span { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .brand-intro { display:none; }
}