/* TechTutorZone — editorial dark theme */
:root{
  --bg:#0c0c0e;
  --bg-soft:#131316;
  --panel:#17171b;
  --border:#2b2a28;
  --border-soft:#221f1c;
  --muted:#9c948a;
  --text:#f3ede2;
  --accent:#e2a33d;
  --accent-ink:#1a1305;
  --accent-2:#c1543a;
  --max:1180px;
  --radius:3px;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
  --ease: cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:var(--sans);
  color:var(--text);
  background:
    radial-gradient(1100px 480px at 50% -180px, rgba(226,163,61,0.10), transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
.container{max-width:var(--max);margin:0 auto;padding:1.25rem 1.5rem}

/* header */
.site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(12,12,14,0.86);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border-soft);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1rem 1.5rem}
.brand{
  font-family:var(--serif);
  font-weight:700;
  font-style:italic;
  color:var(--text);
  font-size:1.35rem;
  text-decoration:none;
  letter-spacing:0.2px;
}
.brand::before{content:"§ ";color:var(--accent);font-style:normal}
.nav a{
  color:var(--muted);
  text-decoration:none;
  margin-left:1.5rem;
  padding:.2rem 0;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-bottom:1px solid transparent;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.nav a:hover{color:var(--accent);border-color:var(--accent)}
#nav-toggle{display:none;background:transparent;border:1px solid var(--border);color:var(--text);font-size:1rem;padding:.35rem .6rem;border-radius:var(--radius)}

/* Hero */
.hero{padding:4.5rem 0 3rem;border-bottom:1px solid var(--border-soft)}
.hero-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:3rem;align-items:center}
.hero-text h1{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(2.1rem,4.4vw,3.4rem);
  line-height:1.12;
  margin:.2rem 0;
  letter-spacing:-0.01em;
}
.subtitle{color:var(--muted);margin:1rem 0 1.75rem;max-width:52ch;font-size:1.05rem}
.btn{
  display:inline-block;
  background:var(--accent);
  color:var(--accent-ink);
  padding:.8rem 1.4rem;
  border-radius:var(--radius);
  text-decoration:none;
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.02em;
  transition:transform .18s var(--ease), background .18s var(--ease);
}
.btn:hover{transform:translateY(-2px);background:#eeb75c}

.hero-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--panel);
  padding:0;
  overflow:hidden;
}
.metric{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-soft)}
.metric:last-child{border-bottom:none}
.metric h3{
  font-family:var(--serif);
  color:var(--accent);
  font-size:1.9rem;
  margin:0 0 .15rem;
}
.metric p{margin:0;color:var(--muted);font-size:.88rem;text-transform:uppercase;letter-spacing:.06em}

/* Cards grid */
.latest{padding:3.5rem 0}
.latest h2{
  font-family:var(--serif);
  font-size:1.7rem;
  margin:0 0 1.5rem;
  padding-bottom:.9rem;
  border-bottom:1px solid var(--border);
}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.25rem}
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-top:2px solid var(--accent);
  padding:1.4rem;
  border-radius:var(--radius);
  transition:transform .18s var(--ease), border-color .18s var(--ease);
}
.card h3{margin:.1rem 0 .5rem;font-family:var(--serif);font-size:1.15rem;line-height:1.3}
.card a{color:var(--text);text-decoration:none}
.card a:hover h3{color:var(--accent)}
.card p{color:var(--muted);margin:.35rem 0;font-size:.95rem}
.card .meta{
  color:var(--accent-2);
  font-size:.76rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-top:.75rem;
}
.card:hover{transform:translateY(-4px);border-color:var(--accent)}

/* Features */
.features{padding:1rem 0 4rem}
.features h2{
  font-family:var(--serif);
  font-size:1.7rem;
  margin:0 0 1.5rem;
  padding-bottom:.9rem;
  border-bottom:1px solid var(--border);
}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem}
.feature{
  padding-left:1.1rem;
  border-left:2px solid var(--border);
}
.feature h4{
  font-family:var(--serif);
  margin:0 0 .4rem;
  font-size:1.05rem;
}
.feature p{color:var(--muted);margin:0;font-size:.92rem}

/* footer */
.site-footer{border-top:1px solid var(--border-soft);padding:1.75rem 0;margin-top:1rem;color:var(--muted);font-size:.88rem}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.footer-nav a{color:var(--muted);text-decoration:none;margin-left:1rem}
.footer-nav a:hover{color:var(--accent)}

/* responsive */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:1.5rem}
  #nav-toggle{display:block}
  .nav{display:none}
  .nav a{display:block;margin:0;padding:.6rem 0;border-bottom:1px solid var(--border-soft)}
  .grid{grid-template-columns:1fr}
}

/* Article / post styles */
.post{max-width:760px;margin:3rem auto 4rem}
.post h1{font-family:var(--serif);font-size:clamp(1.9rem,4vw,2.6rem);margin:0 0 .5rem;line-height:1.15}
.post .article-meta{color:var(--muted);margin-bottom:1.5rem;font-size:.9rem}
.article-content h2{font-family:var(--serif);margin-top:2rem}
.post p{color:#ddd6c9}
.post a{color:var(--accent)}
.post a:hover{color:#eeb75c}
.post label{display:block;margin:1rem 0 .35rem;font-size:.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.post input,.post textarea{
  width:100%;
  background:var(--bg-soft);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);
  padding:.65rem .75rem;
  font-family:var(--sans);
  font-size:.95rem;
}
.post input:focus,.post textarea:focus{outline:none;border-color:var(--accent)}
.post button[type="submit"]{
  margin-top:1.25rem;
  background:var(--accent);
  color:var(--accent-ink);
  border:none;
  padding:.75rem 1.4rem;
  border-radius:var(--radius);
  font-weight:700;
  cursor:pointer;
}
.post button[type="submit"]:hover{background:#eeb75c}
article code, pre{font-family:var(--mono);background:var(--bg-soft);padding:.45rem .6rem;border-radius:var(--radius);color:var(--accent);border:1px solid var(--border-soft)}
pre{overflow:auto;padding:1rem;font-size:.92rem}
blockquote{border-left:2px solid var(--accent);padding-left:1rem;color:var(--muted);margin:1.5rem 0;font-style:italic}

a,button{transition:all .15s var(--ease)}