/* Contact: the firm's details, then an engraved street plan of Valletta.
   The plan is generated by tools/build_map.py (home/valletta-map.njk); its
   units are metres. Motion is armed by /js/contact.js and never runs for
   reduced motion; without the script the plan is simply static. */

.cmap {
  --vm-water: #0E1430;
  --vm-land: #1F2750;
  --vm-hi: #F4E8CE;       /* lit limestone */
  --vm-stone: #E7D4AE;    /* limestone */
  --vm-mid: #D7BE93;      /* limestone in half shade */
  position: relative; isolation: isolate;
  background:
    radial-gradient(1000px 560px at 100% 0%, rgba(70, 82, 138, .28), transparent 62%),
    var(--navy-900);
  color: var(--navy-200);
  padding-block: clamp(84px, 10vw, 140px) clamp(72px, 9vw, 128px);
}
.cmap h2 { color: #fff; }
.cmap .lead { color: var(--navy-200); }

/* ------------------------------------------------------------ details */
/* desktop: the words and the details side by side, the plate below them */
.cmap-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "intro details" "map map";
  gap: 0 clamp(48px, 7vw, 120px); align-items: end;
}
.cmap-intro { grid-area: intro; }
.cmap-details { grid-area: details; }
.vmap { grid-area: map; }
.cmap-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.cmap-details { margin: 0; border-top: 1px solid var(--line-light); }
.cmap-row {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--line-light);
}
.cmap-details dt { padding-top: 14px; font: 600 .72rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--navy-300); }
.cmap-details dd { margin: 0; color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; }
.cmap-details a {
  display: inline-flex; align-items: center; min-height: 44px; padding-block: 6px;
  color: #fff; text-decoration: none; overflow-wrap: anywhere;
  text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.cmap-details a:hover { text-decoration-line: underline; }
.cmap-address { line-height: 1.45; }
.cmap-directions.cmap-directions { gap: 6px; color: var(--orange); font-weight: 600; font-size: .92rem; }
.cmap-directions .icon { width: 15px; height: 15px; transition: transform .35s var(--ease); }
.cmap-directions:hover .icon { transform: translate(2px, -2px); }

/* ------------------------------------------------------------ the plate */
.vmap { margin: clamp(56px, 7vw, 96px) 0 0; }
.vmap-stage {
  --cw: 100%;             /* width of the plan; smaller screens crop in rather than shrink it */
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 2020 / 1060;
  background: var(--vm-water);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(216, 195, 160, .14), 0 60px 110px -60px rgba(0, 0, 0, .85);
  contain: layout paint;
  container-type: inline-size;   /* labels and cards size themselves to the plate (cqw) */
}
/* a soft vignette, then the double neatline of an engraved plate */
.vmap-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 110% at 44% 42%, transparent 52%, rgba(6, 9, 26, .62) 100%);
}
.vmap-stage::after {
  content: ""; position: absolute; inset: 12px; z-index: 3; pointer-events: none;
  border: 1px solid rgba(216, 195, 160, .3);
  outline: 1px solid rgba(216, 195, 160, .14); outline-offset: -5px;
}
.vmap-canvas {
  position: absolute; left: 50%; top: 50%;
  width: var(--cw); aspect-ratio: 2020 / 1060;
  transform: translate(-50%, -50%);
}
.vmap-ground, .vmap-streets, .vmap-route {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
}

/* streets, weighted by class. vm-flow: inside the walls; vm-ctx: the rest, quieter */
.vmap-streets path { stroke: var(--vm-stone); }
.vm-flow .vm-a { stroke-width: 4.2; opacity: .95; }   /* group opacity: joins never double up */
.vm-flow .vm-b { stroke-width: 2.3; opacity: .8; }
.vm-flow .vm-c { stroke-width: 1.5; opacity: .5; }
.vm-flow .vm-p { stroke-width: 1.1; opacity: .3; }
.vm-ctx path { stroke: var(--vm-mid); }
.vm-ctx .vm-a { stroke-width: 3.4; stroke-opacity: .38; }
.vm-ctx .vm-b { stroke-width: 1.9; stroke-opacity: .26; }
.vm-ctx .vm-c { stroke-width: 1.3; stroke-opacity: .17; }
.vm-ctx .vm-p { stroke-width: 1; stroke-opacity: .11; }

