/* वाह पुणेरी! design foundation: tokens, base, header, menus, buttons, footer.
   Copied from the approved prototype (prototype/app.template.html); rules: DESIGN.md.
   Page components arrive with their templates in build Steps 5 to 7. */
/* Layout: archive ledger. A 12-column page where every record (person, place, story, event)
   carries a catalogue strip of type, era and area, the way an archive index card does. */
:root{
  --paper:#F0EFE9; --paper-2:#FAFAF6; --paper-3:#E5E3DA; --ink:#17191F; --ink-2:#555A63; --rule:#D2CFC4;
  --plaque:#1E4C97; --plaque-ink:#FFFFFF; --plaque-soft:#DCE4F2;
  --copper:#985126; --plate-a:#B8682F; --plate-b:#7A3D17; --plate-ink:#FFF3E6;
  --basalt:#23262C; --basalt-ink:#ECEAE3; --basalt-2:#A9ADB4; --basalt-rule:#3A3E46;
  --mark:#F2D49B; --tan:#DDB892; --focus:#1E4C97; color-scheme:light;
  --f-display:"Eczar","Tiro Devanagari Marathi",Georgia,serif;
  --f-body:"Tiro Devanagari Marathi","Noto Serif Devanagari","Nirmala UI",Georgia,serif;
  --f-ui:"Anek Devanagari","Mukta","Nirmala UI",system-ui,sans-serif;
  --t-xs:.8125rem; --t-sm:.9375rem; --t-base:1.125rem; --t-md:1.3125rem; --t-lg:1.625rem; --t-xl:2.125rem;
  --t-2xl:clamp(2.1rem,4.6vw,3.5rem); --t-hero:clamp(5rem,17vw,12.5rem);
  --max:1240px; --measure:36rem; --hdr:132px;
}
/* Always light during client review (Sanjay, 2026-10-23); the dark palette is kept for the WordPress build, where it returns with a switch */
@media (prefers-color-scheme:dark){:root[data-theme="auto"]{
  --paper:#121418; --paper-2:#1A1D22; --paper-3:#21252B; --ink:#ECEAE3; --ink-2:#A6AAB1; --rule:#353940;
  --plaque:#8FB0EE; --plaque-ink:#0D1830; --plaque-soft:#1C2A44; --copper:#E39A63;
  --basalt:#0A0B0E; --basalt-ink:#ECEAE3; --basalt-2:#A6AAB1; --basalt-rule:#2A2E35;
  --mark:#5B4520; --tan:#6E5238; --focus:#8FB0EE; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#121418; --paper-2:#1A1D22; --paper-3:#21252B; --ink:#ECEAE3; --ink-2:#A6AAB1; --rule:#353940;
  --plaque:#8FB0EE; --plaque-ink:#0D1830; --plaque-soft:#1C2A44; --copper:#E39A63;
  --basalt:#0A0B0E; --basalt-ink:#ECEAE3; --basalt-2:#A6AAB1; --basalt-rule:#2A2E35;
  --mark:#5B4520; --tan:#6E5238; --focus:#8FB0EE; color-scheme:dark}

*{box-sizing:border-box}
/* Closed timeline rows, menus and drawers use the hidden attribute; a component's own display rule must not reveal them */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
/* margin:0 was supplied by WordPress's global styles until the theme stopped loading them (2026-11-01) */
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:var(--t-base);line-height:1.75;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.28;margin:0;text-wrap:balance}
/* Eczar's Marathi shaping breaks every reph (कार्य shows as कार्‌य); shape display text as Hindi, which draws the same letters correctly */
h1,h2,h3,h4,.logo-mark,.drawer-head b,.ornament,.ph-glyph,.plaque-name,.plate .w,.ledger .y,.topic .g,.era-tab b,.types a b,.culture b,.m-peth,.sbox input{-webkit-locale:"hi";font-language-override:"HIN"}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
/* the page area takes focus on each page change for screen readers; a ring around the whole page showed as a blue frame (Sanjay, 2026-10-23) */
#app:focus{outline:none}
mark{background:var(--mark);color:inherit;padding:0 .1em}
.wrap{max-width:var(--max);margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.sec{padding-block:clamp(48px,7vw,88px)}
.sec + .sec{padding-top:0}
.ui{font-family:var(--f-ui)}
.skip{position:absolute;left:-999px;top:0;background:var(--plaque);color:var(--plaque-ink);padding:8px 14px;z-index:99;font-family:var(--f-ui)}
.skip:focus{left:16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* Header */
/* Header on the lighter paper with a 2px copper bottom line and a soft shadow so it stands apart from the hero (Sanjay, 2026-10-23) */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--paper-2);border-bottom:2px solid var(--copper);box-shadow:0 3px 14px rgba(23,25,31,.08)}
.hdr-top{display:flex;align-items:center;gap:20px;padding-block:14px 8px}
.logo{display:flex;flex-direction:column;text-decoration:none;line-height:1.1;margin-right:auto}
.logo-mark{font-family:var(--f-display);font-weight:700;font-size:1.85rem;letter-spacing:0;color:var(--ink)}
.logo-mark span{color:var(--copper)}
.logo-img{display:block;width:auto;height:auto;max-height:52px;max-width:min(360px,60vw)}
.logo-tag{font-family:var(--f-ui);font-size:var(--t-xs);color:var(--ink-2);margin-top:4px}
.util{display:flex;align-items:center;gap:18px;font-family:var(--f-ui);font-size:var(--t-sm)}
.util a{text-decoration:none;color:var(--ink-2)}
.util a:hover,.util a[aria-current="page"]{color:var(--plaque)}
.hsearch{display:flex;align-items:center;border:1px solid var(--rule);background:var(--paper-2);border-radius:2px}
.hsearch input{border:0;background:transparent;font-family:var(--f-ui);font-size:var(--t-sm);padding:7px 10px;width:13rem;color:var(--ink)}
.hsearch input:focus{outline:none}
.hsearch:focus-within{border-color:var(--plaque)}
.hsearch button{border:0;background:transparent;padding:6px 10px;cursor:pointer;color:var(--ink-2);display:grid;place-items:center}
.kbd{font-family:var(--f-ui);font-size:.72rem;border:1px solid var(--rule);border-radius:2px;padding:0 5px;color:var(--ink-2);margin-right:6px}
.nav{display:flex;gap:2px;font-family:var(--f-ui);font-stretch:88%;font-size:1.02rem;margin-inline:-10px}
.nav > li{position:static}
.nav-btn{display:flex;align-items:center;gap:5px;padding:9px 10px 12px;background:none;border:0;cursor:pointer;text-decoration:none;color:var(--ink);font-weight:500;border-bottom:2px solid transparent}
.nav-btn:hover,.nav-btn[aria-expanded="true"]{color:var(--plaque)}
.nav-btn.is-active{border-bottom-color:var(--copper)}
.nav-btn svg{width:10px;height:10px;opacity:.6}
/* lifted so the house's bottom sits on the menu text's bottom line (Sanjay, 2026-10-23) */
.nav-home svg{width:22px;height:22px;opacity:1;transform:translateY(-2.6px)}
.nav-home .home-fill{fill:none}
.nav-home.is-active{border-bottom-color:transparent}
.nav-home.is-active .home-fill{fill:var(--tan)}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--paper-2);border-bottom:1px solid var(--rule);box-shadow:0 18px 30px -24px rgba(0,0,0,.35)}
.mega .wrap{display:grid;grid-template-columns:minmax(0,18rem) minmax(0,1fr);gap:40px;padding-block:28px 32px}
.mega-intro h3{font-size:var(--t-lg)}
.mega-intro p{font-size:var(--t-sm);color:var(--ink-2);margin-top:8px;line-height:1.65}
.mega-intro a{display:inline-block;margin-top:14px;font-family:var(--f-ui);font-size:var(--t-sm);color:var(--plaque)}
/* "मुख्य पान" in bold so the way into the topic's main page stands out (Sanjay, 2026-10-23) */
.mega-intro a b{font-weight:600}
/* at least three columns, at most five rows (header.php sets --rows); links run down each column, up to 14rem wide (Sanjay, 2026-10-30) */
.mega ul{display:grid;grid-template-rows:repeat(var(--rows,5),auto);grid-auto-flow:column;grid-auto-columns:minmax(0,14rem);column-gap:28px;align-content:start;font-family:var(--f-ui);font-size:1rem}
.mega li a{display:block;padding:6px 0;text-decoration:none;border-bottom:1px solid var(--rule)}
.mega li a:hover{color:var(--plaque)}
.burger{display:none;background:none;border:1px solid var(--rule);border-radius:2px;padding:0;width:44px;height:44px;cursor:pointer;color:var(--ink);align-items:center;justify-content:center}
@media (max-width:1060px){
  .nav,.util .ex,.hsearch{display:none}
  .burger{display:inline-flex}
  .hdr-top{padding-block:12px}
  :root{--hdr:72px}
}
.drawer{position:fixed;inset:0;z-index:70;display:flex;justify-content:flex-end;background:rgba(10,11,14,.5)}
.drawer-panel{width:min(440px,100%);height:100%;overflow-y:auto;background:var(--paper);padding:calc(env(safe-area-inset-top,0px) + 16px) max(20px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 28px) 20px;font-family:var(--f-ui)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.drawer-head b{font-family:var(--f-display);font-size:1.4rem}
.drawer-head b span{color:var(--copper)}
.x{background:none;border:1px solid var(--rule);border-radius:2px;width:40px;height:40px;cursor:pointer;font-size:1.3rem;line-height:1}
.acc{border-top:1px solid var(--rule)}
.acc > li{border-bottom:1px solid var(--rule)}
.acc-row{display:flex;align-items:stretch}
.acc-row a{flex:1;padding:13px 0;text-decoration:none;font-size:1.1rem;font-weight:500}
.acc-row button{background:none;border:0;width:48px;cursor:pointer;font-size:1.2rem;color:var(--ink-2)}
.acc ul{padding:0 0 12px 14px}
.acc ul a{display:block;padding:7px 0;text-decoration:none;color:var(--ink-2)}
.drawer .hsearch{display:flex;margin-bottom:18px}
.drawer .hsearch input{width:100%}
.drawer-ex{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

/* Shared bits */
.crumbs{font-family:var(--f-ui);font-size:var(--t-sm);color:var(--ink-2);display:flex;flex-wrap:wrap;gap:6px;padding-top:26px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--plaque);text-decoration:underline}
.crumbs .sep{opacity:.5}
/* the trail sits in a light pill so it reads at a glance (Sanjay, 2026-10-31) */
.crumbs-pill{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px;max-width:100%;background:var(--paper-2);border:1px solid var(--rule);border-radius:999px;padding:calc(5px + var(--dev-nudge)) 16px calc(6px - var(--dev-nudge))}
.crumbs-pill a{color:var(--ink)}
.crumbs-pill [aria-current]{color:var(--ink-2);font-weight:600}
.rec{display:flex;flex-wrap:wrap;gap:0 10px;font-family:var(--f-ui);font-size:var(--t-xs);color:var(--ink-2);line-height:1.5}
.rec > *+*::before{content:"";display:inline-block;width:1px;height:.8em;background:var(--rule);margin-right:10px;vertical-align:-1px}
.rec .t{color:var(--copper);font-weight:600}
.rec a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.rec a:hover{color:var(--plaque)}
.kicker{font-family:var(--f-ui);font-size:var(--t-sm);color:var(--copper);font-weight:600;margin-bottom:8px}
.sh{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.sh h2{font-size:var(--t-xl)}
.sh p{flex-basis:100%;color:var(--ink-2);max-width:var(--measure);font-size:1rem}
.more{font-family:var(--f-ui);font-size:var(--t-sm);color:var(--plaque);text-decoration:none;white-space:nowrap}
.more:hover{text-decoration:underline}
/* Anek Devanagari leaves more room under the letters than above, so button and chip text sat about 3px high; this moves it down to the optical centre (Sanjay, 2026-10-23) */
:root{--dev-nudge:.18em}
/* WordPress's Buttons block wears the same looks (Sanjay, 2026-11-01): Fill = primary, Outline = plain, Pill = round with an arrow */
.btn,.wp-block-button__link{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-ui);font-size:1rem;font-weight:600;padding:calc(11px + var(--dev-nudge)) 20px calc(11px - var(--dev-nudge));border-radius:2px;text-decoration:none;border:1px solid var(--ink);cursor:pointer;background:transparent}
/* "See all" links that end a list: right-aligned outline buttons, easier to notice than a text link (Sanjay, 2026-10-23) */
.list-end{margin-top:20px;text-align:right}
/* rounded (Sanjay, 2026-10-23) */
.list-end .btn,.btn-pill,.is-style-pill .wp-block-button__link{font-size:var(--t-sm);padding:calc(8px + var(--dev-nudge)) 18px calc(8px - var(--dev-nudge));border-color:var(--plaque);color:var(--plaque);border-radius:999px;background:var(--paper)}
.list-end .btn:hover,.btn-pill:hover,.is-style-pill .wp-block-button__link:hover{background:var(--plaque);color:var(--plaque-ink)}
.btn-primary,.wp-block-button:not(.is-style-outline,.is-style-pill,.is-style-chip) .wp-block-button__link{background:var(--plaque);border-color:var(--plaque);color:var(--plaque-ink)}
.btn-primary:hover,.wp-block-button:not(.is-style-outline,.is-style-pill,.is-style-chip) .wp-block-button__link:hover{filter:brightness(1.1)}
.btn:not(.btn-primary):hover,.is-style-outline .wp-block-button__link:hover,.is-style-pill .wp-block-button__link:hover{background:var(--ink);color:var(--paper)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip,.is-style-chip .wp-block-button__link{font-family:var(--f-ui);font-size:var(--t-sm);padding:calc(5px + var(--dev-nudge)) 13px calc(5px - var(--dev-nudge));border:1px solid var(--rule);border-radius:99px;background:var(--paper-2);cursor:pointer;text-decoration:none;line-height:1.5}
.chip:hover,.is-style-chip .wp-block-button__link:hover{border-color:var(--plaque);color:var(--plaque)}
span.chip{cursor:default}
.chip[aria-pressed="true"],.chip[aria-current]{background:var(--plaque);border-color:var(--plaque);color:var(--plaque-ink)}
/* the Buttons block's चिप style: a button drawn as a chip, in a row spaced like .chips (Sanjay, 2026-11-01) */
.is-style-chip .wp-block-button__link{display:inline-block;font-weight:inherit;color:inherit}
.wp-block-buttons.chips{gap:8px}
.chip small{opacity:.7;margin-left:4px}
.phase{display:inline-block;font-family:var(--f-ui);font-size:.72rem;font-weight:600;padding:1px 8px;border-radius:99px;background:var(--plaque-soft);color:var(--plaque);vertical-align:middle;margin-left:8px;line-height:1.6}
/* the "still to come" note; also the Paragraph block's style प्रलंबित टीप (Sanjay, 2026-11-01) */
.pending,.is-style-pending{font-family:var(--f-ui);font-size:var(--t-xs);color:var(--ink-2);border:1px dashed var(--rule);padding:7px 11px;border-radius:2px;line-height:1.5}
.pending::before,.is-style-pending::before{content:"प्रलंबित · ";color:var(--copper);font-weight:600}
.prose{max-width:var(--measure)}
/* the block's row of buttons lines up like the site's own; each button's own box steps aside so the link sits in the row */
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.wp-block-button{display:contents}
.is-style-pill .wp-block-button__link::after{content:"→" / ""}
/* a "see all" button row ending a list sits at the right, as .list-end text did */
.wp-block-buttons.list-end{justify-content:flex-end}
.prose p + p{margin-top:1.05em}
.prose .lede{font-size:var(--t-md);line-height:1.7}
.dl{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);border-top:1px solid var(--rule);font-size:1rem}
.dl dt,.dl dd{margin:0;padding:10px 0;border-bottom:1px solid var(--rule)}
.dl dt{font-family:var(--f-ui);color:var(--ink-2);font-size:var(--t-sm);padding-right:14px}
.dl dd{min-width:0}
/* the माहिती तक्ता block's source line (Sanjay, 2026-10-31) */
.dl-source{margin-top:10px;font-family:var(--f-ui);font-size:var(--t-sm);color:var(--ink-2)}
.ornament{font-family:var(--f-display);color:var(--copper);text-align:center;font-size:1.6rem;letter-spacing:0;padding-block:8px}
.grid{display:grid;gap:32px 28px}
.g2{grid-template-columns:repeat(auto-fill,minmax(min(100%,30rem),1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.g4{grid-template-columns:repeat(auto-fill,minmax(min(100%,15.5rem),1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(28px,5vw,72px)}
@media (max-width:820px){.split{grid-template-columns:minmax(0,1fr)}}
/* Place pages on phones: the इतिहास text and its read-full-story button come before facts and map (Sanjay, 2026-10-22) */
@media (max-width:640px){.place-split > .prose{order:-1}}
.loadmore{display:flex;justify-content:center;margin-top:36px}
.count{font-family:var(--f-ui);font-size:var(--t-sm);color:var(--ink-2)}
.page-h{padding-block:18px 8px}
.page-h h1{font-size:var(--t-2xl)}
.page-h .intro{max-width:var(--measure);margin-top:16px;font-size:var(--t-md);line-height:1.7;color:var(--ink)}
/* Columns block (WordPress's own styles are not loaded): side by side from 900px, stacked below.
   A section inside a column takes the column's width, not the page's (पुणे; Sanjay, 2026-11-02) */
.wp-block-columns{display:flex;flex-direction:column;gap:32px}
.wp-block-column{min-width:0}
.wp-block-column .wrap{padding-inline:0;max-width:none}
.wp-block-column > h2.wp-block-heading:first-child{font-size:var(--t-xl);margin-bottom:14px}
@media (min-width:900px){
.wp-block-columns{flex-direction:row;align-items:flex-start;gap:clamp(28px,5vw,72px)}
.wp-block-column{flex:1 1 0}
}
/* Section sub-navigation on a slightly darker band so it reads as navigation (Sanjay, 2026-10-23) */
.subnav{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--hdr));z-index:20;background:var(--paper-3);border-block:1px solid var(--rule);margin-top:28px}
.subnav .wrap{display:flex;gap:4px 6px;flex-wrap:wrap;padding-block:6px;font-family:var(--f-ui);font-size:var(--t-sm)}
.subnav a,.subnav span{text-decoration:none;color:var(--ink);padding:calc(4px + var(--dev-nudge)) 10px 5px;border-radius:2px}
/* the section being read (or the page you are on) is marked: bold, copper underline, lighter background (Sanjay, 2026-10-23) */
.subnav .on,.subnav [aria-current="page"]{font-weight:600;background:var(--paper-2);text-decoration:underline;text-decoration-color:var(--copper);text-decoration-thickness:2px;text-underline-offset:5px}
.subnav a:hover{color:var(--plaque);text-decoration:underline;text-underline-offset:4px}
/* the marked link's patch slides from link to link (Sanjay, 2026-10-31): one patch moved by site.js */
.subnav .wrap{position:relative}
.subnav a,.subnav span{position:relative;z-index:1}
.subnav .subnav-mark{position:absolute;left:0;top:0;z-index:0;padding:0;background:var(--paper-2);border-radius:2px;pointer-events:none;opacity:0;transition:transform .32s cubic-bezier(.2,.7,.2,1),width .32s cubic-bezier(.2,.7,.2,1),height .32s,opacity .2s}
.subnav-mark::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:2px;background:var(--copper)}
.subnav .subnav-mark.shown{opacity:1}
.subnav.has-mark a.on,.subnav.has-mark [aria-current="page"]{background:none;text-decoration:none}
@media (prefers-reduced-motion:reduce){.subnav .subnav-mark{transition:opacity .2s}}
/* phones: one row that scrolls sideways, fading at both edges, in place of 3 to 4 wrapped lines (94-178px tall, measured 2026-10-30; Sanjay approved Step 8, 2026-10-30) */
@media (max-width:760px){
  .subnav .wrap{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 32px),transparent)}
  .subnav .wrap::-webkit-scrollbar{display:none}
  .subnav .wrap::after{content:"";flex:0 0 24px}
  .subnav a,.subnav span{flex:none;white-space:nowrap}
}
[id^="sec-"]{scroll-margin-top:calc(var(--hdr) + 70px)}
.block{padding-block:44px;border-top:1px solid var(--rule)}
.block:first-child{border-top:0}
.block > h2{font-size:var(--t-xl);margin-bottom:18px}
.block h3.sub{font-size:var(--t-lg);margin:34px 0 14px}
/* विभागाचं शीर्षक blocks: heading, then the section's own block of content (Sanjay, 2026-10-31);
   together they space and rule like the .block sections they replace */
.sec-head{padding-top:44px;border-top:1px solid var(--rule)}
.sec-head > h2{font-size:var(--t-xl);margin-bottom:18px}
.sec-head-3{padding-top:34px;border-top:0}
.sec-head-3 > h3{font-size:var(--t-lg);margin-bottom:14px}
.sec-head-4{padding-top:24px;border-top:0}
.sec-head-4 > h4{font-size:var(--t-md);margin-bottom:10px}
.subnav + .wrap > .sec-head{border-top:0}
.sec-body{padding-bottom:44px}
/* a two-column feature under its heading starts at the top, not centred on the taller side */
.sec-body > .feature{align-items:start}
/* यादी blocks (Sanjay, 2026-10-31): the page's HTML is cut round each list into whole parts. A part
   before a list (part-open) loses its bottom space, a part after one (part-cont) its top space and
   rule, and the list takes the bottom space the part it ends would have had. */
.part-open,.part-open > :is(.sec-body,.block){padding-bottom:0}
.part-cont,.part-cont > :is(.sec-body,.block){padding-top:0;border-top:0}
.wpn-list{padding-bottom:44px}
:where(.part-open.sec) + .wpn-list{padding-bottom:clamp(48px,7vw,88px)}
:where(.part-open.sec:has(> .block)) + .wpn-list{padding-bottom:calc(44px + clamp(48px,7vw,88px))}
.wpn-list:has(+ .part-cont){padding-bottom:0}
.part-open.sec + .wpn-list + .sec{padding-top:0}
/* a list placed inside a section (वारसा cards) takes the section's width and spacing (Sanjay, 2026-11-01) */
.wrap .wpn-list{padding:0;max-width:none}
.part-open .pending:last-child{margin-bottom:24px}
.filters{display:grid;gap:14px;padding:18px 0 22px;border-bottom:1px solid var(--rule);margin-bottom:30px}
.frow{display:flex;gap:14px 18px;flex-wrap:wrap;align-items:center}
.frow label{font-family:var(--f-ui);font-size:var(--t-sm);color:var(--ink-2);display:flex;gap:8px;align-items:center}
select,.input{font-family:var(--f-ui);font-size:var(--t-sm);padding:7px 10px;border:1px solid var(--rule);background:var(--paper-2);color:var(--ink);border-radius:2px}
.input{min-width:0}

/* Footer */
.ftr{background:var(--basalt);color:var(--basalt-ink);margin-top:clamp(56px,8vw,96px)}
.ftr .wrap{padding-block:56px calc(env(safe-area-inset-bottom,0px) + 28px)}
.ftr-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:32px}
.ftr-grid.cols-3{grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr))}
.ftr-grid.cols-2{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.ftr-grid.cols-1{grid-template-columns:minmax(0,1fr)}
.ftr h2{font-size:1.9rem}
.ftr h2 span{color:var(--copper)}
.ftr figure{margin:0}
.ftr img{display:block;max-width:100%;height:auto;max-height:64px;width:auto}
.ftr figure + p{margin-top:14px}
.ftr p{color:var(--basalt-2);font-size:.97rem;margin-top:10px;line-height:1.65}
.ftr h3{font-family:var(--f-ui);font-size:var(--t-sm);color:var(--basalt-2);font-weight:600;margin-bottom:10px}
.ftr li a{display:block;padding:4px 0;text-decoration:none;font-family:var(--f-ui);font-size:1rem}
.ftr li a:hover{color:var(--copper)}
.ftr-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid var(--basalt-rule);margin-top:40px;padding-top:18px;font-family:var(--f-ui);font-size:var(--t-xs);color:var(--basalt-2)}
@media (max-width:860px){.ftr-grid,.ftr-grid.cols-3,.ftr-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.ftr-grid,.ftr-grid.cols-3,.ftr-grid.cols-2{grid-template-columns:minmax(0,1fr)}}

