:root {
  --black: #0a0908; --paper: #eee4cf; --paper-light: #fff5e5; --red: #c93625;
  --red-dark: #7b1c14; --blue: #3563e9; --acid: #e9f14a;
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --sans: "Arial Narrow", Arial, Helvetica, sans-serif;
  --mono: "Courier New", Courier, monospace; --serif: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--paper); background: var(--black); font-family: var(--sans); }
button, input { font: inherit; }
a { color: inherit; text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 50%; padding: .7rem 1rem; color: var(--black); background: var(--acid); transform: translate(-50%, -160%); }
.skip-link:focus { transform: translate(-50%, 0); }

.portal-shell { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(430px, .65fr); min-height: 100vh; min-height: 100svh; overflow: hidden; }
.visual-stage { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate; background: radial-gradient(circle at var(--mx, 25%) var(--my, 65%), rgba(201,54,37,.35), transparent 27%), repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 8vw), var(--black); }
.visual-stage::before { position: absolute; z-index: 10; inset: 0; opacity: .15; pointer-events: none; content: ""; background-image: radial-gradient(circle, #fff 0 .6px, transparent .8px), radial-gradient(circle, #f64c39 0 .5px, transparent .75px); background-position: 0 0, 3px 4px; background-size: 7px 7px, 11px 11px; mix-blend-mode: screen; }
.tape { position: absolute; z-index: 14; display: flex; justify-content: space-between; gap: 1rem; font: 700 .67rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.tape--top { top: 0; right: 0; left: 0; padding: .7rem 1.2rem; color: var(--black); background: var(--acid); }
.red-glow { position: absolute; z-index: -1; top: 8%; right: -18%; width: 72vw; height: 72vw; border-radius: 50%; opacity: .8; background: radial-gradient(circle, rgba(216,42,27,.75), rgba(120,15,10,.25) 42%, transparent 68%); filter: blur(18px); animation: safe-light 7s ease-in-out infinite alternate; }
.giant-type { position: absolute; z-index: 1; top: 7vh; left: 2.5vw; color: transparent; font-family: var(--display); font-size: clamp(8rem, 18vw, 20rem); letter-spacing: -.035em; line-height: .68; text-transform: uppercase; -webkit-text-stroke: 2px rgba(238,228,207,.42); transform: rotate(-3deg); }
.giant-type span { display: block; }
.negative { position: absolute; z-index: 5; margin: 0; padding: 28px 12px 22px; color: #e7c682; background: #030303; box-shadow: 0 28px 70px rgba(0,0,0,.55); }
.negative img { display: block; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.12) saturate(.75); }
.negative figcaption { display: flex; justify-content: space-between; padding-top: 6px; font: .58rem/1.2 var(--mono); letter-spacing: .08em; }
.negative--main { top: 31%; right: 6%; width: min(68vw, 790px); height: min(47vw, 530px); transform: translate3d(calc(var(--px, 0px) * -.25), calc(var(--py, 0px) * -.25), 0) rotate(-2.4deg); }
.negative--float { z-index: 7; bottom: 5%; left: 5%; width: min(31vw, 390px); transform: translate3d(var(--px, 0), var(--py, 0), 0) rotate(5deg); }
.focus-ring { position: absolute; z-index: 8; top: 11%; right: 8%; display: grid; width: clamp(120px,15vw,220px); aspect-ratio: 1; place-items: center; border: 1px solid rgba(238,228,207,.75); border-radius: 50%; color: var(--acid); background: repeating-conic-gradient(from 0deg, rgba(238,228,207,.75) 0 1deg, transparent 1deg 14deg), radial-gradient(circle, transparent 55%, rgba(10,9,8,.96) 56%); font: clamp(2rem,4vw,4.4rem)/1 var(--display); animation: rotate 28s linear infinite; }
.focus-ring span { animation: rotate-back 28s linear infinite; }
.registration { position: absolute; z-index: 15; color: var(--blue); font: 2.5rem/1 var(--mono); }
.registration--one { top: 9%; left: 3%; }
.registration--two { right: 2%; bottom: 7%; }
.stage-copy { position: absolute; z-index: 12; top: 39%; left: 2.6vw; margin: 0; color: var(--acid); font: 700 clamp(.65rem,1vw,.82rem)/1.75 var(--mono); letter-spacing: .06em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
.ticker { position: absolute; z-index: 20; right: 0; bottom: 0; left: 0; overflow: hidden; padding: .65rem 0; color: var(--paper-light); background: var(--red); font: 700 .7rem/1.2 var(--mono); letter-spacing: .08em; white-space: nowrap; }
.ticker div { width: max-content; animation: ticker 18s linear infinite; }

.login-panel { position: relative; z-index: 30; display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; min-height: 100svh; padding: clamp(1.3rem,3vw,3rem); color: var(--black); background-color: var(--paper); background-image: radial-gradient(circle at 20% 30%, rgba(20,17,10,.06) 0 .7px, transparent .9px), linear-gradient(105deg, rgba(255,255,255,.2), transparent 40%, rgba(80,54,24,.04)); background-size: 8px 8px, 100% 100%; box-shadow: -18px 0 50px rgba(0,0,0,.45); }
.panel-header, .panel-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font: 700 .65rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.panel-header { padding-bottom: 1.2rem; border-bottom: 2px solid var(--black); }
.wordmark { font: clamp(1.55rem,2.7vw,2.5rem)/1 var(--display); letter-spacing: .025em; text-decoration: none; }
.edition, .eyebrow { color: var(--red); }
.login-card { align-self: center; width: min(100%,490px); margin: 3rem auto; }
.eyebrow { margin: 0 0 1.3rem; font: 700 .7rem/1.2 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.login-card h1 { margin: 0; font: clamp(4rem,7vw,7.5rem)/.75 var(--display); letter-spacing: -.025em; text-transform: uppercase; }
.login-card h1 em { color: var(--red); font-family: var(--serif); font-size: .7em; font-weight: 400; text-transform: lowercase; }
.intro { max-width: 40ch; margin: 2rem 0 2.5rem; font: italic 1rem/1.5 var(--serif); }
.field { position: relative; margin-bottom: 1.5rem; border-bottom: 2px solid var(--black); }
.field label { display: block; margin-bottom: .15rem; font: 700 .63rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.field input[type="email"], .field input[type="password"], .field input[type="text"] { width: 100%; padding: .7rem 3.8rem .75rem 0; border: 0; outline: none; color: var(--black); background: transparent; font: 1.2rem/1.2 var(--serif); }
.field:focus-within { border-color: var(--blue); }
.field-number { position: absolute; right: 0; bottom: .8rem; color: var(--red); font: .65rem/1 var(--mono); }
.password-wrap { position: relative; }
.show-password { position: absolute; right: 1.7rem; bottom: .78rem; padding: 0; border: 0; color: var(--black); background: transparent; font: 700 .65rem/1.2 var(--mono); text-decoration: underline; text-transform: uppercase; cursor: pointer; }
.form-options { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .5rem 0 1.8rem; font: .64rem/1.2 var(--mono); text-transform: uppercase; }
.check-label { display: inline-flex; align-items: center; gap: .4rem; }
.check-label input { width: 15px; height: 15px; accent-color: var(--red); }
.sign-in { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 62px; padding: .9rem 1.2rem; border: 2px solid var(--red); color: var(--paper-light); background: var(--red); font: 700 .78rem/1.2 var(--mono); letter-spacing: .09em; text-transform: uppercase; cursor: pointer; transition: color 160ms ease, background 160ms ease, transform 160ms ease; }
.sign-in:hover { color: var(--black); background: transparent; transform: translateY(-2px); }
.sign-in:disabled { cursor: wait; opacity: .65; transform: none; }
.form-status { min-height: 1.4em; margin: .85rem 0 0; color: var(--red-dark); font: 700 .7rem/1.4 var(--mono); }
.enrollment { margin: 1.5rem 0 0; font: .67rem/1.3 var(--mono); text-transform: uppercase; }
.panel-footer { padding-top: 1rem; border-top: 1px solid rgba(10,9,8,.35); color: #5d5549; }
.status-light { display: inline-flex; align-items: center; gap: .35rem; }
.status-light i { width: 7px; height: 7px; border-radius: 50%; background: #2d8f48; box-shadow: 0 0 8px rgba(45,143,72,.55); }

@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes rotate-back { to { transform: rotate(-360deg); } }
@keyframes safe-light { from { opacity: .55; transform: scale(.95); } to { opacity: .95; transform: scale(1.06); } }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (max-width: 1050px) { .portal-shell { grid-template-columns: 1fr 430px; } .negative--main { right: -8%; width: 67vw; } .negative--float { width: 34vw; } }
@media (max-width: 820px) { .portal-shell { display: block; overflow: visible; } .visual-stage { min-height: 62vh; min-height: 62svh; } .login-panel { min-height: auto; } .negative--main { top: 25%; right: 4%; width: 73vw; height: 42vw; } .negative--float { width: 37vw; } .giant-type { top: 9vh; font-size: 25vw; } .focus-ring { top: 12%; } }
@media (max-width: 520px) { .visual-stage { min-height: 54vh; min-height: 54svh; } .tape--top span:nth-child(2), .stage-copy { display: none; } .negative--main { top: 30%; right: -8%; width: 92vw; height: 53vw; } .negative--float { bottom: 6%; left: -4%; width: 47vw; } .focus-ring { top: 13%; right: 4%; width: 100px; } .login-panel { padding: 1.2rem; } .panel-header .edition { display: none; } .login-card { margin: 3.5rem auto; } .login-card h1 { font-size: clamp(3.7rem,18vw,5.4rem); } .panel-footer { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }