/* AS HIGH AS HONOR — winter theme: frozen pixel realm */
:root{
  --bg:#06111d; --bg-panel:#0b1f33; --bg-panel-2:#112c47;
  --line:#2b5276; --line-bright:#6fb0e0;
  --blue:#3f95d8; --blue-bright:#c4e8ff;
  --parchment:#f2f9ff; --gold:#e6f6ff;
  --text:#dcebf8; --muted:#8fb2cf;
  --glow:rgba(150,220,255,.6); --pixel:8px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; color:var(--text); font-family:'VT323',monospace; font-size:19px; line-height:1.65;
  background:
    radial-gradient(ellipse 70% 40% at 20% -5%, rgba(110,200,255,.20), transparent 60%),
    radial-gradient(ellipse 60% 35% at 85% 0%, rgba(150,170,255,.14), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 2px, transparent 2px 4px),
    linear-gradient(180deg,#06111d 0%,#0a1c30 100%);
  background-attachment:fixed;
}
/* snow-covered ground along the bottom of the screen */
body::after{content:""; position:fixed; left:0; right:0; bottom:0; height:80px; pointer-events:none; z-index:40;
  background:linear-gradient(0deg, rgba(236,248,255,.30), rgba(236,248,255,.08) 55%, transparent);}
h1,h2,h3,.pixel-font{font-family:'Press Start 2P',monospace; letter-spacing:.02em; line-height:1.5;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
::selection{background:var(--blue); color:#fff;}
:focus-visible{outline:2px solid var(--blue-bright); outline-offset:3px;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
.muted{color:var(--muted);}
.lead{max-width:56ch; font-size:1.15rem; margin-top:14px;}
.lead2{color:var(--muted); max-width:56ch; font-size:1.2rem; margin-top:22px;}
.aka{margin-top:18px; font-size:1rem;}
.page-title{font-size:clamp(1.4rem,3.5vw,2.1rem); color:var(--parchment); text-shadow:0 0 18px rgba(150,220,255,.35);}
.hero-title{font-size:clamp(1.6rem,4vw,2.5rem); color:var(--parchment); text-shadow:0 0 22px rgba(150,220,255,.45);}
.link{color:var(--blue-bright); border-bottom:1px solid var(--blue-bright);}
.link:hover{text-shadow:0 0 10px var(--glow);}
.handle{font-family:'VT323',monospace; font-size:1rem; color:var(--muted);}

/* pixel-cut frosted card */
.pixel-card{
  --p:var(--pixel); position:relative;
  background:linear-gradient(180deg, rgba(20,48,76,.78), rgba(11,31,51,.88));
  border:3px solid var(--line);
  clip-path:polygon(0 var(--p),var(--p) var(--p),var(--p) 0,calc(100% - var(--p)) 0,calc(100% - var(--p)) var(--p),100% var(--p),100% calc(100% - var(--p)),calc(100% - var(--p)) calc(100% - var(--p)),calc(100% - var(--p)) 100%,var(--p) 100%,var(--p) calc(100% - var(--p)),0 calc(100% - var(--p)));
  transition:border-color .2s, box-shadow .25s, background .25s;
}
/* snow cap on every card */
.pixel-card::before{content:""; position:absolute; top:0; left:var(--p); right:var(--p); height:5px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.85) 15%, rgba(255,255,255,.95) 50%, rgba(255,255,255,.85) 85%, transparent);}
.pixel-card:hover{border-color:var(--blue-bright); box-shadow:inset 0 0 34px rgba(150,220,255,.28), inset 0 0 6px rgba(200,240,255,.5); background:linear-gradient(180deg, rgba(28,64,99,.85), rgba(14,38,62,.92));}

.pixel-btn{
  --p:6px; display:inline-flex; align-items:center; gap:10px;
  font-family:'Press Start 2P',monospace; font-size:.68rem; padding:14px 20px;
  background:var(--blue); color:#fff; border:3px solid var(--blue-bright);
  clip-path:polygon(0 var(--p),var(--p) var(--p),var(--p) 0,calc(100% - var(--p)) 0,calc(100% - var(--p)) var(--p),100% var(--p),100% calc(100% - var(--p)),calc(100% - var(--p)) calc(100% - var(--p)),calc(100% - var(--p)) 100%,var(--p) 100%,var(--p) calc(100% - var(--p)),0 calc(100% - var(--p)));
  transition:transform .12s steps(2), background .2s, box-shadow .2s;
}
.pixel-btn:hover{background:var(--blue-bright); color:#06111d; transform:translateY(-2px); box-shadow:inset 0 0 18px rgba(255,255,255,.7);}
.pixel-btn.ghost{background:transparent; color:var(--text); border-color:var(--line);}
.pixel-btn.ghost:hover{border-color:var(--blue-bright); color:var(--blue-bright); background:rgba(150,220,255,.12); box-shadow:inset 0 0 20px rgba(150,220,255,.35);}

header{position:sticky; top:0; z-index:30; background:rgba(6,17,29,.9); backdrop-filter:blur(6px); border-bottom:3px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:1120px; margin:0 auto; gap:16px;}
.brand{display:flex; align-items:center; gap:12px; font-family:'Press Start 2P',monospace; font-size:.72rem; color:var(--parchment); flex-shrink:0;}
.brand img{height:36px; width:36px; border-radius:50%; border:2px solid var(--line-bright); transition:box-shadow .2s;}
.brand:hover img{box-shadow:0 0 16px var(--glow);}
.navlinks{display:flex; gap:22px; font-family:'Press Start 2P',monospace; font-size:.6rem; flex-wrap:wrap;}
.navlinks a{color:var(--muted); padding:6px 2px; border-bottom:2px solid transparent; transition:color .15s,border-color .15s,text-shadow .15s;}
.navlinks a:hover,.navlinks a.active{color:var(--blue-bright); border-color:var(--blue-bright); text-shadow:0 0 12px var(--glow);}
.nav-right{display:flex; gap:10px; align-items:center; flex-shrink:0;}
.nav-right .pixel-btn{padding:10px 14px; font-size:.6rem;}
@media (max-width:920px){.navlinks{order:3; width:100%; gap:14px; padding-top:10px; border-top:2px dashed var(--line);} .nav{flex-wrap:wrap;}}

section{padding:76px 0;}
section.top{padding-bottom:0;}
.eyebrow{font-family:'Press Start 2P',monospace; font-size:.62rem; color:var(--blue-bright); margin-bottom:16px;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:44px; padding-bottom:22px; border-bottom:3px solid var(--line);}
.section-head h2{font-size:1.35rem; color:var(--parchment);}
.section-head p{color:var(--muted); max-width:44ch; margin:0; font-size:1.15rem;}
.btn-row{display:flex; gap:16px; margin-top:32px; flex-wrap:wrap;}
.tag-row{display:flex; flex-wrap:wrap; gap:10px;}
.tag-row span{border:2px solid var(--line); padding:4px 12px; font-size:.95rem; color:var(--muted); transition:border-color .2s,color .2s,box-shadow .2s;}
.tag-row span:hover{border-color:var(--blue-bright); color:var(--blue-bright); box-shadow:0 0 14px var(--glow);}
.tag-row.skills{margin-top:14px;}
.tag-row.skills span{border-color:var(--line-bright); color:var(--blue-bright); font-size:.9rem; padding:2px 10px;}

/* home */
.hero{display:grid; grid-template-columns:1.2fr .8fr; gap:56px; align-items:center;}
.sigil{padding:28px;} .sigil img{border:2px solid var(--line);}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.tile{padding:26px; display:block;} .tile h3{font-size:.85rem; color:var(--parchment); margin:14px 0 10px;} .tile p{color:var(--muted); font-size:1rem; margin:0;}
.cta{padding:52px; display:grid; grid-template-columns:1.2fr 1fr; gap:36px; align-items:center;}
.cta h2{font-size:1.15rem; color:var(--parchment); margin-bottom:14px;}
@media (max-width:860px){.hero,.cta{grid-template-columns:1fr;} .grid4{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.grid4{grid-template-columns:1fr;}}

footer{padding:34px 0 110px; border-top:3px solid var(--line-bright); color:var(--muted); font-size:.95rem; background:linear-gradient(180deg, rgba(220,240,255,.10), transparent);}
.footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
.footer-motto{font-family:'Press Start 2P',monospace; font-size:.6rem; color:var(--blue-bright);}

.social-row{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap;}
.social-row a{width:38px; height:38px; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--muted); transition:border-color .15s,color .15s,transform .15s,box-shadow .2s;}
.social-row a:hover{border-color:var(--blue-bright); color:var(--blue-bright); transform:translateY(-2px); box-shadow:0 0 16px var(--glow);}
.social-row svg{width:16px; height:16px; fill:currentColor;}

.leader-card{display:grid; grid-template-columns:180px 1fr; gap:32px; align-items:center; padding:34px; margin-bottom:26px;}
.leader-photo,.member-card .avatar{border:3px solid var(--line-bright); overflow:hidden; background:var(--bg-panel-2); transition:box-shadow .25s;}
.leader-photo{width:180px; height:180px;}
.leader-photo img{width:100%; height:100%; object-fit:cover;}
.leader-photo:hover,.member-card .avatar:hover{box-shadow:0 0 22px var(--glow);}
.member-role{display:inline-block; font-family:'Press Start 2P',monospace; font-size:.58rem; color:#06111d; background:var(--blue-bright); padding:5px 10px; margin-bottom:12px;}
.member-name{font-size:1.05rem; color:var(--parchment);}
.member-desc{color:var(--muted); margin-top:10px; font-size:1.05rem; max-width:58ch;}
.roster{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.member-card{padding:28px;}
.member-card .avatar{position:relative; width:74px; height:74px; display:flex; align-items:center; justify-content:center; font-family:'Press Start 2P',monospace; font-size:1rem; color:var(--parchment); margin-bottom:16px;}
.member-card .avatar img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
@media (max-width:980px){.roster{grid-template-columns:1fr 1fr;}}
@media (max-width:760px){.leader-card{grid-template-columns:1fr; text-align:center;} .leader-photo{margin:0 auto;} .social-row,.tag-row{justify-content:center;} .roster{grid-template-columns:1fr; text-align:center;} .member-card .avatar{margin-left:auto; margin-right:auto;}}

.row-list{display:flex; flex-direction:column; gap:16px;}
.row-item{display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 26px; flex-wrap:wrap;}
.row-item .meta{font-size:.9rem; color:var(--muted);}
.row-item h3{font-size:.78rem; color:var(--parchment); margin:0 0 8px;}
.row-item p{margin:0; color:var(--muted); font-size:1.05rem; max-width:56ch;}
.row-item .right{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.pill{display:inline-block; font-family:'Press Start 2P',monospace; font-size:.55rem; padding:6px 10px; border:2px solid var(--line); color:var(--blue-bright); white-space:nowrap; transition:box-shadow .2s,border-color .2s;}
.pill:hover{border-color:var(--blue-bright); box-shadow:0 0 14px var(--glow);}
.placeholder-note{border:2px dashed var(--line); padding:20px 24px; color:var(--muted); font-size:1rem;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.cc{padding:36px;} .cc .pill{margin-bottom:16px;} .cc h2{font-size:1rem; color:var(--parchment); margin-bottom:14px;} .cc p{margin-bottom:22px;}
@media (max-width:760px){.grid2{grid-template-columns:1fr;}}

/* loader */
.htb-logo{width:22px; height:21px; display:inline-block; vertical-align:middle; margin-right:8px; filter:drop-shadow(0 0 6px #9fef00);}
.pixel-btn .htb-logo{margin:0;}
#loader{position:fixed; inset:0; z-index:9999; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; transition:opacity .5s steps(6),visibility .5s;}
#loader.hide{opacity:0; visibility:hidden; pointer-events:none;}
.loader-logo{width:64px; height:64px; border-radius:50%; border:3px solid var(--line-bright); animation:pulse 1.1s steps(4) infinite;}
@keyframes pulse{0%,100%{filter:brightness(1);}50%{filter:brightness(1.5) drop-shadow(0 0 10px #9be0ff);}}
.loader-text{font-family:'Press Start 2P',monospace; font-size:.7rem; color:var(--parchment); text-align:center; padding:0 20px;}
.loader-sub{font-size:1.1rem; color:var(--muted);}
.loader-bar-track{width:min(320px,70vw); height:18px; border:3px solid var(--line-bright); padding:3px; background:var(--bg-panel);}
.loader-bar-fill{height:100%; width:0%; background:repeating-linear-gradient(90deg,var(--blue) 0 8px,var(--blue-bright) 8px 16px);}
.loader-pct{font-family:'Press Start 2P',monospace; font-size:.6rem; color:var(--blue-bright);}
body.is-loading{overflow:hidden;}
#page-content{opacity:0; transition:opacity .4s ease;}
#page-content.show{opacity:1;}

/* snow + cursor light */
#snow{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:45;}
#cursor-glow{position:fixed; top:0; left:0; width:340px; height:340px; margin:-170px 0 0 -170px; pointer-events:none; z-index:44; opacity:0; transition:opacity .3s;
  background:radial-gradient(circle, rgba(150,220,255,.20), rgba(150,220,255,.07) 40%, transparent 68%); mix-blend-mode:screen;}
#cursor-glow.on{opacity:1;}
@media (prefers-reduced-motion:reduce){#snow{display:none;} .loader-logo{animation:none;}}