/* =========================================================================
   Bhutan Heritage Database — stylesheet
   Design notes:
   - Surfaces are white (JSTOR / Met ethos), warmed only by hairlines & panels.
   - The single Bhutanese signature is the "kemar" maroon — the deep red band
     painted beneath the cornice of dzongs and temples — plus a sparing saffron.
   - Reading is set in a system serif; the interface in a system sans.
   ========================================================================= */

:root{
  /* surfaces */
  --paper:#ffffff;
  --paper-2:#faf8f3;     /* warm panel (sidebars, cards)            */
  --paper-3:#f2ede3;     /* deeper warm panel / hover               */
  --line:#e7e1d5;        /* hairline                                */
  --line-2:#d6cdbd;      /* stronger hairline                       */
  /* ink */
  --ink:#1c1714;
  --ink-2:#574e46;
  --ink-3:#8b8178;
  /* brand */
  --maroon:#7a1b2e;      /* kemar band                              */
  --maroon-2:#5a1322;    /* darker (hover / press)                  */
  --maroon-link:#6e1829;
  --saffron:#b9821c;     /* sparing accent (finial / active map)    */
  --saffron-2:#e0a93a;
  --gold-wash:#f6ecd1;   /* faint highlight background              */
  --gold-line:#d8b24a;
  /* type */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Cambria,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  /* metrics */
  --reading:46rem;       /* comfortable measure for prose           */
  --shell:1200px;
  --radius:3px;
  --shadow:0 1px 2px rgba(28,23,20,.06),0 8px 28px rgba(28,23,20,.10);
  --shadow-sm:0 1px 2px rgba(28,23,20,.08),0 2px 8px rgba(28,23,20,.06);
}

*{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);
  font-size:1rem;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--maroon-link);text-underline-offset:2px;text-decoration-thickness:.06em}
a:hover{color:var(--maroon-2)}
img{max-width:100%}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
::selection{background:var(--gold-wash)}

:focus-visible{outline:2px solid var(--maroon);outline-offset:2px;border-radius:2px}
.btn:focus-visible,.chip:focus-visible{outline:2px solid var(--saffron-2);outline-offset:2px}

/* ---- kemar rule: the one signature motif ------------------------------- */
/* a thin maroon band carrying small white "dentils", topped by a gold line  */
.kemar{
  height:9px;border:0;margin:0;
  background:
    linear-gradient(var(--gold-line),var(--gold-line)) top/100% 1.5px no-repeat,
    repeating-linear-gradient(90deg,var(--maroon) 0 9px,transparent 9px 13px) bottom/auto 6px no-repeat,
    var(--maroon);
  background-clip:padding-box;
}
.kemar-thin{height:3px;background:var(--maroon);border:0;margin:0}

/* =========================================================================
   Masthead / navigation
   ========================================================================= */
.masthead{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--line)}
.masthead .bar{max-width:var(--shell);margin:0 auto;display:flex;align-items:center;
  gap:1.25rem;padding:.6rem 1.25rem;min-height:58px}
.brand{display:flex;align-items:baseline;gap:.5rem;text-decoration:none;color:var(--ink);white-space:nowrap}
.brand b{font-family:var(--sans);font-weight:600;font-size:1.18rem;letter-spacing:.01em}
.brand .mark{display:inline-block;width:13px;height:18px;border-radius:1px;
  background:linear-gradient(var(--saffron-2) 0 6px,var(--maroon) 6px 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);transform:translateY(2px)}
.brand small{font-family:var(--sans);color:var(--ink-3);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:600}
nav.primary{display:flex;gap:.15rem;margin-left:auto;flex-wrap:wrap}
nav.primary a{font-family:var(--sans);font-size:.86rem;font-weight:550;color:var(--ink-2);
  text-decoration:none;padding:.42rem .62rem;border-radius:var(--radius);letter-spacing:.01em}
nav.primary a:hover{background:var(--paper-3);color:var(--ink)}
nav.primary a.active{color:var(--maroon);box-shadow:inset 0 -2px 0 var(--maroon)}
.navtoggle{display:none;margin-left:auto;background:none;border:1px solid var(--line-2);
  border-radius:var(--radius);padding:.4rem .55rem;font-size:1rem;cursor:pointer;color:var(--ink)}

