main.mapspread {
  grid-template-columns: minmax(0, min(var(--measure), 100vh - 2 * var(--above-spread))) minmax(var(--margin), max-content);
  grid-template-columns: minmax(0, min(var(--measure), 100svh - 2 * var(--above-spread))) minmax(var(--margin), max-content);
  column-gap: var(--gap);
  justify-content: center;
}
.mapspread .map {
  grid-column: 1;
  grid-row: 1;
  position: relative;
}
.mapspread .map figcaption {
  position: absolute;
  top: 100%;
  right: 0;
  white-space: nowrap;
}
.mapspread .facing {
  grid-column: 2;
  grid-row: 1;
  line-height: 1.5;
}
.mapspread .addresslabel {
  display: block;
}
.mapspread h1 {
  font-size: 1.25em;
  line-height: 1.3;
  letter-spacing: 0;
  margin: 0 0 0.5em;
}
@media (max-width: 52em) {
  .mapspread .facing {
    margin-bottom: 1.2em;
  }
  .mapspread .map figcaption {
    position: static;
  }
}
.map {
  width: min(100%, 100vh - 6em);
  width: min(100%, 100svh - 6em);
  margin: 0;
}
.map svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 31em;
  font-size-adjust: none;
}
.map figcaption {
  margin-top: 0.3em;
  font-size: 0.8em;
  text-align: right;
  color: var(--map-credit);
}
.map .ground {
  fill: var(--map-ground);
}
.map .green {
  fill: var(--map-green);
}
.map .road,
.map .walk {
  fill: none;
  stroke: var(--map-path);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.map .plaza {
  fill: var(--map-path);
}
.map .beyond {
  opacity: 0.45;
}
.map .roof {
  fill: var(--map-building);
  stroke: var(--map-wall);
  stroke-width: 0.75px;
  vector-effect: non-scaling-stroke;
}
.map .side-1 {
  fill: var(--map-side-1);
}
.map .side-2 {
  fill: var(--map-side-2);
}
.map .side-3 {
  fill: var(--map-side-3);
}
.map .here .roof {
  --stone: var(--map-building);
  --blue: var(--map-here-roof);
  fill: var(--blue);
  stroke: none;
}
.map .here .side-1 {
  --stone: var(--map-side-1);
  --blue: var(--map-here-side-1);
  fill: var(--blue);
}
.map .here .side-2 {
  --stone: var(--map-side-2);
  --blue: var(--map-here-side-2);
  fill: var(--blue);
}
.map .here .side-3 {
  --stone: var(--map-side-3);
  --blue: var(--map-here-side-3);
  fill: var(--blue);
}
.map .arrow {
  fill: var(--heading);
}
.map .subway {
  fill: #ee352e;
}
.map .route {
  --thin: 0.7px;
  fill: none;
  stroke: var(--heading);
  stroke-width: 1.7px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 2;
}
.map .behind {
  --thin: 0.7px;
  fill: none;
  stroke: var(--heading);
  stroke-width: 1.7px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 2;
  opacity: 0.3;
}
.map .steps {
  fill: none;
  stroke: var(--map-building);
}
.map .cover {
  --thin: 0.95px;
  fill: none;
  stroke: var(--map-path);
  stroke-width: 2.3px;
}
.map .treads {
  --thin: 1.5px;
  fill: none;
  stroke: var(--heading);
  stroke-width: 3.6px;
}
.map .reveal {
  fill: none;
  stroke: #ffffff;
  stroke-width: 8px;
  stroke-linejoin: round;
  stroke-dasharray: 1 2;
}
.map text {
  fill: var(--text);
}
.map text.here {
  fill: var(--map-here-text);
  font-weight: 700;
}
.map .badge {
  fill: var(--heading);
}
.map .glyph {
  fill: var(--bg);
}
.map text.station,
.map text.landmark {
  stroke: var(--map-path);
  stroke-width: 1.6px;
  stroke-linejoin: round;
  paint-order: stroke;
}
.map text.line {
  fill: #ffffff;
  font-weight: 700;
  font-variant-numeric: lining-nums;
}
.map .street {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  stroke: var(--map-path);
  stroke-width: 1.6px;
  stroke-linejoin: round;
  paint-order: stroke;
}
@media screen and (prefers-reduced-motion: no-preference) {
  .map .camera:focus-within .route,
  .map .camera:focus-within .behind,
  .map .camera:focus-within .reveal,
  .map .camera .schapiro:focus,
  .map .camera .schapiro:focus * {
    animation-play-state: running;
  }
  .map .schapiro:not(:focus) .door {
    --swing: 0deg !important;
    opacity: 1 !important;
  }
  .map .schapiro:not(:focus) .lower {
    opacity: 1 !important;
  }
  .map .schapiro:not(:focus) .fourth,
  .map .schapiro:not(:focus) .fourthwalk {
    opacity: 0 !important;
  }
  .map .schapiro:not(:focus) .behind.corridor {
    stroke-dashoffset: 0 !important;
  }
  .map .schapiro {
    transition: --open 0.4s ease-in-out;
  }
  .map .camera {
    transition: --camera 1.2s cubic-bezier(0.45, 0, 0.25, 1);
  }
  .map .labels {
    transition: opacity 0.45s;
  }
  .map .route,
  .map .behind,
  .map .cover,
  .map .treads {
    transition: stroke-width 1.2s cubic-bezier(0.45, 0, 0.25, 1);
  }
  .map .lower > *,
  .map .upper > * {
    transition: fill 0.4s ease-in-out;
  }
  .map text.office {
    transition: opacity 0.3s;
  }
}
@keyframes map-route {
  from {
    stroke-dashoffset: 1;
  }
}
@keyframes map-walk {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: var(--wait);
  }
}
@keyframes map-through {
  from {
    stroke-dashoffset: var(--wait);
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes map-arrow {
  from {
    opacity: 0;
  }
}
@property --camera {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
.map .camera {
  --zoom: var(--wide-zoom);
  --focus-x: var(--wide-x);
  --focus-y: var(--wide-y);
  transform: translate(var(--focus-x), var(--focus-y)) scale(pow(var(--zoom), var(--camera)))
    translate(calc(-1 * var(--focus-x)), calc(-1 * var(--focus-y)));
}
@media (max-width: 33em) {
  .map .camera {
    --zoom: var(--narrow-zoom);
    --focus-x: var(--narrow-x);
    --focus-y: var(--narrow-y);
  }
}
@property --open {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.map .schapiro {
  cursor: zoom-in;
}
.map:focus-within svg {
  cursor: zoom-out;
}
.map .schapiro:focus {
  outline: none;
}
@media screen {
  .map .schapiro:hover,
  .map .schapiro:focus {
    --open: 1;
  }
  .map .schapiro:focus {
    pointer-events: none;
  }
  .map .camera:focus-within {
    --camera: 1;
  }
  .map .camera:focus-within .labels {
    opacity: 0;
  }
  .map .camera:focus-within .route,
  .map .camera:focus-within .behind,
  .map .camera:focus-within .cover,
  .map .camera:focus-within .treads {
    stroke-width: var(--thin);
  }
  .map .camera:focus-within .lower > *,
  .map .camera:focus-within .upper > * {
    fill: var(--stone);
  }
  .map .camera:focus-within text.office {
    opacity: 1;
  }
}
.map .upper {
  opacity: calc(1 - var(--open));
}
.map .schapiro text.name {
  opacity: calc(1 - var(--open));
}
.map .plate,
.map .sixth,
.map .ride,
.map .lift {
  opacity: var(--open);
}
.map .floor {
  fill: var(--map-path);
  stroke: var(--map-wall);
  stroke-width: 0.75px;
  vector-effect: non-scaling-stroke;
}
.map .lobby {
  fill: var(--map-path);
  stroke: var(--map-wall);
  stroke-width: 0.75px;
  vector-effect: non-scaling-stroke;
  opacity: 0;
}
@property --swing {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
.map .leaf {
  fill: var(--map-path);
  stroke: var(--map-wall);
  stroke-width: 0.75px;
  vector-effect: non-scaling-stroke;
  transform: matrix(
    calc(var(--leaf) * (var(--along-x) * cos(var(--swing)) + var(--out-x) * sin(var(--swing)))),
    calc(var(--leaf) * (var(--along-y) * cos(var(--swing)) + var(--out-y) * sin(var(--swing)))),
    var(--rise-x),
    var(--rise-y),
    var(--hinge-x),
    var(--hinge-y)
  );
}
.map .doorway {
  fill: var(--heading);
  opacity: calc(0.8 * sin(var(--swing)));
}
.map .corridor,
.map .floorwalk,
.map .riser {
  stroke-width: 0.7px;
}
.map .fourth,
.map .fourthwalk,
.map text.office {
  opacity: 0;
}
.map .car .roof {
  fill: var(--heading);
  stroke: none;
}
.map .car .side-1 {
  fill: color-mix(in srgb, var(--heading) 62%, var(--map-path));
}
.map .car .side-2 {
  fill: color-mix(in srgb, var(--heading) 74%, var(--map-path));
}
.map .car .side-3 {
  fill: color-mix(in srgb, var(--heading) 86%, var(--map-path));
}
.map .car.base {
  opacity: 0;
}
.map text.digit {
  fill: var(--bg);
}
.map .drum {
  transform: translateY(calc(2 * var(--step)));
}
.map text.digit,
.map text.office {
  font-variant-numeric: lining-nums;
}
@keyframes map-door {
  30%,
  60% {
    --swing: 95deg;
  }
}
@keyframes map-ride {
  from {
    transform: translate(var(--drop-x), var(--drop-y));
  }
}
@media print {
  @page contact {
    size: letter landscape;
    margin: 0.6in;
  }
  main.mapspread {
    page: contact;
    display: grid;
    grid-template-columns: 7in max-content;
    column-gap: 0.4in;
    min-height: 0;
    max-width: none;
  }
  .mapspread .map {
    width: 100%;
  }
  .mapspread .map figcaption {
    position: absolute;
  }
  .mapspread .facing {
    margin-bottom: 0;
  }
}
@media screen and (prefers-reduced-motion: no-preference) {
  .map .route,
  .map .behind,
  .map .reveal {
    animation: map-walk 2.4s cubic-bezier(0.45, 0, 0.25, 1) 0.4s both,
      map-through 0.274s cubic-bezier(0.333, 0, 0.667, 0.333) 2.1s forwards paused;
  }
  .map .door {
    animation: map-door 1.6s ease-in-out 1.6s paused,
      map-door-gone 1.7s 4.2s paused;
  }
  .map .schapiro {
    animation: map-open 2.6s ease-in-out 0s paused;
  }
  .map .lower {
    animation: map-lower 3.7s ease-in-out 2.2s paused;
  }
  .map .lower > *,
  .map .upper > * {
    animation: map-stone 6s ease-in-out 0s paused;
  }
  .map .fourth {
    animation: map-fourth 2.3s 2.2s paused;
  }
  .map .fourthwalk {
    animation: map-fourthwalk 3.6s 2.2s paused;
  }
  .map .route.corridor,
  .map .behind.corridor {
    animation: map-route 1.526s ease 2.374s backwards paused;
    animation: map-route 1.526s linear(0, 0.0105 1.48%, 0.0219 2.96%, 0.0341 4.45%, 0.0471 5.93%, 0.0610 7.41%, 0.0757 8.89%, 0.0913 10.38%, 0.1076 11.86%, 0.1249 13.34%, 0.1429 14.82%, 0.7958 67.23%, 0.8346 70.50%, 0.8693 73.78%, 0.9000 77.06%, 0.9265 80.34%, 0.9490 83.61%, 0.9673 86.89%, 0.9816 90.17%, 0.9918 93.45%, 0.9980 96.72%, 1) 2.374s backwards paused;
  }
  .map .plate {
    animation: map-ride 1.6s ease-in-out 4.2s backwards paused;
  }
  .map .lift {
    animation: map-ride 1.6s ease-in-out 4.2s backwards paused;
  }
  .map .route.riser {
    animation: map-route 1.6s ease-in-out 4.2s backwards paused;
  }
  .map .plate .floor {
    animation: map-plate 3.7s 2.2s paused,
      map-fifth 1.6s 4.2s paused;
  }
  .map .lobby {
    animation: map-lobby 1.6s 4.2s paused;
  }
  .map .car.base {
    animation: map-car-base 1.6s 4.2s paused;
  }
  .map .drum {
    animation: map-roll 5.39s ease-in-out 0s paused;
  }
  .map .rooms {
    animation: map-arrow 0.3s ease-out 5.5s backwards paused;
  }
  .map .route.floorwalk {
    animation: map-route 3.521s ease-in-out 6.1s backwards paused;
    animation: map-route 3.521s linear(0, 0.0008 1.42%, 0.0033 2.84%, 0.0074 4.26%, 0.0132 5.68%, 0.0207 7.10%, 0.0298 8.52%, 0.0405 9.94%, 0.0530 11.36%, 0.0670 12.78%, 0.0828 14.20%, 0.9172 85.80%, 0.9330 87.22%, 0.9470 88.64%, 0.9595 90.06%, 0.9702 91.48%, 0.9793 92.90%, 0.9868 94.32%, 0.9926 95.74%, 0.9967 97.16%, 0.9992 98.58%, 1) 6.1s backwards paused;
  }
  .map .arrow.floorwalk {
    animation: map-arrow 0.2s ease-out 9.651s backwards paused;
  }
  .map text.office {
    animation: map-arrow 0.3s 9.751s backwards paused;
  }
}
@keyframes map-door-gone {
  17.647%, 76.471% {
    opacity: 0;
  }
}
@keyframes map-open {
  from, 84.615% {
    --open: 0;
  }
}
@keyframes map-lower {
  10.811%, 89.189% {
    opacity: 0;
  }
}
@keyframes map-stone {
  from, 93.333% {
    fill: var(--blue);
  }
}
@keyframes map-fourth {
  13.043%, 86.957% {
    opacity: 1;
  }
}
@keyframes map-fourthwalk {
  from, 55.556% {
    opacity: 1;
  }
  63.889%, 91.667% {
    opacity: 0.3;
  }
}
@keyframes map-plate {
  10.811%, 89.189% {
    stroke: var(--map-here-edge);
  }
}
@keyframes map-fifth {
  15.625%, 81.25% {
    fill: var(--map-building);
  }
}
@keyframes map-lobby {
  15.625%, 81.25% {
    opacity: 1;
  }
}
@keyframes map-car-base {
  18.75%, 81.25% {
    opacity: 1;
  }
}
@keyframes map-roll {
  from, 85.529% {
    transform: translateY(0);
  }
  91.095%, 94.434% {
    transform: translateY(var(--step));
  }
}