/* Go-to-top arrow: a bare thin arrow at the bottom right, no button shape; light over the dark band and footer (Sanjay, 2026-10-23) */
.totop{position:fixed;right:max(12px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 12px);z-index:50;width:44px;height:44px;display:grid;place-items:center;padding:0;background:none;border:0;cursor:pointer;color:var(--ink-2);transition:color .15s,opacity .2s}
.totop svg{width:26px;height:26px}
.totop:hover{color:var(--plaque)}
.totop.on-dark{color:var(--basalt-2)}
.totop.on-dark:hover{color:var(--basalt-ink)}

/* WordPress additions */
/* the mega menu hangs from the header's content box (the prototype set this inline) */
.hdr > .wrap{position:relative}
/* logged-in editors: the sticky header and sub-navigation sit below the WordPress toolbar */
.admin-bar .hdr{top:32px}
.admin-bar .subnav{top:calc(32px + var(--hdr))}
@media (max-width:782px){.admin-bar .hdr{top:46px}.admin-bar .subnav{top:calc(46px + var(--hdr))}}
@media (max-width:600px){.admin-bar .hdr{top:0}.admin-bar .subnav{top:var(--hdr)}}
/* a link to the page you are on shows as plain text (DESIGN.md §8) */
.mega li > span,.acc ul span,.ftr li > span{display:block;color:var(--ink-2)}
.mega li > span{padding:6px 0;border-bottom:1px solid var(--rule);font-weight:600}
.acc ul span{padding:7px 0}
.ftr li > span{padding:4px 0;font-family:var(--f-ui);font-size:1rem;color:var(--basalt-2)}
.acc-row span{flex:1;padding:13px 0;font-size:1.1rem;font-weight:500;color:var(--ink-2)}
@media (forced-colors:active){:focus-visible{outline:2px solid CanvasText}}