/* =========================================================================
   Generic layout
   ========================================================================= */
.wrap{max-width:var(--shell);margin:0 auto;padding:0 1.25rem}
.section{padding:2.5rem 0}
main{min-height:60vh}
.muted{color:var(--ink-3)}
.small{font-size:.85rem}
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;
  font-weight:700;color:var(--saffron)}
.center{text-align:center}
code,kbd{font-family:var(--mono);font-size:.86em;background:var(--paper-3);padding:.08em .35em;border-radius:3px}

/* sidebar + content scaffold (essays, glossary, db pages) */
.layout{display:grid;grid-template-columns:clamp(220px,22vw,290px) minmax(0,1fr);
  gap:2.5rem;max-width:var(--shell);margin:0 auto;padding:1.5rem 1.25rem 4rem}
.layout.right-rail{grid-template-columns:minmax(0,1fr) clamp(220px,22vw,290px)}
.rail{position:sticky;top:74px;align-self:start;max-height:calc(100vh - 90px);overflow:auto;
  padding-right:.4rem}
.rail h4{font-family:var(--sans);font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-3);margin:1.2rem 0 .5rem;font-weight:700}
.rail h4:first-child{margin-top:0}

/* =========================================================================
   Buttons / chips / inputs
   ========================================================================= */
.btn{font-family:var(--sans);font-size:.86rem;font-weight:600;border:1px solid var(--line-2);
  background:var(--paper);color:var(--ink);padding:.48rem .85rem;border-radius:var(--radius);
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;line-height:1}
.btn:hover{background:var(--paper-3)}
.btn.primary{background:var(--maroon);border-color:var(--maroon);color:#fff}
.btn.primary:hover{background:var(--maroon-2);color:#fff}
.btn.sm{padding:.32rem .6rem;font-size:.8rem}
.chip{font-family:var(--sans);font-size:.8rem;border:1px solid var(--line-2);background:var(--paper);
  color:var(--ink-2);padding:.3rem .65rem;border-radius:999px;cursor:pointer;line-height:1;white-space:nowrap}
.chip:hover{background:var(--paper-3);color:var(--ink)}
.chip[aria-pressed="true"],.chip.active{background:var(--maroon);border-color:var(--maroon);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}

input[type=search],input[type=text],select{font-family:var(--sans);font-size:.92rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--radius);padding:.55rem .7rem;width:100%}
input::placeholder{color:var(--ink-3)}
input[type=search]:focus,select:focus{border-color:var(--maroon);outline:none;box-shadow:0 0 0 3px rgba(122,27,46,.12)}
.search-lg{display:flex;align-items:center;gap:.5rem;border:1px solid var(--line-2);border-radius:var(--radius);
  background:var(--paper);padding:.15rem .15rem .15rem .7rem;box-shadow:var(--shadow-sm)}
.search-lg svg{flex:none;color:var(--ink-3)}
.search-lg input{border:0;box-shadow:none;padding:.6rem .3rem}
.search-lg input:focus{box-shadow:none}

/* =========================================================================
   Home / hero + portals
   ========================================================================= */
.hero{padding:3.4rem 0 1.2rem}
.hero .lede{font-family:var(--sans);font-size:1.28rem;line-height:1.55;color:var(--ink-2);
  max-width:40rem;margin:1rem 0 0}
.hero h1{font-family:var(--sans);font-weight:600;letter-spacing:-.01em;line-height:1.05;
  font-size:clamp(2.3rem,5vw,3.5rem);margin:.4rem 0 0}
.hero h1 .accent{color:var(--maroon)}
.hero .kemar{max-width:8.5rem;margin:1.4rem 0 0;border-radius:1px}

.statstrip{display:flex;flex-wrap:wrap;gap:2.2rem;padding:1.6rem 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);margin:2.2rem 0}
.statstrip .s{display:flex;flex-direction:column;gap:.15rem}
.statstrip .n{font-family:var(--sans);font-size:1.9rem;font-weight:600;color:var(--ink);line-height:1}
.statstrip .l{font-family:var(--sans);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:600}

