/* শক্তি — সাদা কাগজ আর লাল কালি।

   পটভূমি একরঙা, প্রায়-সাদা; তাহার উপর অতি হালকা আঁশ, যাহাতে পুঁথির
   কাগজের মতো দেখায় অথচ লেখার পিছনে কিছু না নড়ে। রং দুইটি: সিঁদুর ও
   আলতার লাল, সঙ্গে কাঁসার গাঢ় সোনা অল্প। পাড়ে ঠাকুরদালানের খিলানের সারি
   (content/art.py)।

   গ্লস নেই, গ্রেডিয়েন্ট নেই, ছায়া নেই, অ্যানিমেশন নেই। */

:root {
  --paper:     #fdfbf6;   /* কাগজ */
  --paper-2:   #faf1d6;   /* বাক্স ও সারির একটু গাঢ় কাগজ */
  --ink:       #2a1a14;   /* কালি */
  --ink-dim:   #6a5246;   /* কম গুরুত্বের লেখা */
  --red:       #a3141d;   /* সিঁদুর — শিরোনাম, দাগ */
  --red-deep:  #7a0f17;   /* আলতা — লিংক */
  --brass:     #8a6420;   /* কাঁসা */
  --rule:      #e4d3bd;   /* হালকা দাগ ও সীমানা */
}

html { background: var(--paper); }

