/* ══════════════════════════════════════════════════════════════════════════
   realms-map.css — the interactive map

   Leaflet supplies the mechanics: drag, wheel and pinch zoom, tile loading.
   Everything visible is restyled here, because Leaflet's defaults are a blue
   web map and this is a piece of drawn parchment.

   The map art already has the marker glyphs painted into it. So the pins are
   not drawn on top of it -- they are invisible hit targets sitting exactly on
   the glyphs, and only the NAMES are rendered. The names were exported hidden
   from the PSD on purpose, which is what lets them be real text here: crisp at
   any zoom instead of baked into the tiles at one size.
   ══════════════════════════════════════════════════════════════════════ */

/* The hidden attribute only works while nothing else sets display, and this
   sheet sets flex and grid on things that get hidden. Author CSS beats the
   user-agent rule, so without this a row can carry hidden and still be on
   the page -- which is exactly what happened to the filters. */
[hidden]{display:none!important}


.map-page{padding-top:var(--nav-h)}
.wrap{width:100%;max-width:1100px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}

.page-head{text-align:center;padding:3rem 0 1.6rem}
.page-kick{font-family:'Oswald',sans-serif;font-weight:400;font-size:.62rem;
  letter-spacing:.46em;text-indent:.46em;text-transform:uppercase;color:var(--rust-lt)}
.page-title{font-family:'Cinzel','Noto Serif',serif;font-weight:700;
  font-size:clamp(1.9rem,5.4vw,3rem);letter-spacing:.04em;line-height:1.15;
  color:var(--bone);margin-top:.7rem}
.page-rule{width:min(240px,52%);height:1px;margin:1.3rem auto 0;
  background:linear-gradient(90deg,transparent,var(--gold-dk) 22%,var(--gold) 50%,var(--gold-dk) 78%,transparent)}
.page-lead{max-width:56ch;margin:1.4rem auto 0;font-family:'Lora',serif;
  font-size:1rem;line-height:1.75;color:rgba(232,220,198,.78)}
.page-count{margin-top:1rem;font-family:'Oswald',sans-serif;font-weight:300;
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--iron)}

/* The map is a piece of the page now, not the whole of it, so it takes a
   fixed band rather than whatever is left of the viewport. */