.portals{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin-top:.5rem}
.portal{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--paper);padding:1.4rem 1.4rem 1.5rem;position:relative;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.portal:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-2px)}
.portal .pk{font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--saffron);display:flex;align-items:center;gap:.5rem}
.portal h3{font-family:var(--sans);font-weight:600;font-size:1.5rem;margin:.5rem 0 .35rem}
.portal p{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.5}
.portal .meta{margin-top:1rem;font-family:var(--sans);font-size:.82rem;color:var(--ink-3);
  display:flex;align-items:center;gap:.4rem}
.portal .arr{position:absolute;right:1.2rem;bottom:1.2rem;color:var(--maroon);transition:transform .15s}
.portal:hover .arr{transform:translateX(3px)}

/* =========================================================================
   Prose (essays & glossary reading column)
   ========================================================================= */
.prose{font-family:var(--sans);font-size:1.135rem;line-height:1.72;color:var(--ink);max-width:var(--reading)}
.prose p{margin:0 0 1.15rem}
.prose h1{font-size:2.3rem;font-weight:600;line-height:1.12;letter-spacing:-.01em;margin:.2rem 0 .2rem}
.prose h2{font-size:1.62rem;font-weight:600;line-height:1.2;margin:2.6rem 0 .9rem;padding-top:.6rem}
.prose h3{font-size:1.24rem;font-weight:600;line-height:1.25;margin:2rem 0 .7rem;color:var(--ink)}
.prose h4{font-size:1.05rem;font-weight:700;font-family:var(--sans);letter-spacing:.01em;margin:1.6rem 0 .5rem}
.prose h2 .secnum,.prose h3 .secnum{color:var(--maroon);font-feature-settings:"tnum";margin-right:.5em;font-weight:600}
.prose h2{border-bottom:1px solid var(--line);padding-bottom:.5rem}
.prose ul,.prose ol{margin:0 0 1.15rem;padding-left:1.4rem}
.prose li{margin:.3rem 0}
.prose i,.prose em{font-style:italic}
.prose strong{font-weight:700}
.prose .lead{font-size:1.24rem;color:var(--ink-2)}
/* anchored section flash */
:target{scroll-margin-top:80px}
.prose h2:target,.prose h3:target{animation:flash 1.6s ease}
@keyframes flash{0%,40%{background:var(--gold-wash)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.prose h2:target,.prose h3:target{animation:none}}

/* citation superscript */
.cref{font-family:var(--sans);font-size:.62em;font-weight:700;vertical-align:.5em;line-height:0;
  color:var(--maroon);cursor:pointer;text-decoration:none;padding:0 .04em;white-space:nowrap}
.cref:hover{color:var(--maroon-2);text-decoration:underline}
.cref sup{font-feature-settings:"tnum"}

/* glossary autolink in prose */
a.gloss{color:var(--ink);text-decoration:none;
  background:linear-gradient(transparent 82%,rgba(184,130,28,.30) 82% 100%);
  cursor:help;padding-bottom:.02em}
a.gloss:hover{background:linear-gradient(transparent 78%,rgba(184,130,28,.55) 78% 100%);color:var(--maroon-2)}

/* references list at foot of an essay */
.refs{max-width:var(--reading);margin-top:3rem;border-top:2px solid var(--maroon);padding-top:1.2rem}
.refs h2{font-family:var(--sans);font-size:1.5rem;margin:.3rem 0 1rem}
.refs ol{font-family:var(--sans);font-size:.9rem;line-height:1.5;color:var(--ink-2);padding-left:1.8rem;margin:0}
.refs li{margin:.45rem 0}
.refs li:target{background:var(--gold-wash);border-radius:2px}
.refs .rid{font-family:var(--mono);color:var(--ink-3);font-size:.8em}

/* =========================================================================
   Table of contents rail
   ========================================================================= */
.toc{font-family:var(--sans);font-size:.86rem;line-height:1.35}
.toc a{display:block;color:var(--ink-2);text-decoration:none;padding:.26rem .5rem;border-left:2px solid transparent;border-radius:0 2px 2px 0}
.toc a:hover{color:var(--ink);background:var(--paper-2)}
.toc a.lvl3{padding-left:1.3rem;font-size:.82rem;color:var(--ink-3)}
.toc a.lvl2{font-weight:600}
.toc a.active{color:var(--maroon);border-left-color:var(--maroon);background:var(--paper-2)}
.toc .secnum{color:var(--maroon);font-feature-settings:"tnum";margin-right:.35em}
.toc-progress{height:3px;background:var(--line);border-radius:3px;overflow:hidden;margin-bottom:1rem}
.toc-progress i{display:block;height:100%;width:0;background:var(--maroon)}

/* =========================================================================
   Popover (citations + glossary hover) — single shared component
   ========================================================================= */
#pop{position:absolute;z-index:80;max-width:340px;background:var(--paper);border:1px solid var(--line-2);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:.85rem .95rem;font-family:var(--sans);
  font-size:.86rem;line-height:1.5;color:var(--ink-2);opacity:0;pointer-events:none;transition:opacity .12s;
  border-top:3px solid var(--maroon)}