body {
  font-family: "Nirmala UI", "Shonar Bangla", "Noto Serif Bengali", "Vrinda", serif;
  /* কাগজের আঁশ — খুব হালকা, লেখার পাঠে বাধা দেয় না */
  background-color: var(--paper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.32  0 0 0 0 0.2  0 0 0 0.05 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  color: var(--ink);
  max-width: none;
  min-height: 100vh;
  box-sizing: border-box;
  margin: 0 1.2em;
  padding: 0 2em 1em;
  /* দুই পাশে দালানের থামের মতো জোড়া লাল রেখা */
  border-left: 9px double var(--red);
  border-right: 9px double var(--red);
  /* দক্ষিণেশ্বরের দেওয়ালের হলুদ — লাল রেখার ভিতরে সরু পটি */
  box-shadow: inset 5px 0 0 #f3d98a, inset -5px 0 0 #f3d98a;
  line-height: 1.75;
  font-size: 17px;
}

/* পাতার মাথায় দালানের খিলানের সারি */
body::before {
  content: "";
  display: block;
  height: 44px;
  margin: 0 -2em 0.8em;
  background: url("band.svg") repeat-x left top;
}

h1, h2, h3, h4 {
  font-weight: bold;
  line-height: 1.5;
  margin: 1.2em 0 0.3em;
  color: var(--red);
}
h1 { font-size: 1.5em; }
h2 { font-size: 1.2em; border-bottom: 1px solid var(--rule); padding-bottom: 0.15em; }
h3 { font-size: 1.05em; color: var(--red-deep); }
h4 { font-size: 1em; color: var(--brass); }

p, ul, ol, table { margin: 0.5em 0; }
ul, ol { padding-left: 1.4em; }
li { margin-bottom: 0.3em; }

a { color: var(--red-deep); text-decoration-color: #d9a3a3; text-underline-offset: 0.18em; }
a:visited { color: #6b3a3a; }
a:hover { color: var(--red); text-decoration-color: currentColor; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 1.2em 0; }

b, strong { color: var(--red-deep); }

.top {
  padding-bottom: 0.2em;
}
.top .name { font-size: 1.3em; font-weight: bold; }
.top .name a { color: var(--red); text-decoration: none; }
.top .sub { font-size: 0.9em; color: var(--brass); }

/* উপরের বোতামগুলি — সাদা ফলক, লাল কিনারা */
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin-top: 0.5em;
}
.nav a, .nav .here {
  display: inline-block;
  padding: 0.3em 0.95em;
  border: 1px solid var(--red);
  border-radius: 2px;
  background: var(--paper);
  color: var(--red);
  font-size: 0.95em;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
}
.nav a:visited { color: var(--red); }
.nav a:hover, .nav a:focus {
  background: var(--paper-2);
  border-color: var(--red-deep);
  color: var(--red-deep);
}
.nav .here {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.kicker { font-size: 0.88em; color: var(--ink-dim); }
.card { margin-bottom: 1em; }
.card .cname { font-weight: bold; }

.sanskrit {
  white-space: pre-line;
  margin: 0.5em 0 0.5em 1.2em;
  padding: 0.4em 0.6em 0.4em 0.9em;
  border-left: 5px solid var(--red);
  background: var(--paper-2);
  color: var(--ink);
}

.mono { margin-left: 1.2em; }

details {
  border-bottom: 1px solid var(--rule);
  padding: 0.4em 0;
}

summary {
  cursor: pointer;
  font-weight: bold;
  list-style: none;
  color: var(--red-deep);
}

summary:hover { color: var(--red); }

summary::-webkit-details-marker { display: none; }

summary::before {
  content: "▸ ";
  font-weight: normal;
  color: var(--red);
}

details[open] > summary::before { content: "▾ "; color: var(--red); }

details .inner { padding: 0.3em 0 0.6em 1.2em; }
details h4 { margin: 0.8em 0 0.2em; }

.shots {
  margin: 0.4em 0 0.8em;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  align-items: flex-start;
}
.shots figure { margin: 0 0 0.8em; }
.shots img {
  width: 100%;
  max-width: 420px;
  height: auto;
  border: 1px solid var(--red);
  padding: 3px;
  background: var(--paper);
  box-sizing: border-box;
  display: block;
}
.shots figcaption { font-size: 0.85em; margin-top: 0.2em; color: var(--ink-dim); }

table { border-collapse: collapse; width: 100%; }
th, td {
  border: 1px solid var(--rule);
  padding: 0.3em 0.5em;
  text-align: left;
  vertical-align: top;
  font-size: 0.95em;
}
th { font-weight: bold; background: var(--paper-2); color: var(--red); }

.foot {
  margin-top: 0.4em;
  padding-top: 0.2em;
  font-size: 0.85em;
  color: var(--ink-dim);
}
.foot b { color: var(--red); }

@media (max-width: 700px) {
  body { font-size: 16px; margin: 0 0.35em; padding: 0 0.9em 1em; }
  body::before { margin: 0 -0.9em 0.6em; }
  th, td { padding: 0.25em 0.35em; font-size: 0.9em; }
}

/* ---- সাইটের নিজের আঁকা সাজ (content/art.py) ---- */

/* ঠাকুরদালানের খিলানের সারি — পাতার মাঝের পাড় */
.band {
  display: block;
  width: 100%;
  height: 48px;
  margin: 0.9em 0 1.1em;
  background: url("wall.svg") repeat-x left center;
}

.crest {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-bottom: 0.4em;
}

.crest h1 { margin: 0; }

.emblem { flex-shrink: 0; }
.emblem.small { width: 26px; height: 52px; }
.emblem.tiny  { width: 22px; height: 14px; }

@media (max-width: 700px) {
  .emblem { width: 56px; height: 56px; }
  .emblem.small { width: 20px; height: 40px; }
}

/* ---- পদ খোঁজার ঘর ---- */

.find {
  margin: 1em 0 1.2em;
  padding: 0.7em 0.9em;
  border: 1px solid var(--rule);
  border-top: 2px solid var(--red);
  background: var(--paper-2);
}
.find label {
  display: block;
  font-weight: bold;
  color: var(--red);
  margin-bottom: 0.3em;
}
.find input {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 1em;
  padding: 0.4em 0.6em;
  color: var(--ink);
  background: #fff;
  border: 1px solid #c9a9a0;
}
.find input:focus { outline: none; border-color: var(--red); }
.find .kicker { margin: 0.4em 0 0; min-height: 1.2em; }

/* হোমপৃষ্ঠায় আগে পিছনে দালানের ছবি ছিল — লেখা পড়িতে কষ্ট হইত। এখন
   সব পাতার মতোই সাদা কাগজ; দালান কেবল পাড়ে। */

@media (max-width: 700px) {
  .nav { gap: 0.3em; }
  .nav a, .nav .here { padding: 0.25em 0.6em; font-size: 0.88em; }
}

/* ---- পাশের স্তম্ভ: বিজ্ঞাপনের স্থান ---- */

.sheet {
  display: flex;
  align-items: flex-start;
  gap: 2.2em;
}

/* লেখার স্তম্ভ। min-width:0 না দিলে লম্বা পদ বা টেবিল স্তম্ভটিকে
   ঠেলিয়া চওড়া করিয়া দেয় আর পাশের ঘরটি বাহিরে পড়িয়া যায়। */
.col {
  flex: 1 1 auto;
  min-width: 0;
}

.rail {
  flex: 0 0 300px;
  width: 300px;
}

/* পাতা নামিবার সঙ্গে বিজ্ঞাপনও নামে */
.ad {
  position: sticky;
  top: 1em;
}

/* সংকেত বসিবার আগে ঘরটি কেবল স্থানটুকু ধরিয়া রাখে — দাগ নাই, লেখা
   নাই। উচ্চতাটুকু আগে হইতে রাখা থাকে যাহাতে বিজ্ঞাপন বসিবার সময় পাতা
   লাফাইয়া না ওঠে। */
.ad-empty {
  min-height: 600px;
}

/* সরু পর্দায় স্তম্ভটি থাকে না — ৩০০ পিক্সেল কাড়িয়া লইলে
   বাংলা লেখার জন্য কিছুই অবশিষ্ট থাকে না। */
@media (max-width: 1100px) {
  .sheet { display: block; }
  .rail { display: none; }
}

/* রূপের সারি — মূল সারির নীচে, একটু ছোট ও নরম */
.nav.forms {
  margin-top: 0.35em;
  padding-top: 0.35em;
  border-top: 1px solid var(--rule);
}
.nav.forms a, .nav.forms .here {
  padding: 0.2em 0.7em;
  font-size: 0.88em;
  font-weight: normal;
  border-color: #dcbcb4;
  color: var(--red-deep);
}
.nav.forms a:hover, .nav.forms a:focus {
  border-color: var(--red);
  color: var(--red);
}
.nav.forms .here {
  background: var(--red-deep);
  border-color: var(--red-deep);
  color: #fff;
  font-weight: bold;
}

/* ---- মঙ্গলচিহ্ন: স্বস্তিক, ওঁ, মঙ্গলঘট ---- */

.sign { vertical-align: middle; flex-shrink: 0; }
.top .name { display: flex; align-items: center; gap: 0.45em; }
.mangal {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.1em;
  margin: 0.2em 0 0.6em;
}

/* হোমপৃষ্ঠার নবরত্ন মন্দির */
.temple {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0.4em auto 0.2em;
}
.sign.flip { transform: scaleX(-1); }

/* তোরণ — মঙ্গলচিহ্নের সারির নীচে, নামের উপরে */
.toran {
  height: 40px;
  margin: 0.2em auto 0.4em;
  max-width: 760px;
  background: url("toran.svg") repeat-x center top;
}

/* ---- up / down buttons: fixed on the right, solid, on every page ---- */

.updown {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.updown a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--red);
  color: #fff;
  border: 2px solid #f3d98a;
  border-radius: 4px;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
}
.updown a:visited { color: #fff; }
/* moving: the pressed button turns temple-yellow */
.updown a.on, .updown a.on:hover {
  background: #f3d98a;
  color: var(--red-deep);
  border-color: var(--red);
}
.updown a:hover, .updown a:focus {
  background: var(--red-deep);
  color: #fff;
  outline: none;
}

@media (max-width: 700px) {
  .updown { right: 12px; top: auto; bottom: 16px; transform: none; }
  .updown a { width: 38px; height: 38px; font-size: 16px; }
}