/* lecture page, "הכל זה א.ה.ב.ה": six worlds, each one opens out of an arch as you scroll into it */
.lx{background:var(--deep)}
.lx [hidden]{display:none!important}
.lx ::selection{background:rgba(228,199,126,.45);color:inherit}
.lx h1,.lx h2{text-wrap:balance}
.lx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* world 1: night */
.lx-hero{position:relative;overflow:clip;color:#fff;padding:clamp(110px,13vw,150px) var(--pad) clamp(70px,9vw,120px);
  background:
   radial-gradient(45% 40% at 78% 18%,rgba(228,199,126,.2),rgba(8,38,37,0) 70%),
   radial-gradient(50% 45% at 8% 88%,rgba(55,190,156,.22),rgba(8,38,37,0) 70%),
   linear-gradient(180deg,var(--lagoon),var(--deep));background-color:var(--deep)}
.lx-hero-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(36px,6vw,96px);align-items:center}
.lx-badge{display:inline-block;padding:7px 18px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(228,199,126,.5);color:var(--gold-l);font-size:14px;letter-spacing:.03em;margin-bottom:26px}
.lx-hero h1{font-size:clamp(64px,9vw,128px);line-height:1;color:#fff;margin-bottom:28px}
.lx-l1,.lx-l2{display:block}
.lx-l1{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
.lx-l2{white-space:nowrap;margin-top:.06em}
.lx-l2 span{display:inline-block;animation:rise 1.2s cubic-bezier(.2,.7,.2,1) both}
.lx-l2 span:nth-child(1){animation-delay:.25s}
.lx-l2 span:nth-child(2){animation-delay:.4s}
.lx-l2 span:nth-child(3){animation-delay:.55s}
.lx-l2 span:nth-child(4){animation-delay:.7s}
.lx-sub{font-family:var(--display);font-size:clamp(22px,2vw,28px);line-height:1.4;color:#fff;max-width:28ch}
.lx-tag{margin-top:14px;color:rgba(255,255,255,.74);font-weight:300;max-width:50ch}
.lx-facts{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 34px}
.lx-facts li{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(228,199,126,.3);font-size:15px;color:rgba(255,255,255,.92)}
.lx-facts svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--gold-l);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lx-cta{min-height:56px;white-space:nowrap;font-size:clamp(15px,4.2vw,17px);padding:0 clamp(18px,5vw,28px)}

/* the main video stands in an arch, like her portrait on the home page */
.lx-stage{position:relative;justify-self:center;width:min(100%,330px);aspect-ratio:9/16}
.yt.lx-v{aspect-ratio:9/16;border-radius:999px 999px 26px 26px;box-shadow:0 0 0 6px rgba(255,255,255,.1),0 0 0 7px rgba(228,199,126,.5),0 50px 80px -40px rgba(0,0,0,.7);transition:border-radius .6s cubic-bezier(.2,.7,.2,1)}
.yt.lx-v:has(iframe){border-radius:26px}
.yt.lx-v img{opacity:.9}
.lx-v-main{position:absolute;inset:0;width:100%;height:100%;animation:arch-in 1.4s .3s cubic-bezier(.2,.7,.2,1) both}
.lx-echo{position:absolute;inset:0;border-radius:999px 999px 26px 26px;border:1px solid rgba(228,199,126,.5);pointer-events:none;animation:lx-float 9s ease-in-out infinite}
.lx-echo.e1{transform:translate(-8%,-4%)}
.lx-echo.e2{transform:translate(-16%,-8%);border-color:rgba(228,199,126,.26);animation-duration:12s}
@keyframes lx-float{50%{translate:0 -12px}}

/* the short form under the hero */
.lx-hero-form{position:relative;z-index:2;max-width:var(--max);margin:clamp(44px,6vw,76px) auto 0;padding:clamp(18px,2.4vw,26px);border-radius:var(--r);background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),rgba(8,38,37,.82);box-shadow:inset 0 0 0 1px rgba(228,199,126,.28)}
.lx-quick-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px}

