/* 🎨 पुस्तकम् की वेबसाइट का रूप
   =============================

   एक ही फ़ाइल, सब पन्नों के लिए। कोई framework नहीं — पन्ना हल्का रहे,
   यही इस वेबसाइट के होने का आधा कारण है (ऐप लगभग १० MB उतारता है)।

   नाप एक ही जगह से बदलती है — नीचे के चर। रंग ऐप के आइकन वाला नीला है
   (#0267AC), ताकि ऐप और वेबसाइट एक ही घर के लगें।

   मोबाइल पहले लिखा गया है; चौड़े परदे की बातें नीचे @media में।
*/

:root {
  --neela:   #0267AC;
  --neela-g: #014f85;
  --kaala:   #16181c;
  --dheema:  #5b6169;
  --phika:   #878d95;
  --rekha:   #e3e6ea;
  /* पन्ने की पीठ हल्की, और खाने उजले — बहुत से आवरण उजले काग़ज़ के हैं
     और सादे सफ़ेद पर वे पीठ में घुल जाते थे, किनारा दिखता ही नहीं था */
  --peeth:   #eef1f5;   /* पन्ने की पीठ */
  --khana:   #ffffff;   /* खाने */
  --naam-peeth: #f7f9fb; /* आवरण के नीचे नाम की पट्टी */
  --patti:   #e9edf2;
  --lapet:   1180px;
  --radius:  10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --neela:   #4aa3e0;
    --neela-g: #2b86c5;
    --kaala:   #e8eaed;
    --dheema:  #a3a9b2;
    --phika:   #7d848d;
    --rekha:   #2a2e34;
    --peeth:   #0f1215;
    --khana:   #191c20;
    --naam-peeth: #15181c;
    --patti:   #191c20;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* ⚠️⚠️ इस फ़ाइल का सबसे काम का नियम — पढ़े बिना कोई नया बटन मत बनाइए।

   Noto Serif Devanagari में अक्षर अपने डिब्बे में **ऊपर की ओर** बैठते
   हैं: शिरोरेखा ऊपर चिपकी रहती है और नीचे मात्राओं के लिए जगह छूटी रहती
   है। इससे हर बटन, टिकिया और खाने में लिखा हुआ ऊपर खिंचा दिखता है —
   `align-items: center` से भी नहीं सधता, क्योंकि डिब्बा तो बीच में ही
   होता है, अक्षर उसके भीतर ऊपर होते हैं।

   इसीलिए नीचे `.sadha` बना है: ऊपर की ओर थोड़ा और हाशिया, नीचे उतना कम।
   **हर नए बटन पर यही लगाइए** — एक-एक जगह हाथ से ठीक करने से हर बार कोई
   न कोई छूट जाता था।
*/
.sadha {
  line-height: 1;
  padding-top: calc(var(--pt, 0px) + 0.26em);
  padding-bottom: calc(var(--pt, 0px) + 0.06em);
}

body {
  margin: 0;
  background: var(--peeth);
  color: var(--kaala);
  font-family: "Noto Serif Devanagari", "Noto Sans Devanagari",
               system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

a { color: inherit; text-decoration: none; }

.lapet { max-width: var(--lapet); margin: 0 auto; padding: 0 18px; }

/* ───────────── ऊपर की पट्टी ───────────── */

.shirsh {
  background: var(--neela);
  color: #fff;
  position: relative;
  z-index: 50;
}

/* ⚠️ पट्टी चिपकी हुई (position: sticky) **नहीं** है — यह जान-बूझकर।
 *
 * भैया के Chrome में खिड़की पूरी स्क्रीन करते ही पूरा पन्ना अटक जाता था:
 * न सरकता, न कुछ दबता। सामान्य नाप में सब ठीक। `?thir=1` से चिपकना हटाकर
 * परखा — तुरन्त ठीक हो गया, सो कारण वही था।
 *
 * (मेरे यहाँ १२००, १४४०, १९२० और २५६०×१४४० — किसी पर यह नहीं हुआ;
 * असली «पूरी स्क्रीन» ब्राउज़र की अनुमति के बिना चलाई नहीं जा सकती।)
 *
 * पट्टी का चिपका रहना सुविधा भर थी; पन्ने का चलना उससे बड़ी बात है।
 * फिर लगाना हो तो पहले पूरी स्क्रीन में परख लीजिए।
 */

.shirsh-andar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  flex-wrap: wrap;
}

.chinh { display: flex; align-items: center; gap: 10px; }
.chinh img { display: block; }
/* नाम लातिन में — बाहर का पढ़ने वाला (और Google का जाँचने वाला) देवनागरी
   नहीं पढ़ पाता, और Udyam प्रमाणपत्र में भी नाम लातिन अक्षरों में ही है।
   लातिन अक्षर अपने डिब्बे में सीधे बैठते हैं, सो यहाँ भरपाई नहीं चाहिए। */
.chinh .naam-lat {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .4px;
  line-height: 1;
}

/* ☰ — केवल सँकरे परदे पर */
.teen-rekha {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  cursor: pointer;
}
.teen-rekha span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

/* खाने — सँकरे परदे पर छिपे, ☰ से खुलते हैं */
.khaane {
  display: none;
  width: 100%;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, .2);
  padding: 4px 0 10px;
}
#suchi-khuli:checked ~ .shirsh .khaane { display: flex; }

