/* EONCORE staccato — mono, flat type scale, blue, no frills */

:root{
  --bg:#0b0e14;
  --fg:#d6e2f0;
  --dim:#6b7a90;
  --line:#1b2431;
  --card:#111722;
  --accent:#4c8dff;      /* eon blue */
  --accent-2:#7ab8ff;    /* light blue */
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.65;
  letter-spacing:-.01em;
  padding:0 20px;
  max-width:660px;
  margin:0 auto;
  overflow-wrap:break-word;
}

/* ---- everything one size; hierarchy by weight/color/case ---- */
h1,h2,h3,p,li,a,label,input,textarea,button,nav,.brand,.date,.go,.kv,.btn{
  font-family:var(--mono);
  font-size:15px;
  font-weight:400;
}

/* ---- header / nav ---- */
header{padding:24px 0 10px;border-bottom:1px solid var(--line)}
.brand{
  font-weight:700;
  letter-spacing:.14em;
  color:var(--fg);
  text-decoration:none;
}
.brand{display:inline-block}
.brand img{display:block;height:26px;width:auto}
.brand .inf-n{color:var(--fg);font-weight:700}
.brand .inf{
  color:var(--accent);
  font-weight:400;
  font-size:2.1em;
  line-height:0;
  vertical-align:-0.14em;
  margin-right:.04em;
}
.brand .cur{color:var(--accent);animation:blink 1.2s step-end infinite}
@keyframes blink{50%{opacity:0}}

nav{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:4px 14px;
}
nav a{color:var(--dim);text-decoration:none;padding:2px 0}
nav a:hover{color:var(--fg)}
nav a.active{color:var(--accent)}
nav a::before{content:"› ";color:var(--line)}

/* ---- content ---- */
main{padding:26px 0 8px}

h1{
  font-weight:700;
  letter-spacing:.02em;
  color:var(--fg);
  margin:0 0 6px;
}
h1 .sub{
  display:block;
  font-weight:400;
  color:var(--accent);
  margin-top:8px;
  letter-spacing:-.01em;
}
h2{
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  margin:32px 0 12px;
  padding-bottom:6px;
  border-bottom:1px solid var(--line);
}
h3{font-weight:700;color:var(--fg);margin:0 0 4px}
p{margin:0 0 14px;color:var(--fg)}
p.lead{color:var(--fg);font-weight:700}
p.lead::before{content:"> ";color:var(--accent)}
.dim{color:var(--dim)}
strong{color:var(--fg);font-weight:700}
a{color:var(--accent)}

ul{list-style:none;margin:0 0 16px}
li{padding:2px 0 2px 22px;position:relative;color:var(--fg)}
li::before{content:"—";position:absolute;left:0;color:var(--accent)}

/* ---- cards ---- */
.card{
  display:block;
  background:var(--card);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:8px;
  padding:15px 16px;
  margin:0 0 12px;
  text-decoration:none;
  color:var(--fg);
}
.card:hover{border-left-color:var(--accent-2)}
.card h3{color:var(--fg)}
.card p{color:var(--dim);margin:6px 0 0}
.card .go{color:var(--accent);margin-top:10px;display:inline-block}

/* ---- key/value strip ---- */
.kv{
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  margin:0 0 16px;
}
.kv div{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:9px 14px;
  border-bottom:1px solid var(--line);
}
.kv div:last-child{border-bottom:0}
.kv span:first-child{color:var(--dim)}
.kv span:last-child{color:var(--fg);text-align:right}

/* ---- buttons ---- */
.btns{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 8px}
.btn{
  text-decoration:none;
  font-weight:700;
  padding:11px 18px;
  border-radius:8px;
  border:1px solid var(--accent);
  color:var(--bg);
  background:var(--accent);
}
.btn.ghost{background:transparent;color:var(--accent);border-color:var(--line)}
.btn::before{content:"$ ";opacity:.55}

/* ---- blog list ---- */
.post{display:block;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none}
.post .date{color:var(--dim)}
.post h3{color:var(--fg);margin:4px 0 6px}
.post p{color:var(--dim);margin:0}

/* ---- form ---- */
form{margin:8px 0}
label{display:block;color:var(--dim);margin:14px 0 5px}
label::before{content:"# ";color:var(--line)}
input,textarea{
  width:100%;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--fg);
  padding:11px 12px;
}
input:focus,textarea:focus{outline:none;border-color:var(--accent)}
button[type=submit]{
  margin-top:16px;
  font-weight:700;
  padding:11px 22px;
  border:0;
  border-radius:8px;
  background:var(--accent);
  color:var(--bg);
}

/* ---- footer ---- */
footer{
  margin-top:40px;
  padding:20px 0 40px;
  border-top:1px solid var(--line);
  color:var(--dim);
}
footer a{color:var(--dim)}
footer .eu{margin-top:8px}