/* THE SECTION HEADING, one pattern for every page: an icon badge and a title, and at most
   one short lead sentence under the title. There is no small uppercase label on top of it.
     <div class="head rv">
       <span class="badge"><i class="ic" style="--i:url(icons/<name>.svg)"></i></span>
       <div><h2>Title with <em>one word</em> lit.</h2><p>An optional lead, in normal case.</p></div>
     </div>
   .badge         a rounded square lit with the emerald gradient, a white icon inside (the icon of the section)
   .head          the badge beside the title, level with its first line
   .head--centre  for a centred section: the badge above the title, both on the centre line
   .head.rv       the first time it is seen (the page adds .in) the badge scales and turns into place
   This file is the only home of these rules: shared/base.css imports it for the inner pages, and the landing page,
   which keeps its own base, links it. */
.badge{display:grid;place-items:center;flex:none;width:clamp(52px,5.2vw,74px);aspect-ratio:1;border-radius:clamp(16px,1.6vw,22px);background:linear-gradient(145deg,rgba(16,201,139,.36),rgba(16,201,139,.07));border:1px solid var(--em);color:#fff;font-size:clamp(1.5rem,2.3vw,2.05rem);box-shadow:0 0 34px rgba(16,201,139,.2),inset 0 1px 0 rgba(255,255,255,.14)}

.head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2.2vw,28px);align-items:start;max-width:62em;margin-bottom:clamp(26px,5vh,50px)}
.head h2{margin:.12em 0 0;text-wrap:balance}
.head p{margin:.85em 0 0;max-width:36em;font-size:var(--t-body,1.0625rem);line-height:1.5;color:var(--tx);text-wrap:pretty}
.head--centre{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;margin-inline:auto}
.head--centre h2,.head--centre p{margin-inline:auto}
.head--centre p{text-wrap:balance}

.head.rv .badge{transform:scale(.55) rotate(-14deg);transition:transform .9s cubic-bezier(.3,1.6,.5,1) .15s}
.head.rv.in .badge{transform:none}
@media (prefers-reduced-motion:reduce){.head.rv .badge{transform:none;transition:none}}