/* Page components (Step 5), copied from the prototype */
/* Image placeholders: clearly not photographs */
.ph{position:relative;width:100%;max-width:100%;overflow:hidden;background:var(--paper-3);border:1px solid var(--rule);
  background-image:repeating-linear-gradient(135deg,transparent 0 9px,color-mix(in srgb,var(--rule) 55%,transparent) 9px 10px)}
.ph-glyph{position:absolute;right:6%;bottom:-.18em;font-family:var(--f-display);font-weight:700;font-size:clamp(5rem,13vw,9rem);line-height:1;color:var(--rule);user-select:none}
.ph-cap{position:absolute;left:10px;top:10px;right:10px;display:flex;gap:6px;align-items:flex-start;font-family:var(--f-ui);font-size:var(--t-xs);line-height:1.4;color:var(--ink-2)}
.ph-cap svg{flex:none;width:14px;height:14px;margin-top:1px}

/* Blue plaque (नीलफलक) stands in for portraits until licensed photographs arrive */
.plaque{flex:none;border-radius:50%;background:var(--plaque);color:var(--plaque-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  box-shadow:inset 0 0 0 5px var(--plaque),inset 0 0 0 6px color-mix(in srgb,var(--plaque-ink) 65%,transparent);padding:14%}
.plaque-name{font-family:var(--f-display);font-weight:600;line-height:1.15}
.plaque-dates{font-family:var(--f-ui);opacity:.85;margin-top:.3em;line-height:1.2;font-variant-numeric:tabular-nums}
.plaque--sm{width:92px;height:92px}.plaque--sm .plaque-name{font-size:.86rem}.plaque--sm .plaque-dates{font-size:.66rem}
.plaque--lg{width:min(220px,60vw);height:min(220px,60vw)}.plaque--lg .plaque-name{font-size:1.5rem}.plaque--lg .plaque-dates{font-size:.9rem}

/* Copper plate (ताम्रपट): the name's evolution */
.plate{position:relative;border-radius:10px;background:linear-gradient(140deg,var(--plate-a),var(--plate-b));color:var(--plate-ink);padding:26px 26px 26px 64px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(0,0,0,.25),0 14px 28px -20px rgba(0,0,0,.6)}
.plate::before{content:"";position:absolute;left:22px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--paper);box-shadow:inset 0 2px 3px rgba(0,0,0,.45),0 0 0 4px rgba(0,0,0,.18)}
.plate ol{display:grid;gap:4px}
.plate li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid rgba(255,243,230,.22)}
.plate li:last-child{border-bottom:0}
.plate .w{font-family:var(--f-display);font-weight:600;font-size:clamp(1.35rem,2.6vw,1.9rem);line-height:1.2}
.plate li:last-child .w{font-size:clamp(1.8rem,4vw,2.6rem)}
.plate .d{font-family:var(--f-ui);font-size:var(--t-sm);opacity:.9;text-align:right}
.plate-cap{font-family:var(--f-ui);font-size:var(--t-xs);color:var(--ink-2);margin-top:10px}

