:root{
  --bg:#0b0c0f;
  --fg:#f2f3f5;
  --muted:#a7abb3;
  --line:rgba(255,255,255,.10);
  --card:rgba(255,255,255,.04);
  --accent:#7a1f2b; /* bordeaux-achtig, subtiel */
  --max: 860px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  letter-spacing: .2px;
}

a{ color:var(--fg); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.18); }
a:hover{ border-bottom-color: rgba(255,255,255,.45); }

.container{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
}

.header{
  position:sticky;
  top:0;
  backdrop-filter:saturate(140%) blur(10px);
  background:rgba(11,12,15,.75);
  border-bottom:1px solid var(--line);
  z-index:10;
}

.header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
}

.brand{ display:flex; align-items:center; gap:10px; border-bottom:none; }
.brand-mark{
  display:inline-flex;
  width:28px; height:28px;
  align-items:center; justify-content:center;
  border:1px solid var(--line);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:var(--fg);
  font-weight:700;
}
.brand-name{ color:var(--fg); font-weight:600; opacity:.95; }

.nav{ display:flex; gap:14px; }
.nav a{ border-bottom:none; color:var(--muted); }
.nav a:hover{ color:var(--fg); }

.article{
  margin:28px 0 36px;
  padding:26px 22px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
}

.article h1:first-of-type{
  font-size: 46px;
  max-width: 16ch;
}
.article h1:first-of-type + p{
  font-size: 18px;
  color: rgba(242,243,245,.85);
  max-width: 48ch;
}
.article > h2{
  margin-top: 48px;
}


h1,h2,h3{
  line-height:1.2;
  letter-spacing:.2px;
}
h1{ font-size: 34px; margin:0 0 8px; }
h2{ font-size: 22px; margin:26px 0 10px; }
h3{ font-size: 18px; margin:22px 0 8px; }

.meta{
  margin:0 0 18px;
  color:var(--muted);
  font-size:13px;
}

p{ margin: 0 0 14px; }
ul,ol{ margin: 0 0 14px 20px; }
li{ margin: 6px 0; }

hr{
  border:none;
  border-top:1px solid var(--line);
  margin:22px 0;
}

blockquote{
  margin:18px 0;
  padding:14px 16px;
  border-left:3px solid var(--accent);
  background:rgba(122,31,43,.10);
  border-radius:10px;
  color:rgba(242,243,245,.92);
}

code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .95em;
  background: rgba(255,255,255,.07);
  padding: 2px 6px;
  border-radius: 8px;
  border:1px solid rgba(255,255,255,.10);
}

pre{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:14px 14px;
  overflow:auto;
}

pre code{
  background:none;
  border:none;
  padding:0;
}

img{
  max-width:100%;
  border-radius:14px;
  border:1px solid var(--line);
  background:#000;
}

.footer{
  margin: 0 0 40px;
  color:var(--muted);
  font-size:13px;
  opacity:.9;
}
.footer-inner{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
}
.dot{ opacity:.5; }


.callout{
  margin: 36px 0;
  padding: 22px 0 22px 22px;
  border-left: 3px solid var(--accent);
}

.callout-label{
  display: block;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.callout p{
  margin: 0 0 12px;
}

.callout-link{
  display: inline-block;
  margin-top: 8px;
  font-weight: 500;
  border-bottom: none;
  color: var(--fg);
}

.callout-link:hover{
  text-decoration: underline;
}