:root {
  --black: #000000;
  --white: #f5f2f8;
  --gray: #9c96a3;
  --purple: #9146ff;
  --purple-light: #b98aff;
  --border: #21152e;
}

* { box-sizing: border-box; }
html { background: var(--black); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--white);
  background: var(--black);
  font-family: "Nunito", Arial, Helvetica, sans-serif;
}

a { color: inherit; text-decoration: none; }
.site-shell { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; min-height: 82px; border-bottom: 1px solid var(--border); }
.brand { color: var(--white); font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
nav { display: flex; align-items: center; gap: 26px; color: var(--gray); font-size: 14px; }
nav a:hover, nav a.active { color: var(--white); }
nav .button { padding: 10px 16px; border-radius: 5px; color: #fff; background: var(--purple); }
nav .button:hover { color: #fff; background: var(--purple-light); }
.content-page { padding: 110px 0; }
.achievements-page > h1 { margin-bottom: 14px; font-size: clamp(1.8rem, 3vw, 2.6rem); text-align: center; }
.achievements-page > .page-note { text-align: center; }
.posts-page > h1 { margin-bottom: 14px; font-size: clamp(1.8rem, 3vw, 2.6rem); text-align: center; }
.home-page { display: grid; min-height: calc(100vh - 82px); place-content: center; }
.intro { width: min(100%, 720px); margin: 0 auto; padding: 48px clamp(24px, 6vw, 70px); border: 1px solid var(--border); border-radius: 28px; background: #050505; text-align: center; }
.intro h2 { margin: 0 0 28px; color: var(--purple-light); font-size: clamp(2.1rem, 5vw, 3.5rem); font-weight: 700; letter-spacing: -.05em; }
.intro p { margin: 0 0 18px; color: #b0a8b8; font-size: 17px; line-height: 1.85; }
.intro p:last-child { margin-bottom: 0; }
h1 { margin: 0 0 18px; font-size: clamp(2.8rem, 7vw, 5.5rem); letter-spacing: -.07em; line-height: 1; }
.page-note { color: var(--gray); font-size: 16px; }
.post-index { max-width: 760px; margin: 55px auto 0; }
.post-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; border: 1px solid var(--border); border-radius: 8px; background: #050505; }
.post-card:hover { border-color: var(--purple); }
.post-card h2 { margin: 0; color: var(--white); font-size: 20px; letter-spacing: -.03em; }
.post-card-link { color: var(--purple-light); font-size: 14px; font-weight: 700; white-space: nowrap; }
.post-page { max-width: 850px; padding-top: 80px; padding-bottom: 120px; }
.post-page h1 { max-width: 760px; font-size: clamp(2.6rem, 6vw, 5rem); }
.post-date { margin-bottom: 18px; color: var(--gray); font-size: 14px; }
.post-body { color: var(--gray); font-size: 17px; line-height: 1.8; }
.post-body h2 { margin: 55px 0 16px; color: var(--white); font-size: 28px; }
.post-body p { margin: 0 0 20px; }
.post-body ul { margin: 0 0 25px; padding-left: 25px; }
.post-body li { padding: 3px 0; }
.post-body pre { overflow-x: auto; margin: 24px 0; padding: 22px; border: 1px solid var(--border); border-radius: 10px; color: #d9c3f2; background: #08060a; font: 13px/1.7 "Courier New", monospace; }
.post-body code { font-family: "Courier New", monospace; }
.post-back { display: inline-block; margin-top: 45px; color: var(--purple-light); font-size: 14px; font-weight: 700; }
.achievement-seasons { max-width: 820px; margin: 65px auto 0; }
.achievement-year { margin-bottom: 64px; }
.achievement-year:last-child { margin-bottom: 0; }
.achievement-year h2 { margin: 0 0 25px; color: var(--purple-light); font-size: 32px; font-weight: 700; letter-spacing: -.05em; }
.achievement-list { margin: 0; padding: 0 0 0 27px; border-top: 1px solid var(--border); }
.achievement-entry { overflow-x: auto; padding: 18px 0 18px 5px; border-bottom: 1px solid var(--border); color: var(--white); font-size: 17px; line-height: 1.5; white-space: nowrap; }
.achievement-entry::marker { color: var(--purple); font-size: 1.15em; }
.achievement-entry strong { color: var(--gray); font-weight: 500; }
.status-tbd { color: var(--purple-light); font-size: .85em; font-weight: 600; }

@media (max-width: 650px) {
  .site-shell { width: min(100% - 30px, 540px); }
  .site-header { align-items: flex-start; gap: 20px; padding: 20px 0; }
  nav { flex-wrap: wrap; justify-content: flex-end; gap: 10px 14px; font-size: 12px; }
  nav .button { display: none; }
  .content-page { padding: 80px 0; }
  .post-page { padding-top: 60px; padding-bottom: 80px; }
  .post-card { align-items: flex-start; flex-direction: column; }
  .post-body { font-size: 16px; }
  .home-page { min-height: calc(100vh - 122px); }
  .achievement-seasons { margin-top: 55px; }
  .achievement-entry { font-size: 15px; }
}