/* Field Notes — matches pavanghantasala.com.
   Warm cream paper, ink text, emerald accent, Fraunces serif headlines with
   true-italic accents, Plex Mono kickers in 'NN / LABEL' format.
   NOTE: token values (~) were matched by eye from the live site since the
   repo is private; tune against source if you ever want them exact.
   Google Fonts links are in each HTML file; offline it falls back to
   Georgia / system mono gracefully. */

:root {
  --bg: #F7F4EC;      /* warm cream ~ */
  --panel: #FFFFFF;
  --ink: #1B1712;       /* warm near-black ~ */
  --muted: #6F695D;     /* warm gray ~ */
  --faint: #9a937f;
  --accent: #1A7A5C;    /* emerald ~ */
  --line: #E2DCCC;       /* hairline ~ */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

.wrap { max-width: 960px; margin: 0 auto; padding: 0 24px; }
.prose { max-width: 700px; }

/* header — mirrors the main site: wordmark left, mono nav right, hairline rule */
.site-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 26px 0; border-bottom: 1px solid var(--line);
}
.wordmark { text-decoration: none; }
.wordmark .wm-serif { font-family: var(--serif); font-size: 20px; color: var(--ink); }
.wordmark .wm-mono { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.wordmark:hover .wm-serif { color: var(--accent); }
.site-head nav a { font-family: var(--mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--muted); margin-left: 24px; }
.site-head nav a:hover, .site-head nav a.active { color: var(--accent); }

/* kickers + headlines */
.kicker {
  font-family: var(--mono); font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent); margin: 64px 0 18px;
}
h1 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5vw, 52px);
  line-height: 1.1; margin: 0 0 18px; letter-spacing: -0.01em;
}
h1 em, h2 em { font-style: italic; color: var(--accent); }
.lede { font-size: 20px; color: var(--muted); max-width: 640px; margin: 0 0 12px; line-height: 1.6; }

/* post cards */
.posts { margin: 56px 0 24px; border-top: 1px solid var(--line); }
.card { padding: 34px 0; border-bottom: 1px solid var(--line); }
.card .meta { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 0 0 10px; }
.card .meta .tag { color: var(--muted); }
.card h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.25; margin: 0 0 10px; }
.card h2 a { text-decoration: none; }
.card h2 a:hover { color: var(--accent); }
.card .excerpt { color: var(--muted); margin: 0 0 14px; max-width: 640px; }
.card .read { font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--accent); }

/* article body */
.post .body p { margin: 0 0 1.35em; }
.post .body h2 { font-family: var(--serif); font-weight: 400; font-size: 25px; margin: 1.8em 0 .6em; }
.post .body ol, .post .body ul { padding-left: 1.3em; margin: 0 0 1.35em; }
.post .body li { margin-bottom: .7em; }
.post .body li::marker { color: var(--accent); }
.post .body strong { color: var(--ink); }
.post .body code {
  font-family: var(--mono); font-size: .84em; background: var(--panel);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px;
}
.post .body pre {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 18px; overflow-x: auto; font-size: 14px; line-height: 1.6;
}
.post .body pre code { background: none; border: none; padding: 0; }
.closing { border-top: 1px solid var(--line); margin-top: 48px; padding-top: 20px; color: var(--faint); font-size: 16px; }
.post-nav { margin: 40px 0 80px; }
.post-nav a { font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--muted); }
.post-nav a:hover { color: var(--accent); }

/* footer — echoes the main site's colophon line */
.site-foot { border-top: 1px solid var(--line); padding: 28px 0 56px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.site-foot p, .site-foot a { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); text-decoration: none; margin: 0; }
.site-foot a:hover { color: var(--accent); }

@media (max-width: 640px) {
  body { font-size: 17px; }
  .site-head nav a { margin-left: 14px; }
}