:root { --garnet: #942121; --dark-garnet: #6D0707; --parchment: #f5ecb2; --saffron: #e74f1d; --kelp: #5a7814; --page-background: var(--parchment); --body-text: #17120f; --card-background: rgba(255, 255, 255, 0.2); --code-background: rgba(148, 33, 33, 0.12); --border-color: #17120f; --hover-text: black; --button-hover: var(--saffron); --card-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(148, 33, 33, 0.08)); --card-hover-border: var(--garnet); --card-shadow: rgba(23, 18, 15, 0.16); }

:root[data-theme="dark"] { --garnet: #e5b164; --dark-garnet: #e5c088; --page-background: #211a19; --body-text: #f3e7d0; --card-background: rgba(255, 244, 218, 0.08); --code-background: rgba(230, 138, 114, 0.16); --border-color: #d7bda4; --hover-text: #211a19; --button-hover: var(--saffron); --card-gradient: linear-gradient(135deg, rgba(255, 244, 218, 0.12), rgba(230, 138, 114, 0.08)); --card-hover-border: var(--dark-garnet); --card-shadow: rgba(0, 0, 0, 0.35); }

@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --garnet: #e5b164; --dark-garnet: #e5c088; --page-background: #211a19; --body-text: #f3e7d0; --card-background: rgba(255, 244, 218, 0.08); --code-background: rgba(230, 138, 114, 0.16); --border-color: #d7bda4; --hover-text: #211a19; --button-hover: --saffron; --card-gradient: linear-gradient(135deg, rgba(255, 244, 218, 0.12), rgba(230, 138, 114, 0.08)); --card-hover-border: var(--dark-garnet); --card-shadow: rgba(0, 0, 0, 0.35); } }
@font-face { font-family: Centaur; src: url("../fonts/CENTAUR.TTF"); }
@font-face { font-family: Heavy-Rain; src: url("../fonts/heavy-rain-font/HeavyRain-X3y9P.ttf"); }
@font-face { font-family: Inter; src: url("../fonts/Inter/Inter-VariableFont_opsz,wght.ttf"); }
* { box-sizing: border-box; }

body { margin: 0; background: var(--page-background); color: var(--body-text); font-family: Inter, Arial; font-size: 1.5rem; line-height: 1.55; }

a { color: var(--garnet); }

a:hover { color: var(--dark-garnet); }

.site-header, .site-content { width: min(90%, 960px); margin: 0 auto; }

.site-header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1rem 0; border-bottom: 2px solid var(--garnet); }

.site-title { color: var(--garnet); font-family: Centaur, Georgia; font-size: 2.2rem; font-weight: bold; text-decoration: none; }

nav { display: flex; align-items: center; gap: 0.35rem; }

.nav-link { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; color: var(--garnet); border: 1px solid transparent; border-radius: 50%; transition: background-color 150ms ease, color 150ms ease; }

.theme-toggle { appearance: none; background-color: var(--card-background); cursor: pointer; font: inherit; }

.theme-icon-light { display: none; }

:root[data-theme="dark"] .theme-icon-dark { display: none; }

:root[data-theme="dark"] .theme-icon-light { display: block; }

.nav-link svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.nav-link:hover, .nav-link:focus-visible { color: var(--hover-text); background-color: var(--button-hover); }

.nav-link:focus-visible { outline: 3px solid var(--garnet); outline-offset: 2px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.site-content { min-height: 70vh; padding: 2rem 0; }

h1, h2, h3 { color: var(--garnet); font-weight: normal; line-height: 1.15; }

h1 { font-family: Heavy-Rain, Centaur, Georgia; font-size: clamp(2.8rem, 8vw, 5rem); }

h2 { font-family: Centaur, Georgia; font-weight: bold; font-size: 2.2rem; }

h3 { font-family: Centaur, Georgia; font-size: 1.8rem; font-weight: bold; margin: 0.25rem 0 0.75rem; }

.intro { max-width: 700px; }

.ornamental-divider { display: flex; align-items: center; margin-bottom: 3.0rem; margin-top: 3.0rem; border-bottom: 2px solid var(--garnet); color: var(--garnet); }

.read-more, .post-date, .categories { color: var(--dark-garnet); font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; }

.post-list { display: grid; gap: 1.5rem; }

.post-card { padding: 1.5rem; border: 2px solid var(--border-color); background: var(--card-gradient); box-shadow: 0 2px 0 var(--card-shadow); transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }

.post-card:hover, .post-card:focus-within { border-color: var(--card-hover-border); box-shadow: 0 8px 20px var(--card-shadow); transform: translateY(-4px); }

.post-card p:last-of-type { margin-bottom: 1rem; }

.post-date { margin: 0; }

.post h1, .page h1 { margin: 0.25rem 0 1.5rem; }

.post-body { max-width: 720px; }

code, pre { background: var(--code-background); }

code { padding: 0.1rem 0.3rem; }

pre { overflow-x: auto; padding: 1rem; }

blockquote { margin: 1.5rem 0; padding-left: 1rem; border-left: 4px solid var(--garnet); }

@media (prefers-reduced-motion: reduce) { .post-card { transition: border-color 180ms ease, box-shadow 180ms ease; }
  .post-card:hover, .post-card:focus-within { transform: none; } }
.back-to-top { position: fixed; right: max(1.5rem, 5vw); bottom: 1.5rem; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; padding: 0; color: var(--garnet); background-color: var(--card-background); border: 2px solid var(--garnet); border-radius: 50%; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2); cursor: pointer; font: inherit; z-index: 10; transition: background-color 150ms ease, color 150ms ease, transform 150ms ease; }

.back-to-top[hidden] { display: none; }

.back-to-top svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.back-to-top:hover, .back-to-top:focus-visible { color: var(--hover-text); background-color: var(--saffron); transform: translateY(-2px); }

.back-to-top:focus-visible { outline: 3px solid var(--garnet); outline-offset: 3px; }

@media (max-width: 600px) { .site-header { display: block; }
  nav { margin-top: 1rem; justify-content: flex-end; }
  .back-to-top { right: 1rem; bottom: 1rem; } }