/* ============================================================
   blog.css — shared styling for Kartik Anand's on-site blog.

   This file is the single source of truth. blogs.html and every
   blog-*.html link it; none of them carry their own copy any more.
   To add a post: copy blog-template.html, write the <article>,
   then add an entry to the list in blogs.html.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --void: #03040a;
  --rule: rgba(120,160,255,0.11);
  --rule-bright: rgba(120,160,255,0.22);
  --rule-strong: rgba(120,160,255,0.38);

  --star-bright: rgba(228,240,255,0.97);
  --star: rgba(215,228,255,0.92);
  --muted: rgba(172,197,242,0.62);

  --quantum: #5aabff;
  --entangle: #9c7cff;
  --accent: #f0c060;

  --serif: 'EB Garamond', Georgia, serif;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, "SF Mono", Menlo, monospace;

  --micro: 0.75rem;   /* 12px: the floor for uppercase functional labels */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  scroll-behavior: smooth;
  caret-color: var(--quantum);
  scrollbar-color: rgba(90,171,255,0.28) var(--void);
  scrollbar-width: thin;
}

body {
  background-color: var(--void);
  background-image: radial-gradient(1100px 650px at 50% -10%, rgba(90,171,255,0.05), transparent 60%);
  background-repeat: no-repeat;
  color: var(--star);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Browser surfaces: selection, caret, focus ring and scrollbar belong to the
   palette, not to the user agent. */
::selection { background: rgba(90,171,255,0.3); color: #f1f7ff; }

:focus-visible {
  outline: 2px solid var(--quantum);
  outline-offset: 3px;
  border-radius: 3px;
}

a { text-underline-offset: 0.18em; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: rgba(90,171,255,0.28); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(90,171,255,0.45); }

.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 10;
  padding: 0.5rem 0.9rem; font-size: var(--micro); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--quantum); background: #070b16;
  border: 1px solid var(--rule-strong); border-radius: 3px; text-decoration: none;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.wrapper { max-width: 720px; margin: 0 auto; padding: 0 1.5rem 5rem; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.6rem 0 1.2rem; border-bottom: 1px solid var(--rule);
}
.topbar nav { display: flex; gap: 1.5rem; }
.topbar a {
  font-size: var(--micro); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; transition: color .2s;
}
.topbar a:hover { color: var(--quantum); }
.home-link span { color: var(--quantum); }

/* ---------- index ---------- */
.hero { padding: 3.4rem 0 1.6rem; animation: rise 0.9s var(--ease-out) both; }
.hero h1 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 6.4vw, 3.4rem);
  line-height: 1.08; letter-spacing: -0.008em; color: var(--star-bright); text-wrap: balance;
}
.hero h1 em { font-style: italic; color: var(--entangle); }
.hero .lede {
  font-family: var(--serif); font-size: 1.14rem; line-height: 1.75;
  color: rgba(213,227,255,0.85); max-width: 58ch; margin-top: 1.05rem;
}
.hero .lede a, .more a {
  color: var(--quantum); text-decoration: none; border-bottom: 1px solid rgba(90,171,255,0.28);
  transition: border-color .2s;
}
.hero .lede a:hover, .more a:hover { border-color: var(--quantum); }

/* One authored entrance, on the masthead only. */
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.series {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: 1.5rem; line-height: 1.3; color: rgba(174,202,255,0.95);
  margin: 3.4rem 0 0.4rem;
  display: flex; align-items: baseline; gap: 1rem;
}
.series::after { content: ''; height: 1px; flex: 1; background: var(--rule); align-self: center; }

/* A reading list, not a stack of cards: the rule between entries is the
   structure, and the whole row is the target. */
.posts { list-style: none; }
.posts li { border-top: 1px solid var(--rule); }
.posts li:last-child { border-bottom: 1px solid var(--rule); }

.post {
  display: block; text-decoration: none; color: inherit;
  padding: 1.6rem 0.9rem 1.6rem 0;
  transition: transform .25s var(--ease-out), background .25s;
}
.post:hover { transform: translateX(5px); background: rgba(90,171,255,0.03); }
.post:focus-visible { outline-offset: -2px; }

.post-meta {
  font-size: var(--micro); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(163,193,243,0.75); margin-bottom: 0.6rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  font-variant-numeric: tabular-nums;
}
.post-meta .dot { color: rgba(130,160,215,0.55); }

.post-title {
  font-family: var(--serif); font-size: 1.55rem; font-weight: 400; line-height: 1.22;
  color: var(--star-bright); margin-bottom: 0.55rem; transition: color .2s;
  text-wrap: balance;
}
.post:hover .post-title { color: var(--quantum); }

.post-desc {
  font-size: 0.95rem; line-height: 1.65; color: rgba(199,215,248,0.84);
  margin-bottom: 1rem; max-width: 62ch;
}
.post-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.7rem; }
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag {
  font-size: var(--micro); font-weight: 500; letter-spacing: 0.05em;
  padding: 0.22rem 0.65rem; border-radius: 999px;
  border: 1px solid var(--rule-bright); color: rgba(168,196,255,0.82);
}
.read-on {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--quantum); white-space: nowrap;
}
.more { margin-top: 2.2rem; font-size: 0.93rem; color: rgba(178,201,244,0.75); }

