/* ==========================================================================
   niraj.io / blog.niraj.io — shared styles
   Single source of truth. Keep this file byte-identical across both repos
   (niraj.io/res/css/site.css and blog.niraj.io/res/css/site.css).
   ========================================================================== */

:root {
  /* Type */
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  --text-xs:   0.8rem;   /* 14.4px  captions */
  --text-sm:   0.85rem;  /* 15.3px  metadata, notes */
  --text-nav:  0.9rem;   /* 16.2px  nav */
  --text-base: 1rem;     /* 18px    body */
  --text-h3:   1.1rem;   /* 19.8px  */
  --text-h2:   1.25rem;  /* 22.5px  */
  --text-h1:   1.6rem;   /* 28.8px  */
  --text-display: 2rem;  /* 36px    optional */

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;  /* headings, nav current, labels — LOADED */
  --weight-bold:     700;  /* inline strong emphasis — LOADED (upright + italic) */

  --lh-tight: 1.2;   /* H1 */
  --lh-head:  1.3;   /* H2/H3 */
  --lh-body:  1.65;  /* prose */

  --track-tight: -0.01em; /* large headings only */

  /* Color */
  --ink:     #1a1a1a;
  --muted:   #555;
  --faint:   #8a8a8a;
  --border:  #ddd;
  --bg:      #fff;
  --code-bg: #f5f5f4;
  --sel-bg:  #ffe9a8;

  /* Space (4px base) */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem;  --s-8: 2rem;    --s-10: 2.5rem;
  --s-12: 3rem;   --s-16: 4rem;   --s-22: 5.5rem; --s-30: 7.5rem;

  /* Layout */
  --page-max: 880px;
  --measure:  600px;
  --sidebar-w: 136px;
  --rail-gap:  88px;
  --pad-x: 40px;  --pad-x-mobile: 20px;
  --radius: 3px;
  --border-w: 1px;
  --bp-mobile: 640px;
}

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

html {
  font-size: 18px;
}

body {
  font-family: var(--font-serif);
  background: var(--bg);
  color: var(--ink);
  line-height: var(--lh-body);
}

.page {
  display: flex;
  align-items: flex-start;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 72px 40px 120px;
  gap: 88px;
}

/* Sidebar */

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
}

nav a {
  display: block;
  font-size: var(--text-nav);
  color: var(--ink);
  text-decoration: none;
  margin-bottom: 0.4rem;
  line-height: 1.45;
}

nav a:hover {
  text-decoration: underline;
}

nav a.current {
  font-weight: var(--weight-semibold);
}

/* Content — links keep browser defaults on purpose */

.content {
  flex: 1;
  max-width: var(--measure);
}

h1 {
  font-size: var(--text-h1);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  margin-bottom: 1.4rem;
}

/* Home-page name lockup — larger, lighter display treatment. */
h1.name {
  font-size: var(--text-display);
  font-weight: var(--weight-medium);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

p {
  margin-bottom: 1.4rem;
}

strong,
b {
  font-weight: var(--weight-bold);
}

blockquote {
  margin: 0 0 1.4rem;
  padding-left: var(--s-4);
  border-left: 2px solid var(--border);
  color: var(--muted);
  font-style: italic;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--code-bg);
  padding: 0.1em 0.35em;
  border-radius: var(--radius);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.5;
  background: var(--code-bg);
  padding: var(--s-4);
  border-radius: var(--radius);
  overflow-x: auto;
  margin: 0 0 1.4rem;
}

pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

.content a:visited {
  color: #0000ee;
  color: linktext;
}

.updated {
  margin-top: 3rem;
  margin-bottom: 0;
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--muted);
}

/* Blog index */

.post-list {
  list-style: none;
}

.post-list li {
  margin-bottom: 0.7rem;
}

.post-year {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-left: 0.5rem;
}

/* Post */

.post-header {
  margin-bottom: 2.2rem;
}

.post-header h1 {
  margin-bottom: 0.3rem;
}

.post-date {
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--muted);
}

.post-body h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-head);
  margin: 2.5rem 0 0.75rem;
}

.post-body h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-head);
  margin: 2rem 0 0.75rem;
}

.post-body ul,
.post-body ol {
  margin: 0 0 1.4rem 1.4rem;
}

.post-body li {
  margin-bottom: 0.5rem;
}

.post-body li ul,
.post-body li ol {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.post-body img {
  max-width: 100%;
}

.post-divider {
  margin: 2.5rem 0 2rem;
  border: none;
  border-top: var(--border-w) solid var(--border);
}

/* Tighter divider for closing blocks that already carry their own margins
   (e.g. disclaimer / thanks). */
.post-divider.tight {
  margin: 1.1rem 0;
}

.post-thanks a,
.post-thanks a:visited {
  color: inherit;
}

.post-thanks,
.post-disclaimer {
  margin: 0.5rem 0 0;
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--muted);
}

.video-embed {
  margin: 0 0 1.4rem;
}

.video-embed iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: var(--border-w) solid var(--border);
}

.notes-label,
.footnotes-label,
.aside-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  margin-bottom: 0.5rem;
}

.post-notes,
.post-footnotes {
  margin-top: 2.5rem;
}

.post-notes ol,
.post-footnotes ol {
  margin-left: 1.4rem;
  font-size: var(--text-sm);
  color: var(--muted);
}

.post-notes ol li,
.post-footnotes ol li {
  margin-bottom: 0.35rem;
}

.post-body img.post-image {
  display: block;
  max-width: 400px;
  margin: 0 auto 0.4rem;
}

.post-image-caption {
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--muted);
  margin-bottom: 1.6rem;
  text-align: center;
}

/* Mobile */

@media (max-width: 640px) {
  .page {
    flex-direction: column;
    padding: 40px 20px 80px;
    gap: 24px;
  }

  .sidebar {
    width: 100%;
  }

  nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0 14px;
  }

  nav a {
    margin-bottom: 0.2rem;
  }
}