/* Dharma Roads — shared styles for the static pages, plus small additions for the planner page.
   Tokens match the planner so every page feels like one site. */
:root{
  --ground:#f3efe1; --surface:#fbf8ee; --ink:#10281c; --muted:#55645a; --line:#dcd3b6;
  --saffron:#8f6a10; --robe:#7a5c0e; --lamp:#c9a227; --good:#2f7a4f; --warn:#a5561a;
  --night:#0b2a1c; --night-ink:#ece0b4; --chip:#e9e2c9; --shadow:0 10px 30px rgb(11 42 28 / .14);
  --f-display:"Marcellus","Noto Serif Bengali",Georgia,serif;
  --f-body:"Figtree","Hind Siliguri",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:12px;
}
:root[lang="bn"]{--f-display:"Noto Serif Bengali","Marcellus",Georgia,serif;--f-body:"Hind Siliguri","Figtree",system-ui,sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#07170f; --surface:#0e2419; --ink:#f0e8cc; --muted:#a5b5aa; --line:#1f3d2d;
  --saffron:#e2bd52; --robe:#d9b44a; --lamp:#e9c75a; --good:#6cc08f; --warn:#e79a5c;
  --night:#04110b; --chip:#16332a; --shadow:0 10px 30px rgb(0 0 0 / .45); color-scheme:dark}}
:root[data-theme="dark"]{
  --ground:#07170f; --surface:#0e2419; --ink:#f0e8cc; --muted:#a5b5aa; --line:#1f3d2d;
  --saffron:#e2bd52; --robe:#d9b44a; --lamp:#e9c75a; --good:#6cc08f; --warn:#e79a5c;
  --night:#04110b; --chip:#16332a; --shadow:0 10px 30px rgb(0 0 0 / .45); color-scheme:dark}

/* ---------- static pages ---------- */
body.page{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:1rem;line-height:1.65;padding-inline:16px}
body.page *{box-sizing:border-box}
.page .wrap{max-width:1120px;margin-inline:auto}
.page h1,.page h2,.page h3{font-family:var(--f-display);font-weight:400;line-height:1.25;text-wrap:balance;margin:0}
:root[lang="bn"] .page h1,:root[lang="bn"] .page h2{font-weight:500}
.page h1{font-size:clamp(2rem,4.6vw,3rem)}
.page h2{font-size:1.45rem}
.page a{color:var(--saffron)}
.page img{max-width:100%;height:auto}
.page :focus-visible{outline:2px solid var(--saffron);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:8px;z-index:99;background:var(--surface);padding:8px 12px;border-radius:8px}
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--ground) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);margin-inline:-16px;padding:10px 16px}
.topbar .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brand{font-family:var(--f-display);font-size:1.25rem;display:flex;gap:8px;align-items:center;color:var(--ink)!important;text-decoration:none}
.brand svg{width:22px;height:22px}
[hidden]{display:none!important}
ul.news{list-style:none;padding:0;margin:0;display:grid;gap:12px}
ul.news li{display:grid;gap:2px;padding-bottom:12px;border-bottom:1px solid var(--line)}
ul.news li:last-child{border-bottom:0;padding-bottom:0}
ul.news small{color:var(--muted);font-size:.8rem}
.wiki::after{content:"";display:block;clear:both}
.wiki-img{float:right;width:min(180px,40%);height:auto;margin:0 0 10px 14px;border-radius:10px}
.brand .brand-logo{width:32px;height:32px;border-radius:50%;flex:none}
.madeby{display:flex;flex-direction:column;align-items:center;gap:8px;margin:24px 0 0;text-align:center;font-weight:600}
.madeby img{width:83px;height:auto;border-radius:10px}
.topbar nav{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto;font-size:.95rem}
.topbar nav a{color:var(--muted);text-decoration:none}
.topbar nav a:hover,.topbar nav a[aria-current]{color:var(--ink)}
.topbar nav a[aria-current]{border-bottom:2px solid var(--saffron)}
.langlink{border:1.5px solid var(--saffron);border-radius:99px;padding:2px 12px;font-weight:600;text-decoration:none;font-size:.9rem}
.eyebrow{font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--saffron);margin:0 0 6px}
.lead{font-size:1.1rem;color:var(--muted);max-width:65ch}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.pagehead{padding-block:40px 20px;display:grid;gap:12px}
.crumbs{font-size:.88rem;color:var(--muted);padding-top:20px}
.crumbs a{color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:600;font-size:.95rem;border-radius:10px;padding:10px 16px;border:1px solid var(--line);background:var(--surface);color:var(--ink)!important;text-decoration:none;cursor:pointer}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--robe);border-color:var(--robe);color:var(--surface)!important}
.tag{display:inline-block;font-size:.8rem;padding:2px 10px;border-radius:99px;background:var(--chip);color:var(--muted)}
.tag.gold{color:var(--saffron)}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:5px 14px;text-decoration:none;color:var(--ink)!important;font-size:.9rem}
.chip:hover{border-color:var(--saffron)}
.callout{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 16px}
.callout.warn{background:color-mix(in srgb,var(--warn) 10%,var(--surface));border-color:color-mix(in srgb,var(--warn) 35%,var(--line))}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.page table{border-collapse:collapse;width:100%;font-size:.92rem}
.page th,.page td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.page tr:last-child th,.page tr:last-child td{border-bottom:0}
table.visas{min-width:760px}
table.visas th small{display:block;font-weight:400;font-size:.78rem;margin-top:4px}
table.costs td{font-variant-numeric:tabular-nums;font-weight:600}

