/* =========================================================
   Design tokens
   ========================================================= */
:root {
  --ink: #0b1220;
  --crimson: #c8102e;
  --crimson-dark: #9d0c24;
  --gold: #d9a441;
  --paper: #f4f5f7;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --shadow-card: 0 1px 2px rgba(11,18,32,.04), 0 4px 14px -6px rgba(11,18,32,.10);
  --shadow-lift: 0 2px 4px rgba(11,18,32,.05), 0 22px 40px -18px rgba(11,18,32,.28);
  --header-h: 72px;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
::selection { background: rgba(200,16,46,.18); color: var(--ink); }
img { height: auto; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* Keyboard focus — visible everywhere, never on mouse click */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--crimson); outline-offset: 2px; border-radius: .5rem;
}
.on-dark :where(a, button):focus-visible, .bg-ink :where(a, button):focus-visible { outline-color: var(--gold); }

/* Skip link */
.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 100; background: var(--crimson); color: #fff;
  padding: .65rem 1.1rem; border-radius: .75rem; font-weight: 700; transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* If a CDN script (AOS) fails, never leave content invisible */
.no-aos [data-aos] { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }

/* =========================================================
   Header
   ========================================================= */
.site-header { transition: box-shadow .25s var(--ease), background-color .25s var(--ease); }
.site-header.is-scrolled { box-shadow: 0 10px 30px -14px rgba(11,18,32,.28); }
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .2rem; height: 2px; border-radius: 2px;
  background: var(--crimson); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.dropdown-panel { transform: translateY(6px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; }
.group:hover > .dropdown-panel, .group:focus-within > .dropdown-panel { transform: none; }

/* Mobile menu: animated, scrollable on short screens */
#mobileMenu { max-height: calc(100vh - var(--header-h) - 2.5rem); overflow-y: auto; overscroll-behavior: contain; }
#mobileMenu:not(.hidden) { animation: menuDrop .22s var(--ease); }
@keyframes menuDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* =========================================================
   Hero / page banners
   ========================================================= */
.bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
}
.text-gradient {
  background: linear-gradient(100deg, #fff 30%, #f4d9a0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* =========================================================
   Ticker
   ========================================================= */
.ticker-track { display: inline-flex; align-items: center; white-space: nowrap; animation: ticker 55s linear infinite; will-change: transform; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-label { clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); padding-right: 1.5rem; }
.ticker-fade::before, .ticker-fade::after { content: ""; position: absolute; top: 0; bottom: 0; width: 32px; z-index: 2; pointer-events: none; }
.ticker-fade::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.ticker-fade::after  { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }

/* =========================================================
   Slider
   ========================================================= */
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.slide.is-active { opacity: 1; pointer-events: auto; }
.slide > img, .slide > div:first-child { transform: scale(1.04); transition: transform 7s ease-out; }
.slide.is-active > img, .slide.is-active > div:first-child { transform: scale(1); }
.slider-dot { position: relative; height: 6px; width: 22px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.35); transition: width .3s var(--ease), background .3s; }
.slider-dot.is-active { width: 40px; background: rgba(255,255,255,.35); }
.slider-dot.is-active::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: dotFill var(--slide-ms, 5500ms) linear forwards; }
@keyframes dotFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
#heroSlider { touch-action: pan-y; }
#heroSlider.is-paused .slider-dot.is-active::after { animation-play-state: paused; }

/* =========================================================
   Cards, chips, headings
   ========================================================= */