/* Cards */
.card-link{text-decoration:none;display:block}
.card-link:hover h3{color:var(--plaque);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.pcard{display:flex;gap:16px;align-items:flex-start;text-decoration:none}
/* an uploaded portrait in the plaque's place; the crop sits a little high to keep heads in */
.pcard-photo{flex:none;width:92px;height:92px;border-radius:50%;object-fit:cover;object-position:50% 30%}
.pcard:hover :is(h2,h3){color:var(--plaque)}
.pcard :is(h2,h3){font-size:1.2rem;margin-top:3px}
.pcard p{font-size:.97rem;color:var(--ink-2);line-height:1.65;margin-top:6px}
.scard{display:grid;gap:12px;text-decoration:none;align-content:start}
.scard h3{font-size:1.3rem}
.scard p{font-size:.98rem;color:var(--ink-2);line-height:1.65}
.scard:hover h3{color:var(--plaque)}
.plcard{display:grid;gap:8px;text-decoration:none;padding-top:14px;border-top:2px solid var(--ink);align-content:start}
.plcard h3{font-size:1.25rem}
.plcard p{font-size:.97rem;color:var(--ink-2);line-height:1.65}
.plcard:hover h3{color:var(--plaque)}
.plcard-img{gap:0;padding-top:0;border-top:0}
.plcard-img .rec{margin-top:12px}
.plcard-img h3{font-size:1.3rem;margin-top:4px}
.plcard-img p{font-size:.98rem;line-height:inherit;margin-top:6px}
.icard{padding:14px 0;border-top:1px solid var(--rule);display:grid;gap:4px}
.icard h3{font-size:1.1rem}
.icard p{font-size:.95rem;color:var(--ink-2);line-height:1.6}
.ilist{columns:2 26rem;column-gap:44px}
.irow{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:16px;padding:16px 0;border-top:1px solid var(--rule);break-inside:avoid}
.irow .iy{font-family:var(--f-ui);font-size:var(--t-sm);color:var(--copper);font-weight:600;font-variant-numeric:tabular-nums;padding-top:3px}
.irow h3{font-size:1.12rem}
.irow p{font-size:.97rem;color:var(--ink-2);line-height:1.65;margin-top:4px}
.inote{font-family:var(--f-ui);font-size:var(--t-sm);color:var(--ink-2);margin:-4px 0 14px}
@media (max-width:640px){.irow{grid-template-columns:minmax(0,1fr);gap:2px}}

/* Home */
/* clip, not hidden: a hidden overflow can still be scrolled by focus or a jump link, which slid the hero's content up in testing */
.hero{position:relative;overflow:hidden;overflow:clip;border-bottom:1px solid var(--rule);background:var(--paper)}
.hero-map{position:absolute;inset:0;opacity:.38;pointer-events:none}
/* The map as first designed, a large faint background behind the whole hero, moved left at the same size (Sanjay, 2026-10-23) */
.hero-map svg{position:absolute;right:-6%;top:-2%;width:min(1100px,120%);height:auto}
@media (max-width:760px){.hero-map{opacity:.28}}
.hero-h,.hero-sub,.hero-cta{position:relative}
.hero-inner{position:relative;padding-block:clamp(40px,7vw,96px) 34px}
.hero-kicker{font-family:var(--f-ui);font-size:var(--t-sm);color:var(--copper);font-weight:600;margin-bottom:14px}
.hero-h{margin-top:6px}
/* line height leaves room for the matra of पु, which otherwise touches the line above */
.hero-h .big{display:block;font-size:var(--t-hero);font-weight:700;line-height:1.2;letter-spacing:0}
.hero-h .rest{display:block;font-size:clamp(1.55rem,3.6vw,2.9rem);font-weight:500;line-height:1.3;max-width:22ch;margin-top:.2em}
.hero-sub{font-size:var(--t-md);margin-top:20px;font-style:italic}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-note{margin-top:26px;max-width:34rem;background:color-mix(in srgb,var(--paper) 80%,transparent)}
/* Compact hero: the big पुणे on the left, title, line and buttons beside it, so the page below shows sooner (Sanjay, 2026-10-23) */
@media (min-width:900px){
  .hero-inner{display:grid;grid-template-columns:auto minmax(0,34rem);justify-content:start;grid-template-areas:"big rest" "big sub" "big cta" "note note";column-gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(28px,3.5vw,48px) 28px}
  .hero-h{display:contents}
  /* the small line sits in two lines in the space above पु, as in Sanjay's mock-up, left-aligned (Sanjay, 2026-10-23) */
  .hero-kicker{grid-area:big;align-self:start;justify-self:start;position:relative;z-index:1;margin:0;text-align:left;font-size:clamp(.72rem,1.32vw,1.14rem);line-height:1.3}
  .hero-kicker span{display:block;white-space:nowrap}
  .hero-h .big{grid-area:big;font-size:clamp(6rem,11vw,9.5rem);line-height:1.15;align-self:center;padding-top:.4em}
  .hero-h .rest{grid-area:rest;margin-top:0;align-self:end}
  .hero-sub{grid-area:sub;margin-top:14px}
  .hero-cta{grid-area:cta;margin-top:22px;align-self:start}
  .hero-note{grid-area:note;margin-top:22px}
  /* review notes span the full row; left in the first column they widen it and push the headline away */
  .hero-inner > .wp-note{grid-column:1 / -1}
}
/* Heading over the three year cards, so readers know what they are (Sanjay, 2026-10-23) */
.ledger-h{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:14px}
.ledger-h h2{font-family:var(--f-ui);font-size:var(--t-sm);font-weight:600;color:var(--copper);margin:0}
.ledger-h + .ledger{border-top:0}
/* the year cards sit on a light full-width band so the hero map behind them does not distract (Sanjay, 2026-10-23) */
.ledger-wrap{position:relative;z-index:1;background:var(--paper-2);box-shadow:0 0 0 100vmax var(--paper-2);clip-path:inset(0 -100vmax);border-top:1px solid var(--rule)}
.ledger-wrap .ledger-h{border-top:0;padding-top:18px}
.ledger{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule)}
.ledger a{padding:18px 18px 22px 0;text-decoration:none;display:grid;gap:2px}
.ledger a + a{padding-left:18px;border-left:1px solid var(--rule)}
/* hover: a 2px copper line along the card's bottom edge (Sanjay, 2026-10-23) */
.ledger a{transition:box-shadow .15s}
.ledger a:hover,.ledger a:focus-visible{box-shadow:inset 0 -2px 0 var(--copper)}
.ledger .y{font-family:var(--f-display);font-weight:600;font-size:var(--t-lg);color:var(--copper);font-variant-numeric:tabular-nums}
.ledger .l{font-family:var(--f-ui);font-size:var(--t-sm);color:var(--ink-2)}
.ledger a:hover .l{color:var(--plaque)}
@media (max-width:640px){.ledger{grid-template-columns:minmax(0,1fr)}.ledger a + a{padding-left:0;border-left:0;border-top:1px solid var(--rule)}}
.intro-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px)}
.intro-grid h2{font-size:var(--t-2xl)}
@media (max-width:820px){.intro-grid{grid-template-columns:minmax(0,1fr)}}
.quick{margin-top:26px}
.topics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.topic{position:relative;display:grid;gap:6px;align-content:end;min-height:200px;padding:20px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);text-decoration:none;overflow:hidden;background:var(--paper)}
.topic .g{position:absolute;top:18px;right:18px;width:84px;height:84px;color:var(--plaque);opacity:.55;transition:opacity .2s}
.topic .g svg{display:block;width:100%;height:100%}
/* the detailed scroll reads larger than the other seven, so it is drawn 20% smaller on the home cards only (Sanjay, 2026-10-23) */
.topic[href$="/history/"] .g svg{transform:scale(.8);transform-origin:top right}
@media (max-width:760px){.topic[href$="/history/"] .g svg{transform-origin:top left}}
.t-icons{display:inline-flex;gap:.2em;margin-left:.35em;vertical-align:-.12em;color:var(--plaque)}
.t-icons svg{width:1.05em;height:1.05em}
.t-icons img{width:auto;height:1.05em}
/* narrow cards: a smaller icon above the text instead of behind it */
@media (max-width:760px){.topic{min-height:0;align-content:start}.topic .g{position:static;width:46px;height:46px;opacity:.85;margin-bottom:4px}}
.topic h3{font-size:1.5rem;position:relative}
.topic p{font-size:.95rem;color:var(--ink-2);line-height:1.5;position:relative}
.topic .n{font-family:var(--f-ui);font-size:var(--t-xs);color:var(--copper);position:relative}
.topic:hover{background:var(--paper-2)}.topic:hover .g{opacity:1}
/* same 2px copper bottom line on hover as the home date cards (Sanjay, 2026-10-23) */
.topic{transition:box-shadow .15s,background .15s}
.topic:hover,.topic:focus-visible{box-shadow:inset 0 -2px 0 var(--copper)}
@media (max-width:900px){.topics{grid-template-columns:repeat(2,minmax(0,1fr))}.topic{min-height:170px}.topic .g{font-size:6rem}}
/* lighter copper on the dark band and footer: the page copper measured 2.6:1 on basalt, this one 6.6:1 (Sanjay, 2026-10-23) */
.band-dark,.ftr{--copper:#E39A63}
.band-dark{background:var(--basalt);color:var(--basalt-ink)}
.band-dark .sh h2{color:var(--basalt-ink)}
.band-dark .more{color:var(--basalt-ink)}
.band-dark .btn-pill,.band-dark .is-style-pill .wp-block-button__link{background:transparent;border-color:var(--basalt-ink);color:var(--basalt-ink)}
.band-dark .btn-pill:hover,.band-dark .is-style-pill .wp-block-button__link:hover{background:var(--basalt-ink);color:var(--basalt)}
.band-dark .rec,.band-dark p.mut{color:var(--basalt-2)}
.era-rail{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));position:relative;margin-bottom:34px}
.era-rail::before{content:"";position:absolute;left:0;right:0;top:15px;height:1px;background:var(--basalt-rule)}
.era-tab{position:relative;background:none;border:0;cursor:pointer;color:var(--basalt-2);text-align:left;padding:0 10px 0 0;font-family:var(--f-ui);font-size:var(--t-sm);line-height:1.35}
.era-tab .dot{display:block;width:13px;height:13px;border-radius:50%;border:2px solid var(--basalt-2);background:var(--basalt);margin:9px 0 14px}
.era-tab b{display:block;font-family:var(--f-display);font-weight:600;font-size:1.12rem;color:var(--basalt-ink)}
.era-tab[aria-selected="true"] .dot{background:var(--copper);border-color:var(--copper);box-shadow:0 0 0 5px color-mix(in srgb,var(--copper) 25%,transparent);animation:era-pulse 1.8s ease-out infinite}
/* the chosen era's dot pulses: a copper ring grows out and fades; off under reduced motion (Sanjay, 2026-10-23) */
@keyframes era-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--copper) 70%,transparent)}
  70%{box-shadow:0 0 0 11px color-mix(in srgb,var(--copper) 0%,transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--copper) 0%,transparent)}}