#pop.on{opacity:1;pointer-events:auto}
#pop .pt{font-family:var(--sans);font-weight:600;font-size:1rem;color:var(--ink);margin:0 0 .25rem}
#pop .pk{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--saffron);font-weight:700;margin:0 0 .35rem}
#pop .pmeta{margin-top:.55rem;font-size:.78rem;color:var(--ink-3)}
#pop a{font-weight:600}
#pop ol{margin:.2rem 0 0;padding-left:1.1rem}
#pop li{margin:.25rem 0}

/* =========================================================================
   Glossary page entries
   ========================================================================= */
.gloss-list{max-width:var(--reading)}
.gsec{margin:2.4rem 0 0}
.gsec > h2{font-family:var(--sans);font-size:1.5rem;font-weight:600;border-bottom:1px solid var(--line);
  padding-bottom:.5rem;margin:0 0 .4rem;scroll-margin-top:80px}
.gentry{padding:.9rem 0;border-bottom:1px solid var(--line);scroll-margin-top:80px}
.gentry .gt{font-family:var(--sans);font-weight:700;font-size:1.08rem;color:var(--ink)}
.gentry .gv{font-family:var(--sans);font-size:.78rem;color:var(--ink-3);margin-left:.5rem}
.gentry .gd{font-family:var(--sans);font-size:1.05rem;line-height:1.6;color:var(--ink);margin-top:.25rem}
.gentry.hit{background:var(--gold-wash);border-radius:var(--radius);padding-left:.8rem;padding-right:.8rem}
.gentry a.gloss{background:linear-gradient(transparent 82%,rgba(122,27,46,.22) 82% 100%)}
mark{background:var(--gold-wash);color:inherit;padding:0 .05em;border-radius:2px}

/* =========================================================================
   Data tables (monuments)
   ========================================================================= */
.toolbar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:1rem}
.toolbar .grow{flex:1 1 240px}
.count-line{font-family:var(--sans);font-size:.85rem;color:var(--ink-3);margin:.4rem 0 .8rem}
table.data{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.9rem}
table.data th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);
  font-weight:700;border-bottom:2px solid var(--line-2);padding:.5rem .6rem;position:sticky;top:58px;background:var(--paper);cursor:pointer;white-space:nowrap}
table.data th .ind{color:var(--maroon)}
table.data td{border-bottom:1px solid var(--line);padding:.6rem .6rem;vertical-align:top}
table.data tr:hover td{background:var(--paper-2)}
table.data .name{font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--ink);cursor:pointer}
table.data .name:hover{color:var(--maroon)}
.tag{display:inline-block;font-family:var(--sans);font-size:.72rem;font-weight:600;color:var(--ink-2);
  background:var(--paper-3);border:1px solid var(--line);border-radius:999px;padding:.12rem .55rem;white-space:nowrap}
.tag.reg{background:var(--gold-wash);border-color:var(--gold-line)}
.idtag{font-family:var(--mono);font-size:.78rem;color:var(--ink-3)}

.pager{display:flex;gap:.4rem;align-items:center;justify-content:center;margin:1.5rem 0;flex-wrap:wrap}
.pager button{font-family:var(--sans);font-size:.85rem;border:1px solid var(--line-2);background:var(--paper);
  color:var(--ink);border-radius:var(--radius);padding:.4rem .7rem;cursor:pointer;min-width:2.2rem}
