:root{
  --counterflow-left-x:0px;
  --counterflow-right-x:0px;
  --counterflow-y:50%;
}

/* Additive only: a quiet counterflow of ink appears near the home title. */
.ink-counterflow{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  mix-blend-mode:multiply;
}
.ink-counterflow::before,
.ink-counterflow::after{
  content:"";
  position:absolute;
  top:var(--counterflow-y);
  width:clamp(300px,42vw,680px);
  height:clamp(120px,17vw,280px);
  border-radius:48% 52% 45% 55% / 56% 44% 58% 42%;
  opacity:.035;
  filter:blur(36px);
  will-change:transform,opacity;
  transition:transform .82s cubic-bezier(.2,.72,.2,1),opacity .42s ease;
}
.ink-counterflow::before{
  left:-29vw;
  background:radial-gradient(ellipse at 78% 50%,rgba(20,20,18,.2),rgba(65,64,59,.08) 38%,transparent 72%);
  transform:translate3d(var(--counterflow-left-x),-50%,0) rotate(-3deg);
}
.ink-counterflow::after{
  right:-29vw;
  background:radial-gradient(ellipse at 22% 50%,rgba(20,20,18,.18),rgba(65,64,59,.075) 38%,transparent 72%);
  transform:translate3d(var(--counterflow-right-x),-50%,0) rotate(3deg);
}
.ink-counterflow.is-near-title::before,
.ink-counterflow.is-near-title::after{opacity:.16}
@media(max-width:900px){
  .ink-counterflow::before,.ink-counterflow::after{width:62vw;height:27vw;filter:blur(28px)}
  .ink-counterflow::before{left:-43vw}
  .ink-counterflow::after{right:-43vw}
  .ink-counterflow::before,.ink-counterflow::after{opacity:.028}
  .ink-counterflow.is-near-title::before,.ink-counterflow.is-near-title::after{opacity:.11}
}
@media(prefers-reduced-motion:reduce){
  .ink-counterflow::before,.ink-counterflow::after{opacity:.055;transition:none;transform:translate3d(0,-50%,0)}
}