@import url("https://fonts.googleapis.com/css2?family=Gilda+Display&family=Jost:wght@400;500&display=swap");

:root { font-family: "Jost", Arial, sans-serif; color-scheme: light; background: #f5f4f1; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100vh; min-height: 100svh; background: #f5f4f1; }
.page { min-height: 100vh; min-height: 100svh; display: grid; place-items: start center; overflow-x: hidden; }
.shirt-stage { position: relative; width: min(100vw, 900px); aspect-ratio: 1132 / 1390; overflow: hidden; }
.shirt-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }

/* The shirt artwork is baked into the background. Only the table and URL remain HTML overlays. */
.tour-area {
  position: absolute;
  left: 21.5%;
  top: 35.1%;
  width: 57.0%;
  height: 35.9%;
  filter: drop-shadow(0 1px 0 rgb(0 0 0 / 35%));
}
.tour-columns { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2%; }
.tour-columns::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: rgb(232 223 209 / 58%);
  transform: translateX(-.5px);
  pointer-events: none;
}
.tour-column { min-width: 0; height: 100%; display: grid; grid-template-rows: repeat(var(--row-count), minmax(0, 1fr)); align-items: center; }
.tour-column--first { padding-right: 1.2%; transform: translateX(10%); }
.tour-column:not(.tour-column--first) { padding-left: 1.2%; }
.tour-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 13% 14% minmax(0, 1fr);
  column-gap: .8%;
  align-items: center;
  color: #e8dfd1;
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Jost", Arial, sans-serif;
  font-size: clamp(5.15px, 1.37vw, 11.9px);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.018em;
  white-space: nowrap;
}
a.tour-row:hover, a.tour-row:focus-visible { color: #fff; outline: 1px solid rgb(177 34 42 / 65%); outline-offset: 1px; background: rgb(156 31 38 / 16%); border-radius: 2px; }
.nr { font-size: .96em; font-weight: 500; color: #e2d9cc; }
.year { font-variant-numeric: tabular-nums; }
.place { min-width: 0; display: flex; align-items: center; gap: .18em; white-space: nowrap; line-height: .96; font-family: "Gilda Display", Georgia, serif; font-size: 1em; font-weight: 400; letter-spacing: -.035em; }
.place-text { min-width: 0; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.tour-row--open { color: #e1b957; background: rgb(225 185 87 / 12%); border-radius: 2px; }
.tour-row--open .nr, .open-mark { color: #e1b957; }
.open-mark { flex: 0 0 auto; font-family: "Jost", Arial, sans-serif; font-size: 1em; font-weight: 500; }
.tour-row--empty { color: #aaa197; }
.tour-row--empty .nr { color: #9e968e; }
.site-url {
  position: absolute;
  left: 20.7%;
  top: 78.1%;
  width: 58.6%;
  text-align: center;
  color: #cfc4b6;
  font-family: "Jost", Arial, sans-serif;
  font-size: clamp(6.5px, 1.5vw, 11.5px);
  letter-spacing: .08em;
  text-transform: lowercase;
  filter: drop-shadow(0 1px 0 rgb(0 0 0 / 35%));
}
.loading { grid-column: 1 / -1; margin: auto; color: #b7aea3; font-size: 10px; }
@media (max-width: 430px) {
  .tour-area { left: 21.0%; width: 58.0%; }
  .site-url { left: 20.2%; width: 59.6%; }
}