:root { color-scheme: dark; --bone:#ece9db; --moss:#b4c77c; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
body { background:#07100b; color:var(--bone); font-family:"Segoe UI",Arial,sans-serif; }
.teaser { position:relative; min-height:100svh; overflow:hidden; isolation:isolate; background:#07100b url("assets/og-skogsblod.png") center/cover no-repeat; }
.teaser::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 50% 58%,transparent 0 25%,rgba(2,8,5,.12) 67%,rgba(2,8,5,.38)); }
.veil { position:absolute; inset:0; z-index:-1; opacity:.05; background:repeating-linear-gradient(112deg,transparent 0 5px,#fff 6px,transparent 7px 13px); }
header { display:flex; justify-content:flex-end; align-items:center; padding:clamp(1rem,3vw,2rem) clamp(1rem,3vw,2.5rem); }
.login-link { display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .78rem; border:1px solid rgba(236,233,219,.28); border-radius:2rem; color:rgba(236,233,219,.7); background:rgba(7,16,11,.28); backdrop-filter:blur(8px); text-decoration:none; font-size:.61rem; letter-spacing:.11em; text-transform:uppercase; transition:border-color .2s,color .2s,background .2s; }
.login-link:hover,.login-link:focus-visible { border-color:rgba(181,199,124,.7); color:var(--bone); background:rgba(7,16,11,.58); }
.lock { position:relative; width:8px; height:7px; border:1px solid currentColor; border-radius:1px; }
.lock::before { content:""; position:absolute; left:1px; top:-6px; width:4px; height:5px; border:1px solid currentColor; border-bottom:0; border-radius:4px 4px 0 0; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media(max-width:650px){ .teaser{background-position:58% center} }