/* fields, on the dark worlds */
.lx input[type=text],.lx input[type=tel],.lx textarea,.lx select{width:100%;min-height:54px;padding:12px 16px;border-radius:14px;border:1px solid rgba(228,199,126,.38);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:17px;line-height:1.5;direction:rtl;caret-color:var(--gold-l);transition:border-color .2s,background-color .2s}
.lx input::placeholder,.lx textarea::placeholder{color:rgba(255,255,255,.62)}
.lx input:hover,.lx textarea:hover,.lx select:hover{border-color:rgba(228,199,126,.65)}
.lx input:focus,.lx textarea:focus,.lx select:focus{border-color:var(--gold-l);background-color:rgba(255,255,255,.13)}
.lx textarea{min-height:112px;resize:vertical}
.lx select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-left:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23E4C77E' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 18px center}
.lx select:invalid{color:rgba(255,255,255,.62)}
.lx option{background:var(--deep);color:#fff}
.lx-consent{display:flex;align-items:center;gap:12px;min-height:44px;margin-top:10px;cursor:pointer;font-size:15px;color:rgba(255,255,255,.8);text-align:start}
.lx-consent input{width:22px;height:22px;flex:none;accent-color:var(--gold);cursor:pointer}
.lx-ok{padding:30px 22px;border-radius:var(--r);text-align:center;background:rgba(169,221,208,.1);box-shadow:inset 0 0 0 1px rgba(228,199,126,.5);outline:none}
.lx-ok svg{width:42px;height:42px;margin:0 auto 12px;fill:var(--gold-l);animation:flipin 1s cubic-bezier(.2,.7,.2,1) both}
.lx .lx-ok h2{font-size:clamp(25px,2.2vw,31px);color:var(--gold-l);margin-bottom:6px}
.lx-ok p{color:rgba(255,255,255,.86)}

/* worlds 2 to 6: each paints the world before it, and its own world opens over it through an arch (--clip is set by lecture.js) */
.lx-world{position:relative;overflow:clip;padding:clamp(90px,12vw,160px) var(--pad)}
.lx-world:before{content:"";position:absolute;inset:0;z-index:0;clip-path:var(--clip,none)}
.lx-world>*:not(.dust){position:relative;z-index:1}

/* world 2: dawn */
.lx-aud{background:var(--deep)}
.lx-aud:before{background:radial-gradient(60% 50% at 12% 18%,rgba(169,221,208,.75),rgba(230,244,240,0) 70%),radial-gradient(45% 40% at 90% 88%,rgba(228,199,126,.3),rgba(230,244,240,0) 70%),var(--mist)}
.lx-arches{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px)}
.lx-arch{padding:clamp(60px,6vw,80px) clamp(24px,2.6vw,36px) clamp(30px,3vw,42px);border-radius:999px 999px var(--r) var(--r);background:rgba(255,255,255,.82);text-align:center;outline:1px solid rgba(184,137,58,.4);outline-offset:-10px;box-shadow:0 1px 0 #fff inset,0 30px 60px -38px rgba(8,38,37,.5)}
.lx-arch svg{width:76px;height:76px;margin:0 auto 18px}
.lx-arch h3{color:var(--lagoon);margin-bottom:10px}
.lx-arch p{color:var(--muted)}

/* world 3: dusk, a gold thread through what they take home */
.lx-why{background:var(--mist);color:#fff}
.lx-why:before{background:radial-gradient(50% 40% at 88% 8%,rgba(228,199,126,.26),rgba(8,38,37,0) 70%),radial-gradient(50% 45% at 0% 100%,rgba(55,190,156,.2),rgba(8,38,37,0) 70%),linear-gradient(180deg,var(--deep),var(--lagoon))}
.lx-why-in{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,6vw,96px);align-items:start}
.lx-why-head{position:sticky;top:130px}
.lx-why h2{color:#fff}
.lx-why .eyebrow,.lx-contact .eyebrow{color:var(--gold-l)}
.lx-thread{--t:1;list-style:none;position:relative;display:grid;gap:clamp(30px,3.4vw,46px);padding-inline-start:48px}
.lx-thread:before,.lx-thread:after{content:"";position:absolute;inset-inline-start:11px;top:14px;bottom:14px;width:1px;background:rgba(228,199,126,.22)}
.lx-thread:after{width:2px;background:linear-gradient(var(--gold-l),var(--gold));transform-origin:top;transform:scaleY(var(--t));box-shadow:0 0 12px rgba(228,199,126,.6)}
.lx-thread li{position:relative}
.lx-thread li:before{content:"";position:absolute;inset-inline-start:-48px;top:6px;width:24px;height:24px;background:var(--gold-l);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:calc(.25 + var(--p,1) * .75);transform:scale(calc(.45 + var(--p,1) * .55)) rotate(calc((1 - var(--p,1)) * 90deg))}
.lx-thread h3{color:var(--gold-l);margin-bottom:6px}
.lx-thread p{color:rgba(255,255,255,.84)}

/* world 4: daylight, their own words */
.lx-proof{background:var(--lagoon)}
.lx-proof:before{background:radial-gradient(55% 40% at 50% 0%,rgba(228,199,126,.3),rgba(251,253,252,0) 70%),var(--pearl)}
.lx-vids{display:grid;grid-template-columns:repeat(2,minmax(0,290px));justify-content:center;gap:clamp(14px,3.4vw,44px);margin:0 auto clamp(56px,8vw,100px)}
.lx-vids .yt:nth-child(2){margin-top:clamp(28px,5vw,70px)}
.lx-vids .yt-t{text-align:center;padding:36px 12px 16px}
.lx-chats{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);align-items:start;outline-offset:6px}
.lx-chats figure{padding:6px;border-radius:22px;background:#fff;rotate:-1.5deg;box-shadow:0 0 0 1px rgba(14,59,58,.07),0 30px 60px -36px rgba(8,38,37,.55);transition:rotate .5s cubic-bezier(.2,.7,.2,1)}
.lx-chats figure:nth-child(even){rotate:1.5deg;margin-top:34px}
.lx-chats figure:hover{rotate:0deg}
.lx-chats img{width:100%;height:auto;border-radius:16px}

/* world 5: sea, the lecturer */
.lx-bio{background:var(--pearl)}
.lx-bio:before{background:radial-gradient(55% 50% at 90% 30%,rgba(169,221,208,.6),rgba(230,244,240,0) 70%),linear-gradient(180deg,var(--pearl),var(--mist))}
.lx-bio-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,7vw,110px);align-items:center}
.lx-bio-pic{position:relative;justify-self:center;width:min(100%,400px);aspect-ratio:4/5}
.lx-bio-pic figure{position:absolute;inset:0;border-radius:999px 999px 30px 30px;overflow:hidden;box-shadow:0 0 0 8px rgba(255,255,255,.6),0 0 0 9px rgba(184,137,58,.45),0 60px 90px -45px rgba(8,38,37,.6)}
.lx-bio-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.lx-bio .lx-echo{border-color:rgba(184,137,58,.5)}
.lx-bio .lx-echo.e1{transform:translate(7%,-4%)}
.lx-bio .lx-echo.e2{transform:translate(14%,-8%);border-color:rgba(184,137,58,.28)}
.lx-bio h2{color:var(--lagoon);margin-bottom:.1em}
.lx-role{font-size:15px;font-weight:500;letter-spacing:.04em;color:var(--gold-t);margin-bottom:22px}
.lx-bio-copy>p:not(.eyebrow):not(.lx-role){color:var(--muted);max-width:58ch}
.lx-bio strong{color:var(--lagoon);font-weight:500}

