/* /map page — a slim 1927-style masthead over a full-height PLOT map.
 * Tokens repeat styles.css on purpose: the home page's stylesheet carries the
 * framed-sheet layout, which a full-bleed map can't use. If the palette
 * changes, change it in both (guest manual → card → styles.css → here).
 */
:root{
  --paper:#F4EBD3;
  --ink:#231C14;
  --red:#8A2B1C;
  --soft:#6B5C48;
  --rule:#C3B69A;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

/* Full-viewport column: masthead on top, map takes the rest. dvh so mobile
   browser chrome doesn't push the rail off-screen. */
body.map-page{
  margin:0;height:100dvh;display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper);color:var(--ink);
  font-family:"Libre Baskerville",Georgia,"Times New Roman",serif;
}

.map-head{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;
  padding:10px 16px;border-bottom:3px double var(--ink);
}
.map-head h1{
  margin:0;font-family:Limelight,Georgia,serif;font-weight:400;
  font-size:1.5rem;letter-spacing:.04em;line-height:1.1;
}
.map-home{
  font-family:Jost,system-ui,sans-serif;font-size:.72rem;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;color:var(--red);text-decoration:none;
}
.map-home:hover,.map-home:focus-visible{text-decoration:underline}

/* Type chips: only rendered once SPEC sends listing_type (see map-site.js). */
.type-filter{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.type-filter[hidden]{display:none}
.chip{
  font-family:Jost,system-ui,sans-serif;font-size:.8rem;font-weight:500;
  padding:4px 12px;border:1px solid var(--ink);color:var(--ink);text-decoration:none;
}
.chip[aria-current="page"]{background:var(--ink);color:var(--paper)}

.map-stage{flex:1;min-height:0;isolation:isolate}
.map-stage #plot-root{height:100%}
.map-stage .plot-app{
  --plot-accent:var(--red);
  --plot-chrome:rgba(35,28,20,.92);
  font-family:Jost,system-ui,sans-serif;
}
.map-stage .plot-card-title{font-family:"Libre Baskerville",Georgia,serif;font-size:1.3rem}
.map-noscript{padding:24px 16px}

/* Phone on its side: keep the map, shrink the masthead to one line. */
@media (orientation:landscape) and (max-height:500px){
  .map-head{padding:4px 16px}
  .map-head h1{font-size:1.1rem}
}