/* ═══════════════════════════════════════════════════════════════
   TELANGANA LIBRARY — shared design system (tl-base.css)
   Tokens + site-wide behaviours only. Page layouts stay in each page.
   Load this BEFORE the page's own <style>.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Palette ─────────────────────────────────────────────── */
  --tl-charcoal:   #1A1A1A;   /* dark base */
  --tl-charcoal-2: #141210;   /* deeper panel */
  --tl-cream:      #F5F0E8;   /* light base   */
  --tl-cream-2:    #EFE7D9;   /* light panel  */
  --tl-gold:       #C9A84C;   /* gold on DARK backgrounds only */
  --tl-gold-ink:   #8F7430;   /* gold for TEXT on cream (AA contrast) */
  --tl-terracotta: #C1440E;   /* accent / links on light */
  --tl-forest:     #2C4A2E;   /* quote moments */
  --tl-ink:        #33312D;   /* body text on cream */
  --tl-mid:        #5C574E;   /* secondary text on cream (AA) */
  --tl-border:     #E0D8CC;   /* hairlines on cream */
  --tl-white-92:   rgba(250,247,242,0.92);
  --tl-white-65:   rgba(250,247,242,0.65);
  --tl-white-45:   rgba(250,247,242,0.45);

  /* ── Type ────────────────────────────────────────────────── */
  --tl-serif: 'Cormorant Garamond', Georgia, serif;
  --tl-sans:  'Jost', 'Avenir Next', sans-serif;

  /* ── Motion identity: one curve, one scale ───────────────── */
  --tl-ease:       cubic-bezier(0.22, 1, 0.36, 1);  /* signature ease-out */
  --tl-dur-fast:   180ms;
  --tl-dur:        320ms;
  --tl-dur-slow:   650ms;

  /* ── Z scale ─────────────────────────────────────────────── */
  --z-nav:     100;
  --z-overlay: 800;
  --z-chat:    900;
  --z-modal:   1000;
}

/* ── Selection ───────────────────────────────────────────────── */
::selection { background: rgba(201,168,76,0.32); color: inherit; }

/* ── Keyboard focus: visible, on-brand, never for mouse ─────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--tl-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Numbers set like they were typeset ─────────────────────── */
.tl-num,
[class*="stat-num"], [class*="stat-value"],
[class*="key-num"], [class*="kn-val"],
.data-table td, .compare-num, .groundwater-num {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ── Reveal utilities (IntersectionObserver adds .vis) ───────── */
.tl-reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--tl-dur-slow) var(--tl-ease),
              transform var(--tl-dur-slow) var(--tl-ease);
}
.tl-reveal.vis { opacity: 1; transform: none; }
.tl-reveal-d1 { transition-delay: 90ms; }
.tl-reveal-d2 { transition-delay: 180ms; }
.tl-reveal-d3 { transition-delay: 270ms; }

/* ── Interactive weight: buttons/links feel physical ────────── */
.tl-press { transition: transform var(--tl-dur-fast) var(--tl-ease); }
.tl-press:active { transform: scale(0.98); }
button:not([disabled]):active,
.hero-cta:active, .j2-btn:active, .tl-cta a:active { transform: scale(0.985); }

/* ── Page-to-page motion: soft cross-document transition ─────── */
/* Progressive enhancement (Chromium 126+); other browsers ignore. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: tl-vt-out 200ms var(--tl-ease) both; }
::view-transition-new(root) { animation: tl-vt-in 300ms var(--tl-ease) both; }
@keyframes tl-vt-out { to { opacity: 0; } }
@keyframes tl-vt-in { from { opacity: 0; transform: translateY(8px); } }

/* ── Paper grain — a whisper of texture over the whole page ──── */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 99990;
  pointer-events: none; opacity: 0.30; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.51 0 0 0 0 0.44 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media print { body::after { display: none; } }

