@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=JetBrains+Mono:wght@400;500;600&display=swap');
:root { --abyss: #0a0a0f; --abyss-soft: #12121a; --ink: #c8c0d0; --ink-soft: #8a8099; --ink-dim: #5a5066; --violet: #7c3aed; --violet-dim: #4c1d95; --cyan: #22d3ee; --cyan-dim: #0891b2; --glow-purple: rgba(124,58,237,0.15); --glow-cyan: rgba(34,211,238,0.10); --line: rgba(200,192,208,0.08); --card-bg: rgba(18,18,26,0.75); --display: "Fraunces","EB Garamond",Georgia,serif; --body: "EB Garamond","Source Serif 4",Georgia,serif; --mono: "JetBrains Mono","Fira Code",ui-monospace,monospace; }
* { box-sizing: border-box; }
::selection { background: rgba(124,58,237,0.35); color: #e0d8f0; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-size: 1.125rem; line-height: 1.7; background: var(--abyss); min-height: 100vh; overflow-x: hidden; font-family: var(--body); }
body::before { content: ''; position: fixed; inset: 0; z-index: 0; opacity: 0.035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 256px 256px; animation: grain-shift 8s steps(6) infinite; }
@keyframes grain-shift { 0% { transform: translate(0,0) rotate(0deg); } 25% { transform: translate(-2px,3px) rotate(0.5deg); } 50% { transform: translate(4px,-1px) rotate(-0.3deg); } 75% { transform: translate(-1px,-3px) rotate(0.7deg); } 100% { transform: translate(0,0) rotate(0deg); } }
body::after { content: ''; position: fixed; bottom: 0; left: 0; right: 0; height: 60vh; z-index: 0; pointer-events: none; background: linear-gradient(0deg, rgba(124,58,237,0.04) 0%, rgba(34,211,238,0.02) 30%, transparent 70%); }
.atmosphere { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.5) 100%); box-shadow: inset 0 0 120px rgba(0,0,0,0.4); }
.nav,.main,.footer { position: relative; z-index: 1; }
.nav { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; max-width: 780px; margin: 0 auto; padding: 1.75rem 1.5rem 0.5rem; border-bottom: 1px solid var(--line); }
.brand { font-family: var(--display); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.04em; color: var(--ink); text-decoration: none; transition: color 0.3s ease, text-shadow 0.3s ease; }
.brand:hover { color: var(--cyan); text-shadow: 0 0 20px var(--glow-cyan); }
.nav-links { display: flex; gap: 1.5rem; }
.nav-links a { color: var(--ink-soft); text-decoration: none; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.3s ease; position: relative; }
.nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--violet); transition: width 0.3s ease; }
.nav-links a:hover { color: var(--violet); }
.nav-links a:hover::after { width: 100%; }
.main { max-width: 780px; margin: 0 auto; padding: 1rem 1.5rem 5rem; }
.hero { padding: 4rem 0 2.5rem; animation: rise 0.8s ease both; }
.eyebrow { margin: 0 0 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.7rem; color: var(--violet); font-family: var(--mono); }
.hero h1,.page-head h1 { font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem,8vw,4rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 0.85rem; background: linear-gradient(135deg,var(--ink) 40%,var(--violet) 70%,var(--cyan) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lede { margin: 0; max-width: 34em; color: var(--ink-soft); font-size: 1.15rem; line-height: 1.6; }
.section { margin-top: 3rem; animation: rise 0.9s ease both; animation-delay: 0.12s; }
.section-title { font-family: var(--display); font-size: 1.1rem; font-weight: 600; margin: 0 0 1.25rem; color: var(--ink-soft); letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--line); padding-bottom: 0.6rem; }
.grid { display: grid; gap: 1rem; }
.card { background: var(--card-bg); border: 1px solid var(--line); border-radius: 4px; padding: 1.25rem 1.35rem 1.35rem; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; position: relative; overflow: hidden; }
.card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 50% 50%, var(--glow-purple), transparent 60%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }
.card:hover { transform: translateY(-3px); border-color: rgba(124,58,237,0.25); box-shadow: 0 8px 40px rgba(124,58,237,0.08); }
.card:hover::before { opacity: 1; }
.card h2 { font-family: var(--display); font-size: 1.35rem; font-weight: 600; margin: 0.15rem 0 0.4rem; line-height: 1.25; }
.card h2 a { color: var(--ink); text-decoration: none; transition: color 0.3s ease; }
.card h2 a:hover { color: var(--cyan); }
.meta { margin: 0; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); font-family: var(--mono); }
.kind { color: var(--violet); }
.summary { margin: 0.4rem 0 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0.85rem 0 0; }
.tags a { display: inline-block; padding: 0.15rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-dim); text-decoration: none; font-size: 0.75rem; font-family: var(--mono); transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease; }
.tags a:hover { border-color: var(--violet-dim); color: var(--violet); background: rgba(124,58,237,0.06); }
.page-head { padding: 2.5rem 0 1.5rem; animation: rise 0.7s ease both; }
.page-head .meta { margin-bottom: 0.5rem; }
.page-head h1 { margin-top: 0.25rem; }
.entry .prose { animation: rise 0.85s ease both; animation-delay: 0.08s; }
.prose > *:first-child { margin-top: 0; }
.prose h2,.prose h3,.prose h4 { font-family: var(--display); letter-spacing: -0.01em; margin: 2.5rem 0 0.75rem; color: var(--ink); }
.prose h2 { border-bottom: 1px solid var(--line); padding-bottom: 0.4rem; }
.prose p { margin: 0 0 1.2rem; color: var(--ink-soft); }
.prose a { color: var(--cyan); text-decoration: none; transition: color 0.3s ease, text-shadow 0.3s ease; }
.prose a:hover { color: var(--violet); text-shadow: 0 0 12px var(--glow-purple); }
.prose strong { color: var(--ink); }
.prose blockquote { margin: 1.5rem 0; padding: 0.35rem 0 0.35rem 1.25rem; border-left: 2px solid var(--violet-dim); color: var(--ink-dim); font-style: italic; }
.prose code { font-family: var(--mono); font-size: 0.88em; background: rgba(200,192,208,0.06); padding: 0.1em 0.4em; border-radius: 3px; color: var(--cyan); }
.prose pre.code { overflow-x: auto; padding: 1.1rem 1.25rem; background: #0d0d15; color: var(--ink); border: 1px solid var(--line); border-radius: 4px; font-family: var(--mono); font-size: 0.9rem; }
.prose pre.code code { background: none; padding: 0; color: inherit; }
.prose img { max-width: 100%; height: auto; display: block; margin: 1.5rem 0; border-radius: 4px; border: 1px solid var(--line); }
.prose ul,.prose ol { padding-left: 1.25rem; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
.prose table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; font-size: 0.95rem; }
.prose th,.prose td { border: 1px solid var(--line); padding: 0.5rem 0.75rem; text-align: left; }
.prose th { background: rgba(124,58,237,0.06); color: var(--violet); font-family: var(--mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.prose td { color: var(--ink-soft); }
.empty { color: var(--ink-dim); font-style: italic; }
.footer { max-width: 780px; margin: 0 auto; padding: 0 1.5rem 3rem; color: var(--ink-dim); font-size: 0.85rem; font-family: var(--mono); border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: 1rem; }
.footer p { margin: 0; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--abyss); }
::-webkit-scrollbar-thumb { background: var(--violet-dim); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--violet); }
@media (max-width: 640px) { .nav { flex-direction: column; gap: 0.75rem; align-items: center; text-align: center; } .nav-links { gap: 1.25rem; } body { font-size: 1.05rem; } .main { padding: 1rem 1.25rem 3rem; } .hero { padding: 2.5rem 0 1.5rem; } }