.khaane a {
  padding: 11px 2px 9px;
  font-size: 15.5px;
  line-height: 1.2;
  color: rgba(255, 255, 255, .92);
}
.khaane a.chuna { font-weight: 600; color: #fff; }

/* ───────────── मुखपृष्ठ का शीर्ष ───────────── */

.hero {
  background: var(--patti);
  border-bottom: 1px solid var(--rekha);
  padding: 30px 0 28px;
  text-align: center;
}
.hero h1 {
  margin: 0;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.4;
}
.hero .ginti {
  margin: 7px 0 0;
  font-size: 14px;
  color: var(--dheema);
}
.hero .ginti-lat {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  margin-top: 4px;
}

/* खोज का खाना */
.khoj-patti {
  display: flex;
  max-width: 480px;
  margin: 18px auto 0;
  border: 1px solid var(--neela);
  border-radius: 24px;
  overflow: hidden;
}
.khoj-patti { background: var(--khana); }
.khoj-patti input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--kaala);
  font: inherit;
  font-size: 15px;
  --pt: 11px;
  padding-left: 18px;
  padding-right: 18px;
}
.khoj-patti input::placeholder { color: var(--phika); }
.khoj-patti button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: var(--neela);
  color: #fff;
  padding: 0 20px;
  cursor: pointer;
}
.khoj-patti button svg { display: block; width: 20px; height: 20px; }
.khoj-patti button:hover { background: var(--neela-g); }

/* ───────────── खण्ड का शीर्षक ───────────── */

.khand { padding: 26px 0 4px; }
.khand-shirsh {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 14px;
}
.khand-shirsh h2 { margin: 0; font-size: 18px; font-weight: 600; }
.khand-shirsh a { font-size: 14px; color: var(--neela); }
.khand-shirsh a:hover { text-decoration: underline; }

/* ───────────── पुस्तकों का जाल ───────────── */

.jaal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 20px 16px;
}

/* 📘 पुस्तक का खाना — वही रूप जो ऐप में है: आवरण और नाम एक ही डिब्बे
   में जुड़े हुए, नाम बीच में सधा, लेखक नहीं। */
.pustak {
  display: flex;
  flex-direction: column;
  background: var(--khana);
  border: 1px solid var(--rekha);
  border-radius: 8px;
  overflow: hidden;
}
.pustak:hover { border-color: var(--neela); }

/* 📐 आवरण की नाप बँधी हुई — २ : ३, वही जो ऐप के जाल में है
   (childAspectRatio 0.58, नाम की पट्टी घटाकर उतनी ही बैठती है)।
   सब आवरण एक ही नाप के दिखें, यही पुस्तकालय जैसा लगता है। */
.avaran {
  display: block;
  aspect-ratio: 2 / 3;
  background: var(--patti);
  overflow: hidden;
  position: relative;
}
/* ⚠️ `cover` — न `fill`, न `contain`।
   • `fill` खींचकर भर देता है: पतले आवरण चौड़े हो जाते थे और उन पर छपा
     नाम फट-सा जाता था।
   • `contain` खींचता नहीं, पर हर आवरण अपनी-अपनी नाप का रह जाता है और
     आस-पास खाली पट्टियाँ छूट जाती हैं — जाल बिखरा-सा लगता था।
   • `cover` नाप भरता भी है और खींचता भी नहीं; बदले में कुछ आवरणों के
     किनारे ज़रा कट जाते हैं। भैया ने यही चुना (१४ अक्तू॰ २०२६), और
     ऐप में भी नाप इसी तरह बँधी हुई है। */
.avaran img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;   /* ऊपर का भाग सुरक्षित — नाम वहीं छपा होता है */
  display: block;
}

.sada {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  text-align: center;
  font-size: 12px;
  line-height: 1.35;
  color: var(--dheema);
}

