/* ============================================
   K. NAGESHWAR — Design tokens
   ============================================ */

:root {
  /* Color */
  --paper: #FAFAF7;
  --paper-raised: #FFFFFF;
  --ink: #15171C;
  --ink-soft: #2B2E35;
  --slate: #5B6470;
  --slate-light: #8A92A0;
  --rule: #D8D2C4;
  --rule-light: #E8E4D9;
  --brick: #8B2E2E;
  --brick-dark: #6E2222;
  --brick-tint: #F7EBEA;
  --moss: #1F4D3E;
  --moss-tint: #E8F0EC;

  /* Reading modes (overridden by data-theme) */
  --read-bg: var(--paper);
  --read-ink: var(--ink);

  /* Type */
  --font-display: 'Source Serif 4', 'Tiempos', Georgia, serif;
  --font-body: 'Source Serif 4', Georgia, serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-telugu: 'Noto Serif Telugu', 'Noto Sans Telugu', serif;

  /* Layout */
  --content-width: 680px;
  --wide-width: 1120px;
  --radius: 3px;
  /* Overridden by js/main.js with the masthead's real rendered height, so
     the sticky reader toolbar (css/reader.css) can sit just below the
     sticky masthead instead of both competing for the same `top: 0`. */
  --masthead-height: 173px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

::selection { background: var(--brick); color: var(--paper); }

/* ============================================
   MASTHEAD
   ============================================ */

.masthead {
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Article reading-progress hairline — anchored to the masthead itself
   (right under the category nav row) rather than the reader toolbar, so
   it's always visible instead of scrolling behind the sticky masthead.
   Only present on article pages; harmlessly does nothing elsewhere. */
.reader-progress-bar {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--brick);
  width: 0%;
  transition: width 0.1s linear;
}

.masthead-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--wide-width);
  margin: 0 auto;
  padding: 14px 24px;
  border-bottom: 1px solid var(--rule);
}

.masthead-date {
  font-size: 12px;
  color: var(--slate);
  letter-spacing: 0.02em;
}

.masthead-main {
  max-width: var(--wide-width);
  margin: 0 auto;
  padding: 22px 24px 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.masthead-name {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}

.masthead-name .surname { color: var(--brick); }

.masthead-tagline {
  font-size: 13px;
  color: var(--slate);
  margin-top: 6px;
  font-style: italic;
  font-family: var(--font-display);
}

nav.masthead-nav {
  display: flex;
  gap: 28px;
}

nav.masthead-nav a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
  transition: border-color 0.15s, color 0.15s;
}

nav.masthead-nav a:hover,
nav.masthead-nav a.active {
  color: var(--brick);
  border-color: var(--brick);
}

/* site nav — one row: Home, story categories, and the remaining pages */

.site-nav {
  border-top: 1px solid var(--rule);
  background: var(--paper-raised);
}

.site-nav-inner {
  max-width: var(--wide-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scrollbar-width: none;
}

.site-nav-inner::-webkit-scrollbar { display: none; }

.site-nav a {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 11px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--brick);
  border-color: var(--brick);
}

.site-nav a.nav-divider {
  padding-left: 22px;
  border-left: 1px solid var(--rule);
}

/* credentials strip */

.cred-strip {
  background: var(--ink);
  color: var(--paper);
}

.cred-strip-inner {
  max-width: var(--wide-width);
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: #C9CCD3;
}

.cred-strip-inner strong {
  color: var(--paper);
  font-weight: 600;
}

.cred-strip-inner span::before {
  content: "·";
  margin-right: 22px;
  color: var(--brick);
  font-weight: 700;
}

.cred-strip-inner span:first-child::before { content: none; margin: 0; }

/* ============================================
   HOME — HERO
   ============================================ */

main { max-width: var(--wide-width); margin: 0 auto; padding: 0 24px; }

.hero {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
  padding: 40px 0 36px;
}

.hero-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brick);
  margin-bottom: 10px;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.12;
  font-weight: 600;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.hero h1 a:hover { color: var(--brick); }

.hero-dek {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 18px;
}

.hero-meta {
  font-size: 13px;
  color: var(--slate);
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-meta .dot { color: var(--rule); }

.listen-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 9px 16px 9px 12px;
  background: var(--moss-tint);
  border: 1px solid var(--moss);
  border-radius: 24px;
  font-size: 13px;
  font-weight: 600;
  color: var(--moss);
  cursor: pointer;
  width: fit-content;
}

.listen-chip:hover { background: #DCEAE3; }

.listen-chip .play-circle {
  width: 22px; height: 22px;
  background: var(--moss);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.listen-chip .play-circle svg { width: 9px; height: 9px; fill: var(--paper); }

.hero-side {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-left: 32px;
  border-left: 1px solid var(--rule);
}

.hero-side-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-light);
  margin-bottom: 4px;
}

.hero-side-item h3 {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.35;
  font-weight: 600;
  margin: 4px 0 4px;
}

.hero-side-item h3 a:hover { color: var(--brick); }

.hero-side-item .meta {
  font-size: 12px;
  color: var(--slate);
}

.row-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: inline-block;
}

.row-tag.politics, .row-tag.social, .row-tag.spotlight { color: var(--brick); }
.row-tag.economy, .row-tag.life { color: var(--moss); }
.row-tag.national, .row-tag.international { color: var(--slate); }

/* ============================================
   ARTICLE INDEX — dense list
   ============================================ */

.index-section { padding: 36px 0; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 10px;
  margin-bottom: 4px;
}

