/* anupmohan.com - minimal typographic. One column, generous measure,
   system fonts, one accent. Light and dark follow the reader's setting. */

:root {
  color-scheme: light;
  --measure: 50rem;
  --bg: #ffffff;
  --fg: #23211e;
  --muted: #6b6862;
  --faint: #94908a;
  --rule: #e6e3dd;
  --accent: #9a3412;
  --code-bg: #f6f5f2;
  --diagram-fill: #f4f3f0;
  --diagram-fill-alt: #eae8e3;
  --diagram-text: #23211e;
  --diagram-border: #c9c5bd;
  --diagram-line: #8a867f;
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}


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

html {
  font-size: 19px;          /* the page's base scale; everything else is rem */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--fg); color: var(--bg); padding: .6rem 1rem;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 10; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------- chrome */

header.site, main, footer.site {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

header.site {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: baseline; justify-content: space-between;
  padding-block: 2.5rem 3rem;
}
header.site .brand {
  color: var(--fg); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em;
}
header.site nav { display: flex; gap: 1.25rem; font-size: .95rem; }
header.site nav a { color: var(--muted); }
header.site nav a:hover { color: var(--fg); text-decoration: none; }

footer.site {
  margin-top: 5rem;
  padding-block: 2rem 3rem;
  border-top: 1px solid var(--rule);
  color: var(--faint); font-size: .85rem;
}
footer.site p { margin: .3rem 0; }
footer.site a { color: var(--muted); }

/* ------------------------------------------------------- home + lists */

.intro h1 { font-size: 1.75rem; margin: 0 0 .75rem; letter-spacing: -0.02em; }
.intro p { color: var(--muted); margin: 0 0 3rem; max-width: 34rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.featured h2, .listing h2 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--faint); font-weight: 600; margin: 0 0 .75rem;
}
.featured article { max-width: 38rem; }
.featured h3 { font-size: 1.5rem; line-height: 1.3; margin: 0 0 .6rem; letter-spacing: -0.02em; }
.featured h3 a { color: var(--fg); }
.featured h3 a:hover { color: var(--accent); text-decoration: none; }
.featured p { color: var(--muted); margin: 0 0 .75rem; }
.featured .meta {
  display: flex; align-items: baseline; gap: 1rem;
  color: var(--faint); font-size: .82rem; font-variant-numeric: tabular-nums;
}
.featured .read { margin-left: auto; font-size: .9rem; }

.listing h1 { font-size: 1.75rem; margin: 0 0 2rem; letter-spacing: -0.02em; }
.listing h2 { margin-top: 3.5rem; }
.listing h2.year { margin-top: 3rem; }

ul.posts { list-style: none; margin: 0; padding: 0; }
ul.posts li {
  display: flex; gap: 1.25rem; align-items: baseline;
  padding: .45rem 0;
}
ul.posts time {
  flex: 0 0 6.5rem;
  color: var(--faint); font-size: .82rem;
  font-variant-numeric: tabular-nums;
}
ul.posts a { color: var(--fg); }
ul.posts a:hover { color: var(--accent); text-decoration: none; }

@media (max-width: 34rem) {
  ul.posts li { flex-direction: column; gap: .15rem; padding: .6rem 0; }
  ul.posts time { flex: none; }
}

.more { margin-top: 2rem; font-size: .9rem; }

.tags-index {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 0 0 1rem;
}
.tags-index a {
  font-size: .82rem; color: var(--muted);
  border: 1px solid var(--rule); border-radius: 999px;
  padding: .18rem .7rem;
}
.tags-index a:hover { color: var(--fg); border-color: var(--faint); text-decoration: none; }
.tags-index span { color: var(--faint); }

/* ------------------------------------------------------------- post */

.post header h1 {
  font-size: 1.95rem; line-height: 1.25; letter-spacing: -0.025em;
  margin: 0 0 .5rem;
}
.post .meta { color: var(--faint); font-size: .85rem; margin: 0 0 2.5rem; }

.prose { font-size: 1em; }
/* The shell is wide so code, tables and diagrams get room; body copy keeps
   its own measure, set in characters rather than pixels. */
.prose > p, .prose > ul, .prose > ol, .prose > blockquote { max-width: 74ch; }
.prose > * + * { margin-top: 1.3em; }
.prose h2 { font-size: 1.25rem; margin-top: 2.5em; letter-spacing: -0.015em; }
.prose h3 { font-size: 1.08rem; margin-top: 2em; }
.prose h2, .prose h3, .prose h4 { line-height: 1.3; }
.prose .anchor {
  color: var(--rule); margin-left: .4rem; font-weight: 400;
  opacity: 0; transition: opacity .15s;
}
.prose h2:hover .anchor, .prose h3:hover .anchor { opacity: 1; }

.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: .35em; }

.prose blockquote {
  margin-inline: 0; padding-left: 1.2rem;
  border-left: 2px solid var(--rule); color: var(--muted);
}

.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }

.prose table {
  width: 100%; border-collapse: collapse; font-size: .92rem;
  display: block; overflow-x: auto;
}
.prose th, .prose td {
  text-align: left; padding: .5rem .8rem .5rem 0;
  border-bottom: 1px solid var(--rule);
}
.prose th { font-weight: 600; color: var(--muted); font-size: .82rem; }

/* inline code */
.prose code {
  font-family: var(--mono); font-size: .88em;
  background: var(--code-bg); padding: .12em .35em; border-radius: 3px;
}

/* ------------------------------------------------------- code blocks */

