/* Hero, the four businesses, the day, the night band, the map, getting here. */

/* ----------------------------------------------------------------- hero */
.hero {
  position: relative;
  min-height: clamp(560px, 88vh, 880px);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
}
.hero__img { position: absolute; inset: 0; z-index: -2; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 74%; }
.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(14,14,14,0.62) 0%, rgba(14,14,14,0.06) 30%,
                    rgba(14,14,14,0.52) 76%, var(--night) 100%),
    linear-gradient(92deg, rgba(14,14,14,0.86) 0%, rgba(14,14,14,0.46) 44%,
                    rgba(14,14,14,0.06) 82%, rgba(14,14,14,0.16) 100%);
}
.hero__inner { padding-block: clamp(8rem, 16vh, 11rem) clamp(3rem, 7vh, 5rem); width: 100%; }
.hero h1 { max-width: 17ch; }
.hero .lede { margin-top: 1.5rem; color: #E6DED3; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.4rem; }
.hero__now {
  margin-top: clamp(2.5rem, 5vh, 3.5rem);
  padding-top: 1.4rem;
  border-top: 1px solid rgba(247,246,243,0.2);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  font-size: 0.9rem;
  color: var(--sand-2);
}
.hero__now .status { font-size: 0.85rem; }

/* --------------------------------------------------------- the four */
.places { display: flex; flex-direction: column; gap: clamp(4.5rem, 7vw, 8rem); }

.place {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
}
.place__media { order: -1; max-width: 460px; width: 100%; justify-self: center; }
.place:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
.place:nth-of-type(even) .place__media { order: 2; }

.place__kind {
  font-variation-settings: "wght" 600;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 0.7rem;
}
.place h3 { margin-bottom: 0.7rem; }
.place__note { max-width: 46ch; }

.place__lines { list-style: none; margin: 1.8rem 0; padding: 0; max-width: 44ch; }
.place__lines li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: baseline;
  margin: 0;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.95rem;
}
.place__lines li:first-child { border-top: 1px solid var(--line-2); }
.place__lines .k {
  font-variation-settings: "wght" 600;
  font-size: 0.73rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sand-3);
}
.place__lines .v { color: var(--sand); }

.place__links { display: flex; flex-wrap: wrap; gap: 0.9rem 1.75rem; align-items: center; }

@media (max-width: 880px) {
  .place,
  .place:nth-of-type(even) { grid-template-columns: 1fr; gap: 2.25rem; }
  .place:nth-of-type(even) .place__media,
  .place__media { order: -1; max-width: 340px; justify-self: start; }
  .place__lines li { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* ------------------------------------------------------------- the day */
.day { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--line-2); }
.day > div { background: var(--night); padding: clamp(1.6rem, 1.3rem + 1.1vw, 2.4rem) clamp(1.4rem, 2vw, 2rem); }
.section--warm .day > div { background: var(--night-2); }
.day__when {
  font-family: var(--display);
  font-variation-settings: "wght" 380, "opsz" 40;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--brass-2);
  margin-bottom: 0.35rem;
}
.day__who {
  font-variation-settings: "wght" 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand-3);
  margin-bottom: 1rem;
}
.day p { font-size: 0.93rem; }

/* ---------------------------------------------------------- night band */
.night {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(6rem, 5rem + 7vw, 11rem);
}
.night__img { position: absolute; inset: 0; z-index: -2; }
.night__img img { width: 100%; height: 100%; object-fit: cover; }
.night::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, var(--night) 0%, rgba(14,14,14,0.34) 26%, rgba(14,14,14,0.46) 72%, var(--night) 100%),
    linear-gradient(94deg, rgba(14,14,14,0.9) 0%, rgba(14,14,14,0.55) 46%, rgba(14,14,14,0.1) 84%);
}
.night__copy { max-width: 42ch; }
.night__copy h2 { text-shadow: 0 2px 30px rgba(14,14,14,0.5); }

