.vc-tour {
  --tour-paper: #e9d7b6;
  --tour-dark: #231611;
  --tour-accent: #a1312a;
  background: radial-gradient(ellipse at 15% 10%, #531e1b 0, #301715 55%, #211513 100%);
  color: #f5e6ca;
  scroll-margin-top: 80px;
}

.tour-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .41fr);
  align-items: end;
  gap: 18px 36px;
  margin-bottom: clamp(28px, 5vw, 55px);
}
.tour-kicker,
.tour-chart-head,
.tour-counts,
.tour-ticket-index,
.tour-date,
.tour-clue-label,
.tour-audio-status,
.tour-source {
  font: 11px/1.55 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.tour-kicker { color: #e7ba91; margin: 0 0 11px; }
.tour-kicker span { padding-left: 14px; border-left: 1px solid #dfb28977; margin-left: 12px; }
.tour-heading h2 {
  margin: 0;
  color: #ffefd1;
  font: clamp(40px, 6.7vw, 94px)/.99 var(--display);
  letter-spacing: -.055em;
}
.tour-heading h2 em { color: #e2947e; font-style: normal; white-space: nowrap; }
.tour-description { font: clamp(13px, 1.3vw, 17px)/1.65 var(--sans); color: #ead2b7; margin: 0; }

.tour-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(318px, 1fr);
  gap: clamp(16px, 3vw, 37px);
  align-items: start;
}
.tour-chart {
  min-width: 0;
  margin: 0;
  color: #37251c;
  background: var(--tour-paper);
  border: 1px solid #edcf9f;
  box-shadow: 0 16px 45px #130a0866;
}
.tour-chart-head,
.tour-counts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 15px;
}
.tour-chart-head { background: #d6bb91; border-bottom: 1px solid #6e482b57; }
.tour-counts { border-top: 1px solid #6e482b57; color: #533b2b; }
.tour-map {
  position: relative;
  isolation: isolate;
  aspect-ratio: 760 / 590;
  background: radial-gradient(ellipse at 62% 36%, #eadfbe 10%, #d4c3a0 100%);
  overflow: hidden;
}
.tour-geography { position: absolute; inset: 0; width: 100%; height: 100%; }
.tour-land { fill: #b7b28d; stroke: #514e39; stroke-width: 1.45; stroke-linejoin: round; }
.tour-line {
  fill: none;
  stroke: #a12a28;
  stroke-width: 2.55;
  stroke-dasharray: 6 4;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: .85;
}
.tour-leader { stroke: #563827; stroke-width: 1.1; }
.tour-town { fill: #6b2d24; }
.tour-water-label { fill: #6d5943; font: 11px var(--mono); letter-spacing: 1.5px; }
.tour-overview {
  position: absolute;
  right: 2.7%;
  bottom: 4%;
  width: 14%;
  padding: 2px 4px 5px;
  border: 1px solid #76583e79;
  color: #604831;
  background: #ead9b7;
  text-align: center;
  pointer-events: none;
}
.tour-overview svg { display: block; width: 100%; max-height: 118px; }
.tour-overview polygon { fill: #b7b28d; stroke: #685641; stroke-width: 1; }
.tour-overview polyline { fill: none; stroke: #9f2d27; stroke-width: 1.35; }
.tour-overview rect { fill: none; stroke: #9f2d27; stroke-width: 1; stroke-dasharray: 2 2; }
.tour-overview span { display: block; font: clamp(5px, .75vw, 8px)/1.1 var(--mono); }
.tour-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: clamp(21px, 2.42vw, 33px);
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid #eed7b0;
  border-radius: 50%;
  background: #842824;
  color: #fff1d6;
  font: clamp(9px, 1.1vw, 13px)/1 var(--mono);
  cursor: pointer;
  box-shadow: 0 2px 6px #31231a48;
}
.tour-pin:hover,
.tour-pin[aria-pressed="true"] {
  z-index: 2;
  background: #2a1b15;
  border-color: #ffe9bc;
  outline: 2px solid #a1312a;
  outline-offset: 2px;
}

.tour-desk { min-width: 0; }
.tour-ticket {
  position: relative;
  padding: clamp(20px, 3vw, 34px);
  background: #f3e3c6;
  color: var(--tour-dark);
  border: 1px solid #eed1a3;
  border-top: 5px solid #b9503d;
  box-shadow: 0 16px 40px #120a0857;
  color-scheme: light;
}
.tour-ticket-stamp {
  position: absolute;
  right: 16px;
  top: 16px;
  padding: 5px 7px 3px;
  color: #9b3d33;
  border: 2px double #9b3d338c;
  font: 10px/1.35 var(--mono);
  text-align: center;
  rotate: 8deg;
  pointer-events: none;
}
.tour-ticket-index { color: #744539; margin: 0 0 22px; }
.tour-city {
  font: clamp(29px, 4vw, 55px)/1 var(--display);
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
  margin: 0 0 7px;
  color: #38221a;
}
.tour-venue { margin: 0 0 4px; font: clamp(18px, 2vw, 26px)/1.2 var(--condensed); }
.tour-date { margin: 0 0 17px; color: #8d3327; }
.tour-pick { display: grid; gap: 5px; margin: 0 0 9px; }
.tour-pick label { font: 13px var(--condensed); }
.tour-pick select {
  min-width: 0;
  width: 100%;
  min-height: 45px;
  padding: 6px 9px;
  border: 1px solid #72554284;
  border-radius: 0;
  background: #fff7e4;
  color: #39271d;
  font: 16px var(--condensed);
}
.tour-other {
  padding: 5px 0;
  text-align: left;
  border: 0;
  background: transparent;
  color: #80322b;
  text-decoration: underline;
  font: 14px var(--condensed);
  cursor: pointer;
}
.tour-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 15px 0 0; }
.tour-actions button {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #682822;
  background: transparent;
  color: #702822;
  font: 15px/1.2 var(--condensed);
  cursor: pointer;
}
.tour-actions .tour-listen { background: #822b25; color: #fff2dc; }
.tour-actions .tour-listen:hover { background: #6b201a; }
.tour-clue {
  padding: 10px 12px;
  margin-top: 14px;
  background: #e4cfaa;
  border-left: 3px solid #a44734;
}
.tour-clue-label { margin: 0 0 6px; color: #71362a; font-size: 9px; }
.tour-clue-note { margin: 0; font: 14px/1.4 var(--mono); color: #3c241a; }
.tour-deck { margin-top: 16px; border-top: 1px dashed #8f674e90; padding-top: 12px; }
.tour-audio-status { color: #6f2e23; margin: 0 0 8px; }
.tour-audio { display: block; width: 100%; height: 42px; }
.tour-program { margin: 13px 0 0; border: 1px solid #f5d6a54d; color: #f1ddbb; }
.tour-program summary { padding: 11px 14px; font: 15px var(--condensed); cursor: pointer; }
.tour-program img { display: block; width: 100%; height: auto; }
.tour-source { color: #d9b294; font-size: 9px; margin-top: 13px; }
.vc-tour [hidden] { display: none; }
.vc-tour :focus-visible { outline: 2px solid #802620; outline-offset: 3px; }

@media (min-width: 1001px) and (max-width: 1260px) {
  .main-nav:has(.tour-nav-link) { gap: clamp(9px, 1.3vw, 16px); }
}
@media (max-width: 860px) {
  .tour-layout, .tour-heading { grid-template-columns: 1fr; }
  .tour-description { max-width: 48em; }
  .tour-ticket-index { margin-bottom: 15px; }
}
@media (max-width: 480px) {
  .tour-chart-head, .tour-counts { padding: 8px 9px; font-size: 9px; }
  .tour-pin { width: 19px; }
  .tour-map { aspect-ratio: 760 / 590; }
}