.section-head h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.section-head .view-all {
  font-size: 12px;
  font-weight: 600;
  color: var(--brick);
  letter-spacing: 0.02em;
}

.article-row {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 20px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-light);
}

.article-row:hover h3 { color: var(--brick); }

.article-row .tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--slate);
  padding-top: 3px;
}

.article-row .tag.politics { color: var(--brick); }
.article-row .tag.media { color: var(--moss); }
.article-row .tag.national { color: var(--slate); }
.article-row .tag.international { color: var(--slate); }
.article-row .tag.economy { color: var(--moss); }
.article-row .tag.social { color: var(--brick); }
.article-row .tag.life { color: var(--moss); }
.article-row .tag.spotlight { color: var(--brick); }

.article-row h3 {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  margin: 0 0 6px;
  transition: color 0.15s;
}

.article-row .excerpt {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.5;
  margin: 0;
  max-width: 60ch;
}

.article-row .row-meta {
  font-size: 12px;
  color: var(--slate-light);
  white-space: nowrap;
  padding-top: 3px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mini-listen {
  width: 22px; height: 22px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  background: var(--paper-raised);
}

.mini-listen:hover { border-color: var(--moss); }
.mini-listen svg { width: 8px; height: 8px; fill: var(--ink-soft); }
.mini-listen:hover svg { fill: var(--moss); }

/* ============================================
   FOOTER
   ============================================ */

footer {
  margin-top: 40px;
  border-top: 1px solid var(--ink);
  background: var(--ink);
  color: #B7BAC2;
}

.footer-inner {
  max-width: var(--wide-width);
  margin: 0 auto;
  padding: 36px 24px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
}

.footer-inner h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  margin: 0 0 14px;
}

.footer-inner p, .footer-inner a {
  font-size: 13px;
  line-height: 1.7;
  color: #9A9EA8;
  display: block;
}

.footer-inner a:hover { color: var(--paper); }

.footer-bottom {
  border-top: 1px solid #2B2E35;
  text-align: center;
  padding: 16px 24px;
  font-size: 12px;
  color: #6B6F79;
}

/* ============================================
   NEWSLETTER SUBSCRIBE
   ============================================ */

.subscribe-form {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.subscribe-form input[type="email"] {
  flex: 1;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 9px 10px;
  border-radius: var(--radius);
  border: 1px solid #3A3E47;
  background: #1E2128;
  color: var(--paper);
}

.subscribe-form input[type="email"]::placeholder { color: #6B6F79; }

.subscribe-form button {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--radius);
  border: none;
  background: var(--brick);
  color: #FFFFFF;
  cursor: pointer;
  white-space: nowrap;
}

.subscribe-form button:hover { background: var(--brick-dark); }
.subscribe-form button:disabled { opacity: 0.6; cursor: default; }

.subscribe-status {
  font-size: 13px;
  font-weight: 600;
  margin-top: 10px;
  min-height: 18px;
}

.subscribe-status.ok { color: var(--moss); }
.subscribe-status.ok::before { content: "✓ "; }
.subscribe-status.err { color: #E08A7D; }
/* The footer has a near-black background — var(--moss) is a dark green
   chosen for the light .subscribe-block background at the end of an
   article, so on the footer it was ~1.5:1 contrast against #15171C,
   effectively invisible even though the text was technically there. */
footer .subscribe-status.ok { color: #7FBF9A; }

/* article-end-marker is a zero-height sentinel js/main.js watches with
   IntersectionObserver — the moment it scrolls into view means the reader
   has actually reached the end of the article. It carries no styling of
   its own; it exists purely as a trigger point. */
.article-end-marker { height: 1px; }

/* A real popup, not furniture sitting in the article flow — fixed to the
   viewport so it's genuinely noticed the moment the reader finishes,
   rather than a block that quietly fades in wherever the scroll happens
   to be. Fires once per page load (js/main.js unobserves after the first
   trigger) and js/main.js also remembers a dismiss/subscribe in
   localStorage so it doesn't reappear on every article afterwards. */
.subscribe-popup {
  position: fixed;
  /* Positioning context for .subscribe-popup-close, which is absolute. */
  right: 20px;
  bottom: 20px;
  z-index: 500;
  width: 360px;
  max-width: calc(100% - 40px);
  padding: 22px;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.subscribe-popup.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .subscribe-popup { transition: none; }
}

.subscribe-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--slate);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.subscribe-popup-close:hover { color: var(--ink); }

.subscribe-popup h3 {
  font-family: var(--font-display);
  font-size: 18px;
  margin: 0 20px 6px 0;
}

.subscribe-popup p {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--slate);
  margin: 0 0 14px;
}

.subscribe-popup .subscribe-form input[type="email"] {
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-size: 15px;
  padding: 12px 14px;
}

.subscribe-popup .subscribe-form input[type="email"]::placeholder { color: var(--slate-light); }

.subscribe-popup .subscribe-form button {
  font-size: 15px;
  padding: 12px 24px;
}

.subscribe-popup .subscribe-status.err { color: var(--brick); }

@media (max-width: 520px) {
  .subscribe-popup {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
  }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; }
  .hero-side { border-left: none; border-top: 1px solid var(--rule); padding-left: 0; padding-top: 24px; }
  .masthead-main { flex-direction: column; align-items: flex-start; }
  nav.masthead-nav { gap: 18px; flex-wrap: wrap; }
  .article-row { grid-template-columns: 1fr; gap: 6px; }
  .article-row .tag { padding-top: 0; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .hero h1 { font-size: 28px; }
  .masthead-name { font-size: 26px; }
  .footer-inner { grid-template-columns: 1fr; }
}