figure.code {
  margin: 1.6rem 0; position: relative;
  background: var(--code-bg);
  border: 1px solid var(--rule); border-radius: 6px;
}
figure.code pre {
  margin: 0; padding: 1rem 1.1rem; overflow-x: auto;
  font-size: .84rem; line-height: 1.6;
  background: transparent !important;
}
figure.code code { background: none; padding: 0; font-size: inherit; }
figure.code::before {
  content: attr(data-lang);
  position: absolute; top: .5rem; right: 3.5rem;
  font-size: .68rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--faint); pointer-events: none;
}
figure.code .copy {
  position: absolute; top: .4rem; right: .5rem;
  font: inherit; font-size: .7rem;
  background: var(--bg); color: var(--muted);
  border: 1px solid var(--rule); border-radius: 4px;
  padding: .15rem .5rem; cursor: pointer;
  opacity: 0; transition: opacity .15s;
}
figure.code:hover .copy, figure.code .copy:focus { opacity: 1; }

/* Single-theme Shiki output carries its own colours inline; just make sure
   the block's own background doesn't fight figure.code's. */
.shiki { background: transparent !important; }

/* ------------------------------------------------- images + diagrams */

figure.image, figure.diagram { margin: 2rem 0; }
figure.image img, figure.diagram svg { max-width: 100%; height: auto; display: block; margin-inline: auto; }
figure.image img { border-radius: 4px; }
figcaption {
  margin-top: .6rem; text-align: center;
  font-size: .82rem; color: var(--faint);
}

figure.diagram { overflow-x: auto; }
.mermaid-svg { max-width: 100%; height: auto; }
/* Colours come from the variables substituted into the SVG at build time
   (see lib/mermaid.js), so the diagram follows the page theme by itself. */
figure.diagram .edgeLabel, figure.diagram .edgeLabel p {
  background: var(--bg) !important;
  color: var(--diagram-text) !important;
}
figure.diagram.error pre {
  background: var(--code-bg); padding: 1rem; border-radius: 6px;
  border: 1px dashed var(--accent); font-size: .8rem; overflow-x: auto;
}

/* ---------------------------------------------------- tags + series */

ul.tags {
  list-style: none; display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 3rem 0 0; padding: 0;
  border-top: 1px solid var(--rule); padding-top: 1.5rem;
}
ul.tags a {
  font-size: .8rem; color: var(--muted);
  border: 1px solid var(--rule); border-radius: 999px; padding: .15rem .7rem;
}
ul.tags a:hover { color: var(--fg); text-decoration: none; }

.series {
  margin: 0 0 2.5rem; padding: 1rem 1.25rem;
  background: var(--code-bg); border-radius: 6px;
  border: 1px solid var(--rule);
}
.series h2 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--faint); margin: 0 0 .5rem;
}
.series ol { margin: 0; padding-left: 1.2rem; font-size: .9rem; }
.series li + li { margin-top: .2rem; }
.series li[aria-current] span { color: var(--fg); font-weight: 600; }

.prevnext {
  display: flex; gap: 1.5rem; justify-content: space-between;
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: .9rem;
}
.prevnext a { display: block; max-width: 20rem; color: var(--fg); }
.prevnext a:hover { color: var(--accent); text-decoration: none; }
.prevnext .next { text-align: right; }
.prevnext span {
  display: block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--faint); margin-bottom: .15rem;
}

/* --------------------------------------------------- share + related */

.share {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.share h2, .related h2 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--faint); margin: 0 0 .75rem; font-weight: 600;
}
.share-links { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.share-links a, .share-links button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; padding: 0;
  color: var(--muted); background: none; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 999px;
}
/* `display` here outranks the UA rule for [hidden], so restate it: the
   script-only buttons must stay invisible when the browser can't honour them. */
.share-links [hidden] { display: none; }
.share-links a:hover, .share-links button:hover {
  color: var(--fg); border-color: var(--faint); text-decoration: none;
}
.share-links a:focus-visible, .share-links button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.share-links .icon { width: 17px; height: 17px; }
.share-status { min-height: 1.2rem; margin: .5rem 0 0; font-size: .8rem; color: var(--muted); }

.related {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.related ul.posts { margin: 0; }

/* Wide viewports have an empty gutter beside the centred measure, so the
   share bar moves into it as a fixed rail: always on screen, always one
   click away, never pushing the column off centre. Below this width the
   gutter is gone and the bar stays in the flow at the foot of the post. */
@media (min-width: 62rem) {
  .share {
    position: fixed; z-index: 10;
    top: 50%; transform: translateY(-50%);
    left: max(1rem, calc(50% - var(--measure) / 2 - 3.9rem));
    margin: 0; padding: 0; border-top: 0;
  }
  /* The icons carry their own labels; the heading is for screen readers. */
  .share h2 {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .share-links { flex-direction: column; gap: .45rem; }
  .share-links a, .share-links button { background: var(--bg); }
  /* Anchored to the rail's left edge, not centred on it: the gutter can be
     as narrow as a couple of rem and a centred message would run off-screen.
     The chip background keeps it legible if it reaches the text column. */
  .share-status:not(:empty) {
    position: absolute; top: calc(100% + .6rem); left: 0;
    width: max-content; max-width: 9.5rem; margin: 0;
    padding: .35rem .5rem;
    font-size: .72rem; line-height: 1.35;
    color: var(--fg); background: var(--bg);
    border: 1px solid var(--rule); border-radius: 5px;
  }
}

/* -------------------------------------------------------------- misc */

@media print {
  header.site nav, footer.site, .copy, .prevnext, .share { display: none; }
  body { font-size: 11pt; }
}

.empty { color: var(--faint); }

footer.site .social { display: flex; gap: 1rem; align-items: center; }
footer.site .social a { display: inline-flex; }
footer.site .social a:hover { color: var(--fg, currentColor); }