/* ---------------------------------------------------------------------
   anandsreekumar.com — one stylesheet for every page.

   the whole site as a sublime text buffer (mariana theme), no line-number
   gutter. structure comes from typed characters — === +++ --- — never
   from borders, boxes or a type hierarchy.

   two class vocabularies are supported on purpose: the index uses
   .doc/.entry/.row, the writeups use .container/.block/.heading. they
   are aliased below rather than renamed, so no page body had to be
   rewritten to adopt this file.
   --------------------------------------------------------------------- */

:root {
  --bg:     #303841;   /* mariana background — hsl(210,15%,22%) */
  --bg-alt: #2a3038;   /* code, pre, callouts */
  --fg:     #d8dee9;   /* mariana foreground — hsl(219,28%,88%) */
  --mid:    #a6acb9;   /* mariana comment    — hsl(221,12%,69%) */
  --faint:  #5c6673;   /* the === +++ --- rules */
  --sel:    #4f5b66;   /* selection */
  --caret:  #f9ae58;   /* mariana amber */
}

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

::selection { background: var(--sel); color: var(--fg); }

body {
  background: var(--bg);
  color: var(--fg);
  /* sublime's default face, per platform */
  font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
  font-size: 16px;
  line-height: 1.5;
  font-variant-ligatures: none;   /* typed characters don't ligature */
  font-kerning: none;
  padding: 2.5rem 2rem 4rem;
  overflow-x: hidden;
}

/* the 80-column text-file block, centred. the typed rules in the markup
   are 80 characters long, so they span it exactly. */
.doc,
.container { width: 80ch; max-width: 100%; margin: 0 auto; }

/* rules are literal text, clipped rather than wrapped — the same as
   sublime with word wrap off. */
.rule {
  color: var(--faint);
  white-space: pre;
  overflow: hidden;
  user-select: none;
}

/* a plain .txt buffer gets no syntax colours: no bold, no size jumps.
   a heading is just a word with dashes typed under it. */
h1, h2, h3,
.heading,
h1.title { font-size: inherit; font-weight: inherit; color: var(--fg); }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--faint);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
a:hover { background: var(--sel); text-decoration-color: transparent; }

/* emphasis the way a text file does it, since bold is off the table */
strong { font-weight: inherit; }
strong::before, strong::after { content: "*"; color: var(--faint); }
em { font-style: normal; }
em::before, em::after { content: "_"; color: var(--faint); }

/* muted text, under all three names the pages use for it */
.mid, .sub, .muted, .dim { color: var(--mid); }

/* spacers, under both names */
.blank { height: 1.5em; }
.blankline { height: 0.4rem; }

/* indentation in character cells, so it aligns like real typed text */
.indent { padding-left: 2ch; }

p { word-break: break-word; }


/* ---- index page ----------------------------------------------------- */

.entry { margin-bottom: 0.75em; }
.entry .meta, .entry .desc, .entry .link { padding-left: 4ch; }
.entry .meta, .entry .desc { color: var(--mid); }
.entry .title, .entry .desc, .entry .meta { word-break: break-word; }
.entry .link { word-break: break-all; }

/* a fixed label column, like a table typed with the space bar */
.row { display: flex; flex-wrap: wrap; }
.row .key { width: 17ch; flex-shrink: 0; color: var(--mid); }
.row a { word-break: break-all; }

/* the cursor, parked at the end of the first line */
.caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--caret);
  vertical-align: text-bottom;
  animation: blink 1.1s steps(1) infinite;
}


/* ---- writeups ------------------------------------------------------- */

.block { margin-bottom: 1.2rem; }
.footer { margin-top: 1.2rem; color: var(--faint); word-break: break-word; }
.back { color: inherit; }

/* prose needs breathing room between paragraphs; the index does not —
   scoped to .container so the index's .doc lines stay tight */
.container p { margin-bottom: 0.6rem; }

ol, ul { padding-left: 3ch; margin-bottom: 0.6rem; }
li { margin-bottom: 0.2rem; word-break: break-word; }

/* no chip, no rounded corner — just a slightly recessed panel */
code {
  background: var(--bg-alt);
  color: inherit;
  padding: 1px 5px;
  font-family: inherit;
  font-size: inherit;
  /* break only when a token genuinely doesn't fit, so short identifiers
     like package.json aren't split mid-word */
  word-break: normal;
  overflow-wrap: break-word;
}

pre {
  background: var(--bg-alt);
  color: inherit;
  padding: 0.8rem 1rem;
  margin-bottom: 0.8rem;
  overflow-x: auto;
}
pre code { background: transparent; padding: 0; }

/* callouts and notes are the same thing under two names. no left border,
   no accent colour — just a recessed panel, like pre. */
.callout, .note {
  background: var(--bg-alt);
  color: var(--mid);
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.8rem;
}
.callout strong, .note strong { color: var(--fg); }

figure { margin: 0.8rem 0; }
img {
  display: block;
  max-width: 100%;
  /* no border, no radius — those are web affordances, not typed ones */
}
figcaption { color: var(--faint); margin-top: 0.3rem; }


/* ---- 404 ------------------------------------------------------------ */

.blink {
  color: var(--caret);
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .caret, .blink { animation: none; }
}


/* ---- narrow screens -------------------------------------------------- */

@media (max-width: 640px) {
  body { font-size: 14px; padding: 1.75rem 1.25rem 3rem; }
  .entry .meta, .entry .desc, .entry .link { padding-left: 2ch; }

  /* label on its own line, url beneath — the 17ch column doesn't fit */
  .row { display: block; }
  .row .key { display: block; width: auto; }
}