/* =========================================================================
   NeelNanda.io–accurate theme overrides for Bhavith Chandra.

   Exact palette sampled from https://www.neelnanda.io/about :
     Header bar:   #8EB6DC   (powder blue)
     Body bg:      #EAEAEE   (light lavender-gray)
     Ink:          #1a1a1a
     Muted:        #9b9b9e
     Accent link:  #2a6fb8

   Fonts: Playfair Display (serif, headings + wordmark italic),
          Work Sans (sans, body + nav) — both Google Fonts, free.
   Body text is center-aligned like NeelNanda.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,700&family=Work+Sans:wght@300;400;500;600&display=swap");

:root {
  --nn-header-bg: #8EB6DC;
  --nn-header-fg: #ffffff;
  --nn-body-bg: #EAEAEE;
  --nn-ink: #1a1a1a;
  --nn-body: #2a2a2a;
  --nn-muted: #6b6b70;
  --nn-soft: #9b9b9e;
  --nn-line: #d7d7dc;
  --nn-card: #ffffff;
  --nn-accent: #2a6fb8;
  --nn-accent-dark: #174c85;

  --nn-max: 860px;
  --nn-wide: 1180px;

  --nn-serif: "Playfair Display", "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --nn-sans: "Work Sans", "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, "Segoe UI", sans-serif;
  --nn-mono: "SF Mono", "Menlo", "Consolas", monospace;
}

/* -------- Global reset of the Minimal Mistakes base -------- */
html, body {
  background: var(--nn-body-bg) !important;
  color: var(--nn-body) !important;
  font-family: var(--nn-sans) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { font-weight: 400 !important; }

/* -------- Links -------- */
a, a:visited {
  color: var(--nn-accent) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
  border-bottom: none !important;
}
a:hover, a:focus {
  color: var(--nn-accent-dark) !important;
  text-decoration-thickness: 2px !important;
}

/* -------- Headings: serif, bold, left-aligned -------- */
h1, h2, h3, h4, h5, h6,
.page__title,
.page__content h1, .page__content h2, .page__content h3, .page__content h4,
.archive__item-title {
  font-family: var(--nn-serif) !important;
  color: var(--nn-ink) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.15 !important;
  margin: 2rem 0 0.8rem !important;
  padding: 0 !important;
  border: none !important;
  font-style: normal !important;
  text-align: left;
}

h1, .page__title, .page__content h1 { font-size: 2.6rem !important; letter-spacing: -0.015em !important; }
h2, .page__content h2 { font-size: 1.9rem !important; margin-top: 3rem !important; }
h3, .page__content h3 { font-size: 1.4rem !important; margin-top: 2rem !important; }
h4, .page__content h4 { font-size: 1.15rem !important; }

h1 em, h2 em, h3 em, h4 em { font-style: normal !important; }

/* -------- Body text: left-aligned, sans, modest size -------- */
.page__content p,
.page__content ul,
.page__content ol,
.nn-section p,
.nn-section ul,
.nn-section ol {
  text-align: left;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--nn-body);
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.page__content ul, .page__content ol,
.nn-section ul, .nn-section ol {
  padding-left: 1.4rem;
  list-style-position: outside;
  list-style-type: disc;
}
.page__content li,
.nn-section li {
  margin: 0.4em 0;
  text-align: left;
}

/* Horizontal rule: subtle full-width divider */
.page__content hr {
  border: none;
  border-top: 1px solid var(--nn-line);
  margin: 2.4rem 0;
  width: 100%;
}

/* -------- Layout: header full-width, centered content -------- */
#main {
  max-width: var(--nn-wide) !important;
  margin: 0 auto !important;
  padding: 2.5rem 2rem 5rem !important;
}
#main .page,
#main .archive {
  float: none !important;
  width: 100% !important;
  max-width: var(--nn-max) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  clear: both;
  text-align: left;
}
#main > .sidebar { display: none !important; }
.page__inner-wrap { max-width: var(--nn-max); margin: 0 auto; }

/* -------- Masthead: powder-blue bar, white text, serif wordmark -------- */
.masthead {
  background: var(--nn-header-bg) !important;
  border: none !important;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05);
  padding: 0 !important;
  min-height: 104px;
  display: block;
}

.masthead__inner-wrap {
  max-width: var(--nn-wide) !important;
  margin: 0 auto !important;
  padding: 2rem 2rem !important;
  font-family: var(--nn-sans) !important;
}
.masthead__menu { width: 100% !important; }

