/* Imaginary Antiquity — self-contained, no external fonts or assets. */

:root{
  --ink:#14110e;        --ink-2:#1c1815;      --sea:#101822;
  --land:#2b2519;       --land-edge:#413827;  --grat:#22304018;
  --paper:#e9dfd0;      --muted:#93887a;      --rule:#332c22;
  --terra:#c8763c;      --gold:#d9a05b;       --hero:#f0c07a;
  --focus:#8ec5ff;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --panel-w:clamp(260px,26vw,360px);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--ink); color:var(--paper); font-family:var(--sans);
  font-size:15px; line-height:1.5; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:60;background:var(--gold);color:#1a1207;padding:.5rem .8rem}
.skip:focus{left:.5rem;top:.5rem}
.muted{color:var(--muted)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

header{padding:.9rem 1.1rem .7rem;border-bottom:1px solid var(--rule);flex:0 0 auto}
h1{font-family:var(--serif);font-size:1.32rem;margin:0;letter-spacing:.02em;font-weight:600}
.tagline{margin:.18rem 0 0;font-size:.82rem;color:var(--muted)}

main{flex:1 1 auto;display:flex;min-height:0}

/* ---------- map ---------- */
#mapwrap{position:relative;flex:1 1 auto;min-width:0;background:
  radial-gradient(115% 90% at 46% 34%, #16212c 0%, var(--sea) 55%, #0a0f15 100%);
  overflow:hidden}
#map{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#map.dragging{cursor:grabbing}
.land{fill:var(--land);stroke:var(--land-edge);stroke-width:.9;vector-effect:non-scaling-stroke}
.grat{stroke:#4a6a8a;stroke-opacity:.16;stroke-width:.7;fill:none;vector-effect:non-scaling-stroke}

.pin{cursor:pointer}
.pin circle{fill:var(--terra);fill-opacity:.82;stroke:#2a1a0e;stroke-width:.9;
  vector-effect:non-scaling-stroke;transition:fill-opacity .12s,stroke .12s}
.pin:hover circle,.pin:focus-visible circle{fill:var(--hero);fill-opacity:1}
.pin.dim{opacity:.13;pointer-events:none}
.pin.sel circle{fill:var(--hero);fill-opacity:1;stroke:#fff6e6;stroke-width:1.6}
/* font-size / stroke-width are set as attributes by rescalePins() so labels hold
   a constant on-screen size as the viewBox zooms — do not set them here. */
.pin text{font-family:var(--serif);fill:var(--paper);opacity:0;
  paint-order:stroke;stroke:#0d1116;pointer-events:none;transition:opacity .12s}
#map.labels .pin text,.pin.sel text,.pin:hover text{opacity:.95}

#maptools{position:absolute;top:.6rem;right:.6rem;z-index:5;display:flex;flex-direction:column;gap:.3rem}
#maptools button{width:2rem;height:2rem;border:1px solid var(--rule);border-radius:6px;
  background:#1b1712cc;color:var(--paper);font-size:.95rem;cursor:pointer;line-height:1}
#maptools button:hover{background:#241f18;border-color:var(--gold)}

#tip{position:absolute;z-index:6;pointer-events:none;background:#100d0aee;
  border:1px solid var(--rule);border-left:3px solid var(--gold);border-radius:4px;
  padding:.3rem .5rem;font-size:.78rem;max-width:15rem;transform:translate(-50%,-135%)}
#tip b{font-family:var(--serif);font-weight:600;display:block}
#mapnote{position:absolute;left:.7rem;bottom:.5rem;margin:0;font-size:.68rem;color:#6f6659;pointer-events:none}

/* ---------- sidebar ---------- */
#sidebar{flex:0 0 var(--panel-w);border-left:1px solid var(--rule);display:flex;
  flex-direction:column;min-height:0;background:var(--ink-2)}
#controls{padding:.7rem .8rem;border-bottom:1px solid var(--rule);flex:0 0 auto}
#q{width:100%;padding:.45rem .6rem;border:1px solid var(--rule);border-radius:5px;
  background:#120f0c;color:var(--paper);font:inherit;font-size:.85rem}
#types{display:flex;flex-wrap:wrap;gap:.28rem;margin:.5rem 0 .35rem}
.chip{border:1px solid var(--rule);border-radius:999px;background:transparent;color:var(--muted);
  font:inherit;font-size:.7rem;padding:.15rem .55rem;cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--gold);color:var(--paper)}
.chip[aria-pressed="true"]{background:#3a2a17;border-color:var(--gold);color:var(--hero)}
#count{margin:.15rem 0 0;font-size:.74rem}

#list{list-style:none;margin:0;padding:.25rem;overflow-y:auto;flex:1 1 auto}
#list li{margin:0}
#list button{width:100%;display:flex;align-items:center;gap:.55rem;padding:.3rem .45rem;
  border:0;border-radius:5px;background:transparent;color:var(--paper);font:inherit;
  font-size:.82rem;text-align:left;cursor:pointer}
#list button:hover{background:#241f18}
#list button[aria-current="true"]{background:#3a2a17;color:var(--hero)}
#list img{width:34px;height:34px;object-fit:cover;border-radius:3px;flex:0 0 auto;background:#1a1512}
#list .nm{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#list .ct{color:var(--muted);font-size:.72rem;font-variant-numeric:tabular-nums}

/* ---------- detail ---------- */
#detail{flex:0 0 auto;max-height:52vh;overflow-y:auto;border-top:1px solid var(--rule);
  background:var(--ink-2);padding:.8rem 1.1rem 1.2rem}
.dhead{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  position:sticky;top:-.8rem;background:var(--ink-2);padding-top:.2rem;z-index:2}
#dname{font-family:var(--serif);font-size:1.15rem;margin:0}
#dmeta{margin:.1rem 0 0;font-size:.76rem}
#dclose{border:1px solid var(--rule);border-radius:5px;background:transparent;color:var(--muted);
  font:inherit;font-size:.75rem;padding:.25rem .6rem;cursor:pointer}
