@font-face{font-family:"BarlowC";src:url(/assets/barlow-condensed-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"BarlowC";src:url(/assets/barlow-condensed-500.woff2) format("woff2");font-weight:500;font-display:swap}
:root{--red:#e1060f;--red-d:#9c0309;--fg:#f4f4f4;--mute:#8a8a8a;--line:rgba(225,6,15,.55)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#000;color:var(--fg);font-family:"BarlowC","Bahnschrift","DIN Condensed","Arial Narrow","Roboto Condensed",system-ui,sans-serif;font-stretch:condensed;overflow:hidden;min-height:100svh;display:grid;place-items:center;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;background:radial-gradient(60% 50% at 50% 45%,rgba(225,6,15,.16),transparent 70%),radial-gradient(120% 90% at 50% 50%,transparent 55%,#000 100%);pointer-events:none;z-index:1}
.grid{position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(rgba(225,6,15,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(225,6,15,.10) 1px,transparent 1px);background-size:32px 32px,32px 32px,160px 160px,160px 160px;background-position:center center;z-index:0}
.frame{position:fixed;inset:clamp(12px,2.5vw,32px);z-index:2;pointer-events:none}
.c{position:absolute;width:clamp(22px,4vw,48px);height:clamp(22px,4vw,48px);border:0 solid var(--red)}
.tl{top:0;left:0;border-top-width:2px;border-left-width:2px}
.tr{top:0;right:0;border-top-width:2px;border-right-width:2px}
.bl{bottom:0;left:0;border-bottom-width:2px;border-left-width:2px}
.br{bottom:0;right:0;border-bottom-width:2px;border-right-width:2px}
.rail{position:fixed;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent);z-index:2}
.rail.top{top:clamp(52px,9vh,88px)}
.rail.bottom{bottom:clamp(52px,9vh,88px)}
.core{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px;animation:in .9s cubic-bezier(.2,.7,.2,1) both}
.emblem{width:clamp(88px,11vw,140px);height:auto;filter:drop-shadow(0 0 18px rgba(225,6,15,.45));margin-bottom:clamp(18px,3vh,30px)}
.brand{font-weight:700;text-transform:uppercase;font-size:clamp(46px,10.5vw,148px);line-height:.9;letter-spacing:.08em;margin-right:-.08em;color:var(--fg)}
.rule{position:relative;width:min(560px,78vw);height:2px;background:var(--red);margin:clamp(16px,2.6vh,26px) 0 clamp(12px,2vh,18px)}
.rule::before,.rule::after{content:"";position:absolute;top:-5px;width:2px;height:12px;background:var(--red)}
.rule::before{left:0}.rule::after{right:0}
.rule span{position:absolute;left:50%;top:-4px;width:10px;height:10px;background:#000;border:2px solid var(--red);transform:translateX(-50%) rotate(45deg)}
.tag{font-weight:500;text-transform:uppercase;letter-spacing:.42em;margin-right:-.42em;font-size:clamp(13px,1.35vw,17px);color:var(--mute)}
.actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;margin-top:clamp(30px,5vh,48px)}
.btn{display:inline-flex;align-items:center;gap:.7em;margin-top:0;padding:.85em 2.1em .85em 2.3em;font-weight:700;font-size:clamp(17px,1.6vw,21px);text-transform:uppercase;letter-spacing:.24em;color:#fff;text-decoration:none;background:var(--red);border:1px solid var(--red);clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);transition:background .18s,color .18s,box-shadow .18s}
.btn svg{width:1.05em;height:1.05em;transition:transform .18s}
.btn:hover,.btn:focus-visible{background:#000;color:var(--red);outline:none;box-shadow:inset 0 0 0 2px var(--red)}
.btn.ghost{background:transparent;color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.btn.ghost:hover,.btn.ghost:focus-visible{background:var(--red);color:#fff;box-shadow:none}
.btn:hover svg,.btn:focus-visible svg{transform:translateX(4px)}
.btn:focus-visible{outline:2px solid #fff;outline-offset:4px}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.core{animation:none}.btn,.btn svg{transition:none}}
@media (max-width:520px){.brand{font-size:clamp(40px,14.5vw,76px);letter-spacing:.05em;margin-right:-.05em}.tag{letter-spacing:.3em;margin-right:-.3em}}
@media (max-height:480px){.rail{display:none}.emblem{width:72px;margin-bottom:12px}.actions{margin-top:20px}}
