:root {
  --project-bg: #100b08;
  --project-surface: #1a120e;
  --project-surface-2: #281a13;
  --project-accent: #a9512f;
  --project-accent-soft: #deb58f;
  --project-accent-rgb: 169, 81, 47;
  --hero-position: 50% 52%;
}

.project-saol .project-hero h1 em { font-style: italic; }
.project-saol .story-figure__image { border-radius: 32px 32px 0 0; }

.project-saol .material-card--oak { --material-color: #2b1d16; }
.project-saol .material-card--cherry { --material-color: #5d1118; }
.project-saol .material-card--glass { --material-color: #3c3530; }
.project-saol .material-card--leather { --material-color: #6a4a36; }

.project-saol .technical-lab {
  grid-template-columns: minmax(0, 1.38fr) minmax(340px, .62fr);
  max-width: 1460px;
}

.project-saol .technical-canvas--drawing {
  min-height: 650px;
  padding: 62px 24px 48px;
  background:
    radial-gradient(circle at 51% 51%, rgba(169, 81, 47, .08), transparent 57%),
    #020202;
}

.project-saol .technical-canvas--drawing::before,
.project-saol .technical-canvas--drawing::after {
  opacity: .22;
}

.project-saol .technical-plan {
  position: relative;
  z-index: 2;
  width: min(100%, 950px);
  aspect-ratio: 2048 / 1545;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(222, 181, 143, .18);
  background: #020202;
}

.project-saol .technical-plan__sheet {
  --plan-focus-x: 50%;
  --plan-focus-y: 50%;
  --plan-focus-scale: 1;
  position: absolute;
  inset: 0;
  transform: scale(var(--plan-focus-scale));
  transform-origin: var(--plan-focus-x) var(--plan-focus-y);
  transition: transform .82s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

.project-saol .technical-plan__sheet img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(.92) contrast(1.06);
}

.project-saol .technical-plan__zones {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.project-saol .technical-plan__region {
  fill: rgba(222, 181, 143, .025);
  stroke: rgba(222, 181, 143, .28);
  stroke-width: .18;
  cursor: pointer;
  vector-effect: non-scaling-stroke;
  transition: fill .5s ease, stroke .5s ease, opacity .5s ease, filter .5s ease;
}

.project-saol .technical-canvas.has-zone-selection .technical-plan__region:not(.is-active) {
  fill: rgba(0, 0, 0, .42);
  stroke: rgba(222, 181, 143, .08);
  opacity: .72;
}

.project-saol .technical-plan__region:hover {
  fill: rgba(222, 181, 143, .16);
  stroke: rgba(222, 181, 143, .65);
}

.project-saol .technical-plan__region.is-active {
  fill: rgba(222, 181, 143, .24);
  stroke: rgba(255, 218, 188, .9);
  filter: drop-shadow(0 0 8px rgba(222, 181, 143, .45));
}

.project-saol .technical-plan__hotspot {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: #f3d0b3;
  background: rgba(8, 4, 3, .76);
  border: 1px solid rgba(238, 181, 143, .7);
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(169, 81, 47, .1);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: color .28s ease, background .28s ease, box-shadow .28s ease, transform .28s ease;
}

.project-saol .technical-plan__hotspot span {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .05em;
}

.project-saol .technical-plan__hotspot:hover,
.project-saol .technical-plan__hotspot:focus-visible,
.project-saol .technical-plan__hotspot.is-active {
  color: #180907;
  background: var(--project-accent-soft);
  box-shadow: 0 0 0 9px rgba(222, 181, 143, .14), 0 0 30px rgba(169, 81, 47, .36);
  outline: 0;
  transform: translate(-50%, -50%) scale(1.08);
}

.project-saol .technical-plan__hotspot--terrace { top: 59%; left: 24%; }
.project-saol .technical-plan__hotspot--bar { top: 52%; left: 51%; }
.project-saol .technical-plan__hotspot--lounge { top: 49%; left: 78%; }

.project-saol .technical-plan__legend {
  position: absolute;
  top: 11px;
  right: 12px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: rgba(243, 208, 179, .72);
  background: rgba(3, 3, 3, .74);
  border: 1px solid rgba(222, 181, 143, .18);
  backdrop-filter: blur(8px);
}

.project-saol .technical-plan__legend span {
  width: 8px;
  height: 8px;
  background: rgba(222, 181, 143, .72);
  box-shadow: 0 0 12px rgba(222, 181, 143, .55);
}

.project-saol .technical-plan__legend b,
.project-saol .technical-plan__overview {
  font-size: 7px;
  font-weight: 600;
  letter-spacing: .15em;
}

.project-saol .technical-plan__overview {
  position: absolute;
  left: 12px;
  bottom: 8px;
  z-index: 7;
  padding: 10px 12px;
  color: rgba(243, 208, 179, .88);
  background: rgba(3, 3, 3, .76);
  border: 1px solid rgba(222, 181, 143, .28);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(8px);
  transition: color .25s ease, border-color .25s ease, background .25s ease, opacity .25s ease;
}

.project-saol .technical-plan.is-focused .technical-plan__overview {
  opacity: 1;
  pointer-events: auto;
}

.project-saol .technical-plan__overview:hover,
.project-saol .technical-plan__overview:focus-visible {
  color: #180907;
  background: var(--project-accent-soft);
  border-color: var(--project-accent-soft);
  outline: 0;
}

.project-saol .technical-plan__open {
  position: absolute;
  right: 12px;
  bottom: 8px;
  z-index: 7;
  padding: 10px 12px;
  color: rgba(243, 208, 179, .85);
  background: rgba(3, 3, 3, .76);
  border: 1px solid rgba(222, 181, 143, .28);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .14em;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}

.project-saol .technical-plan__open:hover,
.project-saol .technical-plan__open:focus-visible {
  color: #180907;
  background: var(--project-accent-soft);
  border-color: var(--project-accent-soft);
  outline: 0;
}

@media (max-width: 1050px) {
  .project-saol .technical-lab {
    grid-template-columns: 1fr;
  }

  .project-saol .technical-canvas--drawing {
    min-height: 560px;
  }
}

@media (max-width: 760px) {
  .project-saol .technical-canvas--drawing {
    min-height: 0;
    padding: 54px 8px 42px;
  }

  .project-saol .technical-plan__hotspot {
    width: 30px;
    height: 30px;
    box-shadow: 0 0 0 5px rgba(169, 81, 47, .1);
  }

  .project-saol .technical-plan__sheet {
    transform: none !important;
  }

  .project-saol .technical-plan__overview {
    display: none;
  }

  .project-saol .technical-plan__legend {
    top: 5px;
    right: 5px;
    padding: 7px 8px;
  }

  .project-saol .technical-plan__open {
    right: 5px;
    bottom: 4px;
    padding: 8px 9px;
    font-size: 7px;
  }
}