/* Easy Read India · easyread.manbhavan.org — one stylesheet, no framework.
   Rules: sans-serif, 18px+, left-aligned, ragged right, 1.5+ spacing, picture left of every idea,
   44px targets, visible focus, every colour pair checked against WCAG 2.2 AA. */
:root{
  --ink:#1b1b1b; --bg:#fbfaf6; --paper:#fff; --line:#dcdcd4; --soft:#eef2ff;
  --blue:#2E3192; --green:#00703C; --gold:#FFD700; --red:#C1272D;
  --purple:#6A2C91; --teal:#00A3A6; --orange:#F59E0B; --pink:#E0217A;   /* Manbhavan marks: large shapes only */
  --fs:18px; --lh:1.75; --ls:0;
}
*{box-sizing:border-box}
html{font-size:var(--fs);scroll-padding-top:6rem}
body{margin:0;font-family:"Atkinson Hyperlegible","Noto Sans","Noto Sans Devanagari",Verdana,Arial,sans-serif;font-size:1rem;line-height:var(--lh);letter-spacing:var(--ls);color:var(--ink);background:var(--bg);text-align:left}
:lang(hi){font-family:"Noto Sans Devanagari","Atkinson Hyperlegible",Verdana,sans-serif}
img{max-width:100%;height:auto}
a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
a:hover,a:focus{background:var(--gold);color:#000;outline:none}
:focus-visible{outline:4px solid var(--blue);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:#000;color:#fff;padding:.6rem 1rem;z-index:99}
.skip:focus{left:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- reading tools ---------- */
.a11y{position:sticky;top:0;z-index:50;background:#222;color:#fff;padding:.4rem 1rem;display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;font-size:.9rem}
.a11y-label{margin-right:auto;opacity:.85}
.a11y button,.a11y a.tb{font:inherit;font-weight:700;background:#fff;color:#000;border:2px solid #fff;border-radius:6px;padding:.3rem .7rem;cursor:pointer;min-height:44px;text-decoration:none;display:inline-flex;align-items:center;gap:.3rem}
.a11y button[aria-pressed="true"]{background:var(--gold)}
.a11y .icon{width:22px;height:22px;stroke:currentColor;fill:none}
#ruler{position:fixed;left:0;right:0;height:2.4rem;background:rgba(255,215,0,.28);border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);pointer-events:none;display:none;z-index:40}
body.ruler #ruler{display:block}
body.dys{--lh:2.1;--ls:.06em}
body.dys p,body.dys li{word-spacing:.16em}
mark.tts{background:var(--gold);color:#000}
body.simple .er > *:not(.easy):not(h1):not(.crumb){display:none}
body.simple .easy{display:block}

/* ---------- header ---------- */
.top{background:var(--paper);border-bottom:8px solid var(--green)}
.brand{display:flex;align-items:center;gap:1.2rem;padding:.9rem 1.25rem;max-width:1200px;margin:0 auto;text-decoration:none;color:var(--ink)}
.brand:hover,.brand:focus{background:transparent}
.brand .mb{height:64px;width:auto}
.brand .er-symbol{height:60px;width:auto;border:2px solid var(--blue);border-radius:6px;padding:2px;background:#fff}
.brand .wm{flex:1}
.brand .wm strong{display:block;font-size:1.55rem;line-height:1.15;color:var(--blue)}
.brand .wm strong span{color:var(--purple)}
.brand .wm small{display:block;font-size:.85rem;color:#444}
nav.main ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;background:var(--blue)}
nav.main a{display:flex;align-items:center;gap:.45rem;color:#fff;text-decoration:none;padding:.8rem 1rem;font-weight:700;min-height:48px}
nav.main a:hover,nav.main a:focus{background:var(--gold);color:#000}
nav.main a[aria-current="page"]{background:#fff;color:var(--blue)}
nav.main .icon{width:22px;height:22px;stroke:currentColor;fill:none;flex:none}
nav.main .lang{margin-left:auto;background:var(--purple)}

/* ---------- layout ---------- */
main{max-width:1100px;margin:0 auto;padding:1.5rem 1.25rem 3rem}
h1,h2,h3,h4{line-height:1.25;color:var(--blue);margin:1.5em 0 .5em;font-weight:700}
h1{font-size:2.1rem;margin-top:.5em}
h2{font-size:1.55rem}
h3{font-size:1.2rem}
h4{font-size:1.05rem}
p,li{max-width:68ch}
ul,ol{padding-left:1.3em}
li{margin:.35em 0}
strong{color:#000}
hr{border:0;border-top:2px solid var(--line);margin:2rem 0}
.lead{font-size:1.2rem}
.crumb{margin:0 0 1rem;font-size:.95rem}
blockquote{margin:1.4rem 0;padding:1rem 1.25rem;border-left:8px solid var(--gold);background:var(--paper);font-size:1.1rem}
cite{font-style:normal;font-weight:700;color:var(--blue)}
.small{font-size:.9rem;color:#444}
.fig{font-size:.92rem;color:#444;max-width:none}

/* cards and picture-left sections */
.er section,.er header,.er article,.er .card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.6rem;margin:1.4rem 0}
.er section > :first-child,.er .card > :first-child{margin-top:0}
.er section:has(> img:first-child),.er section:has(> .pic:first-child){display:grid;grid-template-columns:minmax(120px,220px) 1fr;gap:.2rem 1.8rem;align-items:start}
.er section:has(> img:first-child) > img,.er section:has(> .pic:first-child) > .pic{grid-row:1/span 40;width:100%;border-radius:10px;border:3px solid var(--line);background:#fff}
.pic{stroke:var(--blue);fill:none;padding:14px}
.lib .icon{width:56px;height:56px;stroke:var(--blue);fill:none}
.btn .icon{width:20px;height:20px;stroke:currentColor;fill:none;vertical-align:-4px}
.er section:has(> img:first-child) > :not(img),.er section:has(> .pic:first-child) > :not(.pic){grid-column:2}
.er header{background:var(--blue);color:#fff;border:0;padding:2rem 2rem}
.er header h1,.er header h2,.er header p,.er header li{color:#fff}
.er header a{color:#fff}
.er header a:hover{color:#000}
.er header.hero{background:linear-gradient(135deg,#2E3192,#1a1c5e)}
.er .box{background:var(--soft);border:3px solid var(--green)}
.er .alert{background:#fff8c2;border:3px solid #000}
.er .warn{background:#fff1f0;border:3px solid var(--red)}
.er .easy{background:#f4fbf6;border-left:10px solid var(--green)}
.er .easy h2:first-child,.er .complex h2:first-child{margin-top:0}
.er details{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:0 1.2rem;margin:1rem 0}
.er details summary{cursor:pointer;font-weight:700;padding:1rem 0;min-height:44px;color:var(--blue)}
.er details[open] summary{border-bottom:1px solid var(--line);margin-bottom:.6rem}

/* icon rows */
.iconrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.iconrow a,.iconrow div{display:block;background:var(--paper);border:2px solid var(--line);border-radius:14px;padding:1rem;text-decoration:none;color:var(--ink);min-height:44px}
.iconrow a:hover,.iconrow a:focus{border-color:var(--blue);background:var(--soft)}
.iconrow .icon{width:44px;height:44px;stroke:var(--blue);fill:none;display:block;margin-bottom:.4rem}
.iconrow strong{display:block;color:var(--blue);font-size:1.1rem}
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.doors a{display:block;background:var(--paper);border:3px solid var(--blue);border-radius:16px;padding:1.4rem;text-decoration:none;color:var(--ink);font-size:1.15rem}
.doors a:hover,.doors a:focus{background:var(--gold)}
.doors .icon{width:56px;height:56px;stroke:var(--blue);fill:none;display:block;margin-bottom:.5rem}
.doors strong{display:block;color:var(--blue);font-size:1.3rem;margin-bottom:.3rem}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}
.stats div{background:var(--soft);border-radius:10px;padding:1rem}
.stats strong{display:block;font-size:2rem;color:var(--green);line-height:1.1}
.stats .src{font-size:.8rem;color:#444}
.logos img{margin:0 1.5rem 1rem 0;vertical-align:middle;background:#fff;padding:.4rem;border-radius:8px;max-height:80px}
.seal{display:inline-flex;align-items:center;gap:.6rem;background:#fff;border:3px solid var(--green);border-radius:999px;padding:.4rem 1rem .4rem .5rem;font-weight:700;color:var(--green)}
.seal .icon{width:34px;height:34px;stroke:var(--green);fill:none}
.pill{display:inline-block;background:var(--soft);color:var(--blue);border-radius:999px;padding:.15rem .7rem;font-size:.85rem;margin-right:.4rem}
.er header .pill{background:#fff;color:#000}

/* buttons and forms */
.btn,.er a.btn,button.btn{display:inline-block;background:var(--green);color:#fff;text-decoration:none;font-weight:700;padding:.85rem 1.5rem;border-radius:999px;border:3px solid transparent;min-height:44px;font:inherit;cursor:pointer;margin:.2rem .3rem .2rem 0}
.btn:hover,.btn:focus{background:var(--gold);color:#000}
.btn.alt{background:var(--blue)}
.btn.wa{background:#075E54}
.field{margin:1rem 0}
.field label{display:block;font-weight:700;margin-bottom:.3rem}
.field .hint{font-size:.9rem;color:#444;margin:0 0 .3rem}
input[type=text],input[type=email],input[type=tel],select,textarea{font:inherit;width:100%;max-width:40rem;padding:.7rem .8rem;border:2px solid #555;border-radius:8px;background:#fff;min-height:48px}
textarea{min-height:8rem}
.check{display:flex;gap:.6rem;align-items:flex-start;max-width:40rem}
.check input{width:1.6rem;height:1.6rem;margin-top:.2rem;flex:none}
.hp{position:absolute;left:-9999px}
[role=status],[role=alert]{padding:1rem;border-radius:10px;margin:1rem 0}
[role=status]{background:#f4fbf6;border:2px solid var(--green)}
[role=alert]{background:#fff1f0;border:2px solid var(--red)}

/* tables */
table{border-collapse:collapse;width:100%;margin:1.2rem 0;font-size:.95rem;display:block;overflow-x:auto}
th,td{border:1px solid var(--line);padding:.6rem .8rem;vertical-align:top;text-align:left}
th{background:var(--soft)}
code{background:#f0f0ea;padding:.1em .3em;border-radius:4px}
video{width:100%;border-radius:12px;background:#000}
iframe{width:100%;border:0;border-radius:10px}

/* library grid */
.lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.lib article{margin:0;padding:1rem}
.lib article h3{margin:.4rem 0}
.lib .pic{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:2px solid var(--line);background:#fff}
.lib .meta{font-size:.85rem;color:#444}

/* footer */
footer{background:var(--blue);color:#fff;padding:2.5rem 1.25rem;margin-top:2rem}
footer a{color:#fff}
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;max-width:1100px;margin:0 auto}
footer h2{color:var(--gold);font-size:1.05rem;margin:0 0 .5rem}
footer ul{list-style:none;padding:0;margin:0}
footer .partner{max-width:1100px;margin:2rem auto 0;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.3);display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
footer .partner img{background:#fff;border-radius:8px;padding:.4rem;max-height:56px}
footer .fine{max-width:1100px;margin:1.2rem auto 0;font-size:.85rem;opacity:.92}

/* contrast modes */
body.hc{--ink:#000;--bg:#fff;--paper:#fff;--blue:#000;--green:#000;--gold:#ffff00;--line:#000;--soft:#ffffe0;--purple:#000;--red:#000}
body.hc img{filter:contrast(1.15)}
body.hc nav.main ul{background:#000}
body.hc nav.main a[aria-current="page"]{background:#ffff00;color:#000}
body.hc .er header,body.hc .er header.hero{background:#000;color:#fff}
body.hc a{text-decoration-thickness:3px}
body.hc .btn{background:#000;color:#fff;border-color:#fff}
body.hc .btn:hover,body.hc .btn:focus{background:#ffff00;color:#000}
body.yb{--ink:#ffff00;--bg:#000;--paper:#111;--blue:#ffff00;--green:#ffff00;--gold:#ffff00;--line:#ffff00;--soft:#222;--purple:#ffff00;--red:#ffff00}
body.yb strong{color:#fff}
body.yb .btn,body.yb .btn:hover{background:#ffff00;color:#000}
body.yb nav.main ul,body.yb .er header,body.yb footer{background:#000;border:2px solid #ffff00}
body.yb nav.main a[aria-current="page"]{background:#ffff00;color:#000}

@media (max-width:700px){
  .brand{flex-wrap:wrap;gap:.6rem}.brand .wm strong{font-size:1.2rem}.brand .mb{height:48px}.brand .er-symbol{height:48px}
  .er section:has(> img:first-child),.er section:has(> .pic:first-child){grid-template-columns:1fr}
  .er section:has(> img:first-child) > img,.er section:has(> .pic:first-child) > .pic{max-width:200px;grid-row:auto}
  .er section:has(> img:first-child) > :not(img),.er section:has(> .pic:first-child) > :not(.pic){grid-column:1}
  main{padding:1rem .9rem 2rem}.er section,.er header,.er article,.er .card{padding:1.1rem}
  h1{font-size:1.65rem}nav.main .lang{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media print{.a11y,nav.main,footer,.skip,#ruler{display:none}body{background:#fff}.er section{border:0;padding:0}}

@media (max-width:700px){
  .a11y{position:static;padding:.4rem .6rem;gap:.3rem}
  .a11y-label{width:100%;margin:0 0 .2rem}
  .a11y button{padding:.25rem .5rem;font-size:.85rem;min-height:40px}
  .brand{flex-direction:column;align-items:flex-start;gap:.5rem;padding:.8rem 1rem}
  .brand .mb{height:auto;width:200px;max-width:70%}
  .brand .er-symbol{position:absolute;right:1rem;top:auto;height:44px}
  .top{position:relative}
  .brand .wm{width:100%}
  .brand .wm strong{font-size:1.25rem}
  .brand .wm small{font-size:.8rem}
  nav.main a{padding:.7rem .8rem;min-height:44px}
}
