/* CHAPTER 07 — THE LAND-USE UNIVERSE */
.landuse__scroller {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-inline: max(var(--pad), calc((100vw - var(--container)) / 2 + var(--pad)));
  scroll-padding-inline: max(var(--pad), calc((100vw - var(--container)) / 2 + var(--pad)));
}
.landuse__scroller::-webkit-scrollbar { display: none; }
.landuse__track {
  display: flex;
  gap: clamp(20px, 2.4vw, 36px);
  width: max-content;
  padding-right: var(--pad);
}
.landuse__card {
  flex: none;
  width: clamp(250px, 24vw, 340px);
  scroll-snap-align: start;
}
.landuse__card .photo { aspect-ratio: 4 / 5; }
.landuse__num { margin-top: 20px; }
.landuse__title { margin-top: 20px; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 1.7vw, 1.65rem); line-height: 1.15; }
.landuse__line { margin-top: 8px; font-size: .92rem; font-weight: 300; line-height: 1.6; color: color-mix(in srgb, var(--bone) 70%, transparent); }
@media (max-width: 760px) {
  .landuse__card { width: 76vw; }
}

/* rail controls (mouse users have no scrollbar) */
.landuse__controls { display: flex; justify-content: flex-end; gap: 10px; align-self: end; }
.landuse__btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(244, 241, 233, .3); position: relative; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.landuse__btn::after { content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; border-left: 1px solid var(--cream); border-bottom: 1px solid var(--cream); transform: translate(-40%, -50%) rotate(45deg); }
.landuse__btn--next::after { transform: translate(-60%, -50%) rotate(-135deg); }
.landuse__btn:hover { border-color: var(--amber); background: rgba(232, 145, 43, .08); }
@media (max-width: 760px) { .landuse__controls { justify-content: flex-start; } }