.pager button:hover:not(:disabled){background:var(--paper-3)}
.pager button[disabled]{color:var(--ink-3);cursor:default}
.pager button.active{background:var(--maroon);border-color:var(--maroon);color:#fff}

/* detail modal */
.modal-bg{position:fixed;inset:0;background:rgba(28,23,20,.45);z-index:90;display:none;
  align-items:flex-start;justify-content:center;padding:5vh 1rem;overflow:auto}
.modal-bg.on{display:flex}
.modal{background:var(--paper);border-radius:var(--radius);max-width:720px;width:100%;box-shadow:var(--shadow);
  border-top:4px solid var(--maroon)}
.modal .mh{padding:1.4rem 1.6rem .2rem}
.modal .mh .pk{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--saffron);font-weight:700}
.modal .mh h2{font-family:var(--sans);font-weight:600;font-size:1.7rem;margin:.3rem 0 .5rem}
.modal .mtags{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.4rem}
.modal .mbody{padding:.6rem 1.6rem 1.4rem;font-family:var(--sans);font-size:1.08rem;line-height:1.65;color:var(--ink)}
.modal .mmeta{padding:1rem 1.6rem 1.5rem;border-top:1px solid var(--line);font-family:var(--sans);font-size:.85rem;color:var(--ink-2)}
.modal .mmeta b{color:var(--ink)}
.modal .x{float:right;background:none;border:0;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--ink-3);padding:.2rem}
.modal .x:hover{color:var(--ink)}
.modal .alt{margin-top:.5rem;font-size:.82rem}

/* =========================================================================
   Charts (dependency-free SVG/▮ bars)
   ========================================================================= */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1.2rem 0 2rem}
.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);padding:1.2rem 1.3rem}
.card h3{font-family:var(--sans);font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);
  font-weight:700;margin:0 0 .8rem}
