/* Home: the mosaic section (_home-mosaic.php, Nico 2026-10-20). Loaded only
   by that partial. Phone first: the loop is a 220px square above the words;
   from 760px it sits left (45%) and the words right (55%), centred on each
   other, the loop never wider than 480px. Thin rules above and below.
   Phone (Eric 2026-10-20, "compact on mobile", then his iPhone shots): under
   760px the loop and the words share ONE row, the loop a small square on
   the left (clamp 112-136px), the words beside it at 13.5px with the italic
   close at 15px ("text even smaller and less height on mobile"), centred on
   each other, 16px above and below; the words overlap the loop by 40px.
   The square is
   clipped to a circle and the film drawn 8% larger inside it, so the film's
   thin outer ring lands on the clip edge as one clean frame and the
   butterfly reads larger (scaled in a plain square, the ring showed as cut
   arcs). The butterfly still fits whole. Desktop unchanged. */
.home-mosaic{padding:20px 0 56px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.home-mosaic .sec-head{margin-bottom:24px}
/* signed in, an empty eyebrow or heading stays in the flow, so the two "Add
   text" slots stack above the words instead of overlapping (editor.css lifts
   empty slots out of the flow); signed out an empty one is never printed */
.home-mosaic .sec-head>.rre-empty:not(.rre-editing):not(.rre-armed):not(.rre-dirty){position:relative!important;top:auto;left:auto;display:block;margin:0 0 8px!important}
.home-mosaic .sec-head>.rre-empty:last-child:not(.rre-editing):not(.rre-armed):not(.rre-dirty){margin-bottom:0!important}
.mosaic{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:center}
.mosaic-media{position:relative;width:220px;max-width:100%;aspect-ratio:1/1;margin:0;background:var(--white)}
.mosaic-media video,.mosaic-media img{display:block;width:100%;height:100%;object-fit:cover}
.mosaic-words{min-width:0}
.mosaic .prose{font-size:var(--fs-lede);line-height:1.7;color:var(--ink-2);max-width:40em;overflow-wrap:break-word}
.mosaic .prose>*{margin:0}
.mosaic .prose>*+*{margin-top:1em}
/* a paragraph that is only an italic line (the *asterisks* close) reads as the section's last word */
.mosaic .prose p>em:only-child{font:italic 400 1.35rem/1.35 var(--serif);color:var(--plum)}
@media (max-width:759px){
  .home-mosaic{padding:16px 0}
  .mosaic{grid-template-columns:clamp(112px,33vw,136px) minmax(0,1fr);gap:14px}
  .mosaic-media{width:100%;overflow:hidden;border-radius:50%}
  .mosaic-media video,.mosaic-media img{transform:scale(1.08)}
  .home-mosaic .sec-head{margin-bottom:10px}
  .mosaic .prose{font-size:13.5px;line-height:1.45}
  .mosaic .prose>*+*{margin-top:.45em}
  .mosaic .prose p>em:only-child{font-size:15px;line-height:1.3}
  /* the words start 40px inside the loop's right edge, over the butterfly
     (Eric: "a bit wider with a small 30-50px overlap"); a soft white veil
     over the overlap (fading in and out, not a box) plus a light halo keeps
     the letters clear of the coloured wings */
  .mosaic-words{position:relative;z-index:1;margin-left:-54px;text-shadow:0 0 2px #fff,0 0 5px #fff}
  .mosaic-words::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-16px;width:64px;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.85) 20px,rgba(255,255,255,.85) 52px,rgba(255,255,255,0))}
}
@media (min-width:760px){
  .home-mosaic{padding:72px 0}
  .mosaic{grid-template-columns:minmax(0,45fr) minmax(0,55fr);gap:56px}
  .mosaic-media{width:100%;max-width:480px;justify-self:center}
}
@media (min-width:1100px){
  .mosaic{gap:72px}
  .mosaic .prose{font-size:1.125rem}
  .mosaic .prose p>em:only-child{font-size:1.55rem}
}