/* rishabhdagli.com — the whole stylesheet.
   colors live in :root (light) and the dark block below it.
   the font is loaded by the <link> tag in each html file. */

:root {
  --bg: #faf7f1;        /* warm paper */
  --ink: #1f1b17;       /* near-black */
  --muted: #8a827a;     /* greys for dates, markers, underlines */
  --accent: #b4532c;    /* terracotta — link hover */
  --rule: #e6dfd4;      /* hairline */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151311;
    --ink: #e9e4dc;
    --muted: #8a827a;
    --accent: #e0825a;
    --rule: #2a2622;
  }
}

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

html { background: var(--bg); }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  max-width: 600px;
  margin: 0 auto;
  padding: 72px 24px 96px;
}

/* name line at the top */
h1 {
  font-size: 1.35em;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: .1em;
}
.sub {
  color: var(--muted);
  font-size: .92em;
  margin-bottom: 2.2em;
}

p { margin-bottom: .85em; }

em { font-style: italic; }

ul { margin: .2em 0 1.1em; padding-left: 0; list-style: none; }

li { margin-bottom: .35em; padding-left: 1.3em; position: relative; }

li::before { content: "–"; color: var(--muted); position: absolute; left: .1em; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--muted);
  text-underline-offset: 3px;
  transition: color .12s, text-decoration-color .12s;
}
a:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* the closing line and the footer */
.sign { font-style: italic; color: var(--muted); margin-top: 1.6em; }

.footer {
  margin-top: 2.4em;
  padding-top: 1.2em;
  border-top: 1px solid var(--rule);
  font-size: .95em;
}
.footer span { color: var(--muted); margin: 0 .35em; }

/* second-level pages (previously.html) */
.back { font-size: .85em; color: var(--muted); margin-bottom: 2.2em; display: inline-block; }
.detail-head { margin-top: 2em; margin-bottom: .15em; font-weight: 500; }
.detail-head small { color: var(--muted); font-weight: 400; font-size: .85em; margin-left: .4em; }
.detail p + .detail-head { margin-top: 2em; }

@media (max-width: 640px) {
  body { font-size: 16.5px; line-height: 1.55; }
  main { padding: 40px 20px 64px; }
  a { overflow-wrap: break-word; word-break: break-word; }
}