/* Order of the Living Canvas — Heart Square civic landscape #1154
   Existing semantic controls remain the source of interaction/state truth. */

#screen-heart .heart-home {
  --heart-grass:#bec79b;
  --heart-grass-deep:#879267;
  --heart-path:#d8c29a;
  --heart-paper:#fbf4e5;
  --heart-wood:#8f6f4d;
  --heart-water:#9dbab4;
  width:min(100%,1440px);
  margin-inline:auto;
}

#screen-heart .living-gate-arrival {
  position:relative;
  overflow:hidden;
  border-radius:42px 42px 28px 28px;
  border-color:rgba(91,76,52,.14);
  box-shadow:0 24px 70px rgba(65,59,42,.11);
}

#screen-heart .living-gate-art {
  object-fit:cover;
  min-height:280px;
  filter:saturate(.92) contrast(.96);
}

#screen-heart .hearth-square {
  position:relative;
  isolation:isolate;
  min-height:620px;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(210px,.62fr) minmax(320px,1.1fr) minmax(210px,.62fr);
  grid-template-rows:auto 1fr auto;
  grid-template-areas:
    "copy copy copy"
    "landmarks residents landmarks"
    "landmarks residents landmarks";
  align-items:center;
  gap:1rem 1.6rem;
  padding:clamp(1.25rem,4vw,3.5rem);
  border:1px solid rgba(84,82,56,.14);
  border-radius:54px 54px 34px 34px;
  background:
    radial-gradient(ellipse at 50% 62%,rgba(237,222,183,.74) 0 14%,rgba(196,198,151,.64) 15% 46%,transparent 47%),
    linear-gradient(180deg,#eee5cd 0 23%,#d8d8ba 23% 54%,#b8c18e 54% 100%);
  box-shadow:0 32px 80px rgba(64,67,43,.12);
}

#screen-heart .hearth-scene-art {
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

#screen-heart .hearth-scene-art::before {
  content:"";
  position:absolute;
  left:50%;
  top:38%;
  width:min(64%,760px);
  aspect-ratio:1.8;
  transform:translateX(-50%);
  border-radius:50%;
  background:
    radial-gradient(ellipse,rgba(239,226,195,.88) 0 30%,rgba(212,190,148,.44) 31% 42%,transparent 43%),
    radial-gradient(ellipse at center bottom,rgba(100,124,76,.18),transparent 68%);
}

#screen-heart .hearth-scene-art::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:-22%;
  width:32%;
  height:78%;
  transform:translateX(-50%) rotate(1.5deg);
  border-radius:50% 50% 0 0;
  background:linear-gradient(180deg,rgba(223,205,169,.2),rgba(194,163,113,.62));
  box-shadow:-17rem -6rem 0 -10rem rgba(206,181,137,.24),17rem -5rem 0 -10rem rgba(206,181,137,.22);
}

#screen-heart .hearth-square-copy {
  grid-area:copy;
  position:relative;
  z-index:2;
  max-width:62ch;
  justify-self:center;
  text-align:center;
  padding:.4rem 1rem 1.2rem;
}

#screen-heart .hearth-square-copy h3 {
  margin:.15rem 0 .4rem;
  font-size:clamp(1.8rem,3.5vw,3.1rem);
  line-height:1;
  color:#374632;
}

#screen-heart .hearth-residents {
  grid-area:residents;
  position:relative;
  z-index:2;
  justify-self:center;
  align-self:center;
  width:min(40vw,430px);
  min-width:260px;
  aspect-ratio:1.25;
  border:0;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(246,235,205,.46),rgba(159,174,119,.14) 58%,transparent 70%);
  box-shadow:none;
}

#screen-heart .hearth-residents::after {
  content:"Resident art pending · clearing kept open";
  position:absolute;
  left:50%;
  bottom:15%;
  transform:translateX(-50%);
  width:max-content;
  max-width:90%;
  padding:.45rem .7rem;
  border-radius:999px;
  background:rgba(251,246,232,.74);
  color:#6b7158;
  font-size:.75rem;
  letter-spacing:.02em;
}

#screen-heart .hearth-landmarks {
  grid-area:landmarks;
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:clamp(1.1rem,3vw,3.4rem) clamp(2rem,12vw,14rem);
  width:100%;
  align-self:stretch;
  align-items:center;
}