/* squares and the courts building */
.vm-plazas path { fill: var(--vm-stone); fill-opacity: .06; stroke: var(--vm-stone); stroke-opacity: .2; stroke-width: .8; }
.vm-plazas .vm-courts { fill-opacity: .2; stroke: var(--vm-hi); stroke-opacity: .75; stroke-width: 1.2; }

/* the walk from the office to the courts, drawn while the courts marker is in use.
   --dash and --off are plain numbers written by build_map.py (no calc() in SVG
   properties, which older Safari does not accept). is-route (set by contact.js)
   and :has() stay in separate rules: a browser without :has() drops a whole
   selector list, and is-route is the fallback for exactly those browsers. */
.vmap-route path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--dash); stroke-dashoffset: var(--off); transition: stroke-dashoffset .9s var(--ease-in-out); }
.vm-route-halo { stroke: var(--vm-water); stroke-opacity: .75; stroke-width: 9; }
.vm-route { stroke: var(--orange); stroke-width: 3.4; }
.vmap.is-route .vmap-route path { stroke-dashoffset: 0; }
.vmap:has(.vmap-marker--courts[open]) .vmap-route path { stroke-dashoffset: 0; }

/* ------------------------------------------------------------ labels
   Sizes follow the plate's width (cqw), so the positions set in build_map.py
   hold at every width; the rem value before each is the fallback. */
.vmap-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.vmap-label {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  color: rgba(231, 212, 174, .82);
}
.vmap-label--water {
  font: italic 400 1rem/1 var(--serif); letter-spacing: .32em; text-transform: uppercase; color: rgba(215, 190, 147, .66);
  font-size: clamp(.72rem, 1.29cqw, 1rem);
}
.vmap-label--district { font: 500 .66rem/1 var(--sans); letter-spacing: .42em; text-transform: uppercase; color: rgba(215, 190, 147, .75); text-shadow: 0 0 6px var(--vm-land), 0 0 12px var(--vm-land); }
.vmap-label--place { font: 600 .64rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; text-shadow: 0 0 4px var(--vm-land), 0 0 8px var(--vm-land), 0 0 12px var(--vm-land); }
.vmap-label--street {
  font: italic 400 .86rem/1 var(--serif); letter-spacing: .03em; color: var(--vm-hi);
  font-size: clamp(.74rem, 1.11cqw, .86rem);
  text-shadow: 0 0 3px var(--vm-land), 0 0 6px var(--vm-land), 0 0 10px var(--vm-land), 0 0 14px var(--vm-land);
}
.vmap-label--v { transform: translate(-50%, -50%) rotate(-90deg); }
.vmap-label:not(.vm-in-wide) { display: none; }

/* ------------------------------------------------------------ markers
   Each marker is a <details>: the summary is the pin and its tag, the note
   opens as one card with the tag (same left edge and width, sharing a hairline). */
.vmap-marker { position: absolute; width: 0; height: 0; z-index: 4; }
.vmap-marker--firm { z-index: 5; --tag-h: 54px; --card-w: 11.75rem; }
.vmap-marker--courts { --tag-h: 30px; --card-w: 11.5rem; }
.vmap-marker[open] { z-index: 6; }
.vmap-pin {
  position: absolute; left: -22px; top: 0; transform: translateY(-50%);   /* the dot sits on its point */
  display: block; list-style: none; cursor: pointer; color: #fff;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
}
.vmap-pin::-webkit-details-marker { display: none; }
.vmap-pin-row { display: flex; align-items: center; min-height: 44px; }   /* flex on a span: older Safari ignores it on <summary> */
.vmap-pin::marker { content: ""; }
.vmap-pin:focus-visible { outline: none; }
.vmap-pin:focus-visible .vmap-tag { outline: 2px solid var(--orange); outline-offset: 3px; }
.vmap-dot { position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center; }