.card { box-shadow: var(--shadow-card); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.section-title { display: flex; align-items: center; gap: .75rem; }
.section-title::before { content: ""; width: 6px; height: 1.75rem; border-radius: 4px; background: linear-gradient(180deg, var(--crimson), var(--gold)); }
.link-arrow i { transition: transform .25s var(--ease); }
.link-arrow:hover i, .group:hover .link-arrow i { transform: translateX(3px); }
.img-shimmer { background: linear-gradient(100deg, #e8ebf0 30%, #f6f7f9 50%, #e8ebf0 70%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* =========================================================
   Pagination
   ========================================================= */
.pager a, .pager span.pg { min-width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .85rem; font-size: .9rem; font-weight: 700; transition: all .2s var(--ease); }
.pager a { background: #fff; color: #334155; box-shadow: inset 0 0 0 1px #e2e8f0; }
.pager a:hover { background: var(--ink); color: #fff; box-shadow: none; transform: translateY(-1px); }
.pager a[aria-current="page"] { background: var(--crimson); color: #fff; box-shadow: 0 8px 18px -8px rgba(200,16,46,.7); }
.pager span.pg { color: #cbd5e1; box-shadow: inset 0 0 0 1px #e2e8f0; background: #fff; }
.pager span.dots { color: #94a3b8; min-width: 1.25rem; }

/* =========================================================
   Floating UI
   ========================================================= */
.to-top {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 45; width: 3rem; height: 3rem; border-radius: 999px;
  display: grid; place-items: center; background: var(--ink); color: #fff; box-shadow: 0 14px 28px -10px rgba(11,18,32,.6);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s, transform .25s var(--ease), background .2s;
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--crimson); }
.read-progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 60; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--crimson), var(--gold)); }

/* =========================================================
   Article body
   ========================================================= */
.article-body { font-size: 1.1rem; line-height: 1.9; color: #1e293b; overflow-wrap: anywhere; }
.article-body p { margin: 0 0 1.25rem; }
.article-body h2, .article-body h3, .article-body h4 { font-family: 'Noto Serif','Noto Serif Devanagari',serif; font-weight: 800; color: #0b1220; margin: 2rem 0 .75rem; line-height: 1.3; }
.article-body h2 { font-size: 1.6rem; } .article-body h3 { font-size: 1.35rem; } .article-body h4 { font-size: 1.15rem; }
.article-body ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1.25rem; }
.article-body ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1.25rem; }
.article-body li { margin-bottom: .35rem; }
.article-body blockquote { border-left: 4px solid #c8102e; background: #fff; padding: 1rem 1.25rem; margin: 1.5rem 0; font-style: italic; border-radius: 0 .75rem .75rem 0; box-shadow: var(--shadow-card); }
.article-body a { color: #c8102e; text-decoration: underline; text-underline-offset: 3px; }
.article-body img { max-width: 100%; border-radius: .75rem; }
@media (max-width: 640px) { .article-body { font-size: 1.02rem; line-height: 1.8; } .article-body h2 { font-size: 1.4rem; } }

/* Drop cap only for Latin text */
html[lang="en"] .article-body.dropcap > p:first-of-type::first-letter { float: left; font-family: 'Noto Serif', serif; font-size: 3.6rem; line-height: .9; font-weight: 800; padding: .2rem .6rem 0 0; color: #c8102e; }

/* =========================================================
   Search + forms
   ========================================================= */
.search-panel:not([hidden]) { animation: searchDrop .22s ease-out; }
@keyframes searchDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.search-form input[type="search"]::-webkit-search-cancel-button { display: none; }
.field { width: 100%; border-radius: .85rem; border: 1px solid #cbd5e1; background: #fff; padding: .8rem 1rem; outline: none; transition: border-color .2s, box-shadow .2s; }
.field:hover { border-color: #94a3b8; }
.field:focus { border-color: var(--crimson); box-shadow: 0 0 0 4px rgba(200,16,46,.12); }
.chip-btn { border-radius: 999px; padding: .4rem .95rem; font-size: .85rem; font-weight: 700; background: #f1f5f9; color: #334155; box-shadow: inset 0 0 0 1px #e2e8f0; transition: all .2s var(--ease); }
.chip-btn:hover, .chip-btn.is-on { background: var(--crimson); color: #fff; box-shadow: none; }

/* =========================================================
   Motion preferences
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .ticker-track { animation: none; overflow-x: auto; }
  [data-aos] { opacity: 1 !important; transform: none !important; }
}
@media print { .site-header, .to-top, .read-progress, footer, .ticker, #searchPanel { display: none !important; } }