.nn-nav {
  background: transparent !important;
  padding: 0 !important;
}
.nn-nav__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 1.8rem;
  width: 100%;
}
.nn-nav__list li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.nn-nav__brand { margin-right: 2rem !important; }
.nn-nav__brand a {
  font-family: var(--nn-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 2rem !important;
  letter-spacing: -0.01em !important;
  color: var(--nn-header-fg) !important;
  text-decoration: none !important;
  line-height: 1;
  border: none !important;
}
.nn-nav__brand a:hover {
  color: var(--nn-header-fg) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
}
.nn-nav__item a {
  color: var(--nn-header-fg) !important;
  font-family: var(--nn-sans) !important;
  font-weight: 400 !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  padding: 0 !important;
  letter-spacing: 0.005em;
  border: none !important;
}
.nn-nav__item a:hover {
  color: var(--nn-header-fg) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* -------- Hero on about/home: photo (portrait) left + text right ------- */
.nn-hero {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 2.5rem;
  align-items: start;
  padding: 1.5rem 0 2.5rem;
  margin: 0 0 2.5rem;
  max-width: var(--nn-max);
  text-align: left;
}
.nn-hero__photo {
  width: 320px;
  height: 440px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--nn-card);
}
.nn-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.nn-hero__text { text-align: left; padding-top: 0.5rem; }
.nn-hero__text h1 {
  font-family: var(--nn-serif) !important;
  font-size: 2.8rem !important;
  line-height: 1.05 !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 0.7rem !important;
  text-align: left !important;
}
.nn-hero__tagline {
  font-size: 1.05rem;
  color: var(--nn-muted);
  margin: 0 0 1.2rem;
  text-align: left;
}
.nn-hero__links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0 1.2rem;
  font-size: 0.95rem;
  text-align: left !important;
}
.nn-hero__links li { margin: 0 !important; text-align: left !important; list-style: none !important; }
.nn-hero__links a { text-decoration: underline !important; }