/* the office: an orange disc on a limestone ring, which pulses a few times once the plan is drawn */
.vmap-marker--firm .vmap-dot::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 2.5px var(--vm-hi), 0 0 0 4px rgba(12, 17, 39, .7), 0 0 26px 8px rgba(229, 96, 42, .42);
  transition: transform .9s cubic-bezier(.34, 1.56, .64, 1) .2s;
}
.vmap-marker--firm .vmap-dot::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; border: 1.5px solid var(--orange); opacity: 0; pointer-events: none;
}
/* the courts: a surveyor's diamond in limestone */
.vmap-marker--courts .vmap-dot::before {
  content: ""; width: 10px; height: 10px; transform: rotate(45deg);
  background: var(--vm-hi); box-shadow: 0 0 0 2px var(--vm-water), 0 0 0 3px rgba(244, 232, 206, .5);
  transition: background-color .3s ease;
}
.vmap-marker--courts[open] .vmap-dot::before, .vmap.is-route .vmap-marker--courts .vmap-dot::before { background: var(--orange); }

.vmap-tag {
  box-sizing: border-box; height: var(--tag-h);
  display: grid; align-content: center; gap: 3px; margin-left: 2px; padding: 0 12px;
  background: var(--navy-950); border: 1px solid rgba(216, 195, 160, .28); border-radius: 2px;
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .9);
  transition: border-color .3s ease, opacity .6s ease, transform .8s var(--ease);
}
/* closed, a tag hugs its name; open, it widens to the card */
.vmap-marker .vmap-tag { min-width: 0; transition: border-color .3s ease, opacity .6s ease, transform .8s var(--ease), min-width .35s var(--ease); }
.vmap-marker[open] .vmap-tag { min-width: var(--card-w); }
.vmap-marker--courts .vmap-tag { padding: 0 10px; }
.vmap-name { font: 500 1.06rem/1.1 var(--serif); color: #fff; white-space: nowrap; }
.vmap-sub { font: 500 .74rem/1.3 var(--sans); color: var(--navy-200); white-space: nowrap; letter-spacing: .01em; }
.vmap-marker--courts .vmap-name { font-size: .95rem; }
.vmap-pin:hover .vmap-tag, .vmap-marker[open] .vmap-tag { border-color: rgba(229, 96, 42, .75); }
.vmap-marker[open] .vmap-tag { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* the note: hangs from the tag as the rest of the same card. Near the foot of
   the plate contact.js lifts the whole card (--lift) so it stays inside. */
.vmap-note {
  position: absolute; left: 24px; top: calc(var(--tag-h) / 2 - 1px - var(--lift, 0px));
  box-sizing: border-box; width: var(--card-w);
  padding: 9px 12px 10px; font: 500 .8rem/1.45 var(--sans); color: var(--navy-100);
  background: var(--navy-950); border: 1px solid rgba(229, 96, 42, .75); border-top-color: rgba(216, 195, 160, .2);
  border-radius: 0 0 2px 2px;
  box-shadow: 0 16px 32px -16px rgba(0, 0, 0, .9);
  animation: vmap-note-in .4s var(--ease) both;
}
.vmap .vmap-marker[open].is-up .vmap-tag { transform: translateY(calc(-1 * var(--lift, 0px))); transition: border-color .3s ease, opacity .6s ease, transform .3s var(--ease), min-width .35s var(--ease); }
.vmap-marker--courts .vmap-note { padding-inline: 10px; }
.vmap-note p { margin: 0; text-wrap: pretty; }
.vmap-marker--courts .vmap-note p { text-wrap: balance; }
.vmap-nb { white-space: nowrap; }
.vmap-note-street { display: none; }          /* the tag already shows the street on the wide plan */
.vmap-note-city { display: block; }
.vmap-note a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-bottom: -8px;
  color: var(--orange); font-weight: 600; text-decoration: none;
}
.vmap-note a svg { width: 14px; height: 14px; }
.vmap-note a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* the ring inside the link's 44px box, so it stays clear of the address above and inside the
   card; 6px of padding each side (cancelled by the margins) keeps it off the letters */
.vmap-note a { padding-inline: 6px; margin-inline: -6px; }
.vmap-note a:focus-visible { outline-offset: -2px; }
@keyframes vmap-note-in { from { opacity: 0; transform: translateY(-4px); } }

/* ------------------------------------------------------------ furniture */
.vmap-furniture { position: absolute; inset: 0; z-index: 3; pointer-events: none; color: rgba(231, 212, 174, .78); }
.vmap-title {
  position: absolute; right: 34px; top: 30px; margin: 0; text-align: right;
  display: flex; flex-direction: column; align-items: flex-end;
  font: 500 1.5rem/1 var(--serif); letter-spacing: .02em; color: var(--vm-hi);
}
.vmap-title span { display: block; order: -1; margin-bottom: 7px; font: 600 .62rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: rgba(231, 212, 174, .7); }
/* the compass turns as one piece; its N stays upright at the tip */
.vmap-north {
  position: absolute; right: 38px; bottom: 30px; width: 22px; height: 64px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transform: rotate(var(--rot)); transform-origin: 50% 62%;
}
.vmap-north svg { flex: none; width: 15px; height: auto; overflow: visible; }
.vmap-north b { display: block; font: 600 .66rem/1 var(--sans); transform: rotate(calc(-1 * var(--rot))); }
.vmap-scale {
  position: absolute; right: 86px; bottom: 34px;
  width: calc(var(--cw) * var(--m100) * 2);    /* 200 m */
}
.vmap-scale-bar { display: flex; height: 4px; border: 1px solid rgba(231, 212, 174, .72); }
.vmap-scale-bar i { flex: 1; }
.vmap-scale-bar i:first-child { background: rgba(231, 212, 174, .72); }
.vmap-scale-label { display: flex; justify-content: space-between; margin: 6px -6px 0; font: 600 .62rem/1 var(--sans); letter-spacing: .06em; }
.vmap-scale-label span:last-child { margin-right: -10px; }

.vmap-caption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 24px; margin-top: 12px; font-size: .86rem; color: var(--navy-300); }
.vmap-caption a { display: inline-flex; align-items: center; min-height: 44px; color: var(--navy-200); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(200, 205, 226, .45); }
.vmap-caption a:hover { color: #fff; text-decoration-color: currentColor; }

/* ------------------------------------------------------------ motion
   is-armed: set by contact.js before the plate reaches the viewport.
   is-drawn: the ink flows out from the office along the streets.
   is-done: the drawing is finished and the dash pattern is dropped. */
.vmap.is-armed .vmap-ground { opacity: 0; transform: scale(1.02); }
.vmap.is-armed .vmap-streets { will-change: transform; }
.vmap.is-armed .vm-flow path { stroke-dasharray: var(--len) var(--gap); stroke-dashoffset: var(--o0); }
.vmap.is-armed .vm-ctx,
.vmap.is-armed .vm-plazas path,
.vmap.is-armed .vmap-label,
.vmap.is-armed .vmap-marker--courts,
.vmap.is-armed .vmap-furniture { opacity: 0; }
.vmap.is-armed .vmap-marker--firm .vmap-dot::before { transform: scale(0); }
.vmap.is-armed .vmap-marker--firm .vmap-tag { opacity: 0; transform: translateX(-8px); }

.vmap.is-drawn .vmap-ground { opacity: 1; transform: none; transition: opacity 1.1s ease, transform 2.4s var(--ease); }
.vmap.is-drawn .vm-flow path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur) linear calc(var(--t) + .4s); }
.vmap.is-drawn .vm-plazas path { opacity: 1; transition: opacity .9s ease calc(var(--t) + .5s); }
.vmap.is-drawn .vm-ctx { opacity: 1; transition: opacity 1.4s ease 1.9s; }
.vmap.is-drawn .vmap-label { opacity: 1; transition: opacity 1s ease calc(var(--t) + .75s); }
.vmap.is-drawn .vmap-marker--courts { opacity: 1; transition: opacity .7s ease calc(var(--t) + .5s); }
.vmap.is-drawn .vmap-furniture { opacity: 1; transition: opacity 1.2s ease 2.2s; }
.vmap.is-drawn .vmap-marker--firm .vmap-dot::before { transform: none; }
.vmap.is-drawn .vmap-marker--firm .vmap-tag { opacity: 1; transform: none; transition-delay: 0s, .45s, .45s; }
.vmap.is-drawn .vmap-marker--firm .vmap-dot::after { animation: vmap-drop 1.4s cubic-bezier(.2, .6, .3, 1) .45s; }
.vmap.is-done .vm-flow path { stroke-dasharray: none; }
.vmap.is-done .vmap-streets { will-change: auto; }

