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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Theme Variables */
:root,
[data-theme="light"] {
  --color-bg: #f6f2ec;
  --color-text: #1f1f1f;
  --color-text-muted: #6b6259;
  --color-link: #5c5347;
  --color-link-hover: #2c2825;
  --color-accent: #8b7355;
  --color-tag-bg: #f0ebe4;
  --color-border: #e0d8ce;
}

[data-theme="dark"] {
  --color-bg: #1f1d1a;
  --color-text: #e8e4de;
  --color-text-muted: #a09689;
  --color-link: #c4b5a0;
  --color-link-hover: #e8e4de;
  --color-accent: #a69780;
  --color-tag-bg: #2d2a26;
  --color-border: #3d3935;
}

[data-theme="sepia"] {
  --color-bg: #f5f0e6;
  --color-text: #3d3425;
  --color-text-muted: #6d5f4a;
  --color-link: #6b5c47;
  --color-link-hover: #3d3425;
  --color-accent: #8b7355;
  --color-tag-bg: #ede6d6;
  --color-border: #d4c9b0;
}

/* Base Styles */
body {
  font-family: 'Georgia', 'Times New Roman', serif;
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  color: var(--color-text);
  transition: background-color 0.2s, color 0.2s;
}

a {
  color: var(--color-link);
  text-decoration: none;
}

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

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Georgia', 'Times New Roman', serif;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.01em;
}

h1 {
  font-size: 2.25rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.125rem;
}

/* Prose styles for essay content */
.essay-content {
  font-size: 1.0625rem;
  line-height: 1.7;
}

.essay-content p {
  margin-bottom: 1.5rem;
}

.essay-content h2 {
  margin: 2.5rem 0 1rem;
}

.essay-content h3 {
  margin: 2rem 0 0.75rem;
}

.essay-content ul,
.essay-content ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.essay-content li {
  margin-bottom: 0.5rem;
}

.essay-content blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  border-left: 2px solid var(--color-border);
  font-style: italic;
  color: var(--color-text-muted);
}

.essay-content pre {
  margin: 1.5rem 0;
  padding: 1rem;
  background: var(--color-tag-bg);
  border-radius: 4px;
  overflow-x: auto;
}

.essay-content code {
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 0.9em;
}

.essay-content img {
  margin: 2rem auto;
}