:root{
  --green:#122619; --green2:#1b3524; --green3:#25452f;
  --gold:#d4af37; --gold-dim:#8f7420; --gold-pale:#e9dcbd;
  --paper:#e9dcbd; --red:#c0392b; --red-bright:#e74c3c;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
img{max-width:100%; height:auto;}
html,body{margin:0; padding:0;}
body{
  background:var(--green); color:var(--paper);
  font-family:Georgia,'Times New Roman',serif; min-height:100vh;
  background-image:radial-gradient(ellipse at 50% -5%, rgba(212,175,55,.08), transparent 55%);
}
.topline{height:5px; background:linear-gradient(90deg,var(--red),var(--red-bright),var(--red));}

/* sticky nav */
.nav{position:sticky; top:0; z-index:50; background:#0c1a11; border-bottom:1px solid var(--gold-dim);}
.nav-inner{max-width:640px; margin:0 auto; display:flex; overflow-x:auto; padding:0 8px;}
.nav-inner a{flex:0 0 auto; color:var(--paper); text-decoration:none; font-size:13px;
  letter-spacing:1px; text-transform:uppercase; padding:13px 12px; opacity:.85;}
.nav-inner a.active{color:var(--gold); opacity:1; box-shadow:inset 0 -2px 0 var(--gold);}
.nav-inner a.nav-join{color:#0c1a11; background:var(--gold); font-weight:bold; opacity:1;}

.wrap{max-width:640px; margin:0 auto; padding:0 16px 52px;}

header{padding:24px 0 4px; text-align:center;}
.flagframe{border:2px solid var(--gold); border-radius:5px; overflow:hidden; background:#0c1a11;
  box-shadow:0 6px 22px rgba(0,0,0,.55);}
.flagframe img{display:block; width:100%; height:auto;}
.portraitframe{border:2px solid var(--gold); border-radius:5px; overflow:hidden; background:#0c1a11;
  box-shadow:0 6px 22px rgba(0,0,0,.55); max-width:420px; margin:0 auto;}
.portraitframe img{display:block; width:100%; height:auto;}
.caption{font-size:11px; letter-spacing:2px; text-transform:uppercase; opacity:.55; margin:10px 0 0;}
h1{color:var(--gold); font-size:30px; letter-spacing:4px; margin:16px 0 4px; font-weight:normal;}
.motto{color:var(--gold); font-style:italic; font-size:15px; letter-spacing:1px; margin:10px 0 0;}
.tagline{font-size:17px; line-height:1.55; margin:14px 0 0;}
.hrule{border:0; border-top:3px double var(--gold); margin:20px 0 0;}

/* big CTA button */
a.discord-btn{display:block; text-align:center; background:var(--gold); color:#0c1a11;
  font-size:19px; font-weight:bold; letter-spacing:1px; text-decoration:none;
  padding:16px 20px; border-radius:6px; margin:22px 0;
  box-shadow:0 4px 18px rgba(212,175,55,.25);}
a.discord-btn:active{transform:translateY(1px);}
.btn-sub{display:block; text-align:center; border:1px solid var(--gold-dim); color:var(--gold);
  text-decoration:none; padding:12px 16px; border-radius:4px; font-size:15px; margin:14px 0;}

.section{margin:30px 0 0;}
.section-head{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.section-head::before,.section-head::after{content:""; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-dim));}
.section-head::after{background:linear-gradient(90deg,var(--gold-dim),transparent);}
.section-head h2{color:var(--gold); font-size:16px; letter-spacing:3px; text-transform:uppercase;
  margin:0; white-space:nowrap; font-weight:normal;}
.panel{margin:0 0 6px; padding:16px; border:1px solid var(--gold-dim); border-radius:4px;
  background:rgba(212,175,55,.05); font-size:15px; line-height:1.65;}
.panel p{margin:0 0 10px;} .panel p:last-child{margin-bottom:0;}
.panel strong{color:var(--gold); font-weight:normal;}
.panel .pull{font-style:italic; border-left:3px solid var(--gold); padding-left:12px; margin:12px 0;}
ul.plain{list-style:none; margin:0; padding:0;}
ul.plain li{margin:0 0 12px; line-height:1.65;}
ul.plain li:last-child{margin-bottom:0;}
.panel.welcome{text-align:center;}
.panel.welcome h2{font-size:22px;}

/* letter */
.letter{font-size:16px; line-height:1.7;}
.letter p{margin:0 0 14px;}
.sig{color:var(--gold); font-size:18px; margin-top:18px;}

/* rank + award cards */
.card{display:flex; gap:14px; align-items:center; background:var(--green2);
  border:1px solid var(--gold-dim); border-left:4px solid var(--gold); border-radius:4px;
  padding:13px 14px; margin:0 0 10px;}
.card img{flex:0 0 64px; width:64px; height:auto; border-radius:3px; background:#0c1a11;}
.card.medal img{flex:0 0 84px; width:84px;}
.card .t{flex:1;}
.card .t b{color:var(--gold); font-weight:normal; font-size:17px; display:block;}
.card .t span{font-size:13px; opacity:.7; font-style:italic; display:block; margin-top:2px;}
.card .n{color:var(--gold); font-size:13px; flex:0 0 auto; opacity:.75;}

/* gallery */
.gal{margin:0 0 18px;}
.gal img{width:100%; height:auto; display:block;}
.gal-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 18px;}
.gal-grid img{width:100%; height:auto; display:block; border:1px solid var(--gold-dim); border-radius:4px; background:#0c1a11;}
.note{font-size:13px; font-style:italic; opacity:.6; text-align:center; margin:18px 0 0;}

/* steps */
.step{display:flex; gap:14px; margin:0 0 12px; align-items:flex-start;}
.step .num{flex:0 0 34px; width:34px; height:34px; border-radius:50%; background:var(--gold);
  color:#0c1a11; font-weight:bold; display:flex; align-items:center; justify-content:center; font-size:17px;}
.step .t{flex:1; font-size:15px; line-height:1.6; padding-top:5px;}
.step .t b{color:var(--gold); font-weight:normal;}

footer{margin:40px 0 0; padding-top:18px; border-top:1px solid var(--gold-dim);
  text-align:center; font-size:13px; opacity:.65; line-height:1.8;}
footer a{color:var(--gold); text-decoration:none;}