@keyframes vmap-drop { from { transform: scale(1); opacity: 1; } to { transform: scale(6); opacity: 0; } }
/* is-live: the plate is on screen. The office pin pulses three times, then rests
   (and does so again whenever the plate comes back into view). The three pulses
   are over in under five seconds, so the pin never moves for longer than that
   without a way to stop it (WCAG 2.2.2). */
@keyframes vmap-pulse { 0% { transform: scale(1); opacity: .85; } 70%, 100% { transform: scale(3.6); opacity: 0; } }
.vmap.is-live.is-done .vmap-marker--firm .vmap-dot::after,
.vmap.is-live:not(.is-armed) .vmap-marker--firm .vmap-dot::after { animation: vmap-pulse 1.8s cubic-bezier(.2, .6, .3, 1) 3; }

@media (prefers-reduced-motion: reduce) {
  .vmap .vmap-marker--firm .vmap-dot::after { animation: none !important; }
  .vmap-note { animation: none; }
}

/* the three numbers stack whenever the details sit in a narrow column */
@media (max-width: 1099px) {
  .cmap-details .cmap-phones { flex-direction: column; align-items: flex-start; }
}
/* on narrower wide plates the open courts card reaches Republic Street's name: let it step back */
@container (max-width: 1100px) {
  .vmap:has(.vmap-marker--courts[open]) .vm-l-republic-street.vm-in-wide { opacity: 0; transition: opacity .3s ease; }
}
@container (max-width: 700px) {
  .vmap:has(.vmap-marker--courts[open]) .vm-l-fort-st-elmo.vm-in-wide { opacity: 0; transition: opacity .3s ease; }
}