/* site page */
.sitepage{display:grid;gap:22px;padding-block:16px 30px}
.heroimg{margin:0;position:relative}
.hero-photo{display:block;width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:16px;background:var(--chip)}
.credit{position:absolute;right:10px;bottom:8px;margin:0;font-size:.75rem;background:rgb(0 0 0 / .5);border-radius:99px;padding:2px 10px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.credit a{color:#fff;text-decoration:none}
.ph-fallback{display:grid;place-items:center;background:linear-gradient(160deg,#f2a982,#fde6c2 55%,#94503a 56%,#6a4637);color:#3a2526;font-family:var(--f-display);font-size:1.4rem;text-align:center;padding:12px}
.sitehead{display:grid;gap:12px}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:10px;align-content:start;min-width:0}
.card.wide{grid-column:1/-1}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
.facts dt{color:var(--muted);font-weight:600}
.facts dd{margin:0}
.months12{display:grid;grid-template-columns:repeat(12,1fr);gap:2px;font-size:.62rem;text-align:center}
.months12 span{padding:3px 0;border-radius:4px;background:var(--chip);color:var(--muted);overflow:hidden}
.months12 span.ok{background:color-mix(in srgb,var(--good) 22%,var(--surface));color:var(--good);font-weight:600}
.leaflet-box{height:340px;border-radius:10px;overflow:hidden;background:var(--chip)}
.wx{display:grid;gap:10px}
.wx-now{display:flex;align-items:baseline;gap:10px}
.wx-now b{font-family:var(--f-display);font-size:2.4rem;font-weight:400}
.wx-days{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;text-align:center;font-size:.82rem}
.wx-days div{background:var(--ground);border-radius:8px;padding:6px 2px}
.nearby{display:grid;gap:12px}
.neargrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.nearcard,.sitecard,.guidecard{display:grid;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink)!important;transition:transform .2s,box-shadow .2s}
.nearcard:hover,.sitecard:hover,.guidecard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.thumb{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--chip)}
.thumb.ph-fallback{font-size:1rem}
.nearcard>span,.sc-body{padding:10px 12px 14px;display:grid;gap:2px}
.nearcard small,.sc-body small{color:var(--muted);font-size:.8rem}
.nearcard b,.sc-body b{font-family:var(--f-display);font-weight:400;font-size:1.1rem}
.sc-body .muted{font-size:.85rem}
.region{display:grid;gap:14px;padding-top:26px;scroll-margin-top:70px}
.region h2 small{color:var(--muted);font-size:.9rem}
.sitegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.guidegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;padding-bottom:30px}
.guidecard img{width:100%;aspect-ratio:16/9;object-fit:cover}
.guidecard>span{padding:14px 16px 18px;display:grid;gap:6px}
.guidecard b{font-family:var(--f-display);font-weight:400;font-size:1.25rem;line-height:1.3}
.guidecard em{font-style:normal;color:var(--saffron);font-weight:600}

/* long-form text */
.prose{max-width:72ch;margin-inline:auto;padding-block:20px 40px}
.prose h1{margin-block:18px 8px}
.prose h2{margin-top:34px;margin-bottom:6px}
.prose h3{margin-top:22px;font-size:1.15rem}
.prose p,.prose li{max-width:68ch}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin-bottom:6px}
.prose .guide-hero{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:14px;margin-top:16px}
.prose table{margin-block:12px}
.prose .callout{margin-block:16px}

/* contact form */
.form{display:grid;gap:12px;max-width:560px}
.form label{display:grid;gap:4px;font-weight:600}
.form input,.form textarea{font:inherit;font-weight:400;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
.form textarea{min-height:140px;resize:vertical}
.form .status{min-height:1.5em}
.hp{position:absolute;left:-9999px}

.sitefoot{border-top:1px solid var(--line);margin-top:30px;padding-block:24px 40px;color:var(--muted);font-size:.88rem}
.sitefoot nav{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.sitefoot a{color:var(--muted)}
.nf{padding-block:60px 10px}
@media (max-width:720px){.topbar nav{margin-left:0;gap:12px;font-size:.88rem}.hero-photo{aspect-ratio:4/3}}

@media print{.page .topbar,.page .sitefoot,.page .actions,.page .leaflet-box{display:none}}
