/* Theme: glossy dark gunmetal, circa 2010.
   Palette: near-black + gunmetal grey + glossy blue accent + crimson secondary + whites. */
:root{
  --bg:#0c0c0e; --panel:#141519; --panel-2:#1b1c21; --line:#2b2d33;
  --ink:#d2d5da; --muted:#888d95; --white:#f3f4f6;
  --blue:#3f8ae0; --blue-dk:#271fc4; --red:#1a7bbb; --red-dk:#124c72;
  --steel-hi:#60656c; --steel-lo:#26282c;
}
*{box-sizing:border-box;}
html{background:var(--bg);}
body{
  margin:0; padding:26px 12px 56px; color:var(--ink);
  font:14px/1.65 Georgia,"Times New Roman",serif;
  background:
    radial-gradient(1200px 500px at 50% -120px,#1a1c22 0%,rgba(12,12,14,0) 70%),
    radial-gradient(1px 1px at 20% 30%,#3a3c44,transparent),
    radial-gradient(1px 1px at 70% 60%,#303138,transparent),
    radial-gradient(1px 1px at 40% 80%,#34363e,transparent),
    radial-gradient(1px 1px at 85% 20%,#2c2e35,transparent),
    var(--bg);
  background-attachment:fixed;
}
.page{
  max-width:740px; margin:0 auto; background:var(--panel);
  border:1px solid #000; border-radius:10px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.03),0 18px 50px rgba(0,0,0,.6);
}

/* glossy gunmetal bar */
.masthead{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:11px 16px;
  background:linear-gradient(var(--steel-hi),#3a3d42 48%,var(--steel-lo));
  border-bottom:1px solid #0a0a0c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.logo{
  font:bold 20px/1 Verdana,"Arial Narrow",Arial,sans-serif;
  letter-spacing:1px; text-transform:uppercase;
  color:var(--white); text-decoration:none; text-shadow:0 1px 1px rgba(0,0,0,.6);
}
.logo:visited{color:var(--white);}
.mast-nav{display:flex; flex-wrap:wrap; margin-left:8px; font:12px/1 Verdana,Tahoma,sans-serif;}
.mast-nav a{
  color:#c9cdd3; text-decoration:none; padding:4px 12px;
  border-left:1px solid rgba(255,255,255,.10); text-shadow:0 1px 1px rgba(0,0,0,.5);
}
.mast-nav a:first-child{border-left:none;}
.mast-nav a:hover{color:#fff;}
.mast-nav a[aria-current="page"]{color:#fff; font-weight:bold;}
.spacer{flex:1;}
.btn-blue{
  font:bold 12px/1 Verdana,Tahoma,sans-serif; color:#fff; text-decoration:none;
  padding:6px 14px; border-radius:5px;
  background:linear-gradient(var(--blue),var(--blue-dk));
  border:1px solid #14478f; box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
  text-shadow:0 -1px 0 rgba(0,0,0,.35);
}
.btn-blue:visited{color:#fff;}
.btn-blue:hover{background:linear-gradient(#4f97e8,#2a72d0);}

/* cinematic hero band */
.hero{
  padding:30px 20px 28px; border-bottom:1px solid #000;
  background:
    radial-gradient(420px 200px at 80% 130%,rgba(18, 76, 114),rgba(160,14,14,0) 70%),
    radial-gradient(1px 1px at 15% 40%,#44464e,transparent),
    radial-gradient(1px 1px at 60% 25%,#3a3c44,transparent),
    radial-gradient(1px 1px at 88% 65%,#303138,transparent),
    linear-gradient(#0d0d10,#0a0a0c);
}
.hero h1{margin:0; font:bold 24px/1.2 Verdana,Arial,sans-serif; color:var(--white); letter-spacing:.4px;}
.hero p{margin:7px 0 0; color:#b9bdc4; font:italic 13px/1.4 Georgia,serif;}
.hero .rule{margin-top:14px; width:64px; height:3px; background:linear-gradient(90deg,var(--red),var(--red-dk));}

.content{padding:18px 20px 0;}

.coming-soon{padding:40px 0 56px; text-align:center; color:#b9bdc4;}
.coming-soon-title{margin:0 0 8px; font:bold 20px/1.2 Verdana,Arial,sans-serif; color:var(--white); letter-spacing:.4px;}
a{color:var(--blue); text-decoration:none;}
a:visited{color:#7fa8d8;}
a:hover{text-decoration:underline;}
a:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}

h2{
  font:bold 15px/1.3 Verdana,Tahoma,sans-serif; color:var(--white);
  margin:26px 0 12px; padding:0 0 6px 12px; position:relative;
  border-bottom:1px solid var(--line); text-transform:uppercase; letter-spacing:.5px;
}
h2::before{content:""; position:absolute; left:0; top:1px; width:4px; height:13px; background:var(--red);}
h2:first-child{margin-top:6px;}
p{margin:0 0 14px;}
hr{border:none; border-top:1px solid var(--line); margin:24px 0;}

.post{margin:0 0 28px;}
.post h3{margin:0; font:bold 15px/1.3 Verdana,Tahoma,sans-serif;}
.post h3 a{color:var(--white);}
.post h3 a:hover{color:var(--blue); text-decoration:none;}
.meta{font:italic 11px/1.4 Georgia,serif; color:var(--muted); margin:2px 0 9px;}

.project{margin:0 0 18px;}
.project .name{font:bold 14px/1.3 Verdana,Tahoma,sans-serif;}
.project .name a{color:var(--white);}
.project .name a:hover{color:var(--blue);}
.project .blurb{margin:2px 0 0;}
.project .stack{font:11px/1.4 "Courier New",monospace; color:var(--muted);}

code,pre{font-family:"Courier New",monospace; font-size:13px; background:var(--panel-2); color:#c7cbd0;}
pre{padding:10px 12px; border:1px solid var(--line); border-radius:5px; overflow-x:auto;}

.foot{
  margin-top:28px; padding:13px 20px 2px; border-top:1px solid var(--line);
  font:11px/1.5 Verdana,Tahoma,sans-serif; color:var(--muted);
}
.foot a{color:#9aa0a8;}

@media (max-width:480px){ .mast-nav a{padding:4px 9px;} .hero h1{font-size:20px;} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important;} }