/* ── Archive accession label (catalogue language) ───────────── */
.tl-accession {
  font-family: var(--tl-sans);
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* ── Print: chapters read like a well-set document ───────────── */
@media print {
  #shared-nav-mount, #shared-footer-mount, nav, footer,
  .wa-share, .breadcrumb, .prev-next, .sidebar-section, .desktop-sidebar,
  #tl-chat-fab, #tl-voice-call-fab, #tl-chat-panel, #tl-chat-bubble-hint,
  #scroll-progress, .mobile-menu, .hamburger {
    display: none !important;
  }
  body { background: #fff !important; color: #000 !important; font-size: 12pt; }
  .article-body > p, .article-body p { max-width: none; color: #000 !important; }
  .article-title { color: #000 !important; }
  a { color: #000; text-decoration: none; }
  .pull-quote, .fact-box, .stat-card, .groundwater-strip {
    background: #fff !important; color: #000 !important;
    border: 1pt solid #999; box-shadow: none;
  }
  .pull-quote p, .fact-box ul li, .stat-label, .groundwater-desc { color: #000 !important; }
}

/* ── Reduced motion: honour it everywhere, always ────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .tl-reveal { opacity: 1; transform: none; }
}

/* ── Article figures: archival photographs inside chapter pages ── */
.article-figure {
  margin: 34px 0;
  max-width: 680px;
}
.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #E0D8CC;
  background: #fff;
  padding: 8px;
  box-sizing: border-box;
}
.article-figure.af-portrait img {
  max-height: 560px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}
.article-figure figcaption {
  font-family: 'Jost', sans-serif;
  font-size: 0.8rem;
  color: #4A4A4A;
  line-height: 1.6;
  padding: 10px 2px 0;
  border-left: 3px solid #C9A84C;
  padding-left: 12px;
  margin-top: 10px;
}
.article-figure figcaption .af-credit {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: #8a8578;
  margin-top: 4px;
}
.article-figure figcaption .af-credit a {
  color: inherit;
  text-decoration: underline;
}

/* ── Continue-reading card in the prev/next footer ───────────── */
.prev-next a.pn-next-card {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--tl-border);
  background: #fff;
  padding: 10px 14px;
  max-width: 380px;
  transition: border-color var(--tl-dur-fast) var(--tl-ease);
}
.prev-next a.pn-next-card:hover { border-color: var(--tl-gold); }
.prev-next a.pn-next-card img {
  width: 96px;
  height: 64px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.prev-next a.pn-next-card .pn-next-body {
  display: flex;
  flex-direction: column;
  text-align: left;
}
@media (max-width: 899px) {
  .prev-next a.pn-next-card { max-width: 100%; }
}

/* ── Print: chapters read as archival documents ──────────────── */
@media print {
  #shared-nav-mount, #shared-footer-mount, .wa-share, .breadcrumb,
  .sidebar, .sidebar-section, .desktop-sidebar, .prev-next,
  #tl-chat-fab, #tl-call-launch, .tl-launch, #tl-gate, .tl-lang-bar { display: none !important; }
  * {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  body { font-size: 11pt; }
  .page-layout { display: block !important; padding: 0 !important; max-width: 100% !important; }
  .fact-box, .pull-quote, .stat-card, .key-date, .dec9-box, .table-wrap,
  .result-box, .three-word-box, .celebration-box, .martyrs-strip, .bhk-hero {
    border: 1pt solid #999 !important;
    page-break-inside: avoid;
  }
  .article-figure { page-break-inside: avoid; }
  .article-figure img { max-width: 80% !important; }
  a { text-decoration: none !important; }
}

/* ── Skip link: hidden until keyboard focus ──── */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  z-index: 3000; padding: 10px 18px;
  background: #1A1A1A; color: #F5F0E8;
  font-family: 'Jost', sans-serif; font-size: 0.85rem; letter-spacing: 0.08em;
  text-decoration: none; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }