/* DABB 2 — "Why a dabb?" ON FLAT GROUND: the teaser that closes the home page, and dabb2's wide breath.
   A broad band (most of a screen) of flat, firm sand IN THE SUN (AMENDMENT 11: "One dune, and far away. The dabb mostly lives
   on flat ground." · AMENDMENT 7: no shade lies on it, only the sun's lift, and its words are deep: css/base.css .in-sun);
   the words stand low at the reading side; one small dabb crosses the open sand; far off at the end side's upper corner,
   partly out of the frame, one ṭaʿs. The ground runs on under the footer (09-footer.css), flat.

   Layers: the section's own .sec layer over the page's sand (the blog's: the sun — what shows before the ground is
   painted, and through their soft top edge — so the ground comes up out of the page's sand without a line) · .dabbt__ground:
   the ground with its light baked in (DABB.Nafud: the sun's lift, as over the blog above; behind each piece of type
   only what its deep ink needs — a little more light where the sand under it is darker) · .dabbt__life: the dabb
   and its prints · the words.                                                                                               */

.dabbt {
  --sh: var(--shade-sun); --sh-in: var(--shade-sun);
  position: relative; display: flex; align-items: flex-end;
  min-block-size: clamp(600px, 88vh, 880px);
  padding-block: clamp(140px, 16vw, 240px) clamp(72px, 8vw, 128px);
  overflow: hidden; overflow: clip;
}
.dabbt__ground, .dabbt__life { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; opacity: 0; }
.dabbt__ground.is-in, .dabbt__life.is-in { opacity: 1; }
.dabbt__life { color: var(--fg); }

.dabbt > .wrap { position: relative; z-index: 1; inline-size: 100%; }
.dabbt__text { max-inline-size: 36rem; }
.dabbt__line { margin-block-start: var(--s-4); max-inline-size: 42ch; color: var(--fg); }   /* the full ink, not the secondary tone: a lighter ink would ask for more light under it */
.dabbt__cta { margin-block-start: var(--s-6); }

@media (prefers-reduced-motion: no-preference) {
  html:not(.is-calm) .dabbt__ground { transition: opacity 800ms var(--e-std); }
  html:not(.is-calm) .dabbt__life { transition: opacity 600ms var(--e-std) 300ms; }
}