.era-tab[aria-selected="true"] b{color:var(--copper)}
.era-tab:hover b{text-decoration:underline}
.era-panel{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,5vw,64px)}
.era-panel h3{font-size:var(--t-xl)}
.era-panel p{margin-top:12px;color:var(--basalt-ink);opacity:.92}
.era-panel ol{border-top:1px solid var(--basalt-rule)}
.era-panel li{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:12px;padding:11px 0;border-bottom:1px solid var(--basalt-rule);font-size:.97rem;line-height:1.55}
.era-panel li span:first-child{font-family:var(--f-ui);color:var(--copper);font-size:var(--t-sm)}
.era-panel .btn{border-color:var(--basalt-ink);color:var(--basalt-ink);margin-top:22px}
.era-panel .btn:hover{background:var(--basalt-ink);color:var(--basalt)}
/* under the five dates, only when a period has more: opens the timeline filtered to that period (Sanjay, 2026-10-24) */
.era-all{display:inline-block;margin-top:14px;white-space:normal}
@media (max-width:820px){
  .era-rail{grid-template-columns:minmax(0,1fr);gap:0}
  .era-rail::before{left:6px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .era-tab{display:flex;align-items:center;gap:14px;padding:6px 0}
  .era-tab .dot{margin:0}
  .era-tab b{display:inline}
  .era-panel{grid-template-columns:minmax(0,1fr)}
}
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,6vw,80px);align-items:center}
.feature h2{font-size:var(--t-2xl)}
.feature .prose{margin-top:16px}
@media (max-width:860px){.feature{grid-template-columns:minmax(0,1fr)}}
.heritage-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px)}
@media (max-width:900px){.heritage-grid{grid-template-columns:minmax(0,1fr)}}
.types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.types a{display:grid;gap:2px;padding:14px 0;border-bottom:1px solid var(--rule);text-decoration:none}
.types a b{font-family:var(--f-display);font-weight:600;font-size:1.2rem}
.types a span{font-family:var(--f-ui);font-size:var(--t-sm);color:var(--ink-2)}
.types a:hover b{color:var(--plaque)}
@media (max-width:520px){.types{grid-template-columns:minmax(0,1fr)}}
.rang{background:var(--paper-3)}
.rang-mast{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;border-bottom:3px double var(--ink);padding-bottom:18px;margin-bottom:34px}
.rang-mast h2{font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.1}
.rang-mast h2 span:not(.pagdi){color:var(--copper)}
.pagdi{display:inline-block;width:1.25em;height:1.05em;vertical-align:-.12em;margin-left:.25em}
.pagdi svg{display:block;width:100%;height:100%}
.rang-mast p{font-family:var(--f-ui);font-size:var(--t-sm);color:var(--ink-2);max-width:26rem}
.rcard{display:grid;gap:12px;text-decoration:none;align-content:start}
.rcard blockquote{margin:0;font-style:italic;font-size:var(--t-md);line-height:1.6}
.rcard h3{font-size:1.15rem;font-family:var(--f-ui);font-weight:600}
.rcard:hover h3{color:var(--plaque)}
.rcard .go{font-family:var(--f-ui);font-size:var(--t-sm);color:var(--plaque)}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:0 28px;margin-top:44px;border-top:1px solid var(--ink);padding-top:16px}
.facts h3{grid-column:1/-1;font-size:1.25rem;margin-bottom:8px}
.facts a{display:block;padding:12px 0;text-decoration:none;font-size:.98rem;line-height:1.6;border-bottom:1px solid var(--rule)}
.facts a:hover{color:var(--plaque)}
.culture{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px}
.culture a{display:grid;gap:6px;padding:20px 0 22px;border-top:1px solid var(--rule);text-decoration:none;align-content:start}
.culture b{font-family:var(--f-display);font-size:1.45rem;font-weight:600}
.culture span{font-size:.97rem;color:var(--ink-2);line-height:1.6}
.culture a:hover b{color:var(--plaque)}
@media (max-width:900px){.culture{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.culture{grid-template-columns:minmax(0,1fr)}}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.trio > a{display:grid;gap:12px;align-content:start;padding:24px;background:var(--paper-2);border:1px solid var(--rule);text-decoration:none}
.trio h3{font-size:var(--t-lg)}
.trio p{font-size:.98rem;line-height:1.65;color:var(--ink-2)}
.trio ul{border-top:1px solid var(--rule)}
.trio li{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:10px;padding:8px 0;border-bottom:1px solid var(--rule);font-size:.93rem;line-height:1.5}
.trio li span:first-child{font-family:var(--f-ui);color:var(--copper);font-size:var(--t-sm)}
.trio > a:hover h3{color:var(--plaque)}
@media (max-width:900px){.trio{grid-template-columns:minmax(0,1fr)}}
.gtiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.gtiles a{display:grid;gap:8px;text-decoration:none;font-family:var(--f-ui);font-size:var(--t-sm)}
.gtiles a b{font-weight:600;font-size:1rem}
.gtiles a:hover b{color:var(--plaque)}
@media (max-width:900px){.gtiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.gtiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Map */
.map-wrap{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:900px){.map-wrap{grid-template-columns:minmax(0,1fr)}}
.map-canvas{position:relative;border:1px solid var(--rule);background:var(--paper-2)}
.map-canvas svg{display:block;width:100%;height:auto}
.map-legend{position:absolute;left:10px;bottom:8px;font-family:var(--f-ui);font-size:.72rem;color:var(--ink-2);background:color-mix(in srgb,var(--paper-2) 85%,transparent);padding:2px 6px}
.m-grid{stroke:var(--rule);stroke-width:.6;fill:none}
.m-river{fill:none;stroke:var(--plaque);stroke-linecap:round;opacity:.75}
/* Map type sizes are in drawing units: at a typical 700-800px frame they render at about 15-18px */
.m-river-label{font-family:var(--f-ui);font-size:24px;fill:var(--plaque);font-style:italic}
.m-peth{font-family:var(--f-display);font-size:17px;fill:var(--ink-2);opacity:.8}
.m-area{font-family:var(--f-ui);font-size:20px;fill:var(--ink-2)}
.m-road{fill:none;stroke:var(--ink-2);stroke-width:1.2;stroke-dasharray:2 4;opacity:.55}
.m-water{fill:none;stroke:var(--plaque);stroke-width:1.4;stroke-dasharray:6 5;opacity:.6}
.m-text{font-family:var(--f-ui);font-size:18px;fill:var(--ink-2)}
.mk{cursor:pointer}
.mk circle{fill:var(--paper-2);stroke:var(--copper);stroke-width:3;transition:r .15s}
.mk .lbl{font-family:var(--f-ui);font-size:21px;font-weight:500;fill:var(--ink);paint-order:stroke;stroke:var(--paper-2);stroke-width:6px;stroke-linejoin:round;opacity:0}
.mk:hover circle,.mk:focus circle{fill:var(--copper)}
.mk:hover .lbl,.mk:focus .lbl,.mk.on .lbl,.mk.lit .lbl{opacity:1}
.mk.on circle{fill:var(--copper);r:11}
.mk:focus{outline:none}
.mk:focus-visible circle{stroke:var(--focus);stroke-width:3.5}
.mk.dim{opacity:.18;pointer-events:none}
.m-center{fill:var(--plaque)}
/* the info box's link sits at its right edge (Sanjay, 2026-10-23) */
.preview > .more{justify-self:end}
.preview{border:1px solid var(--rule);background:var(--paper-2);padding:20px;display:grid;gap:10px;scroll-margin-top:calc(var(--hdr) + 16px)}
.preview h2{font-size:var(--t-lg)}
.preview p{font-size:.98rem;line-height:1.65;color:var(--ink-2)}
.plist{margin-top:18px;columns:2 14rem;column-gap:20px;font-family:var(--f-ui);font-size:var(--t-sm)}
.plist button{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--rule);padding:7px 0;cursor:pointer;break-inside:avoid}
.plist button:hover,.plist button[aria-current="true"]{color:var(--plaque)}

/* Search page (as the prototype) */
.sbox{display:flex;border:2px solid var(--ink);background:var(--paper-2);margin-top:20px}
.sbox input{flex:1;min-width:0;border:0;background:transparent;font-family:var(--f-display);font-size:clamp(1.3rem,3vw,1.9rem);padding:12px 16px;color:var(--ink)}
.sbox input:focus{outline:none}
.sbox:focus-within{border-color:var(--plaque)}
.tabs{display:flex;gap:4px 22px;flex-wrap:wrap;border-bottom:1px solid var(--rule);margin-top:26px;font-family:var(--f-ui)}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:10px 0;cursor:pointer;font-size:1rem;color:var(--ink-2)}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--copper);font-weight:600}
.results{margin-top:8px}
.res{display:grid;gap:4px;padding:18px 0;border-bottom:1px solid var(--rule);text-decoration:none}
.res h3{font-size:1.2rem}
.res p{font-size:.97rem;color:var(--ink-2);line-height:1.65}
.res:hover h3{color:var(--plaque)}

