/* The seven city pages (Fable 3.5): the seven cities as hand-cut paper pieces on the head's sheets; this page's piece on top
   in light stock with one pin per zip the page lists (dropping in once, page.js .is-in), the others links to their pages,
   neighbours outside the footprint written off the edge. */
.ct-head .dc-head__grid { align-items: center; }
.ct-map { position: relative; justify-self: end; width: min(100%, calc(330 * var(--u))); margin: calc(-8 * var(--u)) calc(6 * var(--u)) 0 0; z-index: 3; }
.ct-map__svg { display: block; width: 100%; height: auto; overflow: visible; }
.ct-piece { cursor: pointer; }
.ct-piece .ct-piece__cut { fill: #E6E0D3; stroke: rgb(30 52 58 / .22); stroke-width: .8; filter: drop-shadow(0 1px 0 rgb(255 255 255 / .6)) drop-shadow(1px 3px 3px rgb(13 22 25 / .22)); transition: transform .24s steps(3, end); }
.ct-piece__name { font: 600 11.5px var(--display); fill: #34474D; letter-spacing: .01em; pointer-events: none; }
a.ct-piece:hover .ct-piece__cut, a.ct-piece:focus-visible .ct-piece__cut { fill: #EFEAE0; transform: translateY(-4px); }
a.ct-piece:hover .ct-piece__name, a.ct-piece:focus-visible .ct-piece__name { fill: var(--hd); }
a.ct-piece:focus-visible { outline: 2px solid var(--hd); outline-offset: 3px; }
a.ct-piece:focus-visible .ct-piece__cut { stroke: var(--hd); stroke-width: 2; }
.ct-piece--here .ct-piece__cut { fill: #FCF9F3; stroke: rgb(30 52 58 / .3); transform: translateY(-6px); filter: drop-shadow(0 1px 0 rgb(255 255 255 / .7)) drop-shadow(2px 8px 7px rgb(13 22 25 / .38)); }
.ct-piece--here .ct-piece__name { font-size: 15px; font-weight: 700; fill: var(--hd); transform: translateY(-6px); }
/* the pins: a navy head on a short needle, a paper tag with the zip; they drop in one after another, once */
.ct-pins { transform: translateY(-6px); }
.ct-pin line { stroke: #43555B; stroke-width: 1.2; }
.ct-pin circle { fill: #0E3543; stroke: #F8F5EF; stroke-width: .8; }
.ct-pin__tag rect { fill: #F4EAC9; stroke: rgb(119 92 24 / .55); stroke-width: .6; }
.ct-pin__tag text { font: 700 9px Consolas, "Courier New", ui-monospace, monospace; fill: #5A4511; letter-spacing: .04em; }
.js .ct-map:not(.is-in) .ct-pin { opacity: 0; }
.ct-map.is-in .ct-pin { animation: ct-drop .42s steps(5, end) calc(.25s + var(--i) * .26s) both; }
@keyframes ct-drop { from { opacity: 0; translate: 0 -16px; } 30% { opacity: 1; } to { opacity: 1; translate: 0 0; } }
.ct-off { font: 500 16px var(--hand); fill: var(--ink-red); }
/* the zips this page lists, as paper tags in a row under the map, one per pin */
.ct-zips { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 6px; }
.ct-zips i { font: normal 700 calc(10.5 * var(--u)) / 1 Consolas, "Courier New", ui-monospace, monospace; letter-spacing: .05em; color: #5A4511; padding: 6px 9px 5px;
  background: #F4EAC9; box-shadow: inset 0 0 0 .6px rgb(119 92 24 / .55), 0 1px 1px rgb(21 31 34 / .16); transform: rotate(calc(-2deg + var(--i) * 1.1deg)); }
.ct-map__cap { display: grid; justify-items: start; gap: 8px; margin: calc(6 * var(--u)) 0 0 calc(10 * var(--u)); }
.ct-map__title { font: 700 calc(15 * var(--u)) / 1.15 var(--display); color: var(--hd); max-width: 26ch; }
.ct-note { font-size: calc(19 * var(--u)); }
/* mid-page: this city's zip tags beside the callout's words; the example searches as slips under their title */
.ct-tags { display: flex; flex-wrap: wrap; align-content: center; gap: 10px 12px; align-self: center; }
.ct-tags i { font: normal 700 calc(15 * var(--u)) / 1 Consolas, "Courier New", ui-monospace, monospace; letter-spacing: .05em; color: #5A4511; padding: .55em .8em .5em;
  background: #F4EAC9; box-shadow: inset 0 0 0 .8px rgb(119 92 24 / .55), 0 1px 1px rgb(21 31 34 / .16), 0 8px 14px -10px rgb(13 22 25 / .4); transform: rotate(calc(-3deg + var(--i) * 1.7deg)); }
.ct-slips { display: grid; gap: calc(10 * var(--u)); margin-top: calc(16 * var(--u)); justify-items: start; }
.ct-slip { display: flex; align-items: center; gap: 10px; padding: calc(9 * var(--u)) calc(16 * var(--u)); border-radius: 999px; background: #FDFBF7 var(--sheet-a); background-size: 500px;
  box-shadow: var(--edge), 0 10px 18px -10px rgb(13 22 25 / .45); font: italic 400 calc(14 * var(--u)) / 1.2 var(--serif); color: var(--hd); transform: rotate(calc(-1.2deg + var(--i) * 1.1deg)) translateX(calc(var(--i) * 14 * var(--u))); }
.ct-slip svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

@media (max-width: 1100px) {
  .ct-map { justify-self: start; margin-top: calc(20 * var(--u)); }
}
@media (max-width: 760px) {
  .ct-map { width: 100%; margin: 20px 0 0; }
  .ct-piece__name { font-size: 13px; }
  .ct-note { display: none; }
  .ct-tags i { font-size: 1rem; }
  .ct-slip { font-size: 1rem; transform: rotate(calc(-1deg + var(--i) * 1deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .ct-map.is-in .ct-pin { animation: none; }
  .js .ct-map:not(.is-in) .ct-pin { opacity: 1; }
  .ct-piece .ct-piece__cut { transition: none; }
}