study.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Case Study | Dev Case Studies</title>
  <script>
    (function() {
      var KEY = 'imx_theme';
      var saved = null;
      try { saved = localStorage.getItem(KEY); } catch (e) {}
      function resolve(pref) {
        if (pref === 'light' || pref === 'dark') return pref;
        return (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light';
      }
      document.documentElement.setAttribute('data-theme', resolve(saved));
    })();
  </script>
  <meta name="description" content="An evidence-based development case study with cited analysis, key data, and lessons learned.">

  <meta property="og:type" content="article">
  <meta property="og:title" content="Case Study | Dev Case Studies">
  <meta property="og:description" content="Evidence-based development case study with cited analysis and lessons learned.">
  <meta property="og:site_name" content="Dev Case Studies">

  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="Case Study | Dev Case Studies">

  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d5f8a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/><path d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/></svg>" type="image/svg+xml">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600&family=Inter:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="./css/impactmojo-kit.css">
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>

  <a href="#study-main" class="skip-link">Skip to main content</a>

  <div id="reading-progress" class="reading-progress" aria-hidden="true"><span></span></div>

  <header class="site-header" role="banner">
    <div class="container">
      <a href="./index.html" class="site-logo">
        <span class="site-logo-icon" aria-hidden="true"><span class="si"><svg viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg></span></span>
        <span>Dev<span class="site-logo-long"> Case Studies</span></span>
      </a>
      <nav class="site-nav" aria-label="Main navigation">
        <span class="eco-nav" aria-label="ImpactMojo libraries">
          <a href="./index.html" class="eco-link current">Case Studies</a>
          <a href="https://varnasr.github.io/development-discourses/" class="eco-link">Discourses</a>
          <a href="https://www.impactmojo.in/impactlex/" class="eco-link" target="_blank" rel="noopener">ImpactLex</a>
        </span>
        <a href="./index.html" class="site-nav-link">Library</a>
        <a href="./about.html" class="site-nav-link">About</a>
        <div class="theme-selector" role="group" aria-label="Theme selection">
          <button class="theme-btn" data-theme="system" title="System theme" aria-label="Use system theme">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
          </button>
          <button class="theme-btn" data-theme="light" title="Light theme" aria-label="Use light theme">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
          </button>
          <button class="theme-btn" data-theme="dark" title="Dark theme" aria-label="Use dark theme">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
          </button>
        </div>
      </nav>
    </div>
  </header>

  <main id="study-main">
    <div class="container">
      <div class="loading-spinner">
        <div class="spinner"></div>
        <span class="loading-text">Loading case study...</span>
      </div>
    </div>
  </main>

  <footer class="imx-footer" role="contentinfo">
    <div class="imx-footer-inner">
      <div class="imx-footer-brandrow">
        <a class="imx-footer-brand" href="https://www.impactmojo.in" target="_blank" rel="noopener"><span class="imx-brand-mark"><svg viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg></span><span>ImpactMojo</span></a>
        <nav class="imx-footer-nav" aria-label="ImpactMojo libraries"><a href="https://varnasr.github.io/dev-case-studies/" class="current">Case Studies</a><a href="https://www.impactmojo.in/devdiscourses">Discourses</a><a href="https://impactlex.netlify.app/">ImpactLex</a><a href="https://varnasr.github.io/PolicyDhara/">PolicyDhara</a></nav>
      </div>
      <p class="imx-footer-tagline"><strong>Built for learning.</strong> Every case study grounded in real interventions with cited evidence — an open educational resource, part of the <a href="https://www.impactmojo.in" target="_blank" rel="noopener">ImpactMojo</a> learning platform.</p>
    </div>
  </footer>

  <button id="scroll-top" class="scroll-top" aria-label="Scroll to top" title="Scroll to top"><span class="si"><svg viewBox="0 0 24 24"><polyline points="18 15 12 9 6 15"/></svg></span></button>

  <div id="toast" class="toast" aria-live="polite"></div>

  <script>window.onerror=function(m,s,l,c,e){var g=document.getElementById('study-main');if(g)g.innerHTML='<div style="padding:2rem;color:#c00"><h3>JS Error</h3><p>'+m+'</p><p>'+s+':'+l+'</p></div>';};window.onunhandledrejection=function(e){var g=document.getElementById('study-main');if(g)g.innerHTML='<div style="padding:2rem;color:#c00"><h3>Promise Error</h3><p>'+String(e.reason)+'</p></div>';};</script>
  <script src="./js/app.js"></script>
  <script>
    (function() {
      var KEY = 'imx_theme';
      var html = document.documentElement;
      function getSaved() { try { return localStorage.getItem(KEY); } catch (e) { return null; } }
      function resolve(pref) {
        if (pref === 'light' || pref === 'dark') return pref;
        return (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light';
      }
      function apply(pref) {
        html.setAttribute('data-theme', resolve(pref));
        var active = pref || 'system';
        document.querySelectorAll('.theme-btn').forEach(function(btn) {
          btn.classList.toggle('active', btn.getAttribute('data-theme') === active);
        });
      }
      function setTheme(pref) {
        try {
          if (pref === 'system' || !pref) localStorage.removeItem(KEY);
          else localStorage.setItem(KEY, pref);
        } catch (e) {}
        apply(pref);
      }
      apply(getSaved());
      document.querySelectorAll('.theme-btn').forEach(function(btn) {
        btn.addEventListener('click', function() { setTheme(btn.getAttribute('data-theme')); });
      });
      if (window.matchMedia) {
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function() {
          if (!getSaved()) apply(null);
        });
      }
    })();
  </script>
<script src="js/dyslexia-font.js" data-accent="var(--accent)" data-radius="var(--radius-md)" defer></script>
</body>
</html>