/* =============================================================================
   ReLeaf: Project Evolution Map (the river)
   -----------------------------------------------------------------------------
   Naomi's drawing of 11 October, built from her own layers. The river plate
   is the ground; the words, faces and note cards are page text set on top of
   it, so they stay sharp at any width and every face is a link; and each
   doodle is lifted off the doodle plate, so a card can sit under the doodle
   that leans on it, as in the drawing. Positions are the drawing's own, in
   percent of its 1366 x 3204 frame; type is sized in
   container units so the whole plate scales as one picture. Below 1000px of
   width the stations drop out of the drawing and stack underneath it.

   evomap.js adds the rest, all optional: the water that runs down the river
   as the reader scrolls, each stage arriving with every action that belongs
   to it, and the card that names each face. While the map is on screen the contents rail steps aside
   and the map takes its room.
   ========================================================================== */

.river {
  --s1: #275a24; --s2: #121d4d; --s3: #5f3b06; --s4: #24807e;
  --navy: #15204a;
  --ink:  #1c2433;
  position: relative;
  container-type: inline-size;
  margin: var(--sp-5) 0 0;
  color: var(--ink);
}
/* the map takes the contents rail's column as well; the rail fades while
   the map is being read (evomap.js sets .evo-open on the body) */
@media (min-width: 1040px) {
  .river { margin-left: calc(-15rem - var(--sp-8)); }
  .toc { transition: opacity .35s ease, visibility 0s; }
  .evo-open .toc { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease, visibility 0s linear .35s; }
}
.st--1 { --sc: var(--s1); } .st--2 { --sc: var(--s2); } .st--3 { --sc: var(--s3); } .st--4 { --sc: var(--s4); }

.river__art {
  position: relative;
  aspect-ratio: 1366 / 3204;
  overflow: hidden;
  /* the drawing has no frame: its edges melt into the page, which takes on
     the drawing's own colours while the map is being read (.river-tint) */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
                      linear-gradient(to bottom, transparent, #000 3%, #000 98%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
                      linear-gradient(to bottom, transparent, #000 3%, #000 98%, transparent);
          mask-composite: intersect;
}
.river-tint {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(var(--t0, #fcf8c6), var(--t1, #d6ffcc));
  transition: opacity .9s ease;
}
.river-tint.is-on { opacity: 1; }
.river__img,
.river__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.river__svg { pointer-events: none; }
.river__shimmer { animation: river-run 7s linear infinite; }
.river__shimmer--b { animation-duration: 11s; }
@keyframes river-run { to { stroke-dashoffset: -143; } }
.river__front { transition: opacity .6s ease; }

/* ---- the doodles ---------------------------------------------------------- */

.river__sprites {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  aspect-ratio: 1366 / 3204;
  z-index: 3;
  pointer-events: none;
}
.sp { position: absolute; height: auto; display: block; will-change: transform; }
.sp--bob  { animation: sp-bob 3.6s ease-in-out infinite; }
.sp--fly  { animation: sp-fly 5.2s ease-in-out infinite; }
.sp--sway { animation: sp-sway 4.4s ease-in-out infinite; transform-origin: 30% 90%; }
.sp--nod  { animation: sp-nod 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
.sp--nod:nth-of-type(odd) { animation-duration: 3.9s; animation-delay: -1.3s; }
@keyframes sp-bob  { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-.55cqi) rotate(3deg); } }
@keyframes sp-fly  { 0%, 100% { transform: translate(0, 0) rotate(0); } 30% { transform: translate(-.5cqi, -.7cqi) rotate(-5deg); } 65% { transform: translate(.35cqi, -.25cqi) rotate(3deg); } }
@keyframes sp-sway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(8deg); } }
@keyframes sp-nod  { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg) translateY(-.12cqi); } }

/* ---- stations ------------------------------------------------------------ */

.river__stations { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 2; }
.st { margin: 0; }
.st__head, .st__body, .note { position: absolute; }
.st__head { scroll-margin-top: calc(var(--nav-h) + 5.5rem); }