.bigfig{font-family:var(--sans);font-size:2.1rem;font-weight:600;line-height:1}
.bigfig small{font-family:var(--sans);font-size:.8rem;color:var(--ink-3);font-weight:600;letter-spacing:.04em}
.barlist{display:flex;flex-direction:column;gap:.5rem;font-family:var(--sans);font-size:.85rem}
.barlist .row{display:grid;grid-template-columns:1fr;gap:.2rem}
.barlist .rl{display:flex;justify-content:space-between;gap:.6rem;color:var(--ink-2)}
.barlist .rl b{color:var(--ink);font-feature-settings:"tnum";font-weight:600}
.barlist .track{height:8px;background:var(--paper-3);border-radius:999px;overflow:hidden}
.barlist .fill{height:100%;background:var(--maroon);border-radius:999px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.barlist .fill.alt{background:var(--saffron)}
.barlist .row.click{cursor:pointer}
.barlist .row.click:hover .rl b{color:var(--maroon)}
.barlist .row.click:hover .fill{background:var(--maroon-2)}

/* =========================================================================
   Region map (no coordinates → calibrated schematic grid of dzongkhags)
   ========================================================================= */
.mapwrap{display:grid;grid-template-columns:1.3fr 1fr;gap:1.6rem;align-items:start}
.bhutan-map{width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-2)}
.bhutan-map .dz{fill:var(--paper);stroke:var(--line-2);stroke-width:1.2;cursor:pointer;transition:fill .15s}
.bhutan-map .dz:hover{fill:var(--gold-wash)}
.bhutan-map .dz.sel{fill:var(--maroon);stroke:var(--maroon-2)}
.bhutan-map .dz.sel + text,.bhutan-map .dz.sel ~ text{fill:#fff}
.bhutan-map .lbl{font-family:var(--sans);font-size:8.5px;fill:var(--ink-2);pointer-events:none;text-anchor:middle;font-weight:600}
.bhutan-map .lbl.on{fill:#fff}
.bhutan-map .ct{font-family:var(--sans);font-size:7px;fill:var(--ink-3);pointer-events:none;text-anchor:middle}
.bhutan-map .ct.on{fill:rgba(255,255,255,.85)}
.maplegend{font-family:var(--sans);font-size:.8rem;color:var(--ink-3);margin-top:.6rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.maplegend .sw{display:inline-block;width:11px;height:11px;border-radius:2px;border:1px solid var(--line-2);vertical-align:-1px;margin-right:.3rem}
.region-panel h3{font-family:var(--sans);font-size:1.4rem;margin:.2rem 0 .2rem}
.region-panel .rp-count{font-family:var(--sans);color:var(--ink-3);font-size:.85rem;margin-bottom:.7rem}

/* =========================================================================
   Lexicon / group navigation
   ========================================================================= */
.grouptabs{display:flex;flex-direction:column;gap:.1rem;font-family:var(--sans);font-size:.86rem}
.grouptabs button{text-align:left;background:none;border:0;border-left:2px solid transparent;color:var(--ink-2);
  padding:.4rem .6rem;cursor:pointer;border-radius:0 2px 2px 0;display:flex;justify-content:space-between;gap:.5rem}
.grouptabs button:hover{background:var(--paper-2);color:var(--ink)}
.grouptabs button.active{color:var(--maroon);border-left-color:var(--maroon);background:var(--paper-2);font-weight:600}
.grouptabs button .gc{font-feature-settings:"tnum";color:var(--ink-3);font-size:.8em}
.grouptabs button.active .gc{color:var(--maroon)}
.lex-entry{padding:.8rem 0;border-bottom:1px solid var(--line);scroll-margin-top:80px}
.lex-entry .lt{font-family:var(--sans);font-weight:700;font-size:1.05rem;color:var(--ink)}
.lex-entry .lsrc{font-family:var(--mono);font-size:.75rem;color:var(--ink-3);margin-left:.5rem}
.lex-entry .ld{font-family:var(--sans);font-size:1.02rem;line-height:1.55;margin-top:.2rem;color:var(--ink)}
.loading{font-family:var(--sans);color:var(--ink-3);font-size:.9rem;padding:1.5rem 0;display:flex;align-items:center;gap:.6rem}
.spin{width:14px;height:14px;border:2px solid var(--line-2);border-top-color:var(--maroon);border-radius:50%;
  animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}

/* =========================================================================
   Sources (bibliography) page
   ========================================================================= */
.biblio{font-family:var(--sans);font-size:.92rem;line-height:1.5;max-width:54rem}
.biblio .brow{display:grid;grid-template-columns:3.4rem 1fr;gap:.6rem;padding:.55rem 0;border-bottom:1px solid var(--line);scroll-margin-top:80px}
.biblio .bid{font-family:var(--mono);color:var(--maroon);font-weight:600;font-size:.82rem}
.biblio .bref i{color:var(--ink)}
.biblio .brow:target{background:var(--gold-wash);border-radius:2px}

/* =========================================================================
   Footer
   ========================================================================= */
footer.site{border-top:1px solid var(--line);background:var(--paper-2);margin-top:3rem}
footer.site .in{max-width:var(--shell);margin:0 auto;padding:2.2rem 1.25rem;display:grid;
  grid-template-columns:1.4fr 1fr 1fr;gap:2rem;font-family:var(--sans);font-size:.88rem;color:var(--ink-2)}
footer.site h5{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);margin:0 0 .7rem;font-weight:700}
footer.site a{color:var(--ink-2);text-decoration:none;display:block;padding:.18rem 0}
footer.site a:hover{color:var(--maroon)}
footer.site .cap{font-family:var(--sans);font-size:1.05rem;color:var(--ink);margin:0 0 .4rem;font-weight:600}
footer.site .legal{border-top:1px solid var(--line);padding:1rem 1.25rem;font-size:.78rem;color:var(--ink-3);
  max-width:var(--shell);margin:0 auto}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:920px){
  .layout,.layout.right-rail{grid-template-columns:1fr;gap:1.2rem}
  .rail{position:static;max-height:none;overflow:visible;border-bottom:1px solid var(--line);padding-bottom:1rem}
  .rail.toc-rail{display:none}            /* hide long scrollspy TOC on mobile; jump menu used instead */
  .portals{grid-template-columns:1fr}
  .mapwrap{grid-template-columns:1fr}
  footer.site .in{grid-template-columns:1fr;gap:1.4rem}
  table.data th{top:0}
}
@media (max-width:680px){
  nav.primary{display:none;position:absolute;top:58px;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--line);flex-direction:column;padding:.5rem .75rem;gap:.1rem;box-shadow:var(--shadow)}
  nav.primary.open{display:flex}
  nav.primary a{padding:.6rem .5rem}
  .navtoggle{display:inline-block}
  .statstrip{gap:1.3rem}
  .statstrip .n{font-size:1.5rem}
  .prose{font-size:1.06rem}
  .prose h1{font-size:1.8rem}
}
.mobile-toc{display:none}
@media (max-width:920px){.mobile-toc{display:block;margin-bottom:1rem}}

