* { box-sizing: border-box; }
body { margin: 0; color: var(--text); font: 400 18px/1.45 var(--display); }
h1, p { margin: 0; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.gate-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.gate { position: relative; display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 28px var(--gutter); overflow: hidden; }
.gate::after { content: ''; position: absolute; left: 0; right: 0; height: 10px; background: var(--hazard); }
.gate::after { bottom: 0; }

.gate-panel { position: relative; z-index: 2; width: min(100%, clamp(320px, 46vw, 860px)); }
.gate-scene, .gate-shade { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gate-scene { z-index: 0; opacity: 0; transition: opacity .9s ease-out; }
.gate-shade { z-index: 1; display: none; background: linear-gradient(90deg, var(--void) 0 22%, rgba(7, 7, 6, .7) 42%, transparent 64%); }
.gate.has-3d .gate-scene { opacity: 1; }
.gate.has-3d .gate-shade { display: block; }
.gate.has-3d .gate-panel::before { display: none; }
/* Wide screens: the text on the left, the record on the right. */
@media (min-aspect-ratio: 23/20) {
  .gate { justify-items: start; padding-left: clamp(24px, 7vw, 180px); }
}
/* Tall screens: the record on top, the text below it; the page scrolls if the text needs room. */
@media (max-aspect-ratio: 23/20) {
  .gate-shade { background: linear-gradient(180deg, transparent 0 34%, rgba(7, 7, 6, .85) 52%, var(--void) 68%); }
  .gate.has-3d { align-items: end; padding-top: clamp(180px, 40vh, 520px); }
  .gate-panel { width: min(100%, 680px); }
  .gate .gate-login { max-width: 480px; }
  .gate .gate-slogan { font-size: clamp(34px, min(13vw, 11vh), 110px); }
}
@media (prefers-reduced-motion: reduce) {
  .gate-scene { transition: none; }
}
.gate-panel::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 62%;
  width: 720px;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-30%, -50%);
  background: radial-gradient(circle, var(--void) 0 2%, #26251a 2.2% 16%, transparent 16.2%), repeating-radial-gradient(circle, #000 0 2px, #1d1c14 2px 4px);
  opacity: .55;
}

.gate-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(14px, 3vh, 40px); }
.gate .mark-logo { height: clamp(24px, 14px + 1.6vw, 44px); }
.gate-lang select { min-height: 44px; padding: 0 8px; font-size: clamp(14px, .8rem + .25vw, 18px); background: var(--panel); border: 1px solid var(--yellow); border-radius: 0; color: var(--yellow); font: 400 15px var(--data); }
.gate-kicker { color: var(--yellow); font: 400 clamp(13px, .7rem + .35vw, 20px)/1.3 var(--data); text-transform: uppercase; }
.gate-kicker::before { content: '// '; }
.gate-slogan { margin-top: 8px; color: var(--yellow); font: 700 clamp(34px, min(7.4vw, 13vh), 150px)/.95 var(--display); text-transform: uppercase; overflow-wrap: break-word; }
.gate-intro { max-width: 46ch; margin-top: clamp(10px, 2vh, 24px); color: var(--muted); font-size: clamp(16px, .85rem + .5vw, 26px); }
.gate-problem { margin-top: 16px; color: var(--alert); font: 400 16px var(--data); }
.gate-problem[hidden] { display: none; }

.gate-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: clamp(280px, 32vw, 580px);
  min-height: clamp(52px, 28px + 3vw, 80px);
  margin-top: clamp(14px, 3vh, 36px);
  padding: 0 clamp(16px, 2vw, 32px);
  background: var(--yellow);
  color: var(--on-yellow);
  font: 700 clamp(16px, .8rem + .55vw, 26px) var(--display);
  letter-spacing: .03em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.gate-login:hover, .gate-login:focus-visible { background: #fff; }
.gate-privacy { max-width: 52ch; margin-top: clamp(10px, 2vh, 20px); color: var(--muted); font: 400 clamp(13px, .7rem + .25vw, 17px)/1.4 var(--data); }

/* Phones on their side: little height, so everything tightens up. */
@media (max-height: 520px) and (min-aspect-ratio: 23/20) {
  .gate { padding-top: 22px; padding-bottom: 22px; }
  .gate .gate-top { margin-bottom: 10px; }
  .gate .gate-slogan { font-size: clamp(32px, 14vh, 64px); }
  .gate .gate-intro { margin-top: 8px; font-size: 15px; }
  .gate .gate-login { min-height: 48px; margin-top: 12px; }
  .gate .gate-privacy { margin-top: 8px; font-size: 12px; }
}