:root{
  --bg:#ffffff;
  --ink:#121212;
  --muted:#5a5a5a;
  --rule:#e6e6e6;
  --accent:#c00000; /* restrained red */
  --link:#0b57d0;
  --visited:#681da8;
}

body{
  margin:0;
  padding:30px 0;
  background:var(--bg);
  color:var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size:19px;
  line-height:1.7;
}

#main{
  max-width:760px;
  width:calc(100% - 46px);
  margin:0 auto;
  padding:0 6px;
}

h1{
  margin:0;
  font-size:2em;
  letter-spacing:-0.01em;
}
.subtitle{ margin-top:0.35em; color:var(--muted); }

hr{
  border:0;
  border-top:1px solid var(--rule);
  margin:1.6em 0;
}

a{ color:var(--link); }
a:visited{ color:var(--visited); }

.hook{
  border-left:6px solid var(--accent);
  padding:12px 14px;
  margin:1.2em 0;
  background:#fff7f7;
}

.meta{
  border:1px solid var(--rule);
  padding:10px 12px;
  margin:1.2em 0;
  color:var(--muted);
  font-size:0.95em;
}

#navigation{
  margin-top:22px;
  padding-top:14px;
  border-top:1px solid var(--rule);
  font-size:0.95em;
}
#navigation .sep{ margin:0 10px; color:var(--muted); }
#navigation .active{ font-weight:700; color:var(--ink); }