/* utility */
.hidden{display:none!important}
.nowrap{white-space:nowrap}
.row-flex{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.note{background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--saffron);
  border-radius:var(--radius);padding:.9rem 1.1rem;font-family:var(--sans);font-size:.9rem;color:var(--ink-2);margin:1rem 0}
.note b{color:var(--ink)}

/* =========================================================================
   Typeface exceptions — serif used ONLY here (logotype, essay body, lexicon)
   ========================================================================= */
.brand b{font-family:var(--serif)}
.prose.essay p,.prose.essay li,.prose.essay ul,.prose.essay ol,.prose.essay blockquote{font-family:var(--serif)}
.lex-entry .lt,.lex-entry .ld{font-family:var(--serif)}

/* =========================================================================
   Search hint
   ========================================================================= */
.hint{font-family:var(--sans);font-size:.78rem;color:var(--ink-3);margin:.45rem 0 1rem;display:flex;
  gap:.45rem;align-items:flex-start;max-width:46rem;line-height:1.45}
.hint svg{flex:none;margin-top:.1rem;color:var(--saffron)}
.hint b{color:var(--ink-2);font-weight:600}
.hint kbd{font-family:var(--mono);background:var(--paper-3);border:1px solid var(--line);border-radius:3px;
  padding:.02em .3em;font-size:.92em}

/* =========================================================================
   Shared chart tooltip
   ========================================================================= */
#charttip{position:absolute;z-index:85;background:var(--ink);color:#fff;font-family:var(--sans);
  font-size:.78rem;line-height:1.4;padding:.45rem .6rem;border-radius:4px;box-shadow:var(--shadow);
  pointer-events:none;opacity:0;transition:opacity .1s;max-width:240px}
#charttip.on{opacity:1}
#charttip b{color:#fff;font-weight:700}
#charttip .tk{color:rgba(255,255,255,.65)}

/* =========================================================================
   Heatmap (region × type)
   ========================================================================= */