/* --------------------------------------------------------------- the map */
.plan { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.plan figure { margin: 0; }
.plan svg { width: 100%; height: auto; }
.plan figcaption { margin-top: 1rem; font-size: 0.82rem; color: var(--sand-3); }
.plan__key { list-style: none; margin: 0; padding: 0; }
.plan__key li {
  display: grid;
  grid-template-columns: 0.9rem 1fr;
  gap: 0.9rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.93rem;
}
.plan__key li:first-child { border-top: 1px solid var(--line-2); }
.plan__key i { width: 11px; height: 11px; border-radius: 50%; margin-top: 7px; display: block; }
.plan__key b { display: block; color: var(--sand); font-variation-settings: "wght" 600; font-weight: 400; }
@media (max-width: 880px) { .plan { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ getting here */
.visit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.visit__map { border-radius: 3px; overflow: hidden; min-height: 380px; border: 1px solid var(--line-d); }
.visit__map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; }
@media (max-width: 880px) { .visit { grid-template-columns: 1fr; } }

.info { margin: 0 0 2rem; }
.info > div { padding: 1rem 0; border-bottom: 1px solid var(--line-d); }
.info > div:first-child { border-top: 1px solid var(--line-d); }
.info .k {
  display: block;
  font-variation-settings: "wght" 620;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay-3);
  margin-bottom: 0.3rem;
}
.info .v { font-variation-settings: "wght" 500; color: var(--night); font-size: 1.03rem; }
.info small { display: block; margin-top: 0.25rem; font-size: 0.87rem; color: #6B6158; }

.board { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.board__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto;
  gap: 0.4rem 1.5rem;
  align-items: baseline;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line-d);
}
.board__row:first-of-type { border-top: 1px solid var(--line-d); }
.board__name { font-family: var(--display); font-variation-settings: "wght" 460, "opsz" 30; font-size: 1.15rem; color: var(--night); }
.board__times { font-size: 0.92rem; color: #4A423B; }
.board__times span { display: block; }
.board__times b {
  font-variation-settings: "wght" 620; font-weight: 400;
  font-size: 0.7rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: #6B6158; margin-right: 0.5rem;
}
.section--light .status--open { color: #7A5A12; }
.section--light .status--closed { color: #6B6158; }
.section--light .status--soon { color: var(--clay-3); }
@media (max-width: 700px) { .board__row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- trade */
.trade { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: clamp(1.5rem, 3vw, 2.75rem); }
.trade article { display: flex; flex-direction: column; gap: 0.7rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.trade h3 { font-size: 1.2rem; margin-bottom: 0; }
.trade p { font-size: 0.93rem; flex: 1; }

/* ---------------------------------------------------------- inner pages */
.pagehead { padding-block: clamp(6.5rem, 12vh, 9rem) clamp(2rem, 4vw, 3rem); }
.prose { max-width: 66ch; }
.prose h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); margin-top: 2.6rem; }

/* On narrow screens the copy spans the full width, so the veil has to be even. */
@media (max-width: 900px) {
  .hero__veil {
    background:
      linear-gradient(180deg, rgba(14,14,14,0.72) 0%, rgba(14,14,14,0.34) 26%,
                      rgba(14,14,14,0.74) 62%, var(--night) 100%);
  }
  .hero h1 { max-width: none; }
}

/* ────────────────────────────────────────────────────── the plaza map
   The aerial render with a tappable footprint over each business. Hotspots
   are buttons clipped to the building outline, so the hit area matches the
   shape on a mouse and a finger alike. */
.pmap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
  --pick: var(--brass);
}
.pmap__stage { position: relative; border-radius: 4px; overflow: hidden; }
.pmap__img { width: 100%; height: auto; display: block; }

.pmap__zone {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.18s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.pmap__zone:hover,
.pmap__zone.is-on { background: rgba(255, 205, 61, 0.34); }
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .pmap__zone:hover,
  .pmap__zone.is-on { background: color-mix(in srgb, var(--c, #FFCD3D) 40%, transparent); }
}
.pmap__zone:focus { outline: none; }

.pmap__pin {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--c, var(--brass));
  color: #0E0E0E;
  font-size: 0.78rem;
  font-variation-settings: "wght" 800;
  font-weight: 400;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.pmap__pin.is-on {
  transform: translate(-50%, -50%) scale(1.28);
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.7);
}

.pmap__side { display: flex; flex-direction: column; gap: 1.1rem; }
.pmap__hint { margin: 0; font-size: 0.9rem; color: var(--sand-3); }

.pmap__card {
  border-left: 3px solid var(--pick);
  padding: 0.15rem 0 0.3rem 1.05rem;
}
.pmap__card h3 { margin: 0 0 0.5rem; font-size: clamp(1.35rem, 1rem + 1.1vw, 1.75rem); }
.pmap__kind {
  margin: 0 0 0.35rem;
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase;
  font-variation-settings: "wght" 620; color: var(--brass);
}
.pmap__kind i { width: 8px; height: 8px; border-radius: 50%; background: var(--pick); }
.pmap__note { margin: 0 0 0.6rem; font-size: 0.94rem; }
.pmap__hours { margin: 0 0 0.9rem; font-size: 0.86rem; color: var(--sand-2); }
.pmap__link {
  font-size: 0.86rem; color: var(--sand);
  text-decoration-color: var(--line); text-underline-offset: 4px;
}
.pmap__link:hover { text-decoration-color: var(--brass); }

.pmap__legend { list-style: none; margin: 0; padding: 0; }
.pmap__leg {
  width: 100%;
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.72rem 0.4rem 0.72rem 0;
  background: none; border: 0; border-top: 1px solid var(--line-2);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.pmap__legend li:last-child .pmap__leg { border-bottom: 1px solid var(--line-2); }
.pmap__leg i {
  flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  display: grid; place-items: center;
  color: #0E0E0E; font-size: 0.7rem; font-variation-settings: "wght" 800;
  font-style: normal;
}
.pmap__leg b { display: block; color: var(--sand); font-variation-settings: "wght" 600; font-weight: 400; }
.pmap__leg span { font-size: 0.85rem; color: var(--sand-3); }
.pmap__leg:hover b, .pmap__leg.is-on b { color: var(--brass); }
.pmap__leg:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

@media (max-width: 900px) {
  .pmap { grid-template-columns: 1fr; }
  .pmap__stage { max-width: 560px; margin-inline: auto; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pmap__zone, .pmap__pin { transition: none; }
}