/* Header search suggestions: the five best matches as you type, then a link to every result (Sanjay, 2026-10-30) */
.hsearch{position:relative}
.suggest{position:absolute;top:calc(100% + 4px);right:-1px;width:22rem;max-width:calc(100vw - 32px);z-index:60;background:var(--paper-2);border:1px solid var(--rule);box-shadow:0 8px 24px rgb(0 0 0 / .12);font-family:var(--f-ui)}
.drawer .suggest{left:-1px;right:-1px;width:auto;max-width:none}
.suggest a{display:grid;gap:1px;padding:9px 14px;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink);font-size:var(--t-sm);line-height:1.45}
.suggest a:last-child{border-bottom:0}
.suggest .k{font-size:var(--t-xs);font-weight:600;color:var(--copper)}
.suggest a:hover,.suggest a[aria-selected="true"]{background:var(--paper-3);color:var(--plaque)}
.suggest .all{font-weight:600;color:var(--plaque)}

/* Timeline page */
.tl-era{margin-top:40px}
.tl-era > h2{font-size:var(--t-xl);display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.tl-era > h2 small{font-family:var(--f-ui);font-size:var(--t-sm);color:var(--ink-2);font-weight:400}
.tl{margin-top:16px;border-left:2px solid var(--rule);margin-left:6px}
.ev{position:relative;padding-left:26px}
/* The bullet on the line carries + / − so readers see the row opens; centred on the 2px line, whose middle is 1px left of the row (Sanjay, 2026-10-23) */
/* the sign is drawn as two bars, not typed, so it sits exactly in the middle whatever the font (Sanjay, 2026-10-23) */
.ev::before{content:"";position:absolute;left:-11px;top:13px;box-sizing:border-box;width:20px;height:20px;border-radius:50%;border:2px solid var(--copper);cursor:pointer;
  background:linear-gradient(var(--copper),var(--copper)) center/8px 2px no-repeat,linear-gradient(var(--copper),var(--copper)) center/2px 8px no-repeat,var(--paper)}
.ev-head{display:grid;grid-template-columns:11rem minmax(0,1fr) auto;gap:16px;align-items:baseline;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--rule);padding:13px 0;cursor:pointer}
.ev-head:hover .ev-t{color:var(--plaque)}
.ev-d{font-family:var(--f-ui);font-size:var(--t-sm);color:var(--copper);font-weight:600;font-variant-numeric:tabular-nums}
.ev-t{font-size:1.02rem;line-height:1.55}
.ev-tag{font-family:var(--f-ui);font-size:var(--t-xs);color:var(--ink-2);white-space:nowrap}
.ev[aria-expanded="true"]::before,.ev.open::before{background:linear-gradient(var(--paper),var(--paper)) center/8px 2px no-repeat,var(--copper)}
.ev-detail{padding:12px 0 18px;display:flex;gap:8px 18px;flex-wrap:wrap;font-family:var(--f-ui);font-size:var(--t-sm);border-bottom:1px solid var(--rule)}
.ev-detail a{color:var(--plaque)}
@media (max-width:640px){.ev-head{grid-template-columns:minmax(0,1fr)}.ev-head .ev-tag{display:none}.ev-head{gap:2px}}