.nn-hero__welcome {
  margin: 1.4rem 0 0 !important;
  padding: 0 !important;
  font-family: var(--nn-sans);
  font-size: 1rem !important;
  line-height: 1.65 !important;
  color: var(--nn-body) !important;
  text-align: left !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.nn-hero__accent {
  color: var(--nn-accent-dark);
  font-weight: 600;
}
.nn-hero__aside {
  color: var(--nn-muted);
  font-size: 0.94em;
  font-style: italic;
}

@media (max-width: 720px) {
  .nn-hero {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    padding: 1rem 0 1.8rem;
  }
  .nn-hero__photo { width: 100%; max-width: 260px; height: 340px; }
  .nn-hero__text h1 { font-size: 2rem !important; }
  .nn-hero__welcome { font-size: 0.98rem !important; }
}

/* -------- Blockquotes -------- */
.page__content blockquote {
  border: none !important;
  background: var(--nn-card) !important;
  color: var(--nn-body) !important;
  padding: 1em 1.2em !important;
  margin: 1.2em 0 !important;
  font-style: italic !important;
  border-left: 3px solid var(--nn-accent) !important;
  border-radius: 0 4px 4px 0;
  text-align: left;
}

/* <ins> used in publications md for the author's own name */
.page__content ins {
  text-decoration: underline;
  text-decoration-color: var(--nn-accent);
  text-underline-offset: 2px;
  font-weight: 700;
  color: var(--nn-ink);
}

/* -------- Publications page: year headings + paper h3's, centered ------ */
.page__content h2 {
  margin-top: 3.2rem !important;
  padding-top: 2rem !important;
  border-top: 1px solid var(--nn-line) !important;
}
.page__content h2:first-of-type {
  padding-top: 0 !important;
  border-top: none !important;
  margin-top: 1.2rem !important;
}

/* -------- CV / archive items -------- */
.archive__item-title { font-size: 1.2rem !important; margin: 0 0 0.3rem !important; text-align: left; }
.archive__item-excerpt { color: var(--nn-muted) !important; font-size: 0.95rem !important; text-align: left; }

/* -------- Footer: tiny, centered, muted -------- */
.page__footer {
  background: var(--nn-body-bg) !important;
  color: var(--nn-soft) !important;
  border: none !important;
  margin-top: 5rem !important;
}
.page__footer footer {
  max-width: var(--nn-wide) !important;
  margin: 0 auto !important;
  padding: 2.5rem 2rem !important;
  font-size: 0.88rem !important;
  text-align: center;
  color: var(--nn-muted);
}
.page__footer a { color: var(--nn-accent) !important; }
.page__footer-copyright {
  font-size: 0.82rem !important;
  color: var(--nn-soft) !important;
  text-align: center;
  margin-top: 1rem;
}
.page__footer-follow { display: none !important; }

/* -------- Kill clutter from the underlying theme -------- */
.page__share,
.page__taxonomy,
.page__meta-title,
.page__related,
.pagination--pager,
.page__meta { display: none !important; }

.sidebar.sticky, .sidebar { display: none !important; }
.author__avatar, .author__urls-wrapper, .author__content { display: none !important; }

/* -------- Code + tables -------- */
code, pre, tt { font-family: var(--nn-mono) !important; font-size: 0.9em !important; }
pre, .highlight {
  background: var(--nn-card) !important;
  border: 1px solid var(--nn-line) !important;
  border-radius: 6px !important;
  padding: 0.85em 1em !important;
  text-align: left !important;
}
:not(pre) > code {
  background: var(--nn-card) !important;
  padding: 0.12em 0.35em !important;
  border-radius: 3px !important;
  color: var(--nn-ink) !important;
}
table { font-size: 0.98rem !important; margin: 1.5rem auto !important; }
th, td { border-color: var(--nn-line) !important; }

/* -------- NN-style post list (used on home's "Recent" section) --------- */
.nn-section { margin: 2.5rem 0; text-align: left; }
.nn-section h2 {
  margin-top: 2.8rem !important;
  padding-top: 2rem !important;
  border-top: 1px solid var(--nn-line) !important;
}
.nn-section h2:first-child { border-top: none !important; padding-top: 0 !important; margin-top: 0 !important; }

.nn-post-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 1rem 0 0 !important;
  text-align: left !important;
}
.nn-post-list li {
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--nn-line);
  text-align: left !important;
  margin: 0 !important;
  list-style: none !important;
}
.nn-post-list li:last-child { border-bottom: none; }
.nn-post-list__date {
  display: block;
  font-size: 0.82rem;
  color: var(--nn-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
.nn-post-list__title {
  font-family: var(--nn-serif) !important;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--nn-ink) !important;
  text-decoration: none !important;
  display: block;
}
.nn-post-list__title:hover {
  color: var(--nn-accent) !important;
  text-decoration: underline !important;
}
.nn-post-list__excerpt {
  color: var(--nn-body);
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
}
.nn-link-more { display: inline-block; margin-top: 0.8rem; font-weight: 500; }

/* -------- Blog page -------- */
.nn-blog-intro {
  font-size: 1.05rem !important;
  color: var(--nn-muted) !important;
  margin: 0.5rem 0 2rem !important;
  text-align: left !important;
}
.nn-blog-empty {
  padding: 2.5rem 1.5rem;
  background: var(--nn-card);
  border: 1px dashed var(--nn-line);
  border-radius: 4px;
  text-align: center;
  color: var(--nn-muted);
}
.nn-blog-empty p { text-align: center !important; margin: 0 !important; }

.nn-post-list__series {
  color: var(--nn-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  text-transform: none;
}
.nn-post-list__read {
  display: inline-block;
  margin-top: 0.45rem;
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 0.78rem;
  color: var(--nn-soft);
  letter-spacing: 0.04em;
}

/* -------- Contact list ----------------------------------------------- */
.nn-contact {
  list-style: none !important;
  padding: 0 !important;
  margin: 0.6rem 0 1.4rem !important;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.8rem;
}
.nn-contact li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0.9rem 1.1rem !important;
  background: var(--nn-card);
  border: 1px solid var(--nn-line);
  border-left: 3px solid var(--nn-accent);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.nn-contact__label {
  font-family: var(--nn-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nn-muted);
}
.nn-contact__addr {
  font-family: var(--nn-mono) !important;
  font-size: 0.98rem;
  color: var(--nn-accent-dark) !important;
  text-decoration: none !important;
  word-break: break-all;
}
.nn-contact__addr:hover {
  text-decoration: underline !important;
}

/* -------- Welcome block (legacy, unused now) ------------------------- */
.nn-welcome {
  position: relative;
  margin: 0 0 2.6rem !important;
  padding: 1.5rem 1.6rem 1.5rem 1.9rem !important;
  background: linear-gradient(180deg, #ffffff, #fafbfd);
  border: 1px solid var(--nn-line);
  border-left: 3px solid var(--nn-accent);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 10px 28px rgba(0, 0, 0, 0.035);
  max-width: 100%;
}
.nn-welcome::before {
  content: "Welcome";
  position: absolute;
  top: -0.65rem;
  left: 1.4rem;
  padding: 0.18rem 0.6rem;
  background: var(--nn-accent);
  color: #ffffff;
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 3px;
  box-shadow: 0 2px 10px var(--nn-accent-glow);
}
.nn-welcome__body {
  margin: 0 !important;
  font-family: var(--nn-sans);
  font-size: 1.08rem !important;
  line-height: 1.7 !important;
  color: var(--nn-ink) !important;
  text-align: left !important;
  letter-spacing: -0.003em;
}
.nn-welcome__accent {
  color: var(--nn-accent-dark);
  font-weight: 600;
  background: linear-gradient(180deg, transparent 62%, var(--nn-accent-soft) 62%);
  padding: 0 0.08em;
  white-space: nowrap;
}
.nn-welcome__aside {
  color: var(--nn-muted);
  font-size: 0.95em;
  font-style: italic;
}
@media (max-width: 640px) {
  .nn-welcome { padding: 1.4rem 1.2rem 1.2rem 1.4rem !important; margin-bottom: 2rem !important; }
  .nn-welcome::before { left: 1rem; }
  .nn-welcome__body { font-size: 1rem !important; }
  .nn-welcome__accent { white-space: normal; }
}

/* =========================================================================
   Blog index — simple reverse-chronological list (.bl- prefix)
   ========================================================================= */

.bl-hero {
  max-width: 760px;
  margin: 0 0 2.5rem;
  padding: 1rem 0 0;
}
.bl-eyebrow {
  font-family: var(--nn-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nn-accent-dark);
  margin: 0 0 0.8rem !important;
}
.bl-title {
  font-family: var(--nn-serif) !important;
  font-size: 2.4rem !important;
  line-height: 1.08 !important;
  letter-spacing: -0.015em;
  color: var(--nn-ink);
  margin: 0 0 0.9rem !important;
}
.bl-sub {
  font-size: 1.05rem;
  color: var(--nn-muted);
  line-height: 1.55;
  margin: 0 0 0 !important;
  max-width: 620px;
}

.bl-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 820px;
}

.bl-item { list-style: none !important; margin: 0 !important; }

.bl-card {
  display: block;
  padding: 1.4rem 1.5rem;
  background: var(--nn-card);
  border: 1px solid var(--nn-line);
  border-left: 3px solid var(--nn-accent);
  border-radius: 4px;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 120ms ease, box-shadow 160ms ease, border-color 120ms ease;
}
.bl-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
  border-left-color: var(--nn-accent-dark);
}

.bl-card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--nn-mono);
  font-size: 0.78rem;
  color: var(--nn-muted);
  letter-spacing: 0.04em;
  margin: 0 0 0.5rem;
}