/* ------------------------------------------------------------ the upright plan
   Below 960px (unless the screen is a phone on its side) the plan turns
   upright, City Gate at the foot and Fort St Elmo at the top, so the whole
   peninsula fits a narrow column. Text and markers turn back to read level. */
@media (max-width: 959px) and (min-height: 521px), (max-width: 959px) and (orientation: portrait) {
  .vmap-stage {
    --cw: calc(2020 / 960 * 100%);           /* 960 m across the plate */
    aspect-ratio: 2 / 3;
  }
  .vmap-stage::before { background: radial-gradient(120% 90% at 50% 55%, transparent 55%, rgba(6, 9, 26, .6) 100%); }
  .vmap-canvas { transform-origin: 0 0; transform: rotate(-90deg) translate(calc(-1 * var(--tall-x)), calc(-1 * var(--tall-y))); }
  .vmap-marker { transform: rotate(90deg); }
  .vmap-label:not(.vm-in-tall) { display: none; }
  .vmap-label.vm-in-tall { display: block; }
  .vmap-label--place, .vmap-label--v { transform: translate(-50%, -50%) rotate(90deg); }
  .vmap-label--water { font-size: .8rem; font-size: clamp(.66rem, 3.3cqw, .86rem); letter-spacing: .28em; }
  .vmap-label--street { font-size: clamp(.74rem, 3.5cqw, .92rem); }
  .vmap-label--place { font-size: .68rem; font-size: clamp(.64rem, 2.8cqw, .72rem); }

  /* the office tag is a single line here (the address is in the list above)... */
  .vmap-marker--firm { --tag-h: 36px; }
  .vmap-marker--firm .vmap-sub { display: none; }
  .vmap-note-street { display: block; }
  .vmap-note-city { display: none; }
  /* ...and steps aside while the walk to the courts is drawn, which runs
     along Melita Street right under it; its dot stays (two rules, as for the route) */
  .vmap.is-route .vmap-marker--firm .vmap-tag { opacity: 0; transition: opacity .3s ease; }
  .vmap:has(.vmap-marker--courts[open]) .vmap-marker--firm .vmap-tag { opacity: 0; transition: opacity .3s ease; }
  /* the courts card stays right of Republic Street, inside the plate */
  .vmap-marker--courts { --card-w: min(11.5rem, calc((100 - var(--x-tall)) * 1cqw - 46px)); }
  /* the longer Maltese and Italian names (Il-Qrati tal-Ġustizzja, Il-Forti
     Sant'Iermu, Palazzo di Giustizia) keep the courts tag and the place labels
     inside the frame; English (en-MT) is untouched */
  .vmap-marker--courts .vmap-name:not(:lang(en)) { font-size: clamp(.8rem, 4cqw, .95rem); }
  .vmap-label--place:not(:lang(en)) { letter-spacing: .1em; }

  .vmap-title { right: auto; left: 26px; top: 24px; align-items: flex-start; text-align: left; font-size: 1.3rem; }
  .vmap-title span { font-size: .66rem; }
  .vmap-north { right: 22px; top: 16px; bottom: auto; height: 52px; transform: rotate(calc(var(--rot) - 90deg)); }
  .vmap-north svg { width: 12px; }
  .vmap-north b { transform: rotate(calc(90deg - var(--rot))); }
  .vmap-scale { display: none; }
  .vmap-caption { font-size: .84rem; }
}
/* tablets: the words and details on the left, the upright plate on the right */
@media (min-width: 760px) and (max-width: 959px) and (min-height: 521px), (min-width: 760px) and (max-width: 959px) and (orientation: portrait) {
  .cmap-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 48%);
    grid-template-areas: "intro map" "details map";
    column-gap: clamp(32px, 5vw, 56px); align-items: start;
  }
  .cmap-details { margin-top: 44px; }
  .cmap-row { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 10px 0 8px; }
  .cmap-details dt { padding-top: 4px; }
  .vmap { margin: 0; align-self: center; }
}
@media (max-width: 759px) {
  .cmap-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "details" "map"; }
  .cmap-details { margin-top: 48px; }
  .vmap { width: 100%; max-width: 460px; margin-inline: auto; }
  .cmap-row { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 10px 0 8px; }
  .cmap-details dt { padding-top: 4px; }
  .cmap-actions .btn { flex: 1 1 auto; }
}
/* phones: the plate runs edge to edge */
@media (max-width: 519px) {
  .vmap { max-width: none; width: auto; margin-inline: calc(-1 * var(--gutter)); }
  .vmap-stage { border-radius: 0; box-shadow: 0 1px 0 rgba(216, 195, 160, .14), 0 -1px 0 rgba(216, 195, 160, .14); }
  .vmap-stage::after { inset: 10px; }
  .vmap-caption { padding-inline: var(--gutter); }
}

