/* ================= round 3d (Yair 8.11.2026 16:21): subject symbols as the moving shapes on every subject page (build/life.py
   SUBJ_SETS). Cut-out paper glyphs (a cream cut edge and a small paper shadow) and hand-drawn objects in the home hero's colours,
   each on its own drift/turn cycle and phase, a little scroll parallax through --py, all of it off under reduced motion. ========= */
.life--subj .lf--s{width:var(--w,92px);height:auto;overflow:visible;filter:drop-shadow(3px 4px 0 rgba(14,30,74,.13))}
.lf--t text{fill:var(--c);stroke:#FFFBF4;stroke-width:5px;paint-order:stroke;stroke-linejoin:round}
.lf--t .g-d{font-family:'Suez One',serif}
.lf--t .g-r{font-family:'Rubik','Assistant',sans-serif;font-weight:700}
.lf--p g{fill:none;stroke:var(--c);stroke-width:7px;stroke-linecap:round;stroke-linejoin:round}
.lf--p .dot{fill:var(--c);stroke:none}
.life--subj .lf--s1{--w:118px;inset-inline-start:-18px;top:18px;rotate:-10deg;transform:translateY(calc(var(--py,0px) * -.2))}
.life--subj .lf--s2{--w:96px;inset-inline-end:31%;top:8px;rotate:12deg;transform:translateY(calc(var(--py,0px) * .3))}
.life--subj .lf--s3{--w:62px;inset-inline-start:47%;top:40%;rotate:-6deg;transform:translateY(calc(var(--py,0px) * .45))}
.life--subj .lf--s4{--w:128px;inset-inline-end:2%;bottom:-6px;rotate:8deg;transform:translateY(calc(var(--py,0px) * -.12))}
.life--subj .lf--s5{--w:90px;inset-inline-start:34%;bottom:10px;rotate:-14deg;transform:translateY(calc(var(--py,0px) * .2))}
.life--subj .lf--s6{display:none}
@media (max-width:1060px){
  .life--subj .lf--s1{--w:78px;inset-inline-start:-14px;top:auto;bottom:38%}
  .life--subj .lf--s2{--w:64px;inset-inline-end:-6px;top:14px}
  .life--subj .lf--s3{display:none}
  .life--subj .lf--s4{--w:84px;inset-inline-end:-10px;bottom:16px}
  .life--subj .lf--s5{--w:58px;inset-inline-start:42%;bottom:-8px}
}
/* 9.11.2026 (Yair 12:31 "שיזוזו בחופשיות ולא תמיד סביב אותה נקודה או קו"): each hero shape wanders a free closed path through 6 waypoints
   spread over its area (translate plus a gentle turn, the small red one also breathes in scale), every shape on its own long cycle
   (17 to 43 s, prime-ish lengths so they never sync) and phase. Same amplitude as round 3c (tens of px), off under reduced motion. */
@keyframes sy-a{0%,100%{translate:0 0;rotate:-10deg}14%{translate:-26px 19px;rotate:-17deg}30%{translate:-37px -8px;rotate:-5deg}45%{translate:-11px -29px;rotate:-19deg}59%{translate:20px -24px;rotate:-6deg}74%{translate:37px 6px;rotate:-15deg}88%{translate:17px 29px;rotate:-4deg}}
@keyframes sy-b{0%,100%{translate:0 0;rotate:12deg}16%{translate:-16px -25px;rotate:17deg}31%{translate:14px -22px;rotate:8deg}47%{translate:32px 1px;rotate:19deg}62%{translate:11px 24px;rotate:6deg}77%{translate:-19px 20px;rotate:15deg}90%{translate:-30px -6px;rotate:9deg}}
@keyframes sy-c{0%,100%{translate:0 0;rotate:-6deg;scale:1}12%{translate:25px 8px;rotate:-2deg;scale:1.1}27%{translate:13px -22px;rotate:-12deg;scale:0.92}43%{translate:-6px -12px;rotate:-3deg;scale:1.14}57%{translate:-23px -25px;rotate:-14deg;scale:0.95}71%{translate:-18px 16px;rotate:0deg;scale:1.06}86%{translate:5px 25px;rotate:-8deg;scale:0.9}}
@keyframes sy-d{0%,100%{translate:0 0;rotate:8deg}14%{translate:18px 24px;rotate:1deg}30%{translate:-10px 28px;rotate:13deg}45%{translate:-28px 3px;rotate:-1deg}59%{translate:-15px -26px;rotate:12deg}74%{translate:12px -18px;rotate:3deg}88%{translate:28px -2px;rotate:14deg}}
@keyframes sy-e{0%,100%{translate:0 0;rotate:-14deg}16%{translate:26px -15px;rotate:-10deg}31%{translate:10px -28px;rotate:-20deg}47%{translate:-16px -20px;rotate:-11deg}62%{translate:-30px 4px;rotate:-22deg}77%{translate:-12px 27px;rotate:-8deg}90%{translate:18px 18px;rotate:-16deg}}
@media (prefers-reduced-motion:no-preference){
  .life--subj .lf--s1{animation:sy-a 23s ease-in-out -5s infinite;will-change:translate,rotate}
  .life--subj .lf--s2{animation:sy-b 29s ease-in-out -14s infinite;will-change:translate,rotate}
  .life--subj .lf--s3{animation:sy-c 17s ease-in-out -8s infinite;will-change:translate,scale}
  .life--subj .lf--s4{animation:sy-d 37s ease-in-out -22s infinite;will-change:translate,rotate}
  .life--subj .lf--s5{animation:sy-e 31s ease-in-out -11s infinite;will-change:translate,rotate}
}
@media (prefers-reduced-motion:reduce){.life--subj .lf--s{animation:none!important}}

/* ================= round 3d (Yair 8.11.2026 16:21: "לא ככ אהבתי את התמונה ואז התוכן ... יש דרך טובה יותר לשלב תמונה בעמוד"):
   the photo no longer sits as a block between the copy and the content card. Like the home hero it lives beside the words: right
   under the h1 the taped, tilted photo floats at the inline end of the copy and the intro text wraps around it (phones and
   desktop alike, smaller on phones); the navy card keeps its full column. Chosen over "pinned to the card corner" (2 variants
   tried on math + remedial at 390/1280, round-3d screenshots). ================= */
@keyframes ph-tilt{0%,100%{rotate:-3deg;translate:0 0}50%{rotate:-1.2deg;translate:0 -6px}}
.phero.has-snap.ph-wrap .p-copy{display:block}
.phero.has-snap.ph-wrap .p-copy>*+*{margin-top:18px}
.phero.has-snap.ph-wrap .p-copy>.p-snap{float:inline-end;width:min(44%,290px);margin:10px 0 14px;margin-inline:24px -26px;rotate:-3deg}
.phero.has-snap.ph-wrap .p-copy>:not(.crumbs,.eyebrow,h1,.sub,.accent,.p-snap){clear:both}
.phero.has-snap.ph-wrap .p-copy>.p-snap img{border-width:6px!important}
@media (min-width:1061px){
  .phero.has-snap.ph-wrap .p-field{grid-column:2;grid-row:1 / span 2;padding-top:48px;align-self:center}
  .phero.has-snap.ph-wrap .p-copy{grid-row:1 / span 2;align-self:center}
}
@media (max-width:1060px){
  .phero.has-snap.ph-wrap .p-copy>.p-snap{width:46%;max-width:300px;margin:6px 0 10px;margin-inline:14px -6px}
  .phero.has-snap.ph-wrap .p-copy>.p-snap::before{width:56px;height:56px;inset-inline-end:-16px;bottom:-16px}
  .phero.has-snap.ph-wrap .p-copy>.p-snap .p-snap__tape{width:64px;height:20px;inset-inline-start:16px;top:-10px}
  .phero.has-snap.ph-wrap .p-field{padding-top:48px}
  .phero.plain.has-snap .p-snap{width:56%;max-width:280px;margin:8px 0 24px;margin-inline-start:auto;margin-inline-end:4%}
}
@media (prefers-reduced-motion:no-preference){.phero.has-snap.ph-wrap .p-copy>.p-snap{animation:ph-tilt 8s ease-in-out -1.5s infinite}}
@media (prefers-reduced-motion:reduce){.phero.has-snap.ph-wrap .p-copy>.p-snap{animation:none!important}}

@media (min-width:1061px){.phero.has-snap.ph-wrap .p-field{margin-block:44px!important}}
@media (max-width:1060px){
  .phero.plain.has-snap .wrap{display:grid;grid-template-columns:minmax(0,1fr) 42%;column-gap:14px;align-items:center}
  .phero.plain.has-snap .p-snap{width:auto;max-width:none;margin:22px 0 26px;margin-inline:0 -8px}
  .phero.plain.has-snap .p-snap::before{width:52px;height:52px;inset-inline-end:-14px;bottom:-14px}
  .phero.plain.has-snap .p-snap .p-snap__tape{width:60px;height:18px;inset-inline-start:14px;top:-9px}
}
.life--subj .lf--s1{--w:150px}.life--subj .lf--s2{--w:120px}.life--subj .lf--s3{--w:78px}.life--subj .lf--s4{--w:160px}.life--subj .lf--s5{--w:112px}
@media (max-width:1060px){.life--subj .lf--s1{--w:92px}.life--subj .lf--s2{--w:78px}.life--subj .lf--s4{--w:104px}.life--subj .lf--s5{--w:70px}}

@media (min-width:1061px){
  .life--subj .lf--s1{inset-inline-start:-34px;top:22px}
  .life--subj .lf--s2{inset-inline-end:auto;inset-inline-start:30%;top:-34px}
  .life--subj .lf--s3{inset-inline-start:50%;top:auto;bottom:26%}
  .life--subj .lf--s4{inset-inline-end:auto;inset-inline-start:43%;bottom:-58px}
  .life--subj .lf--s5{inset-inline-start:21%;bottom:-30px}
}
@media (max-width:1060px){.life--subj .lf--s1{bottom:auto;top:-22px;inset-inline-start:38%;--w:76px}}

@media (max-width:1060px){.life--subj .lf--s1{top:47%;inset-inline-start:auto;inset-inline-end:-22px;--w:70px}}

/* audit round 2 (8.11.2026): under 420 px the floating photo no longer squeezes the intro into a narrow column; it stacks under the intro text */
@media (max-width:419.98px){
  .phero.has-snap.ph-wrap .p-copy{display:flex;flex-direction:column}
  .phero.has-snap.ph-wrap .p-copy>.p-snap{float:none;order:1;width:78%;max-width:300px;margin:14px 0 8px;margin-inline:auto 6%}
  .phero.has-snap.ph-wrap .p-copy>.p-act,.phero.has-snap.ph-wrap .p-copy>.p-meta,.phero.has-snap.ph-wrap .p-copy>.p-snap~*:not(.sub,.accent){order:2}
}