.bl-card__title {
  font-family: var(--nn-serif) !important;
  font-size: 1.35rem !important;
  line-height: 1.3 !important;
  color: var(--nn-ink) !important;
  margin: 0 0 0.45rem !important;
  letter-spacing: -0.01em;
}

.bl-card__excerpt {
  font-size: 0.98rem;
  color: var(--nn-body);
  line-height: 1.55;
  margin: 0 0 0.7rem !important;
}

.bl-card__arrow {
  font-family: var(--nn-mono);
  font-size: 0.82rem;
  color: var(--nn-accent-dark);
  letter-spacing: 0.04em;
}

.bl-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--nn-muted);
}

@media (max-width: 640px) {
  .bl-title { font-size: 1.9rem !important; }
  .bl-card { padding: 1.15rem 1.2rem; }
  .bl-card__title { font-size: 1.2rem !important; }
}

/* =========================================================================
   Post prev/next (simple chronological navigation)
   ========================================================================= */

.post-nav {
  margin: 3rem 0 1rem;
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--nn-line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.post-nav__link {
  display: block;
  padding: 0.9rem 1.1rem;
  background: var(--nn-card);
  border: 1px solid var(--nn-line);
  border-radius: 4px;
  text-decoration: none !important;
  color: inherit !important;
  transition: border-color 120ms ease, transform 120ms ease;
}
.post-nav__link:hover {
  border-color: var(--nn-accent);
  transform: translateY(-1px);
}
.post-nav__link--disabled {
  opacity: 0.45;
  pointer-events: none;
}
.post-nav__link--next { text-align: right; }
.post-nav__dir {
  font-family: var(--nn-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nn-muted);
  margin: 0 0 0.3rem;
}
.post-nav__title {
  font-family: var(--nn-serif);
  font-size: 1rem;
  color: var(--nn-ink);
  line-height: 1.3;
}
@media (max-width: 640px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav__link--next { text-align: left; }
}