/* Article */
.progress{position:fixed;left:0;top:env(safe-area-inset-top,0px);height:3px;background:var(--copper);z-index:65;width:0}
.art-head{max-width:52rem;padding-top:14px}
.art-head h1{font-size:var(--t-2xl);margin-top:6px}
.art-meta{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;margin-top:18px;padding-block:12px;border-block:1px solid var(--rule)}
.fs{margin-left:auto;display:flex;gap:6px;align-items:center;font-family:var(--f-ui);font-size:var(--t-xs);color:var(--ink-2)}
.fs button{border:1px solid var(--rule);background:var(--paper-2);border-radius:2px;min-width:34px;height:30px;cursor:pointer;font-family:var(--f-ui)}
.art-hero{margin-block:30px 10px}
.art-cap{font-family:var(--f-ui);font-size:var(--t-xs);color:var(--ink-2);margin-bottom:34px}
.art-body{max-width:var(--measure);margin-inline:auto;font-size:calc(var(--t-base) * var(--fs,1))}
.art-body p + p{margin-top:1.1em}
/* end of every article: thin line, पुणेरी पगडी, thin line, in place of ॥; lines in the style guide's रेषा colour (--rule), पगडी 46px (Sanjay, 2026-10-23) */
.art-end{display:flex;align-items:center;gap:14px;margin-top:2.6em;margin-inline:auto;width:calc(50% + 37px)}
.art-end span{flex:1;height:1px;background:var(--rule)}
.art-end svg{flex:none;width:46px;height:38px}
.art-body .lede{font-size:1.18em;line-height:1.7}
.art-body h3{font-size:1.3em;margin:1.6em 0 .6em}
.art-body .verse{margin:1.4em 0;padding-left:22px;border-left:2px solid var(--copper);font-size:.98em;line-height:1.85}
.art-body .verse p{margin:0}
.art-body .verse .vn{font-family:var(--f-ui);color:var(--copper);font-size:.8em;margin-top:.8em}
.art-body blockquote{margin:1.2em 0;padding:4px 0 4px 20px;border-left:2px solid var(--plaque)}
.related{margin-top:56px;padding-top:36px;border-top:3px double var(--ink)}

