/* Same look as shridha.tech: warm dark by default, light on request, amber accent. Self-hosted fonts. */
@font-face { font-family: "Fraunces"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/fraunces-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/fraunces-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --bg: #0b0c0e; --raised: #141519; --ink: #f3efe7; --dim: #a49d90; --line: #24231f;
  --accent: #d98e3b; --accent-dim: #8a5a22; --soft: #d98e3b1f; --on-accent: #0b0c0e;
  --display: "Fraunces", ui-serif, Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f2ec; --raised: #ece6d9; --ink: #17140f; --dim: #6b6459; --line: #ddd6c7;
  --accent: #a8611e; --accent-dim: #7a4716; --soft: #a8611e1f; --on-accent: #f5f2ec;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.7 var(--sans); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.wrap { width: 100%; max-width: 46rem; margin-inline: auto; padding-inline: 1.5rem; }

.top { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.bar { max-width: 72rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand img { width: 2rem; height: 2rem; }
.brand-name { font: 500 1.25rem/1 var(--display); letter-spacing: -.01em; }
.brand-tag { font: 500 .7rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-dim); border-radius: 999px; padding: .25rem .5rem; }
.nav { display: flex; align-items: center; gap: 1.25rem; font-size: .9rem; color: var(--dim); }
.nav a { text-decoration: none; }
.nav a:hover { color: var(--ink); }
.toggle { width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; }
.toggle:hover { border-color: var(--accent); }
.toggle svg { width: 1rem; height: 1rem; }
.icon-moon { display: none; }
[data-theme="light"] .icon-sun { display: none; }
[data-theme="light"] .icon-moon { display: inline; }
@media (max-width: 30rem) { .wrap { padding-inline: 1rem; } .nav { gap: .9rem; } .nav a:nth-child(1), .nav a:nth-child(3) { display: none; } }

.label { font: 500 .75rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 1rem; }
.hero { padding-block: 3.5rem 1.5rem; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; letter-spacing: -.015em; line-height: 1.2; }
h1 { font-size: clamp(2rem, 5vw, 2.9rem); margin: 0; }
.lead { font-size: 1.2rem; color: var(--dim); margin: 1rem 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.chip, .tag { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: .2rem .8rem; font-size: .8rem; text-decoration: none; color: var(--dim); }
.chip:hover, .tag:hover { border-color: var(--accent); color: var(--ink); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }

.list { padding-bottom: 4rem; }
.card { padding-block: 1.75rem; border-top: 1px solid var(--line); }
.card h2 { font-size: 1.6rem; margin: .4rem 0 .5rem; }
.card h2 a { text-decoration: none; }
.card p { margin: 0; color: var(--dim); }
.card .tags { margin-top: .9rem; }
.meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font: 400 .8rem/1.4 var(--mono); color: var(--dim); margin: 0; }

.post { padding-block: 3.5rem 4rem; }
.post .meta { margin-bottom: 1rem; }
.prose { margin-top: 2.5rem; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: 1.7rem; margin: 2.75rem 0 .75rem; }
.prose h3 { font-size: 1.3rem; margin: 2rem 0 .5rem; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre, .prose table { margin: 1rem 0; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin: .35rem 0; }
.prose li::marker { color: var(--accent); }
.prose strong { font-weight: 600; }
.prose blockquote { border-left: 3px solid var(--accent); padding: .1rem 0 .1rem 1.1rem; color: var(--dim); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
.prose code { font: 400 .88em/1.4 var(--mono); background: var(--raised); border: 1px solid var(--line); border-radius: .35rem; padding: .1rem .35rem; }
.prose pre { background: var(--raised); border: 1px solid var(--line); border-radius: .6rem; padding: 1rem 1.1rem; overflow-x: auto; line-height: 1.55; }
.prose pre code { background: none; border: 0; padding: 0; font-size: .85rem; }
.prose table { border-collapse: collapse; display: block; overflow-x: auto; width: 100%; font-size: .95rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: .5rem .75rem; text-align: left; vertical-align: top; }
.prose th { background: var(--raised); font-weight: 600; }
.prose img { max-width: 100%; height: auto; border-radius: .5rem; }
.anchor { margin-left: .4rem; font-size: .8em; text-decoration: none; color: var(--dim); opacity: 0; }
h2:hover .anchor, h3:hover .anchor, .anchor:focus { opacity: 1; }
.back { margin: 3rem 0 0; font-size: .95rem; }
.cta { margin-top: 2rem; padding: 1.1rem 1.25rem; background: var(--soft); border: 1px solid var(--accent-dim); border-radius: .75rem; }
.cta p { margin: 0; }

.foot { border-top: 1px solid var(--line); padding-block: 2rem; font-size: .9rem; color: var(--dim); }
.foot-bar { max-width: 72rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
.foot-links { display: flex; gap: 1.25rem; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); }
@media (max-width: 30rem) { .hero { padding-top: 2.5rem; } .post { padding-top: 2.5rem; } }
@media print { .top, .foot, .cta, .anchor, .back { display: none; } body { background: #fff; color: #000; } }
.prose :not(pre) > code { overflow-wrap: anywhere; }