.st__no {
  display: block;
  font-size: 10.2cqi;
  font-weight: 850;
  line-height: .78;
  letter-spacing: -.045em;
  margin-left: -.05em;
  color: var(--sc);
  font-variant-numeric: tabular-nums;
}
.ihp .st__title {
  margin: 1.5cqi 0 0;
  font-size: 2.6cqi;
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.02em;
  color: #0c0c0d;
}
.st__when {
  margin: .9cqi 0 0;
  font-size: max(.75rem, 1.3cqi);
  font-weight: 500;
  color: #1d1d1f;
  font-variant-numeric: tabular-nums;
}
.ihp .river .st__body p {
  margin: 0;
  max-width: none;
  font-size: clamp(.8125rem, 1.36cqi, 1.1875rem);
  line-height: 1.42;
  color: var(--ink);
  text-wrap: pretty;
}
/* the drawing's emphasis: in a stage's paragraph it takes the stage colour */
.ihp .river .st__body p b { font-weight: 700; color: var(--sc); }
.ihp .river .note li b { font-weight: 700; color: #0c0c0d; }

/* ---- the note cards: what was done, month by month ------------------------ */

.ihp .st__notes { list-style: none; margin: 0; padding: 0; max-width: none; }
.note {
  margin: 0;
  box-sizing: border-box;
  padding: 1.75cqi 1.1cqi .9cqi 1cqi;
  border: max(1.5px, .18cqi) dashed var(--sc);
  border-radius: .75cqi;
  background: #fffde9;
  z-index: 1;
}
.st--4 .note, .note--mint { background: #f3fff3; }
/* the two farmers stand on this card's corner: its words start below them */
.st--4 .note { padding-top: 2.7cqi; }
.note__when {
  position: absolute;
  left: 50%; top: 0;
  transform: translate(-50%, -62%);
  margin: 0;
  padding: .62cqi 1.3cqi;
  border-radius: .6cqi;
  background: var(--sc);
  color: #fff;
  font-size: max(.75rem, 1.2cqi);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}
.note--12 .note__when { background: linear-gradient(90deg, var(--s1), var(--s2)); }
.note--34 .note__when { background: linear-gradient(90deg, var(--s3), var(--s4)); }
/* a card that belongs to two stages is drawn in both their colours */
.note--34 { border-color: var(--s3) var(--s4) var(--s4) var(--s3); }
.ihp .river .note ul { list-style: disc; margin: 0; padding: 0 0 0 1.5cqi; max-width: none; }
.ihp .river .note li {
  margin: 0;
  max-width: none;
  font-size: max(.75rem, 1.16cqi);
  line-height: 1.16;
  color: #1d1d1f;
}
.ihp .river .note li + li { margin-top: .15cqi; }

/* ---- faces --------------------------------------------------------------- */

.ihp .st__faces {
  list-style: none;
  margin: 1.5cqi 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .55cqi .68cqi;
  max-width: none;
}
.st__faces li { margin: 0; }
.mface {
  position: relative;
  display: block;
  width: 4.95cqi;
  min-width: 2.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  outline: none;
}
.mface .face-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 0 0 2px #fff, 0 2px 7px rgb(21 32 74 / .2);
  transition: transform .32s cubic-bezier(.2, .9, .25, 1.25), box-shadow .2s ease, opacity .2s ease, filter .2s ease;
}
a.mface:hover .face-img,
a.mface:focus-visible .face-img,
a.mface.is-hot .face-img {
  transform: scale(1.16);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--sc, var(--navy)), 0 10px 22px rgb(21 32 74 / .3);
}
.river.is-peek .mface:not(.is-hot) .face-img { opacity: .5; filter: saturate(.4); }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- the card that names a face ----------------------------------------- */

.rcard {
  position: absolute;
  z-index: 6;
  left: 0; top: 0;
  width: min(20.5rem, calc(100% - 1rem));
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: .55rem .8rem;
  padding: .85rem 1rem .8rem;
  background: #fff;
  border: 1px solid rgb(21 32 74 / .14);
  border-top: 3px solid var(--navy);
  box-shadow: 0 22px 44px -18px rgb(21 32 74 / .42), 0 2px 6px rgb(21 32 74 / .08);
  color: var(--ink);
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(.985);
  transform-origin: var(--ox, 20%) var(--oy, 0%);
  transition: opacity .16s ease, transform .2s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .2s;
}
.rcard.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .16s ease, transform .2s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
.rcard__img { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgb(21 32 74 / .12); }
.rcard__who { align-self: center; min-width: 0; line-height: 1.25; }
.rcard__name { display: block; font-weight: 720; color: var(--navy); font-size: .9375rem; }
.rcard__name span { font-weight: 500; color: rgb(21 32 74 / .62); }
.rcard__meta { display: block; margin-top: .15rem; font-size: .75rem; color: var(--gray-600); font-variant-numeric: tabular-nums; }
.rcard__hook {
  grid-column: 1 / -1;
  margin: 0;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--gray-700);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rcard__hook::before { content: "\201C"; }