/* ---------- article ---------- */
.article-head { padding: 3rem 0 1.5rem; border-bottom: 1px solid var(--rule); }
.article-head h1 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 5.4vw, 2.9rem);
  line-height: 1.12; color: var(--star-bright); letter-spacing: -0.008em;
  text-wrap: balance;
}
/* Sentence case, not uppercase: a series name like "Towards Quantum Machine
   Learning" is 32 characters and all caps makes it a wall. */
.article-head .meta {
  margin-top: 1.05rem; font-size: 0.85rem; letter-spacing: 0.01em;
  color: rgba(172,197,242,0.78);
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  font-variant-numeric: tabular-nums;
}
.article-head .meta .dot { color: rgba(130,160,215,0.55); }

article { font-family: var(--serif); font-size: 1.14rem; line-height: 1.85; color: rgba(216,230,255,0.89); }
article > p { margin: 1.2rem 0; max-width: 70ch; }
article .lead { font-size: 1.26rem; color: rgba(226,238,255,0.93); margin-top: 1.9rem; }
article h2 {
  font-family: var(--serif); font-weight: 400; font-size: 1.75rem; line-height: 1.2;
  color: var(--star-bright); margin: 3rem 0 0.5rem;
  padding-top: 1.6rem; border-top: 1px solid var(--rule);
  letter-spacing: -0.005em; text-wrap: balance;
}
article h3 {
  font-family: var(--sans); font-weight: 600; font-size: 0.98rem; letter-spacing: 0.005em;
  color: var(--quantum); margin: 1.9rem 0 0.35rem;
}
article a {
  color: var(--quantum); text-decoration: none; border-bottom: 1px solid rgba(90,171,255,0.28);
  transition: border-color .2s;
}
article a:hover { border-color: var(--quantum); }
article em { font-style: italic; color: rgba(212,224,255,0.93); }
article strong { color: var(--star-bright); font-weight: 600; }

article ul, article ol { margin: 1.1rem 0 1.1rem 1.3rem; max-width: 68ch; }
article li { margin: 0.45rem 0; }
article li::marker { color: rgba(120,160,255,0.55); }

article blockquote {
  margin: 1.8rem 0; padding: 0.2rem 0 0.2rem 1.5rem;
  border-left: 1px solid rgba(156,124,255,0.6);
  font-style: italic; color: rgba(208,218,252,0.88);
  max-width: 66ch;
}
article blockquote.def {
  border-left: none;
  padding: 1.05rem 1.3rem;
  border: 1px solid rgba(90,171,255,0.24);
  border-radius: 8px;
  background: rgba(90,171,255,0.05);
  font-style: normal;
}

article code {
  font-family: var(--mono);
  font-size: 0.84em; background: rgba(120,160,255,0.1);
  padding: 0.1em 0.4em; border-radius: 4px; color: #c3d9ff;
}
.formula {
  font-family: var(--mono);
  font-size: 0.92rem; color: #d2e2ff;
  background: rgba(90,171,255,0.06); border: 1px solid var(--rule);
  border-radius: 8px; padding: 0.85rem 1rem; margin: 1.35rem 0; overflow-x: auto;
  line-height: 1.55;
}

.figure-note {
  font-family: var(--sans); font-size: 0.85rem; line-height: 1.6;
  color: rgba(178,201,244,0.75);
  border: 1px dashed var(--rule-bright); border-radius: 8px;
  padding: 0.7rem 0.9rem; margin: 1.35rem 0; font-style: italic;
}

.article-foot {
  margin-top: 3rem; padding-top: 1.7rem; border-top: 1px solid var(--rule);
  font-family: var(--sans); font-size: 0.93rem; color: rgba(178,201,244,0.75);
}
.article-foot .sig {
  font-family: var(--serif); font-style: italic; font-size: 1.05rem;
  color: rgba(205,219,252,0.86); margin-bottom: 0.9rem;
}
.article-foot a {
  color: var(--quantum); text-decoration: none; border-bottom: 1px solid rgba(90,171,255,0.28);
  transition: border-color .2s;
}
.article-foot a:hover { border-color: var(--quantum); }
.next-prev { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }
.next-prev a { font-size: 0.86rem; }

footer {
  margin-top: 3rem; padding-top: 1.7rem; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.6rem;
  font-size: 0.78rem; color: rgba(172,197,242,0.62); font-family: var(--sans);
}
footer a { color: var(--quantum); text-decoration: none; border-bottom: 1px solid transparent; }
footer a:hover { border-color: var(--quantum); }

@media (max-width: 560px) {
  .wrapper { padding: 0 1.15rem 4rem; }
  .post { padding-right: 0; }
  .post:hover { transform: none; }
  .series { margin-top: 2.6rem; }
  article h2 { margin-top: 2.4rem; }
  footer { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { animation: none; }
  .post:hover { transform: none; }
  * { transition-duration: 0.01ms !important; }
}