html, body, #root { margin: 0; min-height: 100%; }

:root{--peach:#fde3d3;--peach2:#f9c9ae;--lav:#e6defa;--lav2:#9b84d6;--blue:#dcebfa;--ink:#3b1d4f;--soft:#5a4a6b;--bg:#fffaf6}
.hesite,.hesite *{box-sizing:border-box}
.hesite{margin:0;font-family:'Assistant','Noto Sans Hebrew',Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:19px;line-height:1.75}
.hesite a{color:#6a47b8}
.draft{background:#3b1d4f;color:#fff;text-align:center;font-size:14px;padding:6px 10px;line-height:1.4}
.hesite header{background:linear-gradient(180deg,var(--blue),var(--bg));padding:14px 16px 6px}
.brand{font-weight:800;font-size:22px;text-decoration:none;color:var(--ink);display:block;max-width:1040px;margin:0 auto 8px}
.hesite nav{max-width:1040px;margin:0 auto;display:flex;flex-wrap:wrap;gap:6px}
.hesite nav a{text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--lav);border-radius:999px;padding:3px 13px;font-size:16px;line-height:1.6}
.hesite nav a[aria-current="page"]{background:var(--lav2);color:#fff;border-color:var(--lav2)}
.hesite main{max-width:1040px;margin:0 auto;padding:18px 16px 40px}
.hesite h1{font-size:clamp(30px,6vw,46px);line-height:1.25;margin:.3em 0 .4em}
.hesite h2{font-size:clamp(23px,4vw,30px);margin:1.6em 0 .4em;line-height:1.35}
.hesite h3{font-size:21px;margin:0 0 .2em}
.lead{font-size:clamp(20px,3vw,24px);color:var(--soft)}
.hero{background:linear-gradient(135deg,var(--peach),var(--lav) 60%,var(--blue));border-radius:28px;padding:28px 22px;margin:8px 0 24px}
.btn{display:inline-block;background:#6a47b8;color:#fff!important;text-decoration:none;font-weight:700;border-radius:999px;padding:11px 26px;margin:8px 0}
.btn.sec{background:#fff;color:var(--ink)!important;border:2px solid var(--lav2)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:14px 0}
.card{background:#fff;border:1px solid var(--lav);border-radius:20px;padding:16px 18px;text-decoration:none;color:var(--ink);display:block}
.hesite .card p{margin:.2em 0 0;color:var(--soft);font-size:17px;line-height:1.55}
.card.p1{background:var(--peach)}.card.p2{background:var(--lav)}.card.p3{background:var(--blue)}
.note{background:var(--lav);border-radius:16px;padding:12px 18px;margin:20px 0}
.buy{background:var(--peach);border-radius:20px;padding:14px 20px;margin:26px 0;display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between}
.hesite .buy span{font-weight:700}
.cover{width:150px;border-radius:6px;box-shadow:0 6px 20px rgba(59,29,79,.25);float:left;margin:0 18px 8px 0}
.hesite .bookpage .cover{width:min(300px,70%);float:none;display:block;margin:0 auto 16px}
.bookrow{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:800px){.bookrow{grid-template-columns:320px 1fr;align-items:start}.hesite .bookpage .cover{width:100%}}
@media(max-width:700px){.cover.thumb{display:none}}
.hesite ul{padding-inline-start:1.2em}.hesite li{margin:.3em 0}
.hesite footer{border-top:1px solid var(--lav);padding:20px 16px;text-align:center;font-size:15px;color:var(--soft)}
.src{font-size:15px;color:var(--soft)}

.hesite nav a[aria-current="page"]{background:var(--lav2);color:#fff;border-color:var(--lav2)}
.hesite h1,.hesite h2,.hesite h3,.hesite .brand{font-weight:800}
.hesite p{margin:1em 0}
.hesite .card p{margin:.2em 0 0}
.hesite .hero h2{margin-top:0}
.hesite .lead{font-weight:400}
.hesite{min-height:100vh}
.hesite .portrait{width:170px;height:170px;border-radius:22px;object-fit:cover;float:left;margin:4px 20px 12px 0;box-shadow:0 4px 16px rgba(59,29,79,.18)}
@media(max-width:700px){.hesite .portrait{float:none;display:block;margin:0 auto 16px;width:150px;height:150px}}
.hesite .about-hero{display:flex;align-items:center;gap:24px;background:linear-gradient(135deg,var(--peach),var(--lav) 60%,var(--blue));border-radius:28px;padding:24px 26px;margin:8px 0 24px}
.hesite .about-hero h1{margin:0 0 .15em}
.hesite .about-hero .lead{margin:0}
.hesite .about-hero .portrait{float:none;margin:0;flex:0 0 auto;width:150px;height:150px;border-radius:24px}
@media(max-width:700px){.hesite .about-hero{flex-direction:column;text-align:center;padding:22px 18px}.hesite .about-hero .portrait{width:140px;height:140px}}

/* Gentle watercolor cut-outs: no frames, no grounds, the page is the background. */
.hesite .watercolor{display:block;height:auto;mix-blend-mode:multiply;pointer-events:none;box-shadow:none;border:0;border-radius:0}
.hesite .illustrated-head{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:32px;align-items:center}
.hesite .illustrated-head h1{margin-top:.2em}
.hesite .article-watercolor{width:200px;max-height:240px;object-fit:contain}
.hesite .hero-split{display:flex;align-items:center;gap:20px}.hesite .hero-main{flex:1 1 58%;min-width:0}
.hesite .hero-group{flex:0 0 36%;width:36%;max-width:340px;object-fit:contain}
.hesite .book-watercolor{width:170px;height:130px;object-fit:contain;margin:18px auto 0}
.hesite .card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.hesite .card-heading>span{flex:1;min-width:0}
.hesite .card-icon{width:52px;height:52px;object-fit:contain;flex:0 0 52px;mix-blend-mode:multiply;pointer-events:none;border:0;border-radius:0;box-shadow:none}
.hesite .waypoint{display:block;width:32px;height:32px;object-fit:contain;margin:1.2em 0 0;pointer-events:none;mix-blend-mode:multiply}.hesite .wp-h2{margin-top:.3em}
.hesite .little-hello{position:relative;height:76px;width:100%;margin:26px 0 0;overflow:hidden;pointer-events:none;user-select:none;contain:layout paint}
.hesite .little-hello .hello-character{display:block;position:absolute;left:4px;bottom:8px;width:64px;height:64px;object-fit:contain;transform:none;opacity:.95}
.hesite .gentle-peek.peek-ready .hello-character{animation:little-shy-hello 4.5s ease-in-out 1 both}
@keyframes little-shy-hello{0%,12%{transform:translateX(-72px);opacity:0}42%,64%,100%{transform:translateX(0);opacity:.95}}
@media(prefers-reduced-motion:reduce){.hesite .gentle-peek .hello-character,.hesite .gentle-peek.peek-ready .hello-character,.hesite .gentle-peek.peek-leaving .hello-character{animation:none!important;left:4px;right:auto;transform:none;opacity:.95}}
@media(max-width:700px){.hesite .illustrated-head{display:flex;flex-direction:column-reverse;align-items:stretch;gap:4px}.hesite .article-watercolor{width:150px;height:150px;align-self:center}
.hesite .hero-split{flex-direction:column-reverse;gap:6px}.hesite .hero-group{flex:none;width:210px;max-width:70%;align-self:center}.hesite .card-icon{width:46px;height:46px;flex-basis:46px}}
.hesite .cover.thumb{width:118px;margin:4px 0 8px 26px}
.hesite .compact-head{grid-template-columns:minmax(0,1fr) 120px;gap:20px;margin-bottom:6px}.hesite .compact-head .article-watercolor{width:120px;max-height:130px}.hesite .compact-head h1{margin:.1em 0}@media(max-width:700px){.hesite .compact-head{flex-direction:column-reverse}.hesite .compact-head .article-watercolor{width:110px;height:110px}}


/* Clear desktop language switch. Keep the existing phone layout unchanged. */
@media screen and (min-width: 761px) {
  html .x-lang {
    box-sizing: border-box;
    top: 16px;
    bottom: auto;
    inset-inline-start: auto;
    inset-inline-end: 24px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 128px;
    min-height: 48px;
    padding: 12px 20px;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    color: #fff;
    background: #6a47b8;
    border: 2px solid #6a47b8;
    box-shadow: 0 3px 12px rgb(59 29 79 / 0.18);
    white-space: nowrap;
  }
  html .x-lang::before {
    content: "\21C4";
    font-size: 22px;
    line-height: 1;
  }
  html .x-lang:hover { background: #54369b; border-color: #54369b; }
  html .x-lang:focus-visible { outline: 3px solid #985f2c; outline-offset: 4px; }
  /* A separate top row keeps the floating switch clear of both languages' nav. */
  html .sitehead, html .hesite header { padding-top: 82px; }
}
