:root{
  --bg:#0b2a3a; --bg2:#0f3a4d; --card:#134658; --line:#1f6076;
  --text:#eaf6f8; --muted:#a9c8d0; --gold:#f5c542; --gold2:#ffdc7a; --ink:#0b2a3a;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  font-family:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  font-size:1.0625rem; line-height:1.65; color:var(--text);
  background:var(--bg) linear-gradient(180deg,var(--bg2) 0,var(--bg) 340px) no-repeat;
}
main{flex:1; padding-top:1.5rem; padding-bottom:3rem}
.wrap{width:100%; max-width:46rem; margin:0 auto; padding:0 1rem}
a{color:var(--gold); text-underline-offset:3px}
a:hover{color:var(--gold2)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--gold2); outline-offset:3px; border-radius:6px}
h1,h2,h3{line-height:1.2; margin:1.6em 0 .5em}
h1{font-size:2rem; margin-top:.4em}
h2{font-size:1.35rem; color:var(--gold2)}
h3{font-size:1.25rem; margin-top:0}
p,ul{margin:.7em 0}
ul{padding-left:1.3rem}
li{margin:.4em 0}

.site-header{border-bottom:1px solid var(--line); background:rgba(11,42,58,.85)}
.bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:.7rem; padding-bottom:.7rem; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.25rem; color:var(--text); text-decoration:none}
.brand img{border-radius:10px}
nav a{margin-left:1.1rem; color:var(--muted); text-decoration:none; font-weight:700}
nav a:hover,nav a[aria-current]{color:var(--gold)}

.hero{padding:1.2rem 0 .4rem}
.hero.center{text-align:center; padding-top:2.5rem}
.lead{font-size:1.2rem; color:var(--muted)}
.big404{font-size:5rem; font-weight:800; color:var(--gold); margin:0; line-height:1}

.card{background:var(--card); border:1px solid var(--line); border-radius:22px; padding:1.4rem 1.3rem; box-shadow:0 8px 24px rgba(0,0,0,.25)}
.card>:first-child{margin-top:0}
.card>:last-child{margin-bottom:0}
.badge{display:inline-block; background:rgba(245,197,66,.14); color:var(--gold2); border:1.5px solid var(--gold); border-radius:999px; padding:.3rem .95rem; font-weight:800; font-size:.95rem}
.btn{display:inline-block; background:var(--gold); color:var(--ink); font-weight:800; text-decoration:none; padding:.7rem 1.4rem; border-radius:999px}
.btn:hover{background:var(--gold2); color:var(--ink)}
.links{list-style:none; padding:0}
.links li a{display:block; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:.8rem 1rem; text-decoration:none; font-weight:700}
.links li a:hover{border-color:var(--gold)}

.prose h1{margin-bottom:.2em}
.prose .meta{color:var(--muted); margin-top:0}
.prose{overflow-wrap:anywhere}

.site-footer{border-top:1px solid var(--line); background:rgba(0,0,0,.18); padding:1.2rem 0; color:var(--muted); font-size:.95rem}
.site-footer p{margin:.3em 0}
.site-footer strong{color:var(--text)}

@media (min-width:640px){
  body{font-size:1.125rem}
  h1{font-size:2.6rem}
  .card{padding:1.8rem}
}
@media (prefers-reduced-motion:no-preference){
  .btn,.links li a{transition:background .15s,border-color .15s}
}