/* Sophicly Library Header — slh.css v1.0.0 (WD-690)
   247artists.com `.s-education-home`, ported verbatim at WD-015 (23 rules); renamed `slh`, their rems written in px at THEIR
   18px base: 106.6666667rem=1920 · 2.1111rem=38 · 2.6667rem=48 · 22.5rem=405 · .6rem=10.8 · .8889rem=16 · 5.3333rem=96 ·
   4rem=72 · 3rem=54 · 1rem=18 · 1.3333rem=24 · 1.6667rem=30 · 1.111rem=20. Deviations are numbered as in the plugin header. */
.slh{
  --slh-brand:#5333ed; --slh-paper:#f4f2f8;
  --slh-field:var(--slh-brand); --slh-mark:var(--slh-paper); --slh-field-rgb:83,51,237;
  --slh-title-bg:var(--slh-mark); --slh-title-ink:var(--slh-field);
  --slh-sans:"Proxima Soft Complete",-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --slh-serif:"Playfair Display Complete","Playfair Display",Georgia,serif;
  --slh-entrance:cubic-bezier(.22,1,.36,1);
  /* their grid, verbatim (min(100vw-40, 1920-40) × their column/gutter fractions) */
  --slh-col:calc( min(calc(100vw - 40px), 1880px) * 0.0808510638 );
  --slh-gut:calc( min(calc(100vw - 40px), 1880px) * 0.0212765957 );
  position:relative; height:150lvh;                       /* deviation 4 */
  background:var(--slh-field); clip-path:inset(0);
  font-family:var(--slh-sans); -webkit-font-smoothing:antialiased;
  transition:background-color 1800ms linear;              /* deviation 3: the field washes on the same lift as the body ground */
  box-sizing:border-box; margin:0;
}
.slh *,.slh *::before,.slh *::after{ box-sizing:border-box; }
/* deviation 2: dark theme — the site's dark ground and ink, the title pill keeps the brand as the one accent */
html[data-theme='dark'] .slh, html.dark .slh, html.dark-mode .slh{
  --slh-field:#1c1d1f; --slh-mark:#e0e0ee; --slh-field-rgb:28,29,31;
  --slh-title-bg:var(--slh-brand); --slh-title-ink:var(--slh-paper);
}
/* deviation 3: black under the arrival, exactly as hero-motion holds the body ground; released together */
html.swh-arriving .slh{ background:#000; }
@media only screen and (max-width:767px) and (orientation:landscape), only screen and (max-width:576px){
  .slh{ height:150lvh; }
}
.slh__inner{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:fixed; top:0; left:0; width:100%; height:100lvh;
  z-index:1;                                              /* under the nav (z 10–12) and every overlay */
}
.slh__content{
  position:relative; z-index:2; margin:0 auto; padding:38px 0 48px;
  width:calc(4*var(--slh-col) + 3*var(--slh-gut));
}
@media only screen and (max-width:987px){
  .slh__content{ width:90%; max-width:405px; text-align:center; }
}
.slh__content .slh__background{
  position:absolute;
  top:calc(50% - var(--slh-diag)*2/2); left:calc(50% - var(--slh-diag)*1.75/2);
  z-index:-1; width:calc(var(--slh-diag)*1.75); height:calc(var(--slh-diag)*2);
  background:radial-gradient(closest-side, rgba(var(--slh-field-rgb), .9) 25%, rgba(var(--slh-field-rgb), 0));
  border-radius:999px; will-change:transform;
  transition:background 1800ms linear;
}
@media only screen and (max-width:767px) and (orientation:landscape), only screen and (max-width:576px){
  .slh__content .slh__background{
    background:linear-gradient(rgba(var(--slh-field-rgb),0), rgba(var(--slh-field-rgb),.9) 15%, rgba(var(--slh-field-rgb),.9) 85%, rgba(var(--slh-field-rgb),0));
    border-radius:0;
  }
}
.slh__content::before,.slh__content::after{
  position:absolute; left:50%; z-index:1; width:1px; height:200lvh; background:var(--slh-mark); content:"";
}
.slh__content::before{ bottom:100%; }
.slh__content::after{ top:100%; }
.slh__suptitle{
  background:var(--slh-field); display:inline-block; margin:0 0 10.8px; padding:.28em .8em .3em;
  border:1px solid var(--slh-mark); border-radius:999px; color:var(--slh-mark);
  font-size:16px; font-weight:600; letter-spacing:-.01em; line-height:1.2;
  transition:background-color 1800ms linear;
}
.slh__title{
  margin:0; color:var(--slh-mark);
  font-family:var(--slh-serif); font-style:italic; font-weight:400;   /* deviation 2 */
  font-size:96px; letter-spacing:-.01em; line-height:.98;
}
@media only screen and (max-width:987px){ .slh__title{ font-size:72px; } }
@media only screen and (max-width:767px) and (orientation:landscape), only screen and (max-width:576px){ .slh__title{ font-size:54px; } }
.slh__text{
  margin:1.5em 0 0; max-width:24.875em; color:var(--slh-mark);
  font-size:clamp(18px, 1.25vw, 24px); font-weight:500; line-height:1.13;
}
@media only screen and (max-width:767px) and (orientation:landscape), only screen and (max-width:576px){ .slh__text{ margin-top:1em; } }
.slh__list{ margin:0; padding:0; list-style:none; }
.slh__pill{
  --fz:30px; --width:7.1332em; --height:4.6em;
  position:absolute; top:calc(var(--radius)*-1); left:calc(var(--radius)*-0.5); z-index:2;
  margin:0; padding:.5em .35em; width:var(--width); height:var(--height);
  background:var(--slh-field); border:1px solid var(--slh-mark); overflow:hidden;
  color:var(--slh-mark); font-size:var(--fz); font-weight:600; letter-spacing:-0.04em; line-height:.9;
  opacity:0;                                              /* deviation 3: arrives with the body */
  transition:background-color 1800ms linear;
}
html.swh-body-in .slh__pill{ opacity:1; transition:opacity 1800ms var(--slh-entrance), background-color 1800ms linear; }
@media only screen and (max-width:1536px){ .slh__pill{ --fz:24px; } }
@media only screen and (max-width:1280px){ .slh__pill{ --fz:20px; } }
@media only screen and (max-width:767px) and (orientation:landscape), only screen and (max-width:576px){
  .slh__pill:nth-last-child(-n+10){ display:none; }
}
.slh__pill .slh__pill-inner{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;
  height:100%; max-height:3.6em; overflow:hidden;
}
.slh__pill--title{
  --width:5.6em; --height:2.76em; z-index:3; padding-bottom:.3em;
  background:var(--slh-title-bg); color:var(--slh-title-ink);
  font-size:calc(var(--fz)*1.6667); line-height:.8;
}
.slh__pill--title .slh__pill-inner{ justify-content:flex-end; overflow:visible; }
@media (prefers-reduced-motion: reduce){
  .slh__pill{ transition:none !important; opacity:1 !important; }
  .slh, .slh__suptitle{ transition:none !important; }
}