/* ---- Paksh — "ink on paper" design system ---- */
:root{
  --paper:#F4F1EA; --paper-sunk:#EFEBE1; --paper-sunk2:#EAE6DB; --paper-deep:#E1DCCE;
  --ink:#15140F; --ink-quiet:#6B675C; --ink-body:#26241E; --ink-body2:#3A372F;
  --hairline:#D8D3C6; --muted:#8A8371; --clay:#75442E;
}
  body{font-family:'IBM Plex Sans',system-ui,sans-serif;background-color:#EAE6DB;color:#26241E;}
  /* dark background applied pre-hydration (see index.html theme script) so there's no flash */
  .dark body{background-color:#1A1917;color:#B7B1A4;}
  /* reading text is serif in BOTH scripts */
  .serif{font-family:'Source Serif 4',Georgia,serif;}
  .headline{font-family:'Source Serif 4',Georgia,serif;font-weight:600;letter-spacing:-0.014em;}
  /* Devanagari reading: Tiro, extra leading, never letter-spaced */
  .read-hi,.read-hi *{font-family:'Tiro Devanagari Hindi','Source Serif 4',Georgia,serif !important;letter-spacing:0 !important;}
  /* Devanagari carries matras above/below the baseline: force extra leading so a Tailwind
     leading-* utility on the same element can never collapse it and collide the marks. */
  .read-hi{line-height:1.85 !important;}
  .headline.read-hi{line-height:1.42 !important;font-weight:400;}
  /* the masthead पक्ष uses the reading serif, not the chrome sans */
  .brand-hi{font-family:'Tiro Devanagari Hindi','Source Serif 4',serif !important;letter-spacing:0 !important;}
  .mono{font-family:'IBM Plex Mono',ui-monospace,monospace;}
  /* section / kicker label — chrome, not reading. Colour is left to the token class so
     it works in light + dark; .deva zeroes the tracking for Devanagari. */
  .eyebrow{font-family:'IBM Plex Sans',sans-serif;font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase;}
  /* chrome in Hindi = IBM Plex Sans Devanagari (labels/counts); no caps, light tracking */
  .deva,.deva *{font-family:'IBM Plex Sans Devanagari','IBM Plex Sans',sans-serif !important;letter-spacing:0 !important;}

  /* ---- bias-bar + framing textures: hex fallback FIRST, oklch override SECOND ----
     Old browsers keep the hex (they drop the oklch line as invalid); modern browsers
     override with oklch. The gradient fallback keeps the TEXTURE on old browsers too,
     preserving greyscale / colour-blind safety. Equal-lightness on all three sides. */
  .seg-left{background:#4A6E80;background:oklch(0.52 0.055 230);}
  .seg-center{background:repeating-linear-gradient(45deg,#7E7768 0 3px,#8C857A 3px 6px);
              background:repeating-linear-gradient(45deg,oklch(0.52 0.02 85) 0 3px,oklch(0.62 0.02 85) 3px 6px);}
  .seg-right{background:repeating-linear-gradient(90deg,#96603F 0 4px,#7C4E34 4px 5px);
             background:repeating-linear-gradient(90deg,oklch(0.52 0.075 45) 0 4px,oklch(0.44 0.075 45) 4px 5px);}
  /* Brief tier (bars <=6px): the 45deg hatch and 90deg rule would moiré at that height,
     so centre uses a tighter 2px hatch and right goes solid; the printed count carries
     the exact reading (design spec 2e). */
  .seg-center-tight{background:repeating-linear-gradient(45deg,#7E7768 0 2px,#8C857A 2px 4px);
              background:repeating-linear-gradient(45deg,oklch(0.52 0.02 85) 0 2px,oklch(0.62 0.02 85) 2px 4px);}
  .seg-right-flat{background:#96603F;background:oklch(0.52 0.075 45);}
  /* "too thin / absent side" hatch for coverage-gap columns */
  .seg-absent{background:repeating-linear-gradient(45deg,#EAE6DB 0 4px,#E1DCCE 4px 8px);}
  .dark .seg-absent{background:repeating-linear-gradient(45deg,#262420 0 4px,#201F1C 4px 8px);}
  /* gap-accent on the ink Coverage Gaps band */
  .gap-accent{color:#C98A66;}
  /* theme-aware clay accent for kickers ("Most covered today"): the Right-lean #96603F
     is only 3.4:1 on the dark bg, so darken it on paper, lighten it in dark -> AA both ways */
  .accent-clay{color:#8A4B2C;}
  .dark .accent-clay{color:#C89170;}

  /* radius 0 everywhere — structure carried by hairlines + space, never by radii */
  #root [class*="rounded"]{border-radius:0 !important;}

  ::-webkit-scrollbar{width:10px;height:10px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{background:#cfccc4;}
  .dark ::-webkit-scrollbar-thumb{background:#35322c;}
  .glass-nav-light{background:rgba(244,241,234,0.88);backdrop-filter:saturate(1.15) blur(10px);-webkit-backdrop-filter:saturate(1.15) blur(10px);}
  .glass-nav-dark{background:rgba(26,25,23,0.88);backdrop-filter:saturate(1.15) blur(10px);-webkit-backdrop-filter:saturate(1.15) blur(10px);}
  *:focus-visible{outline:2px solid #15140F;outline-offset:2px;}
  .dark *:focus-visible{outline-color:#EDEAE2;}
  @keyframes shimmer{0%{background-position:-520px 0}100%{background-position:520px 0}}
  .skel{background-color:#e3ddd0;background-image:linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(255,255,255,.55) 50%,rgba(0,0,0,0) 100%);background-size:520px 100%;background-repeat:no-repeat;animation:shimmer 1.5s infinite linear;}
  .dark .skel{background-color:#201f1c;background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.06) 50%,rgba(255,255,255,0) 100%);}
  /* screen-reader-only text (accessible headings) + a skip-link that appears on focus */
  .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
  .sr-only-focusable{position:absolute;left:8px;top:-48px;z-index:100;background:#15140F;color:#F4F1EA;padding:8px 14px;font:500 13px/1 'IBM Plex Sans',sans-serif;transition:top .15s ease;}
  .sr-only-focusable:focus{top:8px;}
  .dark .sr-only-focusable{background:#EDEAE2;color:#1A1917;}
  .lc-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .lc-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
  .lc-4{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px;}
  body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent;}
  ::selection{background:#15140F;color:#F4F1EA;}
  .dark ::selection{background:#EDEAE2;color:#15140F;}
  /* tactile feedback only — no shadows, no bar animation (the distribution is a fact) */
  button{transition:filter .15s ease,background-color .15s ease,color .15s ease,opacity .2s ease;}
  button:active:not(:disabled){transform:translateY(.5px);}
  /* comfier reading on small screens */
  @media (max-width:640px){p{line-height:1.62;}}
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}