/* a phone on its side: keep the wide plan across the full width, cropped top
   and bottom to the peninsula (the harbour names go) so all of it fits the screen */
@media (max-width: 959px) and (max-height: 520px) and (orientation: landscape) {
  .vmap { max-width: none; }
  .vmap-stage { aspect-ratio: 2020 / 840; }
  .vmap-label--water { display: none; }
  .cmap-row { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 10px 0 8px; }
  .cmap-details dt { padding-top: 4px; }
}
/* small phones on their side: fewer words on the plate, the pins have the room */
@media (max-width: 759px) and (max-height: 520px) and (orientation: landscape) {
  .vmap-title, .vmap-label--street, .vmap-label--district, .vmap-scale { display: none; }
  .vmap-marker--firm { --tag-h: 36px; }
  .vmap-marker--firm .vmap-sub, .vmap-note-city { display: none; }
  .vmap-note-street { display: block; }
}

/* ------------------------------------------------------------ print
   If the page is printed before the plate has scrolled into view, show it drawn. */
@media print {
  .vmap.is-armed .vmap-ground, .vmap.is-armed .vm-ctx, .vmap.is-armed .vm-plazas path, .vmap.is-armed .vmap-label,
  .vmap.is-armed .vmap-marker--courts, .vmap.is-armed .vmap-furniture, .vmap.is-armed .vmap-marker--firm .vmap-tag { opacity: 1 !important; }
  .vmap.is-armed .vmap-ground, .vmap.is-armed .vmap-marker--firm .vmap-tag, .vmap.is-armed .vmap-marker--firm .vmap-dot::before { transform: none !important; }
  .vmap.is-armed .vm-flow path { stroke-dasharray: none !important; }
  .vmap-stage { box-shadow: none; }
}