/* ─────────────────────────────────────────────────────────────────────
   CALM FLOW · pacing and breathing room
   2026-07-31 · v4 only. Live site untouched.

   TO REVERSE: delete this file and the one <link> per page:
     cd v4 && rm flow-calm.css && sed -i '' '/flow-calm.css/d' *.html

   The reference sites read as calm for two reasons that are not effects:
   emptiness and slowness. Izanami carries 4 images across 8,000px of
   scroll; ours runs ten sections in a similar height. This file buys the
   space back. The motion timing lives in index.html's inline GSAP, since
   it cannot be reached from CSS.
   ───────────────────────────────────────────────────────────────────── */

/* Sections breathe. porcelain.css ships clamp(80px,12vh,150px). */
.section{
  padding-block:clamp(110px,17vh,210px);
}

/* Section heads sit further from the content they introduce, so the eye
   rests on the headline before the list arrives. */
.section__head{
  margin-bottom:clamp(14px,2.5vh,30px);
}

/* Row items get more air between them — the single biggest change to how
   dense a page feels, because .rows carries most of the site's content. */
.rows li{
  padding-block:clamp(22px,3.2vh,38px);
}

/* Lede paragraphs: slightly looser line-height and a shorter measure.
   Shorter lines read slower, which is the effect we want. */
.lede{
  line-height:1.8;
  max-width:60ch;
}

/* Cards ease off the hover lift — a 6px jump is energetic, not calm. */
.card--hover:hover{
  transform:translateY(-3px);
  transition:transform .7s cubic-bezier(.22,1,.36,1),box-shadow .7s ease;
}

/* Reveals settle rather than snap. porcelain-site.js drives subpage
   reveals through CSS transitions, so the duration is reachable here. */
.reveal{
  transition-duration:1.15s !important;
  transition-timing-function:cubic-bezier(.16,1,.3,1) !important;
}
.rln > span{
  transition-duration:1.25s !important;
  transition-timing-function:cubic-bezier(.16,1,.3,1) !important;
}

/* The page hero gets the most air of anything — it sets the pace for
   everything below it. */
.page-hero{
  padding-block:clamp(140px,20vh,250px) clamp(40px,6vh,80px);
}

/* Ambient background loops sit further back so they read as atmosphere
   rather than as a video playing behind the text. */
.hero__bg video,
.closing__bg video{
  opacity:.92;
}

/* Respect the setting. Anyone who has asked for less motion gets stills. */
@media (prefers-reduced-motion:reduce){
  .hero__bg video,
  .closing__bg video,
  .manifesto__viz video,
  video.absorb__sphere{
    display:none;
  }
}

/* ── grouped arrivals on subpages ────────────────────────────────────
   porcelain-site.js staggers every .reveal by its sibling position, so a
   six-row list is six separate entrances. Lists and card grids now share
   one breath and arrive together; only the section head keeps its small
   label → headline → lede cascade. !important is required: the JS sets
   transition-delay inline. */
.rows li.reveal{transition-delay:.1s !important}
.grid > .reveal,.grid .card.reveal{transition-delay:.14s !important}