/* Page layout */
:root{
  --max-width: 680px;
  --content-font: Georgia, "Times New Roman", serif;
  --heading-color: #7a1515; /* deep red */
  --text-color: #111;
  --muted: #444;
  --base-size: 18px;
}

html,body{height:100%}
body{
  font-family: var(--content-font);
  font-size: var(--base-size);
  line-height:1.7;
  color:var(--text-color);
  margin:0;
  padding:0;
  background:#fff;
}

/* Two-column layout: sidebar + content */
.page{
  max-width:980px;
  margin:24px auto;
  padding:0 16px;
  display:flex;
  gap:32px;
  align-items:flex-start;
}

.content{
  max-width:var(--max-width);
  width:100%;
}

/* container keeps essay text narrow */
.container{
  max-width:var(--max-width);
  width:100%;
}

/* Header / title */
header h1{
  margin:0 0 0.35rem 0;
  font-size:1.25rem;            /* modest heading size */
  font-variant: small-caps;     /* small-caps like Paul Graham */
  letter-spacing:0.06em;
  color:var(--heading-color);
  font-weight:600;
}

/* date styling */
.date{
  margin:0 0 1rem 0;
  color:var(--muted);
  font-size:0.95rem;
}

/* Article body */
.essay p{
  margin:0 0 1rem 0;
  text-align:left;
}

/* Slightly tighten first paragraph spacing */
.essay p:first-of-type{margin-top:0.25rem}

/* Footnotes / small notes */
.essay small, .essay .footnote { color:var(--muted); font-size:0.95rem; }

/* Links */
a{ color:inherit; text-decoration:underline; }
a:visited{ color:inherit; opacity:0.8; }



/* Optional: make long quotes indented slightly */
.essay blockquote{
  margin:1rem 0;
  padding-left:1rem;
  border-left:3px solid rgba(0,0,0,0.06);
  color:var(--muted);
}

/* Keep layout single column on small screens */
@media (max-width:720px){
  .page{
    flex-direction:column;
    margin:16px auto;
    gap:16px;
  }
  :root{ --base-size:16px; }
  header h1{ font-size:1.05rem; }
}