/* world 6: night again, the door */
.lx-contact{background:var(--mist);color:#fff;text-align:center}
.lx-contact:before{background:radial-gradient(50% 40% at 50% 0%,rgba(228,199,126,.28),rgba(8,38,37,0) 70%),linear-gradient(180deg,var(--lagoon),var(--deep))}
.lx-contact-in{max-width:640px;margin:0 auto}
.lx-contact h2{color:#fff}
.lx-lead{color:rgba(255,255,255,.84)}
.lx-form{margin-top:34px;padding:clamp(22px,4vw,38px);border-radius:var(--r);background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),rgba(8,38,37,.82);box-shadow:inset 0 0 0 1px rgba(228,199,126,.28);display:grid;gap:18px;text-align:start}
.lx-field{display:grid;gap:8px}
.lx-field label{font-size:15px;font-weight:500;color:rgba(255,255,255,.92)}
.lx-form .btn{width:100%;min-height:58px;font-size:18px}
.lx-contact .lx-ok{margin-top:34px}
.lx-reach{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 28px;margin-top:26px}
.lx-reach a{display:inline-flex;align-items:center;min-height:44px;color:var(--gold-l);text-decoration:none}
.lx-reach a:hover{text-decoration:underline;text-underline-offset:4px}

@media (max-width:900px){
  .lx-hero-in{grid-template-columns:1fr}
  .lx-stage{width:min(64vw,290px)}
  .lx-quick-row{grid-template-columns:1fr}
  .lx-arches{grid-template-columns:1fr;max-width:440px}
  .lx-why-in{grid-template-columns:1fr}
  .lx-why-head{position:static}
  .lx-bio-in{grid-template-columns:1fr}
  .lx-bio-pic{width:min(72vw,320px)}
}
@media (max-width:760px){
  /* the four chats become a strip you swipe through, each big enough to read */
  .lx-chats{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--pad) * -1);padding:10px var(--pad) 26px;scrollbar-width:thin;scrollbar-color:var(--gold) transparent}
  .lx-chats figure{flex:0 0 min(78%,320px);scroll-snap-align:center}
  .lx-chats figure:nth-child(even){margin-top:0}
  .lx-vids .yt-t{font-size:14px;padding:30px 8px 12px}
  .lx-vids .play{width:54px;height:54px;margin:-27px 0 0 -27px}
}
@media (prefers-reduced-motion:reduce){
  .lx-chats figure{rotate:none}
}