:root {
  --bg-1: #120c07;
  --bg-2: #070504;
  --bg-3: #040302;
  --ink: #f3ebe0;
  --muted: #a99b8a;
  --dim: #8a7d6e;
  --line: rgba(255,255,255,0.08);
  --accent: #c99361;
  --accent-hover: #e0ac78;
  --maxw: 680px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; background-color: var(--bg-3); }

body {
  min-height: 100vh;
  background: radial-gradient(140% 110% at 50% 0%, var(--bg-1) 0%, var(--bg-2) 60%, var(--bg-3) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* ---------- Decorative background ---------- */
.page { position: relative; overflow: hidden; min-height: 100vh; isolation: isolate; display: flex; flex-direction: column; }
.stars, .glow-top, .glow-bottom { position: fixed; z-index: -1; pointer-events: none; }
.stars {
  inset: -30% 0 0 0; height: 170%; opacity: 0.5;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 70% 60%, #f0d3a8, transparent),
    radial-gradient(1px 1px at 40% 80%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 85% 20%, #fff, transparent),
    radial-gradient(1px 1px at 55% 45%, #eec79a, transparent),
    radial-gradient(1.2px 1.2px at 15% 70%, #fff, transparent),
    radial-gradient(1px 1px at 90% 75%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 30% 15%, #fff, transparent),
    radial-gradient(1px 1px at 62% 88%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 8% 50%, #fff, transparent);
  background-size: 100% 48%;
  animation: starDrift 46s linear infinite, twinkle 5s ease-in-out infinite;
}
.glow-top {
  width: 60vw; height: 60vw; max-width: 640px; max-height: 640px;
  left: 50%; top: -14%; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(198,126,68,0.10), transparent 62%);
  filter: blur(28px); animation: emberDrift 24s ease-in-out infinite;
}
.glow-bottom {
  width: 50vw; height: 34vw; max-width: 520px; max-height: 360px;
  left: 50%; bottom: -18%; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(150,76,48,0.08), transparent 65%);
  filter: blur(32px); animation: emberDrift2 28s ease-in-out infinite;
}

/* ---------- Home hero ---------- */
.hero {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 26px; padding: 40px 28px 96px; text-align: center;
}
.hero .avatar {
  width: 112px; height: 112px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.07), 0 0 44px -14px rgba(198,126,68,0.35);
  animation: ringPulse 7s ease-in-out infinite, fadeUp 0.9s ease both;
}
.hero .name { margin: 0; font-size: clamp(38px, 6vw, 52px); font-weight: 600; letter-spacing: -0.025em; animation: fadeUp 0.9s ease 0.08s both; }
.hero .tagline { margin: 16px auto 0; max-width: 460px; color: var(--muted); font-size: clamp(15px, 2.4vw, 17px); line-height: 1.65; text-wrap: pretty; animation: fadeUp 0.9s ease 0.08s both; }
.hero .links { margin: 4px 0 0; padding: 0; list-style: none; display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; animation: fadeUp 0.9s ease 0.16s both; }
.hero .links a { font-size: 14px; letter-spacing: 0.03em; border-bottom: 1px solid rgba(201,147,97,0.25); padding-bottom: 3px; }
.hero .links a:hover { border-color: var(--accent); }

/* ---------- Subpage top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 24px; flex-wrap: wrap;
  padding: 20px clamp(20px, 5vw, 48px);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand:hover .brand-avatar { box-shadow: 0 0 0 1px rgba(201,147,97,0.5), 0 0 28px -12px rgba(198,126,68,0.6); }
.brand-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 0 28px -14px rgba(198,126,68,0.4);
  transition: box-shadow 0.25s ease;
}
.brand-name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.site-nav { display: flex; gap: clamp(16px, 4vw, 28px); font-size: 13px; letter-spacing: 0.03em; }
.site-nav a { color: var(--dim); }
.site-nav a:hover { color: #c9bcac; }
.site-nav a[aria-current="page"] { color: var(--ink); }

/* ---------- Content ---------- */
.content {
  flex: 1; width: 100%; max-width: var(--maxw);
  margin: 0 auto; padding: clamp(40px, 8vw, 72px) clamp(20px, 5vw, 32px) 96px;
  animation: fadeUp 0.7s ease both;
}
.page-title { margin: 0 0 8px; font-size: clamp(30px, 5vw, 40px); font-weight: 600; letter-spacing: -0.025em; }
.page-lede { margin: 0 0 40px; color: var(--muted); font-size: 17px; max-width: 52ch; text-wrap: pretty; }

/* Post list */
.post-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.post-item { padding: 26px 0; border-top: 1px solid var(--line); }
.post-item:first-child { border-top: none; }
.post-item a { color: var(--ink); }
.post-item a:hover .post-heading { color: var(--accent-hover); }
.post-heading { margin: 0 0 6px; font-size: 21px; font-weight: 600; letter-spacing: -0.015em; transition: color 0.2s ease; }
.post-meta { display: block; color: var(--dim); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 10px; }
.post-excerpt { margin: 0; color: var(--muted); text-wrap: pretty; }

/* Prose (post detail + bio) */
.prose { max-width: 62ch; }
.prose .post-title { margin: 0 0 12px; font-size: clamp(28px, 5vw, 38px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
.prose .post-meta { margin-bottom: 36px; }
.prose p { margin: 0 0 20px; color: #cabeb0; }
.prose h2 { margin: 40px 0 14px; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.prose h3 { margin: 32px 0 10px; font-size: 18px; font-weight: 600; color: var(--ink); }
.prose a { border-bottom: 1px solid rgba(201,147,97,0.3); }
.prose a:hover { border-color: var(--accent); }
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 22px; color: #cabeb0; }
.prose li { margin: 6px 0; }
.prose blockquote { margin: 24px 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--accent); color: var(--muted); font-style: italic; }
.prose code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.9em; background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 5px; }
.prose img { max-width: 100%; height: auto; border-radius: 10px; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 40px 0; }

.bio-portrait { float: right; width: 128px; height: 128px; border-radius: 14px; margin: 0 0 20px 28px; box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 20px 50px -24px rgba(198,126,68,0.5); }

.back-link { display: inline-block; margin-top: 48px; color: var(--dim); font-size: 14px; }
.back-link:hover { color: var(--accent-hover); }

/* 404 */
.notfound { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 60px 28px 96px; text-align: center; animation: fadeUp 0.7s ease both; }
.notfound .code { font-size: clamp(64px, 16vw, 120px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
.notfound .msg { margin: 0; color: var(--muted); font-size: 18px; max-width: 40ch; text-wrap: pretty; }
.notfound .home-link { margin-top: 10px; font-size: 14px; letter-spacing: 0.03em; border-bottom: 1px solid rgba(201,147,97,0.3); padding-bottom: 3px; }
.notfound .home-link:hover { border-color: var(--accent); }

/* Footer */
.site-footer { padding: 28px clamp(20px, 5vw, 48px); border-top: 1px solid var(--line); color: var(--dim); font-size: 13px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.site-footer a { color: var(--dim); }
.site-footer a:hover { color: var(--accent-hover); }

/* ---------- Animations ---------- */
@keyframes emberDrift { 0% { transform: translate(-6%, -4%) scale(1); } 50% { transform: translate(6%, 5%) scale(1.15); } 100% { transform: translate(-6%, -4%) scale(1); } }
@keyframes emberDrift2 { 0% { transform: translate(8%, 6%) scale(1.1); } 50% { transform: translate(-7%, -5%) scale(1); } 100% { transform: translate(8%, 6%) scale(1.1); } }
@keyframes starDrift { from { transform: translateY(0); } to { transform: translateY(-260px); } }
@keyframes twinkle { 0%,100% { opacity: 0.3; } 50% { opacity: 0.75; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ringPulse {
  0%,100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.07), 0 0 44px -14px rgba(198,126,68,0.35); }
  50%     { box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 0 66px -10px rgba(198,126,68,0.45); }
}

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  .topbar { justify-content: center; text-align: center; }
  .site-footer { justify-content: center; text-align: center; }
  .bio-portrait { float: none; display: block; margin: 0 auto 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .stars, .glow-top, .glow-bottom,
  .hero .avatar, .hero .name, .hero .tagline, .hero .links,
  .content, .notfound { animation: none; }
}