#dclose:hover{border-color:var(--gold);color:var(--paper)}
.vol{margin:.9rem 0 0}
.vol h3{font-family:var(--serif);font-size:.86rem;font-weight:600;margin:0 0 .35rem;
  color:var(--gold);border-bottom:1px solid var(--rule);padding-bottom:.18rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:.45rem}
.thumb{position:relative;border:0;padding:0;background:#1a1512;border-radius:4px;
  overflow:hidden;cursor:pointer;aspect-ratio:3/2}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .18s}
.thumb:hover img{transform:scale(1.045)}
.thumb .badge{position:absolute;left:0;bottom:0;right:0;font-size:.62rem;padding:.15rem .3rem;
  background:linear-gradient(transparent,#0b0906e8);color:#d8ccba;text-align:left}
.thumb.isHero .badge::after{content:" ★";color:var(--hero)}

/* ---------- lightbox ---------- */
/* [hidden] must win over the display below — an id selector otherwise outranks it */
#lightbox[hidden],#detail[hidden],#tip[hidden]{display:none!important}
#lightbox{position:fixed;inset:0;z-index:50;background:#07060480;backdrop-filter:blur(7px);
  display:flex;align-items:center;justify-content:center;padding:2.2rem}
#lightbox figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;
  align-items:center;gap:.5rem}
#lightbox img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:3px;
  box-shadow:0 18px 60px #000a}
#lbcap{font-size:.78rem;color:#cabca8;text-align:center;max-width:56ch}
#lbcap b{font-family:var(--serif);color:var(--paper)}
#lightbox button{position:absolute;border:1px solid #ffffff2a;border-radius:6px;
  background:#14100cc0;color:var(--paper);font-size:1.3rem;width:2.5rem;height:2.5rem;cursor:pointer}
#lightbox button:hover{background:#241d15;border-color:var(--gold)}
#lbclose{top:1rem;right:1rem}
#lbprev{left:1rem;top:50%;transform:translateY(-50%)}
#lbnext{right:1rem;top:50%;transform:translateY(-50%)}

footer{flex:0 0 auto;border-top:1px solid var(--rule);padding:.55rem 1.1rem}
footer p{margin:0;font-size:.68rem;color:#6f6659;max-width:100ch}

@media (max-width:860px){
  main{flex-direction:column}
  #mapwrap{flex:0 0 46vh}
  #sidebar{flex:1 1 auto;border-left:0;border-top:1px solid var(--rule)}
  #detail{max-height:64vh}
  #lightbox{padding:1rem}
  #lbprev{left:.3rem} #lbnext{right:.3rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}