:root{
  --bg: #17140f;
  --bg-panel: #1e1911;
  --bg-panel-2: #241d13;
  --text: #eae3d4;
  --text-dim: #9b8f78;
  --accent: #c9793a;
  --accent-dim: #6e4526;
  --line: #382f22;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a { color:inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap{
  max-width: 920px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---- nav ---- */
nav{ border-bottom:1px solid var(--line); }
nav .wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:22px;
  padding-bottom:22px;
}
.logo{
  font-family:var(--font-mono);
  font-size:14px;
  color:var(--text-dim);
  letter-spacing:0.01em;
  text-decoration:none;
}
.logo span{ color:var(--accent); }
.navlinks{ display:flex; gap:28px; font-size:14px; color:var(--text-dim); }
.navlinks a{ text-decoration:none; }
.navlinks a:hover{ color:var(--text); }

/* ---- hero ---- */
.hero{
  padding: 72px 0 56px;
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items:start;
  border-bottom:1px solid var(--line);
}
.hero h1{
  font-family:var(--font-display);
  font-weight:600;
  font-size:44px;
  line-height:1.15;
  margin:0 0 20px;
  max-width: 11ch;
}
.hero p{ color:var(--text-dim); font-size:16px; max-width:46ch; margin: 0 0 22px; }
.hero-links{ display:flex; gap:20px; font-family:var(--font-mono); font-size:13px; }
.hero-links a{ text-decoration:none; border-bottom:1px solid var(--accent-dim); padding-bottom:2px; }
.hero-links a:hover{ border-color:var(--accent); color:var(--accent); }

/* ---- status panel ---- */
.panel{ background:var(--bg-panel); border:1px solid var(--line); font-family:var(--font-mono); font-size:12.5px; }
.panel-head{ padding:11px 16px; border-bottom:1px solid var(--line); color:var(--text-dim); display:flex; justify-content:space-between; }
.panel-body{ padding:16px; }
.status-row{ display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line); }
.status-row:last-child{ border-bottom:none; }
.status-label{ color:var(--text-dim); }
.status-val{ color:var(--text); }
.status-val.warn{ color:var(--accent); }
.bar{ height:4px; background:var(--bg-panel-2); margin-top:12px; position:relative; }
.bar-fill{ position:absolute; left:0; top:0; bottom:0; background:var(--accent); }
.bar-caption{ display:flex; justify-content:space-between; margin-top:6px; color:var(--text-dim); font-size:11px; }

/* ---- log section ---- */
.section-head{ padding: 40px 0 6px; display:flex; justify-content:space-between; align-items:baseline; }
.section-head h2{ font-family:var(--font-display); font-weight:600; font-size:22px; margin:0; }
.section-head a{ font-family:var(--font-mono); font-size:13px; color:var(--text-dim); text-decoration:none; }
.section-head a:hover{ color:var(--accent); }

.entry{ display:grid; grid-template-columns: 110px 1fr; gap:24px; padding: 24px 0; border-bottom:1px solid var(--line); }
.entry:first-of-type{ border-top:1px solid var(--line); }
.entry-date{ font-family:var(--font-mono); font-size:12.5px; color:var(--text-dim); padding-top:3px; }
.entry h3{ font-family:var(--font-display); font-size:19px; font-weight:600; margin:0 0 8px; }
.entry h3 a{ text-decoration:none; }
.entry h3 a:hover{ color:var(--accent); }
.entry p{ color:var(--text-dim); font-size:14.5px; margin:0; max-width:60ch; }
.entry-tag{ display:inline-block; font-family:var(--font-mono); font-size:11px; color:var(--accent); margin-top:10px; margin-right:8px; }

/* ---- single post ---- */
.post{ padding: 56px 0 40px; }
.post-head{ border-bottom:1px solid var(--line); padding-bottom:24px; margin-bottom:32px; }
.post-head h1{ font-family:var(--font-display); font-size:32px; font-weight:600; margin:12px 0 12px; max-width:24ch; }
.post-body{ font-size:16px; max-width:70ch; }
.post-body p{ margin: 0 0 18px; }
.post-body pre{ background:var(--bg-panel); border:1px solid var(--line); padding:16px; overflow-x:auto; font-family:var(--font-mono); font-size:13px; }
.post-body code{ font-family:var(--font-mono); font-size:0.9em; background:var(--bg-panel); padding:1px 5px; }
.post-body pre code{ background:none; padding:0; }
.post-body a{ border-bottom:1px solid var(--accent-dim); text-decoration:none; }
.post-body a:hover{ border-color:var(--accent); color:var(--accent); }
.back-link{ display:inline-block; margin-top:24px; font-family:var(--font-mono); font-size:13px; color:var(--text-dim); text-decoration:none; }
.back-link:hover{ color:var(--accent); }

/* ---- footer ---- */
footer{ border-top:1px solid var(--line); margin-top: 24px; }
.footer-inner{
  padding: 24px 0 40px;
  display:flex;
  justify-content:space-between;
  color:var(--text-dim);
  font-size:13px;
  font-family:var(--font-mono);
}

@media (max-width: 640px){
  .hero{ grid-template-columns: 1fr; }
  .hero h1{ font-size:34px; max-width:none; }
  .entry{ grid-template-columns: 1fr; gap:6px; }
}

@media (prefers-reduced-motion: reduce){
  * { transition: none !important; animation: none !important; }
}