/* CHAPTER 03 — LAND AGGREGATION AT THE CORE */
.core__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
}
/* the plot stays in view while the services scroll past it */
.core__visual { grid-column: 1 / span 6; position: sticky; top: calc(var(--nav-h) + 24px); max-width: calc(100svh - var(--nav-h) - 48px); }
.core__core {
  position: relative; padding: 0; aspect-ratio: 1 / 1; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 100%, rgba(232, 145, 43, .16), transparent 60%), var(--coal-2);
}
/* the aerial still: phones, static mode and no WebGL keep it under the
   survey diagram; it fades once the model is live */
.core__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .88; transition: opacity 1.1s var(--ease); }
.core__survey { position: absolute; inset: 0; width: 100%; height: 100%; padding: 6%; pointer-events: none; }
.core__parcel, .core__boundary {
  fill: none;
  stroke: var(--amber-light);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}
.core__parcel { opacity: .85; }
.core__boundary { stroke: var(--amber); stroke-width: 2; opacity: .95; filter: drop-shadow(0 0 6px rgba(232, 145, 43, .35)); }
.core__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .9s var(--ease); touch-action: pan-y; cursor: grab; }
.core__gl:active { cursor: grabbing; }
.core__hint {
  position: absolute; left: 22px; bottom: 18px; margin: 0;
  font-family: var(--font-display); font-style: italic; font-size: .98rem; color: var(--cream-soft);
  opacity: 0; transition: opacity .6s var(--ease); pointer-events: none;
}
/* the note stays in every state: the still is an illustration too */
.core__note {
  position: absolute; right: 22px; bottom: 18px; margin: 0;
  font-size: .75rem; letter-spacing: .02em; color: var(--cream); opacity: .85;
  text-shadow: 0 1px 10px rgba(10, 10, 9, .7); pointer-events: none;
}
.core--gl .core__still { opacity: 0; }
.core--gl .core__survey { display: none; }
.core--gl .core__gl { opacity: 1; }
.core--gl .core__hint { opacity: 1; }
.core--dragged .core__hint { opacity: 0; }
.core__services { grid-column: 8 / span 5; }
.core__close {
  margin-top: var(--section);
  display: grid;
  row-gap: 40px;
  text-align: center;
}
.core__signature { max-width: 24ch; margin-inline: auto; color: var(--bone); }
@media (max-width: 1100px) {
  .core__visual { grid-column: 1 / span 6; }
  .core__services { grid-column: 7 / span 6; }
}
@media (max-width: 899px) {
  .core__grid { grid-template-columns: 1fr; row-gap: 48px; }
  .core__visual, .core__services { grid-column: auto; }
  .core__visual { position: static; max-width: none; }
  .core__core { aspect-ratio: 4 / 3; }
  .core__close { row-gap: 28px; }
}