/* EARLY LIFE — a soil profile: three horizons stacked from the surface down */
.soil-head { background: var(--sand); overflow: hidden; }
.soil-head .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.soil-head h1 { font-size: clamp(2.8rem, 1.5rem + 4.6vw, 5.6rem); line-height: .95; }
.soil-head h1 span { display: block; color: var(--soil-ink); font-style: italic; }
.soil-profile { width: 100%; max-width: 420px; justify-self: end; }
.soil-profile text { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .16em; fill: var(--indigo); }

.hzn { display: grid; grid-template-columns: 11rem minmax(0, 1fr); border-top: 1px solid var(--line-strong); }
.hzn__label { position: relative; padding: 3rem 1.5rem 3rem var(--gutter); border-right: 1px solid var(--line); }
.hzn__label span { position: sticky; top: calc(var(--header-h) + 2rem); display: block; }
.hzn__label b { display: block; font-family: var(--serif); font-weight: 400; font-size: 4.2rem; line-height: .9; color: var(--indigo); }
.hzn__label i { display: block; font-style: normal; font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--soil-ink); margin-top: .6rem; }
.hzn__body { padding: clamp(3rem, 2rem + 3vw, 5rem) var(--gutter); }
.hzn__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2.5rem 4rem; max-width: var(--wrap); }
.hzn__grid h2 { font-size: var(--fs-2xl); }
.hzn--a { background: var(--parchment); }
.hzn--b { background: #EFE6D4; }
.hzn--c { background: var(--sand); }
.hzn--c .hzn__label, .hzn--b .hzn__label { border-color: var(--line-strong); }
.hzn .plate { margin-top: .5rem; }
.hzn .note { margin-top: 1.5rem; }

@media (max-width: 900px) {
  .soil-head .wrap { grid-template-columns: minmax(0, 1fr); }
  .soil-profile { justify-self: start; max-width: 340px; }
  .hzn { grid-template-columns: minmax(0, 1fr); }
  .hzn__label { padding: 1.6rem var(--gutter) 0; border-right: 0; }
  .hzn__label span { position: static; display: flex; align-items: baseline; gap: 1rem; }
  .hzn__label b { font-size: 3rem; }
  .hzn__body { padding-top: 1.2rem; }
  .hzn__grid { grid-template-columns: minmax(0, 1fr); }
}