:root{
  --bg:#0e0f13;
  --fg:#d6d7de;
  --dim:#7c7f8c;
  --accent:#8be9a0;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  line-height:1.6;
  padding:3rem 1.25rem 4rem;
  max-width:640px;
  margin:0 auto;
  min-height:100vh;
}
header{margin-bottom:3rem}
h1{
  font-size:clamp(2.2rem,7vw,3.4rem);
  margin:0 0 .4rem;
  letter-spacing:-.03em;
  font-weight:600;
}
.tag{color:var(--dim);margin:0;max-width:38ch}
h2{
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--accent);
  margin:2.5rem 0 .8rem;
  font-weight:500;
}
p{margin:.5rem 0}
section p{max-width:52ch}
ul{list-style:none;padding:0;margin:0}
.projects li{margin:.6rem 0;padding-left:1rem;border-left:2px solid #22242c;color:var(--dim)}
.projects .name{color:var(--fg);font-weight:600}
.soon{color:var(--dim);font-style:italic;font-size:.9rem}
.links li{margin:.35rem 0}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
a:hover{border-color:var(--accent)}
footer{margin-top:4rem;padding-top:1.5rem;border-top:1px solid #1b1d24;color:var(--dim);font-size:.8rem}

/* status dot */
.status{display:flex;align-items:center;gap:.5rem;color:var(--dim);font-size:.85rem;margin-top:.6rem}
.dot{width:.55rem;height:.55rem;border-radius:50%;background:#444;display:inline-block;box-shadow:0 0 0 0 transparent}
.dot.on{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.dot.off{background:#3a3c46}

/* recent list */
.recent li{margin:.5rem 0;padding-left:1rem;border-left:2px solid #22242c;display:flex;flex-direction:column}
.recent a{font-weight:600}
.recent .note{color:var(--dim);font-size:.85rem}
.recent li[data-when="new"]::before{content:"new";font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:.15rem}
.recent li[data-when="updated"]::before{content:"updated";font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:#e9c46a;margin-bottom:.15rem}

/* featured grid */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media(max-width:520px){.grid{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;gap:.3rem;padding:.9rem 1rem;border:1px solid #22242c;border-radius:8px;background:#12141a;border-bottom:1px solid #22242c!important}
.card:hover{border-color:var(--accent)!important;background:#14171f}
.card-name{color:var(--fg);font-weight:600}
.card-desc{color:var(--dim);font-size:.82rem;line-height:1.5}
.dim{color:var(--dim)}