/* Life Lens on her photo-collage background, with the content sitting on top.
   THIS SUPERSEDES THE NAVY PAGE from the previous turn. Her collage is very pale
   (mean brightness 214; even its darkest patch is rgb(176,174,170)), so white text
   on it measures only 2.20 — unreadable. Navy text measures 6.58 on the WORST part
   and 13.7 on the lightest, so the type goes back to navy and the collage stays
   visible. Turning it navy instead would need an ~85% scrim, which would hide the
   photographs entirely — that alternative was offered to her. */
#page-life-lens.page,
#page-life-lens{
  background-color:#F7F5F1 !important;
  background-image:url("assets/img/img-efc5845f94e9.webp") !important;
  background-size:cover !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;
  background-attachment:scroll !important;   /* fixed judders badly on iOS */
  position:relative;
}
/* a soft veil calms the busiest photos so the copy never fights an image;
   the collage still reads clearly through it */
#page-life-lens::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,.34) 0%,
    rgba(255,255,255,.52) 42%,
    rgba(255,253,250,.78) 100%);
}
#page-life-lens .ll-wrap{ position:relative; z-index:1; }

/* type back to the original dark palette, a step deeper so it holds over photos */
#page-life-lens .ll-h1,
#page-life-lens .ll-empty h2{
  color:#16222F !important; -webkit-text-fill-color:#16222F !important;
}
#page-life-lens .ll-lede,
#page-life-lens .ll-empty p{
  color:#414B5A !important; -webkit-text-fill-color:#414B5A !important;
}
#page-life-lens .ll-note{
  color:#4A5260 !important; -webkit-text-fill-color:#4A5260 !important;
}
#page-life-lens .ll-eyebrow{
  color:#5C4A93 !important; -webkit-text-fill-color:#5C4A93 !important;
}

/* panels become frosted white so they lift off the collage without hiding it */
#page-life-lens .ll-empty{
  background:rgba(255,255,255,.82) !important;
  border-color:rgba(255,255,255,.9) !important;
  backdrop-filter:blur(6px);
  box-shadow:0 10px 34px rgba(22,34,47,.10);
}
#page-life-lens .ll-empty-ic{ background:#EFEAF8 !important; }
#page-life-lens .ll-empty-ic svg{ stroke:#6E5AA6 !important; }

#page-life-lens .ll-tabs{ background:transparent !important; }
#page-life-lens .ll-tab{
  background:rgba(255,255,255,.86) !important;
  border-color:rgba(22,34,47,.10) !important;
  color:#414B5A !important; -webkit-text-fill-color:#414B5A !important;
  backdrop-filter:blur(4px);
}
#page-life-lens .ll-tab:hover{ background:#fff !important; }
#page-life-lens .ll-tab.is-on{
  background:#6E5AA6 !important; border-color:#6E5AA6 !important;
  color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important;
}
#page-life-lens .ll-srch{
  background:rgba(255,255,255,.88) !important;
  border-color:rgba(22,34,47,.10) !important;
  backdrop-filter:blur(4px);
}
#page-life-lens .ll-srch input,
#page-life-lens .ll-srch input:focus{
  background:transparent !important;
  color:#16222F !important; -webkit-text-fill-color:#16222F !important;
}
#page-life-lens .ll-srch input::placeholder{ color:#68707E !important; }
#page-life-lens .ll-srch svg{ stroke:#68707E !important; }
#page-life-lens .ll-view{ background:rgba(255,255,255,.78) !important; backdrop-filter:blur(4px); }
#page-life-lens .ll-vbtn{
  color:#414B5A !important; -webkit-text-fill-color:#414B5A !important;
}
#page-life-lens .ll-vbtn.is-on{
  background:#6E5AA6 !important;
  color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important;
  box-shadow:none !important;
}
#page-life-lens .ll-btn--primary{ background:#6E5AA6 !important; }
#page-life-lens .ll-btn--soft{
  background:rgba(255,255,255,.88) !important;
  border-color:rgba(22,34,47,.12) !important;
  color:#4C3F73 !important; -webkit-text-fill-color:#4C3F73 !important;
  backdrop-filter:blur(4px);
}
#page-life-lens .ll-btn--soft:hover{ background:#fff !important; }
#page-life-lens .ll-btn:focus-visible,
#page-life-lens .ll-tab:focus-visible,
#page-life-lens .ll-vbtn:focus-visible{ outline:3px solid #CF9E3F !important; outline-offset:2px; }