.heatmap-wrap{overflow-x:auto;padding-bottom:.4rem}
.heatmap{font-family:var(--sans);display:block}
.heatmap .cell{stroke:#fff;stroke-width:1.5;cursor:pointer;transition:stroke .1s}
.heatmap .cell:hover{stroke:var(--ink);stroke-width:2}
.heatmap .rowlbl{font-size:11px;fill:var(--ink-2);text-anchor:end;dominant-baseline:middle}
.heatmap .collbl{font-size:10px;fill:var(--ink-3)}
.heatmap .cnum{font-size:9px;text-anchor:middle;dominant-baseline:middle;pointer-events:none}

/* =========================================================================
   Treemap
   ========================================================================= */
.treemap{font-family:var(--sans);width:100%;height:auto;display:block}
.treemap rect{stroke:#fff;stroke-width:2;cursor:pointer;transition:opacity .12s}
.treemap g:hover rect{opacity:.85}
.treemap text{fill:#fff;pointer-events:none}
.treemap .tm-t{font-weight:600}
.treemap .tm-n{opacity:.9}

/* =========================================================================
   Donut
   ========================================================================= */
.donut-wrap{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
.donut{flex:none}
.donut path{cursor:pointer;transition:opacity .12s}
.donut path:hover{opacity:.8}
.donut .center-n{font-family:var(--sans);font-weight:700;fill:var(--ink);text-anchor:middle}
.donut .center-l{font-family:var(--sans);fill:var(--ink-3);text-anchor:middle}
.donut-legend{font-family:var(--sans);font-size:.84rem;display:flex;flex-direction:column;gap:.18rem;min-width:180px;flex:1 1 200px}
.donut-legend .li{display:flex;align-items:center;gap:.5rem;cursor:pointer;color:var(--ink-2);padding:.16rem .25rem;border-radius:3px}
.donut-legend .li:hover{background:var(--paper-2);color:var(--ink)}
.donut-legend .sw{width:11px;height:11px;border-radius:2px;flex:none}
.donut-legend .n{margin-left:auto;color:var(--ink-3);font-feature-settings:"tnum";font-weight:600}

/* =========================================================================
   Essay "at a glance" metrics
   ========================================================================= */
.metrics{display:flex;flex-wrap:wrap;gap:1.8rem;border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.3rem;margin:1.3rem 0 0;background:var(--paper-2)}
.metrics .m{display:flex;flex-direction:column;gap:.12rem}
.metrics .mn{font-family:var(--sans);font-size:1.35rem;font-weight:700;color:var(--ink);font-feature-settings:"tnum";line-height:1}
.metrics .ml{font-family:var(--sans);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:600}

/* =========================================================================
   Grouped "stacks" in the monuments table + switch
   ========================================================================= */
.switch{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--sans);font-size:.82rem;color:var(--ink-2);cursor:pointer;user-select:none}
.switch input{width:auto;margin:0}
.stackn{display:inline-block;font-family:var(--sans);font-size:.7rem;font-weight:700;color:#fff;
  background:var(--maroon);border-radius:999px;padding:.05rem .5rem;margin-left:.45rem;vertical-align:.08em;letter-spacing:.02em}
table.data tr.grouped td{background:linear-gradient(90deg,rgba(122,27,46,.04),transparent 40%)}
table.data tr.grouped .name::before{content:"▦";color:var(--maroon);font-size:.8em;margin-right:.4em;opacity:.7}

/* =========================================================================
   Funes credit
   ========================================================================= */
.byfunes{font-family:var(--sans);font-size:.83rem;color:var(--ink-3);display:flex;align-items:center;
  gap:.55rem;flex-wrap:wrap}
.byfunes .sc{font-variant:small-caps;letter-spacing:.05em;color:var(--ink-2);font-weight:600;font-size:1.04em}
.byfunes a{color:var(--maroon-link);text-decoration:none;border-bottom:1px solid var(--line-2)}
.byfunes a:hover{border-color:var(--maroon)}
.byfunes .dot{width:3px;height:3px;border-radius:50%;background:var(--line-2);display:inline-block}
.hero .byfunes{margin-top:1.3rem}
footer.site .byfunes{margin-top:.7rem;font-size:.8rem}

/* =========================================================================
   Site dossier (all accounts of one monument) in the modal
   ========================================================================= */
.dossier .acct{border-top:1px solid var(--line);padding-top:.9rem;margin-top:.9rem}
.dossier .acct:first-child{border-top:0;margin-top:0;padding-top:0}
.dossier .acct .ah{font-family:var(--sans);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--saffron);font-weight:700;margin-bottom:.35rem;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.dossier .acct .ah a{color:var(--ink-3)}
.dossier .acct .at{font-family:var(--sans);font-size:1.02rem;line-height:1.6;color:var(--ink)}

/* section subhead used on stat pages */
.viz-head{font-family:var(--sans);font-size:1.4rem;font-weight:600;border-bottom:1px solid var(--line);
  padding-bottom:.4rem;margin:2.4rem 0 1rem;color:var(--ink)}
.viz-sub{font-family:var(--sans);color:var(--ink-3);font-size:.86rem;margin:-.6rem 0 1.1rem;max-width:46rem}

/* FUNES deployment patch: keep the vendored masthead inside narrow viewports. */
@media (max-width:680px){
  .masthead .bar{gap:.75rem;padding:.6rem 1rem}
  .brand{min-width:0;flex:1 1 auto}
  .brand small{display:none}
  .navtoggle{flex:0 0 auto}
  nav.primary{width:auto}
}