.map-block{margin-bottom:clamp(2.2rem,5vw,3.6rem)}
.map-shell{position:relative;height:clamp(420px,64svh,760px);
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  background:#0d0a08}

/* ── the map taken full ───────────────────────────────────────────────────
   Touch the map and it fills the window. A map of eight realms in a band
   two thirds of a screen tall is a picture of a map; the moment somebody
   drags it or opens a place they have stopped looking at the page and
   started using the map, and it should get out of its box.

   Fixed rather than the Fullscreen API. That one hides the browser's own
   chrome, needs a permission on some browsers, and drops out of it in ways
   a visitor does not expect. This fills the window, keeps the back button
   meaning what it means, and cannot fail.
   ────────────────────────────────────────────────────────────────────── */
.map-shell.is-full{position:fixed;inset:0;z-index:900;height:auto;
  border-top:0;border-bottom:0}
/* The page behind must not scroll under it. */
body.map-taken{overflow:hidden}
/* And main is position:relative with z-index:1, which makes it a stacking
   context: the shell's 900 is only 900 *inside main*, and the nav's 200 is
   measured against main's 1. So the nav drew over a full-screen map. Lifting
   main is what actually puts the map on top. */
body.map-taken main{z-index:950}

/* Built to the zoom buttons' box, not to its own taste: 34px of content and
   a 1px border, at Leaflet's own 10px inset. Anything else and the two sit
   in a column with their right edges a few pixels apart, which reads as a
   mistake even to somebody who could not say what was wrong. */
.map-out{position:absolute;z-index:600;top:10px;right:10px;
  width:36px;height:36px;padding:0;cursor:pointer;
  display:none;align-items:center;justify-content:center;
  border:1px solid var(--line-2);background:rgba(12,9,7,.94);
  box-shadow:0 10px 26px rgba(0,0,0,.6);
  font-family:'Oswald',sans-serif;font-weight:400;font-size:20px;line-height:1;
  color:var(--gold);transition:color .2s,background .2s}
.map-shell.is-full .map-out{display:inline-flex}
.map-out:hover{color:var(--gold-lt);background:rgba(30,22,15,.97)}
/* It takes focus when the map goes full so Escape and Tab have somewhere to
   start, which means it is wearing a focus ring the instant it appears. The
   browser's default is a white slab; this is the same idea in the site's
   own colour. */
.map-out:focus{outline:none}
.map-out:focus-visible{outline:1px solid var(--gold-dk);outline-offset:2px}

/* The zoom control shares this corner, so it drops below: 10 top + 36 tall
   + 8 of gap. */
.map-shell.is-full .leaflet-control-zoom{margin-top:54px}
#map{position:absolute;inset:0;background:#0d0a08;cursor:grab}
#map.leaflet-drag-target,#map:active{cursor:grabbing}
.leaflet-container{font-family:'Oswald',sans-serif;background:#0d0a08}

/* ── the pins ─────────────────────────────────────────────────────────────
   Leaflet puts the icon element's top-left on the point, so everything is
   shifted back by half to sit centred on the glyph underneath. */
.pin{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;
  --r:18px}                    /* --r: the glyph's radius in the source art */
.pin-city{--r:36px}
.pin-natural{--r:34px}
.pin-creature{--r:31px}
.pin-town{--r:24px}
.pin-minor{--r:18px}

/* --gs is the current zoom scale, set on #map by realms-map.js: 1 at full
   resolution, 0.25 a couple of zooms out. Everything that has to sit on a
   glyph is measured against it, because the glyph is painted into the tiles
   and therefore shrinks as you zoom out. A fixed pixel offset looks right at
   one zoom only and leaves the name stranded at every other. */
.pin-dot{position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  border-radius:50%;border:1px solid transparent;
  /* never smaller than a finger, however far out you are */
  width:max(26px,calc(var(--r) * 2 * var(--gs, 1)));
  height:max(26px,calc(var(--r) * 2 * var(--gs, 1)));
  transition:border-color .15s,background .15s}
.pin:hover .pin-dot,.pin.on .pin-dot{border-color:var(--gold-lt);
  background:rgba(240,207,122,.14)}

.pin-name{position:absolute;left:50%;transform:translateX(-50%);
  font-family:'Cinzel','Noto Serif',serif;font-weight:600;letter-spacing:.02em;
  font-size:12px;line-height:1.1;color:#2a1d0e;
  /* the parchment is light, so the name is dark ink with a light halo rather
     than the other way round */
  text-shadow:0 0 3px rgba(247,238,214,.95),0 0 6px rgba(247,238,214,.85),
              0 1px 0 rgba(247,238,214,.9);
  pointer-events:none;display:none}
.pin.side-above .pin-name{bottom:calc(var(--r) * var(--gs, 1) + 5px)}
.pin.side-below .pin-name{top:calc(var(--r) * var(--gs, 1) + 5px)}
.pin-city .pin-name{font-size:14px;font-weight:700;letter-spacing:.04em}
.pin:hover .pin-name{color:#000}

/* ── territory names ──────────────────────────────────────────────────────
   Realms, provinces and waters. These carry no marker at all -- the map
   legend says a territory name floats over its ground rather than pointing
   at a spot -- so they are drawn at the position he placed them and are not
   clickable. Wider letterspacing and no weight, so they read as country
   rather than as a place you can go. */
.terr{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;
  cursor:pointer;transition:color .15s,text-shadow .15s;
  font-family:'Cinzel','Noto Serif',serif;font-weight:500;
  font-size:13px;letter-spacing:.24em;text-transform:uppercase;
  color:#fffdf8;
  /* White on parchment needs the halo inverted -- a light glow would leave
     this invisible. The dark ring does the separating, so the letters can
     stay thin and still read over mountains and forest hatching. */
  text-shadow:0 0 3px rgba(24,16,8,.95),0 0 7px rgba(24,16,8,.85),
              0 0 14px rgba(24,16,8,.6),0 1px 2px rgba(24,16,8,.9);
  display:none}
.z1 .terr,.z2 .terr,.z3 .terr{display:block}
.z1 .terr{font-size:11px;letter-spacing:.18em}
.z4 .terr{display:block;font-size:15px;letter-spacing:.3em}
.terr:hover,.terr.on{color:var(--gold-lt);
  text-shadow:0 0 3px rgba(24,16,8,.98),0 0 9px rgba(24,16,8,.9),
              0 0 18px rgba(140,96,20,.55),0 1px 2px rgba(24,16,8,.95)}

/* Names appear as there is room for them. Wide out, the map is about
   territory: the regions are named and nothing else is, so the shape of the
   world reads. Places arrive on the way in. */
.z3 .pin-city .pin-name,.z3 .pin-natural .pin-name{display:block}
.z4 .pin-name{display:block}

/* ── controls ─────────────────────────────────────────────────────────── */
.leaflet-control-zoom{border:1px solid var(--line-2)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.6)!important;border-radius:0!important;
  overflow:hidden}
.leaflet-control-zoom a{width:34px!important;height:34px!important;
  line-height:32px!important;background:rgba(12,9,7,.94)!important;
  color:var(--gold)!important;border:0!important;
  border-bottom:1px solid var(--line)!important;font-size:19px!important}
.leaflet-control-zoom a:last-child{border-bottom:0!important}
.leaflet-control-zoom a:hover{background:rgba(30,22,15,.97)!important;
  color:var(--gold-lt)!important}
.leaflet-control-zoom a.leaflet-disabled{color:var(--iron)!important;opacity:.6}

.map-bar{position:absolute;z-index:500;left:0;right:0;top:0;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.7rem clamp(.7rem,2vw,1.1rem);pointer-events:none;
  background:linear-gradient(180deg,rgba(8,6,5,.82),transparent)}
.map-bar>*{pointer-events:auto}
.seg{display:flex;border:1px solid var(--line-2);background:rgba(12,9,7,.92);
  box-shadow:0 8px 22px rgba(0,0,0,.5)}
.seg-btn{appearance:none;border:0;background:none;cursor:pointer;
  font-family:'Oswald',sans-serif;font-weight:500;font-size:.62rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  padding:.5rem .95rem;transition:color .18s,background .18s}
.seg-btn+.seg-btn{border-left:1px solid var(--line)}
.seg-btn:hover{color:var(--gold-lt)}
.seg-btn.on{color:#1b1209;background:linear-gradient(180deg,var(--gold-lt),var(--gold))}
.map-hint{font-family:'Oswald',sans-serif;font-weight:300;font-size:.58rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--iron)}

/* ── the key ──────────────────────────────────────────────────────────── */
.key-wrap{position:absolute;z-index:500;left:clamp(.7rem,2vw,1.1rem);
  bottom:clamp(.7rem,2vw,1.1rem)}
.key-toggle{appearance:none;cursor:pointer;
  border:1px solid var(--line-2);background:rgba(12,9,7,.94);
  font-family:'Oswald',sans-serif;font-weight:500;font-size:.6rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  padding:.48rem .9rem;box-shadow:0 8px 22px rgba(0,0,0,.5)}
.key-toggle:hover{color:var(--gold-lt)}
.map-key{margin-top:.5rem;padding:.85rem 1rem;max-width:290px;
  border:1px solid var(--line-2);background:rgba(10,8,6,.96);
  box-shadow:0 16px 38px rgba(0,0,0,.62)}
.map-key dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem .7rem;margin:0}
.map-key dt{width:26px;height:26px;background-size:contain;
  background-repeat:no-repeat;background-position:center;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.5))}
