:root {
  --white: #fff;
  --black: #0b0d0c;
  --acid: #dfff42;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--black); }
body { font-family: Arial, Helvetica, sans-serif; }

.landing-shell { position: relative; width: 100%; min-height: max(100svh, 33.334vw); overflow: hidden; background: #0a296c; }
.landing-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.landing-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.25), transparent 22%, transparent 70%, rgba(0,0,0,.35)); }

.landing-header { position: relative; z-index: 10; display: flex; align-items: flex-start; justify-content: flex-end; padding: clamp(22px, 3vw, 46px); }
.a-mark { position: absolute; z-index: 4; left: 50%; bottom: clamp(22px, 3vw, 42px); display: block; width: clamp(34px, 3vw, 47px); color: var(--white); transform: translateX(-50%); }
.a-mark svg { display: block; width: 100%; height: auto; fill: currentColor; }

.menu-toggle { position: relative; z-index: 20; width: 42px; height: 32px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; padding: 0; border: 0; color: white; background: transparent; cursor: pointer; transition: color .3s; }
.menu-toggle:hover { color: var(--acid); }
.menu-toggle span { width: 19px; height: 1px; background: currentColor; transition: transform .35s, opacity .25s; }
.menu-toggle span:nth-child(2) { width: 26px; }
.menu-toggle[aria-expanded="true"] { color: white; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.landing-meta { position: absolute; z-index: 3; left: clamp(22px, 3vw, 46px); right: clamp(22px, 3vw, 46px); bottom: clamp(24px, 3vw, 46px); display: flex; align-items: flex-end; justify-content: space-between; color: white; }
.landing-meta p { margin: 0; font-size: clamp(10px, .82vw, 13px); line-height: 1.45; letter-spacing: .08em; text-transform: uppercase; }
.landing-meta a { display: flex; gap: 24px; margin-left: auto; padding-bottom: 6px; border-bottom: 1px solid white; color: inherit; font-size: clamp(10px, .82vw, 13px); font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }

.landing-menu { position: absolute; z-index: 8; inset: 0; display: flex; justify-content: flex-end; visibility: hidden; background: rgba(5,7,6,0); transition: visibility 0s linear .55s, background .55s ease; }
.landing-menu.is-open { visibility: visible; background: rgba(5,7,6,.55); transition-delay: 0s; }
.menu-panel { width: min(620px, 100%); height: 100%; padding: clamp(110px, 13vh, 170px) clamp(30px, 5vw, 78px) 36px; display: flex; flex-direction: column; color: white; background: var(--black); transform: translateX(100%); transition: transform .55s cubic-bezier(.76,0,.24,1); }
.landing-menu.is-open .menu-panel { transform: translateX(0); }
.menu-label { margin: 0 0 45px; font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #929793; }
.menu-primary { display: grid; grid-template-columns: 42px 1fr auto; align-items: baseline; padding: 24px 0 30px; border-top: 1px solid #5d625f; border-bottom: 1px solid #5d625f; color: white; text-decoration: none; }
.menu-number { grid-row: 1 / span 2; align-self: start; padding-top: 12px; font-size: 9px; letter-spacing: .13em; color: #929793; }
.menu-word { display: inline-block; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: clamp(54px, 7vw, 94px); line-height: .86; font-weight: 500; letter-spacing: -.095em; white-space: nowrap; transform: scaleX(.96); transform-origin: left center; }
.menu-primary small { grid-column: 2; margin-top: 16px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #a8adaa; }
.menu-primary b { grid-column: 3; grid-row: 1 / span 2; font-size: 24px; font-weight: 400; transition: transform .25s; }
.menu-primary:hover b { transform: translateX(5px); }
.menu-footer { margin-top: auto; display: flex; justify-content: flex-end; gap: 20px; padding-top: 22px; border-top: 1px solid #393d3b; font-size: 8px; letter-spacing: .13em; text-transform: uppercase; color: #8b918d; }

body.menu-open { overflow: hidden; }

@media (max-width: 650px) {
  .landing-art { object-position: 50% 50%; }
  .landing-meta { align-items: flex-start; flex-direction: column; gap: 20px; }
  .menu-toggle { width: 38px; height: 30px; }
  .menu-panel { padding-top: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-toggle, .menu-toggle span, .landing-menu, .menu-panel, .menu-primary b { transition: none; }
}

.landing-wordmark {
  position: absolute;
  z-index: 2;
  top: max(calc(clamp(22px, 3vw, 46px) + 36px), 8svh);
  left: 50%;
  transform: translateX(-50%);
  width: 96vw;
  height: 9.735vw;
  margin: 0;
  padding: 0;
  line-height: 0;
  overflow: hidden;
  pointer-events: none;
}
.landing-wordmark svg { display: block; width: 100%; height: 100%; overflow: hidden; }