@import url("/files/twelve-architecture-merge-v15.css");

:root {
  --catalog-brown: #4a3025;
  --catalog-brown-deep: #2a1a15;
  --catalog-brown-soft: #a77f61;
  --catalog-cream: #f4e8dc;
}

.catalog {
  color: var(--catalog-cream);
  background: var(--catalog-brown-deep);
}

.catalog::after {
  background:
    linear-gradient(90deg,rgba(38,22,17,.9),rgba(70,44,33,.65)),
    linear-gradient(0deg,rgba(32,18,14,.82),rgba(48,29,22,.24));
}

.flat-card {
  color: var(--catalog-cream);
  border-color: rgba(239,210,187,.24);
  background: linear-gradient(145deg,#5e3d30,var(--catalog-brown));
  box-shadow: 0 24px 64px rgba(25,13,9,.38);
}

.plan {
  background: linear-gradient(145deg,#b99374,#8d654d);
}

.plan img {
  filter: grayscale(1) contrast(1.08);
  mix-blend-mode: multiply;
}

.card-index,
.card-facts {
  color: rgba(255,242,230,.7);
}

.card-body {
  border-top-color: rgba(255,236,219,.16);
}

.card-price {
  color: #fff2e6;
}

.catalog .filter,
.catalog .filter-select {
  border-color: rgba(244,222,204,.28);
  color: var(--catalog-cream);
  background: rgba(64,38,29,.7);
}

.catalog .filter.active {
  color: #321d16;
  background: #c79b79;
}

.catalog .filter-select option {
  color: var(--catalog-cream);
  background: var(--catalog-brown);
}

.poi-layout {
  position: relative;
}

.map-interaction-gate {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  border: 0;
  border-radius: 26px;
  color: #fff8f1;
  background: rgba(42,27,21,.08);
  font: 600 11px/1 Arial,sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(27,16,12,.9);
  cursor: pointer;
  transition: background .25s ease;
}

.map-interaction-gate:hover,
.map-interaction-gate:focus-visible {
  background: rgba(42,27,21,.18);
  outline: 2px solid rgba(255,248,241,.84);
  outline-offset: -8px;
}

.map-interaction-gate[hidden] {
  display: none;
}

.architecture-showcase {
  grid-template-columns: 68% 32%;
  min-height: 900px;
  height: min(100vh,960px);
  background: #221a16;
}

.architecture-showcase__visual {
  padding: 50px 0 50px 58px;
  background: #211915;
}

.architecture-showcase__visual img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

.architecture-showcase__vertical {
  left: 5px;
  top: 50%;
  font-size: clamp(72px,7vw,120px);
  color: rgba(246,238,228,.93);
  transform: translateY(-50%) rotate(180deg);
}

.architecture-showcase__copy {
  justify-content: center;
  padding: 66px 4vw;
  background: #382e28;
}

.architecture-showcase__copy h2 {
  font-size: clamp(54px,5.4vw,82px);
}