.map-key dd{margin:0;font-family:'Lora',serif;font-size:.76rem;line-height:1.35;
  color:rgba(232,220,198,.8)}

/* ── the panel ────────────────────────────────────────────────────────── */
/* Above Leaflet's controls, which sit at z-index 800-1000. Below that the
   zoom buttons overlapped the close button and took the tap meant for it --
   invisible on a desktop, where clicking the map also closes the panel, and
   a dead end on a phone, where the panel covers the whole map. */
.panel{position:absolute;z-index:1100;top:0;right:0;bottom:0;width:min(400px,86vw);
  display:flex;flex-direction:column;overflow-y:auto;
  padding:1.6rem clamp(1.1rem,2.4vw,1.6rem) 2rem;
  background:linear-gradient(178deg,rgba(14,11,9,.985),rgba(8,6,5,.985));
  border-left:1px solid var(--line-2);box-shadow:-22px 0 54px rgba(0,0,0,.6);
  transform:translateX(100%);transition:transform .26s ease-out}
.panel.open{transform:none}
.panel-close{position:absolute;top:.55rem;right:.7rem;appearance:none;border:0;
  background:none;cursor:pointer;font-size:1.5rem;line-height:1;color:var(--iron);
  padding:.2rem .4rem;z-index:2}
.panel-close:hover{color:var(--gold-lt)}

/* The zoom buttons step aside rather than sit under the panel, so the map is
   still zoomable with a place open. On a phone the panel covers the map
   outright, so they go instead of moving. */
.map-shell.has-panel .leaflet-control-zoom{
  transform:translateX(calc(-1 * min(400px,86vw) - 10px));
  transition:transform .26s ease-out}
@media(max-width:700px){
  .map-shell.has-panel .leaflet-control-zoom{
    opacity:0;pointer-events:none;transform:none}
}
.panel-kick{font-family:'Oswald',sans-serif;font-weight:400;font-size:.58rem;
  letter-spacing:.34em;text-transform:uppercase;color:var(--rust-lt)}
.panel-title{font-family:'Cinzel','Noto Serif',serif;font-weight:700;
  font-size:clamp(1.25rem,3.2vw,1.6rem);line-height:1.2;color:var(--bone);
  margin-top:.5rem}