/* नाम की अपनी पट्टी — ऊपर पतली रेखा और ज़रा-सी गहरी पीठ।
   उजले आवरण के नीचे सादा सफ़ेद नाम उसी में घुल जाता था; रेखा और हल्की
   पीठ उसे आवरण से अलग कर देती हैं। */
.naam {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 11px 9px 9px;
  border-top: 1px solid var(--rekha);
  background: var(--naam-peeth);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
}

/* ───────────── विषयों की टोकरियाँ ───────────── */

.vishay-jaal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 10px;
}
.vishay-khana {
  border: 1px solid var(--rekha);
  border-radius: var(--radius);
  padding: 11px 14px;
  background: var(--khana);
}
.vishay-khana:hover { border-color: var(--neela); }
.vishay-khana b { display: block; font-size: 15px; font-weight: 500; }
.vishay-khana span { font-size: 12.5px; color: var(--dheema); }

/* ───────────── पन्ने-दर-पन्ने ───────────── */

.panne {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  margin: 28px 0 8px;
}
.panne a, .panne span {
  background: var(--khana);
  min-width: 38px;
  text-align: center;
  --pt: 7px;
  padding-left: 11px;
  padding-right: 11px;
  border: 1px solid var(--rekha);
  border-radius: 7px;
  font-size: 14px;
}
.panne a:hover { border-color: var(--neela); }
.panne .ab { background: var(--neela); border-color: var(--neela); color: #fff; }
.panne .teen { border: 0; color: var(--phika); }

/* ───────────── पाद ───────────── */

.paad {
  margin: 44px 0 0;
  border-top: 1px solid var(--rekha);
  background: var(--patti);
}
.paad-andar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
}
.paad-naam { font-size: 13.5px; color: var(--dheema); }
.paad-kadi { display: flex; gap: 20px; }
.paad-kadi a { font-size: 13.5px; color: var(--dheema); }
.paad-kadi a:hover { color: var(--neela); text-decoration: underline; }

/* ───────────── कुछ न मिले ───────────── */

.khali {
  text-align: center;
  color: var(--dheema);
  padding: 50px 20px;
  font-size: 15.5px;
}

/* ───────────── चौड़ा परदा ───────────── */

@media (min-width: 860px) {
  .teen-rekha { display: none; }

  .khaane {
    display: flex;
    flex-direction: row;
    width: auto;
    border: 0;
    padding: 0;
    gap: 4px;
  }
  .khaane a {
    padding: 20px 13px 15px;   /* नीचे कम — देवनागरी ऊपर बैठती है */
    font-size: 15px;
    line-height: 1.2;
    border-bottom: 3px solid transparent;
  }
  .khaane a:hover { border-bottom-color: rgba(255, 255, 255, .45); }
  .khaane a.chuna { border-bottom-color: #fff; }

  .hero { padding: 52px 0 46px; }
  .hero h1 { font-size: 31px; }
  .hero .ginti { font-size: 15px; }

  .khand { padding: 38px 0 4px; }
  .khand-shirsh h2 { font-size: 21px; }

  .jaal { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 26px 20px; }
}

/* ───────────── सम्पर्क का पन्ना ───────────── */

.sampark-jaal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.sampark-khana {
  border: 1px solid var(--rekha);
  border-radius: var(--radius);
  padding: 16px 18px;
  background: var(--khana);
}
.sampark-khana .label {
  font-size: 12.5px;
  color: var(--dheema);
  letter-spacing: .3px;
  margin: 0 0 4px;
}
.sampark-khana p, .sampark-khana address {
  margin: 0;
  font-style: normal;
  font-size: 15px;
  line-height: 1.65;
}
.sampark-khana a { color: var(--neela); }
.sampark-khana a:hover { text-decoration: underline; }
.latin { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* ───────────── हमारे ऐप ───────────── */

.app-jaal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.app-khana {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--khana);
  border: 1px solid var(--rekha);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.app-chinh { border-radius: 14px; flex: none; display: block; }
.app-baat { min-width: 0; }
.app-baat b { display: block; font-size: 16.5px; font-weight: 600; }
.app-baat span {
  display: block;
  font-size: 13.5px;
  color: var(--dheema);
  line-height: 1.5;
  margin: 2px 0 10px;
}
.app-kadi { display: flex; gap: 9px; flex-wrap: wrap; }
.app-kadi a {
  display: inline-flex;
  align-items: center;
  --pt: 7px;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 13.5px;
  border: 1px solid var(--neela);
  border-radius: 18px;
  color: var(--neela);
}
.app-kadi a:hover { background: var(--neela); color: #fff; }