/* The 2D maps: Walk the line (walk.html) and the vineyard form's pin map. The text works without JavaScript; the maps are added by it. */
arcgis-map{display:block;width:100%;height:100%;--calcite-font-family:var(--sans)}
html:not(.js) .walk-map{display:none}
/* Shown when there is no map: no JavaScript, or Esri's service or the data failed (maps.js takes the js class away). */
.map-nojs{max-width:40rem;color:var(--muted);font-size:.875rem;line-height:1.55}
.js .map-nojs{display:none}

/* Walk the line: the steps scroll; the map stays in view and follows them (above them on a phone, beside them on a wide screen). */
.walk-map{position:sticky;top:0;z-index:2;height:42svh;margin-inline:-7vw;background:var(--ink);border-bottom:1px solid var(--line)}
.walk-map arcgis-map{pointer-events:none} /* and inert in the page: the map follows the text; the list is what a reader moves through */
.walk-steps{list-style:none;margin:0;padding:0 0 45svh;max-width:38rem}
.walk-step{padding:2.25rem 0 2.5rem;border-top:1px solid var(--line);scroll-margin-top:45svh}
.walk-step.is-current{border-top-color:var(--sand)}
.walk-eyebrow{font-family:var(--sans);font-size:.75rem;font-weight:500;letter-spacing:.14em;line-height:1.5;text-transform:uppercase;color:var(--muted);margin:0 0 .9rem}
.walk-step.is-current .walk-eyebrow{color:var(--sand)}
.walk-text{font-family:var(--serif);font-size:1.375rem;line-height:1.45;margin:0;overflow-wrap:anywhere}
.walk-point{font-family:var(--sans);font-size:.8125rem;line-height:1.5;color:var(--muted);margin:1rem 0 0}
.walk-point span{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;margin-right:.5rem}
@media(min-width:1000px){
.walk{display:grid;grid-template-columns:minmax(0,34rem) minmax(0,1fr);column-gap:5vw;align-items:start}
.walk-steps{grid-column:1;grid-row:1;padding-bottom:50svh}
.walk-step{scroll-margin-top:40svh}
.walk-map{grid-column:2;grid-row:1;height:100svh;margin-inline:0 -7vw;border-bottom:0;border-left:1px solid var(--line)}
}

/* The notes under each map, and the link lists on these dark pages (site.css colours them for paper). */
.dark .document-list small{color:var(--muted)}
.dark .document-list>a{border-color:var(--line)}
.map-notes{max-width:44rem;margin-block:3rem 5rem;color:var(--muted)}
.map-notes .document-list{display:flex;flex-direction:column}