.panel-rule{width:100%;height:1px;margin:.95rem 0 1rem;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold) 42%,transparent)}
.panel-meta{font-family:'Oswald',sans-serif;font-weight:300;font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.panel-body{font-family:'Lora',serif;font-size:.88rem;line-height:1.7;
  color:rgba(232,220,198,.76)}
.panel-body p{margin-bottom:.9rem}
.panel-soon{border-left:2px solid var(--gold-dk);padding-left:.85rem;
  color:rgba(232,220,198,.6);font-style:italic}

@media(max-width:700px){
  .map-hint{display:none}
  .panel{width:100%}
  .pin-name{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.panel{transition:none}}

/* ══════════════════════════════════════════════════════════════════════════
   The directory
   One card per realm, its regions inside it. Everything but the prose is
   generated from map-markers.js by realms-hub.js.
   ══════════════════════════════════════════════════════════════════════ */
.dir-head{text-align:center;padding:.4rem 0 1.6rem}
.dir-title{font-family:'Cinzel','Noto Serif',serif;font-weight:700;font-size:1.15rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lt)}
.dir-sub{margin-top:.55rem;font-family:'Lora',serif;font-size:.88rem;
  color:rgba(232,220,198,.62)}

/* The lattice is drawn by the cards themselves rather than by gaps over a
   coloured grid. Eight realms in three columns leaves a cell empty, and with
   the gap trick that empty cell fills with the line colour and reads as a
   blank card. */
.realm-grid{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);border-left:1px solid var(--line);
  margin-bottom:3.4rem}
@media(max-width:980px){.realm-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.realm-grid{grid-template-columns:1fr}}

.realm{background:linear-gradient(158deg,var(--panel),var(--ink-2));
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:1.35rem 1.3rem 1.5rem;display:flex;flex-direction:column}
.realm-name{font-family:'Cinzel','Noto Serif',serif;font-weight:700;
  font-size:1.22rem;letter-spacing:.03em;color:var(--bone)}
.realm-meta{margin-top:.4rem;font-family:'Oswald',sans-serif;font-weight:300;
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.realm-note{margin-top:.85rem;font-family:'Lora',serif;font-size:.86rem;
  line-height:1.65;color:rgba(232,220,198,.74)}
.realm-note-empty{color:var(--iron);font-style:italic}

.realm-open{align-self:flex-start;margin-top:1rem;appearance:none;cursor:pointer;
  border:1px solid var(--line-2);background:rgba(0,0,0,.25);
  font-family:'Oswald',sans-serif;font-weight:500;font-size:.58rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  padding:.46rem .85rem;transition:color .18s,border-color .18s,background .18s}
.realm-open:hover{color:#1b1209;border-color:var(--gold);
  background:linear-gradient(180deg,var(--gold-lt),var(--gold))}

.region-list{list-style:none;margin-top:1.1rem;padding-top:.9rem;
  border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.4rem}
.region{appearance:none;cursor:pointer;border:1px solid transparent;
  background:rgba(0,0,0,.22);padding:.3rem .6rem;
  font-family:'Lora',serif;font-size:.82rem;color:rgba(232,220,198,.86);
  transition:border-color .16s,background .16s,color .16s}
.region:hover{border-color:var(--line-2);background:rgba(201,152,46,.10);
  color:var(--gold-lt)}

/* ── a place that has been written up ─────────────────────────────────────
   The picture sits above the name, so the panel opens on the place rather
   than on a heading. Full bleed to the panel's edges: it is a view, not an
   illustration set into a column. */
.panel-img{display:block;width:calc(100% + 2 * clamp(1.1rem,2.4vw,1.6rem));
  margin:-1.6rem 0 1.2rem calc(-1 * clamp(1.1rem,2.4vw,1.6rem));
  height:auto;border-bottom:1px solid var(--line-2)}
.panel-close{background:rgba(8,6,5,.62);border-radius:50%;
  width:1.9rem;height:1.9rem;display:grid;place-items:center;padding:0}
.panel-close:hover{background:rgba(8,6,5,.85)}

.panel-more{align-self:flex-start;margin-top:1.15rem;text-decoration:none;
  border:1px solid var(--gold-dk);background:rgba(0,0,0,.25);
  font-family:'Oswald',sans-serif;font-weight:500;font-size:.6rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  padding:.55rem 1rem;transition:color .18s,border-color .18s,background .18s}
.panel-more:hover{color:#1b1209;border-color:var(--gold);
  background:linear-gradient(180deg,var(--gold-lt),var(--gold))}

/* A finger needs more than thirty pixels. This sits at the end deliberately:
   .panel-close is restyled again above, at the same specificity, and the
   later rule wins on source order. */
@media(max-width:700px){
  .panel-close{width:2.6rem;height:2.6rem;font-size:1.7rem;top:.4rem;right:.4rem}
}