.rcard__hook::after  { content: "\201D"; }
.rcard__go {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding-top: .55rem;
  border-top: 1px solid var(--gray-200);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--leaf-700);
}
.rcard__go::after {
  content: "";
  width: .45rem; height: .45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s ease;
}
.rcard:hover .rcard__go::after { transform: translateX(3px) rotate(-45deg); }

/* ---- arrival: a stage comes in whole, its actions with it ---------------- */

.river.is-anim .st__no { color: transparent; -webkit-text-stroke: max(1.5px, .16cqi) color-mix(in srgb, var(--sc) 45%, transparent); transition: color .9s ease .15s, -webkit-text-stroke-color .9s ease; }
.river.is-anim .st__title,
.river.is-anim .st__when,
.river.is-anim .st__body > p {
  opacity: 0;
  transform: translateY(1.1cqi);
  transition: opacity .7s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
}
.river.is-anim .st__when { transition-delay: .08s; }
.river.is-anim .st__body > p { transition-delay: .16s; }
.river.is-anim .st__faces li {
  opacity: 0;
  transform: scale(.6);
  transition: opacity .35s ease, transform .5s cubic-bezier(.2, .9, .25, 1.3);
  transition-delay: calc(.35s + var(--i, 0) * 55ms);
}
.river.is-anim .note {
  opacity: 0;
  transform: translateY(1.4cqi) scale(.94) rotate(-1.5deg);
  transition: opacity .5s ease, transform .75s cubic-bezier(.2, .9, .25, 1.2);
  transition-delay: calc(.25s + var(--n, 0) * 160ms);
}
.river.is-anim .st.is-in .st__no { color: var(--sc); -webkit-text-stroke-color: transparent; }
.river.is-anim .st.is-in .st__title,
.river.is-anim .st.is-in .st__when,
.river.is-anim .st.is-in .st__body > p,
.river.is-anim .st.is-in .st__faces li,
.river.is-anim .st.is-in .note { opacity: 1; transform: none; }

/* one stage at a time: the stage being read is in full ink, the others
   stand back until the reader scrolls to them */
.river .st__head, .river .st__body, .river .note { transition: opacity .55s ease, filter .55s ease; }
.river.has-now .st:not(.is-now) .st__head,
.river.has-now .st:not(.is-now) .st__body,
.river.has-now .st:not(.is-now) .note { opacity: .34; filter: saturate(.5); }

/* ---- narrow: the stations leave the drawing ------------------------------ */

@container (max-width: 999px) {
  .river__stations { position: static; }
  .st { position: relative; padding: var(--sp-5) 0 var(--sp-4); border-bottom: 1px solid var(--gray-200); }
  .river.has-now .st:not(.is-now) .st__head, .river.has-now .st:not(.is-now) .st__body, .river.has-now .st:not(.is-now) .note { opacity: 1; filter: none; }
  .st__head, .st__body, .note { position: static !important; width: auto !important; min-height: 0 !important; }
  .st__head { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 0 .9rem; }
  .st__no { font-size: 3.25rem; grid-row: span 2; }
  .ihp .st__title { margin: 0; font-size: 1.25rem; }
  .ihp .st__title br { display: none; }
  .st__when { margin: .3rem 0 0; font-size: .8125rem; }
  .ihp .river .st__body p { margin-top: .85rem; font-size: 1rem; }
  .ihp .st__faces { margin-top: 1rem; gap: .6rem; }
  .mface { width: 2.75rem; }
  .ihp .st__notes { margin-top: 1.6rem; display: grid; gap: 1.5rem; }
  .note, .st--4 .note { padding: 1.15rem .9rem .8rem; border-width: 1.5px; border-radius: 10px; position: relative !important; left: auto !important; top: auto !important; }
  .note__when { left: .9rem; transform: translateY(-55%); padding: .3rem .7rem; border-radius: 7px; font-size: .8125rem; }
  .ihp .river .note ul { padding-left: 1.1rem; }
  .ihp .river .note li { font-size: .9375rem; line-height: 1.4; }
  .ihp .river .note li + li { margin-top: .3rem; }
  .river.is-anim .st__title, .river.is-anim .st__when, .river.is-anim .st__body > p, .river.is-anim .note { transform: translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
  .mface .face-img, .rcard { transition: none; }
  .river__shimmer, .sp { animation: none; }
  .river-tint, .toc { transition: none; }
}

@media print {
  .rcard, .river__svg { display: none; }
}