/* SCENE 08 — THE LAND-USE UNIVERSE (ink). Two-column editorial grid
   drifting at 0.94x/1.06x under scroll; each card a distinct 1px
   survey-line illustration. Everything visible by default (static
   law); initial hidden states are set only in js/scenes/s08.js. */

.s08 { padding-block: clamp(120px, 12vw, 160px); }

.s08-h2 {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  max-width: 22ch;
}

.s08-head__rule { margin-top: 56px; }

.s08-grid {
  margin-top: var(--rhythm-layer);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(var(--gutter) * 2);
}

.s08-col {
  display: grid;
  row-gap: clamp(96px, 9vw, 128px);
  align-content: start;
  will-change: transform;
}
.s08-col--b { margin-top: 148px; }

/* 1px survey-line illustration (stroke width locked by
   vector-effect: non-scaling-stroke) */
.s08-ill {
  width: min(228px, 64%);
  height: auto;
  color: var(--gold);
  opacity: .85;
}
.s08-ill path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.s08-card__title {
  margin-top: 28px;
  font-size: clamp(1.3rem, 2.1vw, 1.75rem);
}
.s08-card__rule {
  margin-top: 20px;
  width: 72px;
}
.s08-card__line {
  margin-top: 18px;
  font-size: .95rem;
}

@media (max-width: 899px) {
  .s08 { padding-block: 104px; }
  .s08-head__rule { margin-top: 40px; }
  .s08-grid { grid-template-columns: 1fr; row-gap: 88px; }
  .s08-col { row-gap: 88px; }
  .s08-col--b { margin-top: 88px; }
  .s08-ill { width: min(200px, 72%); }
}