:root { --bg:#0f1120; --panel:#171a2e; --ink:#e8e9f3; --muted:#9aa0c0;
          --accent:#7aa2ff; --line:#2a2f4a; --gold:#d9b25a; }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { margin:0; background:var(--bg); color:var(--ink);
         font:16px/1.55 Georgia, "Times New Roman", serif; }
  a { color:var(--accent); text-decoration:none; }
  a:hover { text-decoration:underline; }
  header#top { position:sticky; top:0; z-index:5; background:rgba(15,17,32,.96);
    backdrop-filter:blur(6px); border-bottom:1px solid var(--line); padding:14px 20px;
    display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; }
  .head-left { min-width:0; }
  header h1 { margin:0 0 4px; font-size:20px; color:var(--gold);
    font-family:Georgia,serif; letter-spacing:.5px; }
  header p { margin:0; color:var(--muted); font-size:13px; }
  .head-right { flex:0 0 auto; margin-left:auto; }
  #search { width:640px; max-width:46vw; padding:9px 12px;
    background:var(--panel); border:1px solid var(--line); border-radius:8px;
    color:var(--ink); font-size:15px; }
  .wrap { display:grid; grid-template-columns:350px 1fr; gap:28px;
    max-width:1170px; margin:0 auto; padding:22px 20px 80px; }
  nav { position:sticky; top:96px; align-self:start; max-height:calc(100vh - 120px);
    overflow:auto; border:1px solid var(--line); border-radius:10px;
    background:var(--panel); padding:10px 8px; }
  nav h2 { font-size:12px; text-transform:uppercase; letter-spacing:1px;
    color:var(--muted); margin:6px 8px 8px; }
  .filt { margin:0; }
  .filt > summary { font-size:12px; text-transform:uppercase; letter-spacing:1px;
    color:var(--muted); margin:6px 8px 8px; cursor:pointer; list-style:none;
    display:flex; align-items:center; gap:7px; user-select:none; }
  .filt > summary::-webkit-details-marker { display:none; }
  .filt > summary::before { content:'▶'; font-size:9px; transition:transform .15s ease; }
  .filt[open] > summary::before { transform:rotate(90deg); }
  .filt > summary:hover { color:var(--ink); }
  .chips { display:flex; flex-wrap:wrap; gap:5px; padding:0 6px 8px; }
  .chip { font-family:system-ui,sans-serif; font-size:11px; line-height:1;
    padding:5px 8px; border:1px solid var(--line); border-radius:999px;
    background:#1d2138; color:var(--muted); cursor:pointer; }
  .chip:hover { color:var(--ink); border-color:var(--accent); }
  .chip.zone { border-left:6px solid var(--zc); }
  .chip.active { background:#2a2f4a; color:var(--ink); border-color:var(--accent); }
  /* Keep the zone-colored left bar on selected/hovered zone chips; only the rest turns blue. */
  .chip.zone:hover, .chip.zone.active { border-left-color:var(--zc); }
  nav ul { list-style:none; margin:0; padding:0; }
  nav li a { display:block; padding:3px 8px 3px 9px; border-radius:6px; color:var(--ink);
    font-size:14px; border-left:3px solid var(--zc); }
  nav li a:hover { background:#212546; text-decoration:none; }
  nav .num { display:inline-block; min-width:30px; color:var(--zc);
    font-variant-numeric:tabular-nums; }
  li.is-district a { font-weight:bold; }
  .qm { display:inline-block; vertical-align:-0.2em; width:15px; height:15px; margin-left:6px;
    background-color:var(--zc);
    -webkit-mask:var(--qm) center/contain no-repeat; mask:var(--qm) center/contain no-repeat; }
  .qtag { font-family:system-ui,sans-serif; font-size:10px; color:var(--zc); margin-left:6px; opacity:.85; }
  .chip .qm { width:13px; height:13px; margin:0 5px 0 0; vertical-align:-0.15em; }
  .q-PG   { --qm:url("../img/palacegrounds.png"); }
  .q-DW   { --qm:url("../img/dwarvendistrict.png"); }
  .q-GIFF { --qm:url("../img/gifftown.png"); }
  .q-SHOU { --qm:url("../img/shoutown.png"); }
  .q-DRAC { --qm:url("../img/dracon.png"); }
  .q-BUR  { --qm:url("../img/burrows.png"); }
  .q-DOCK { --qm:url("../img/thedocks.png"); }
  .q-NOBLE  { --qm:url("../img/nobleestates.png"); }
  .q-TEMPLE { --qm:url("../img/templedistrict.png"); }
  .q-RB    { --qm:url("../img/royalbarracks.png"); }
  .q-ELF   { --qm:url("../img/elvenforest.png"); }
  .q-FEST  { --qm:url("../img/festivalgrounds.png"); }
  .q-YARDS { --qm:url("../img/theyards.png"); }
  /* streets: neutral parchment tint + shared signpost icon */
  .street { --zc:#b9a88c; }
  .qm.st { --qm:url("../img/street.png"); }
  .qm.lead { margin:0 7px 0 0; }
  li.grouphead { font-family:system-ui,sans-serif; font-size:11px; text-transform:uppercase;
    letter-spacing:1px; color:var(--muted); padding:14px 8px 4px; }
  main h2.group { font-family:system-ui,sans-serif; font-size:12px; text-transform:uppercase;
    letter-spacing:1px; color:var(--muted); margin:26px 0 2px; padding-top:18px;
    border-top:1px solid var(--line); }
  .badge.streetbadge { color:var(--zc); background:color-mix(in srgb, var(--zc) 14%, transparent);
    border:1px solid color-mix(in srgb, var(--zc) 38%, transparent); }
  .badge.street-ref { --zc:#b9a88c; display:inline-flex; align-items:center; gap:4px; padding:3px 7px;
    color:var(--zc); background:color-mix(in srgb, var(--zc) 13%, transparent);
    border:1px solid color-mix(in srgb, var(--zc) 36%, transparent); }
  .badge.street-ref:hover { text-decoration:none; background:color-mix(in srgb, var(--zc) 26%, transparent); }
  .badge.street-ref .qm { margin:0; width:13px; height:13px; }
  .chip-street .qm { background-color:var(--muted); }
  .inf { color:var(--muted); font-size:11px; margin-left:5px; }
  .maplink { display:inline-block; vertical-align:baseline; margin-left:4px; font-size:15px;
    color:var(--muted); text-decoration:none; opacity:.55; transition:opacity .15s; }
  .maplink:hover { opacity:1; color:var(--accent); text-decoration:none; }
  main { min-width:0; }
  .lead { color:var(--muted); font-size:14px; margin:0 0 18px; }
  section.loc { padding:12px 0; border-bottom:1px solid var(--line); scroll-margin-top:92px;
    border-left:3px solid var(--zc); padding-left:12px; margin-left:-12px; }
  section.loc h3 { margin:0 0 6px; font-size:18px; color:var(--ink);
    display:flex; flex-wrap:wrap; align-items:center; gap:4px 9px; }
  section.loc.is-district .lname { color:var(--zc); }
  section.loc .num { color:var(--zc); font-variant-numeric:tabular-nums; }
  section.loc p { margin:0; }
  .badges { display:inline-flex; flex-wrap:wrap; gap:5px; margin:0;
    align-items:center; font-family:system-ui,sans-serif; }
  .badge { font-size:10.5px; line-height:1; padding:4px 7px; border-radius:999px;
    letter-spacing:.3px; text-transform:capitalize; }
  .badge.zone { background:color-mix(in srgb, var(--zc) 22%, transparent);
    color:var(--zc); border:1px solid color-mix(in srgb, var(--zc) 45%, transparent); }
  .badge.district { display:inline-flex; align-items:center; gap:4px; padding:3px 7px;
    color:var(--zc); background:color-mix(in srgb, var(--zc) 14%, transparent);
    border:1px solid color-mix(in srgb, var(--zc) 38%, transparent); }
  .badge.district .qm { margin:0; width:14px; height:14px; }
  .badge.district { color:var(--zc); background:transparent; font-weight:bold;
    border:1px solid color-mix(in srgb, var(--zc) 55%, transparent); }
  .badge.tag { background:#1d2138; color:var(--muted); border:1px solid var(--line); }
  a.xref { color:var(--gold); }
  .hidden { display:none !important; }
  .count { color:var(--muted); font-size:11px; font-family:system-ui,sans-serif; padding:0 8px 8px; }
  :target h3 { color:var(--gold); }
  /* color = zone (4 hues). District is shown by icon shape, tinted in its zone color. Gold = links/title only. */
  .zone-H { --zc:#cb86b2; } .zone-M { --zc:#d27c69; }
  .zone-L { --zc:#70c2a7; } .zone-U { --zc:#6e93d6; }
  @media (max-width:760px) {
    .wrap { grid-template-columns:1fr; }
    nav { position:static; max-height:none; }
    .head-right { margin-left:0; width:100%; }
    #search { width:100%; max-width:none; }
  }