/* Profile pages */
.prof{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:clamp(24px,5vw,64px);padding-top:26px;align-items:start}
.prof h1{font-size:var(--t-2xl)}
.prof .ph-note{font-family:var(--f-ui);font-size:var(--t-xs);color:var(--ink-2);margin-top:10px;max-width:15rem}
@media (max-width:760px){.prof{grid-template-columns:minmax(0,1fr)}}
.entries{display:grid;gap:22px}
.entry{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:18px;padding-top:16px;border-top:1px solid var(--rule)}
.entry .src{font-family:var(--f-ui);font-size:var(--t-sm);color:var(--copper)}
.entry .src a{color:inherit}
@media (max-width:640px){.entry{grid-template-columns:minmax(0,1fr);gap:4px}}
/* place page: photo beside name and facts, map beside the text, two equal columns (Sanjay, 2026-10-30) */
.place-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;margin-top:22px}
.place-top .page-h{padding-block:0}
.place-split{align-items:start;margin-top:clamp(32px,4vw,48px)}
/* an uploaded photo at its own shape, never cropped; a tall one is capped so the row stays sensible */
.photo{margin:0}
.photo img{display:block;max-width:100%;height:auto;border:1px solid var(--rule)}
.photo figcaption{font-family:var(--f-ui);font-size:var(--t-xs);color:var(--ink-2);margin-top:8px;line-height:1.5}
.place-img{width:auto;max-height:min(560px,75vh)}
.portrait{width:auto;max-height:22rem}
/* phones: one column, and a wider, shorter photo frame so the name stays near the top */
@media (max-width:640px){.place-top{grid-template-columns:minmax(0,1fr);gap:24px}.place-photo .ph{aspect-ratio:16 / 9!important}.place-img{max-height:min(420px,60vh)}}
/* A place intro borrowed from elsewhere in the copy reads as a quotation, with its source linked */
.excerpt{margin:0;padding:2px 0 2px 18px;border-left:2px solid var(--copper)}
.excerpt p{font-size:var(--t-md);line-height:1.7;font-style:italic}
.excerpt-src{font-family:var(--f-ui);font-size:var(--t-sm);color:var(--ink-2);margin:12px 0 16px}
.excerpt-src a{color:var(--plaque)}
.mini-map{max-width:100%}
/* section jumps land below the sticky header and sub-navigation (the prototype's ids started sec-) */
main [id]{scroll-margin-top:var(--jump,calc(var(--hdr) + 70px))}
/* gallery and its picture box (Step 6) */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:22px}
.gal button{background:none;border:0;padding:0;text-align:left;cursor:pointer;display:grid;gap:8px}
.gal button b{font-family:var(--f-ui);font-weight:600;font-size:1rem}
.gal button:hover b{color:var(--plaque)}
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(10,11,14,.82);display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.lb-box{background:var(--paper);width:min(980px,100%);max-height:100%;overflow:auto;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.lb-box .ph{border:0;height:100%;min-height:280px}
.lb-meta{padding:24px;display:grid;gap:14px;align-content:start}
.lb-meta h2{font-size:var(--t-lg)}
.lb-nav{display:flex;gap:8px;margin-top:6px}
.lb-links{display:grid;gap:5px;line-height:1.45}
.lb-links a{color:var(--plaque)}
.lb-links span{font-family:var(--f-ui);font-size:var(--t-xs);color:var(--ink-2)}
@media (max-width:760px){.lb-box{grid-template-columns:minmax(0,1fr)}}

/* Spacing set (Sanjay, 2026-11-01): every spacing the page HTML once wrote inline has a named class, which
   a block carries in Advanced, Additional CSS class. mt = space above, mb = space below, the number in px;
   pt-0 drops a box's top padding, bt-0 its top line, m-0 all its margins. Last in the file so it wins over
   the component rules of equal weight, as the inline style did. */
.mt-0{margin-top:0}.mt-4{margin-top:4px}.mt-6{margin-top:6px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}
.mt-14{margin-top:14px}.mt-18{margin-top:18px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}
.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-26{margin-bottom:26px}.mb-28{margin-bottom:28px}
.m-0{margin:0}.pt-0{padding-top:0}.bt-0{border-top:0}