#screen-heart .hearth-doorway {
  position:relative;
  min-height:78px;
  max-width:250px;
  padding:1rem 1.1rem;
  border:1px solid rgba(92,75,51,.16);
  border-radius:30px 30px 18px 18px;
  background:linear-gradient(180deg,rgba(255,249,235,.94),rgba(237,222,195,.86));
  box-shadow:0 14px 28px rgba(75,62,42,.09);
  color:#384735;
  text-align:center;
  font-weight:700;
}

#screen-heart .hearth-doorway:nth-child(odd) { justify-self:start; }
#screen-heart .hearth-doorway:nth-child(even) { justify-self:end; }

#screen-heart .hearth-doorway::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:-22px;
  width:28px;
  height:24px;
  transform:translateX(-50%);
  clip-path:polygon(50% 100%,0 0,100% 0);
  background:rgba(190,162,113,.52);
}

#screen-heart .commons-district {
  position:relative;
  padding:clamp(1.5rem,3vw,2.6rem) 0;
}

#screen-heart .commons-place-grid {
  position:relative;
  display:flex;
  gap:clamp(.8rem,2vw,1.4rem);
  align-items:stretch;
  overflow-x:auto;
  padding:1rem .35rem 1.4rem;
  scroll-snap-type:x proximity;
}

#screen-heart .commons-place-grid::before {
  content:"";
  position:absolute;
  left:3%;
  right:3%;
  top:50%;
  height:3px;
  z-index:0;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(181,150,103,.34) 8% 92%,transparent);
}

#screen-heart .commons-place-card {
  position:relative;
  z-index:1;
  flex:0 0 min(280px,78vw);
  scroll-snap-align:start;
  border-radius:34px 34px 22px 22px;
  border-color:rgba(91,77,54,.13);
  background:rgba(251,246,234,.88);
  box-shadow:0 11px 26px rgba(68,58,43,.075);
}

#screen-heart .commons-place-card img {
  width:100%;
  aspect-ratio:1.55;
  object-fit:cover;
  border-radius:28px 28px 10px 10px;
}

#screen-heart .hearth-journey {
  position:relative;
  display:grid;
  grid-template-columns:repeat(6,minmax(120px,1fr));
  gap:.7rem;
  padding:2rem 0;
  overflow-x:auto;
}

#screen-heart .hearth-journey::before {
  content:"";
  position:absolute;
  left:4%;
  right:4%;
  top:3.4rem;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,#d1bb91,#b7a172,#8d9c6b,#b7a172,#d1bb91);
  opacity:.48;
}

#screen-heart .journey-step {
  position:relative;
  z-index:1;
  min-height:122px;
  border-radius:50% 50% 26px 26px;
  border-color:rgba(93,81,57,.14);
  background:rgba(252,247,236,.9);
  box-shadow:0 7px 18px rgba(74,61,43,.06);
}

/* Dense operational truth deliberately stays panel-shaped. */
#screen-heart .heart-five-second {
  margin-top:1.25rem;
}

#screen-heart :is(.hearth-doorway,.commons-place-card,.journey-step):focus-visible {
  outline:3px solid #315c3d;
  outline-offset:5px;
}

@media (max-width:900px) {
  #screen-heart .hearth-square {
    min-height:0;
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    grid-template-areas:"copy" "residents" "landmarks";
    border-radius:34px 34px 24px 24px;
  }
  #screen-heart .hearth-residents { width:min(82vw,430px); }
  #screen-heart .hearth-landmarks {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.75rem;
  }
  #screen-heart .hearth-doorway { justify-self:stretch !important; max-width:none; min-height:64px; }
  #screen-heart .hearth-doorway::after { display:none; }
  #screen-heart .hearth-journey { grid-template-columns:repeat(6,minmax(150px,1fr)); }
}

@media (max-width:520px) {
  #screen-heart .hearth-landmarks { grid-template-columns:1fr; }
  #screen-heart .commons-place-grid { padding-inline:0; }
  #screen-heart .commons-place-card { flex-basis:84vw; }
}

@media (prefers-reduced-motion:reduce) {
  #screen-heart .commons-place-grid,
  #screen-heart .hearth-journey { scroll-behavior:auto; }
  #screen-heart .hearth-doorway,
  #screen-heart .commons-place-card,
  #screen-heart .journey-step { transition:none !important; animation:none !important; transform:none !important; }
}