/* barrahamim.com - עמהות | Hebrew RTL, warm + violet */

:root{
  --cream:#FBF7F3;
  --cream-2:#F4ECE4;
  --cream-3:#EFE4DA;
  --ink:#3B302B;
  --ink-2:#6E5F57;
  --violet:#8A6DC4;
  --violet-2:#C9B8E8;
  --violet-3:#EFE9F8;
  --rose:#C4897A;
  --line:rgba(59,48,43,.12);
  --shadow:0 18px 50px -22px rgba(59,48,43,.30);
  --serif:"Frank Ruhl Libre",Georgia,"Times New Roman",serif;
  --sans:"Assistant","Segoe UI",system-ui,-apple-system,sans-serif;
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:clamp(17px,1.05vw + 14px,19px);
  line-height:1.95;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--violet);text-decoration:none}
a:hover{text-decoration:underline}

.skip{position:absolute;inset-inline-start:-9999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:200}
.skip:focus{inset-inline-start:0}

.wrap{width:min(100% - 2.5rem,var(--maxw));margin-inline:auto}
.wrap.narrow{width:min(100% - 2.5rem,720px)}
.center{text-align:center}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:100;
  background:rgba(251,247,243,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:72px}
.brand{display:flex;align-items:center;gap:.6rem;color:inherit}
.brand:hover{text-decoration:none}
.brand img{width:46px;height:auto}
.brand-t{display:flex;flex-direction:column;line-height:1.15}
.brand-t b{font-family:var(--serif);font-weight:500;font-size:1.22rem;letter-spacing:.02em}
.brand-t i{font-style:normal;font-size:.72rem;letter-spacing:.22em;color:var(--ink-2)}

nav{display:flex;gap:1.9rem}
nav a{color:var(--ink-2);font-size:.95rem;padding:.3rem 0;position:relative}
nav a:hover{color:var(--ink);text-decoration:none}
nav a::after{content:"";position:absolute;bottom:0;inset-inline:0;height:1px;background:var(--violet);transform:scaleX(0);transition:transform .28s}
nav a:hover::after,nav a.on::after{transform:scaleX(1)}
nav a.on{color:var(--ink)}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:.5rem;cursor:pointer}
.burger span{width:24px;height:1.5px;background:var(--ink);transition:.3s}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(340px,52vh,520px);display:grid;place-items:center;overflow:hidden;isolation:isolate}
.hero.tall{min-height:clamp(440px,74vh,700px)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(59,48,43,.30),rgba(59,48,43,.42))}
.hero-in{text-align:center;color:#fff;padding:3rem 1.5rem;max-width:760px}
.hero h1{
  font-family:var(--serif);font-weight:500;margin:0;
  font-size:clamp(2.3rem,6.5vw,4.2rem);line-height:1.18;
  text-shadow:0 2px 26px rgba(0,0,0,.35);
}
.hero .sub{margin:1.1rem 0 0;font-size:clamp(1rem,1.9vw,1.24rem);font-weight:300;letter-spacing:.01em;text-shadow:0 2px 16px rgba(0,0,0,.4)}
.kick{display:block;font-size:.78rem;letter-spacing:.34em;text-transform:uppercase;margin-bottom:1rem;opacity:.92}
.kick.dark{color:var(--violet);opacity:1;font-weight:600}

/* ---------- bands ---------- */
.band{padding:clamp(3.4rem,8vw,6.4rem) 0}
.band.art{background:var(--cream-2)}
.band.cards-band{padding-top:0}
.band.contact{background:linear-gradient(180deg,var(--cream-2),var(--cream-3))}

h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,3.4vw,2.05rem);line-height:1.35;margin:2.8rem 0 1rem;color:var(--ink)}
.prose h2:first-of-type{margin-top:1.6rem}
p{margin:0 0 1.15rem}
.lead{font-family:var(--serif);font-size:clamp(1.13rem,2.3vw,1.38rem);line-height:1.75;color:var(--ink)}
.prose p{color:var(--ink-2)}
.prose .lead{color:var(--ink)}

ul.marks{list-style:none;margin:0 0 1.6rem;padding:0}
ul.marks li{position:relative;padding-inline-start:1.5rem;margin-bottom:.7rem;color:var(--ink-2)}
ul.marks li::before{content:"";position:absolute;inset-inline-start:0;top:.85em;width:7px;height:7px;border-radius:50%;background:var(--violet-2)}

blockquote{
  margin:0 0 2rem;padding:1.6rem 1.8rem;background:var(--violet-3);
  border-inline-start:3px solid var(--violet-2);border-radius:6px;
  font-family:var(--serif);font-size:1.1rem;line-height:1.85;color:var(--ink);
}

.fig{margin:2.6rem 0;border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.fig img{width:100%}

.divider{display:flex;justify-content:center;margin:2.8rem 0}
.divider img{width:56px;opacity:.5}

.sign{font-family:var(--serif);font-size:1.2rem;margin-top:2rem;color:var(--ink)}
.back{margin-top:2.6rem;text-align:center}
.back a{
  display:inline-block;border:1px solid var(--violet);color:var(--violet);
  padding:.75rem 2.2rem;border-radius:999px;font-size:.95rem;transition:.25s;
}
.back a:hover{background:var(--violet);color:#fff;text-decoration:none}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.6rem}
.card{
  background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);
  color:inherit;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s;
}
.card:hover{transform:translateY(-5px);text-decoration:none;box-shadow:0 26px 60px -24px rgba(59,48,43,.42)}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.card-b{padding:1.5rem 1.6rem 1.8rem;display:flex;flex-direction:column;flex:1}
.card-b h3{font-family:var(--serif);font-weight:500;font-size:1.28rem;margin:0 0 .6rem}
.card-b p{color:var(--ink-2);font-size:.95rem;line-height:1.8;flex:1}
.more{color:var(--violet);font-size:.9rem;font-weight:600}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.split .fig{margin:0}
.split-t h2{margin-top:0}
.split-t p{color:var(--ink-2)}

/* ---------- form ---------- */
.form{display:grid;gap:1.15rem;margin:2.6rem 0 1.6rem}
.form label{display:grid;gap:.45rem;font-size:.92rem;color:var(--ink-2)}
.form input,.form textarea{
  font-family:inherit;font-size:1rem;font-weight:300;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:.85rem 1rem;
  transition:border-color .2s,box-shadow .2s;
}
.form input:focus,.form textarea:focus{
  outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(138,109,196,.16);
}
.form textarea{resize:vertical;line-height:1.7}
.form button{
  justify-self:center;margin-top:.6rem;background:var(--violet);color:#fff;border:0;
  font-family:inherit;font-size:1rem;padding:.9rem 3.4rem;border-radius:999px;cursor:pointer;
  transition:background .25s,transform .2s;
}
.form button:hover{background:#775BB0;transform:translateY(-1px)}
/* Honeypot. Clipped rather than pushed off-canvas: a negative offset would
   extend the document sideways and cause horizontal overflow in RTL. */
.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.direct{text-align:center;color:var(--ink-2);font-size:.95rem}
.direct span{margin:0 .6rem;opacity:.45}

/* ---------- extras ---------- */
.callout{background:var(--violet-3);border-radius:12px;padding:2rem;text-align:center;margin-top:3rem}
.callout p{margin:0 0 .5rem}
.callout-t{font-family:var(--serif);font-size:1.25rem;color:var(--ink)}
.creds{background:#fff;border-radius:12px;padding:2rem 2.2rem;margin-top:3rem;box-shadow:var(--shadow)}
.creds h2{margin-top:0;font-size:1.3rem}
.creds ul.marks{margin-bottom:0}
.method{display:flex;align-items:center;gap:1rem;justify-content:center;margin-top:3rem;color:var(--ink-2);font-size:.95rem}
.method img{width:70px;opacity:.9}

.thanks{padding-top:clamp(4rem,12vh,8rem)}
.thanks h1{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,5vw,2.9rem);margin:1.2rem 0 1rem}
.tmark{margin:0 auto;width:84px;opacity:.75}
.bigphone{font-family:var(--serif);font-size:1.7rem;margin:.4rem 0 0}
.bigphone a{color:var(--violet)}

.social{display:flex;gap:1.1rem;justify-content:center;margin:1.2rem 0}
.social a{opacity:.75;transition:opacity .2s,transform .2s}
.social a:hover{opacity:1;transform:translateY(-2px)}
.social.big{margin:1.8rem 0}

/* ---------- footer ---------- */
footer.site{background:var(--cream-3);border-top:1px solid var(--line);padding:3.4rem 0 3rem;text-align:center}
.fmark{margin:0 auto .9rem;width:58px;opacity:.6}
.fbrand{font-family:var(--serif);font-size:1.16rem;margin:0 0 .2rem}
.fline{font-size:.85rem;letter-spacing:.16em;color:var(--ink-2);margin:0}
.fcontact{font-size:.92rem;color:var(--ink-2);margin:.4rem 0 0}
.fcontact a{color:var(--ink-2)}
.fcontact span{margin:0 .55rem;opacity:.45}

.wa-float{
  position:fixed;inset-inline-end:18px;bottom:18px;z-index:90;
  width:54px;height:54px;border-radius:50%;background:#fff;
  display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(59,48,43,.45);
  transition:transform .25s;
}
.wa-float:hover{transform:scale(1.07)}
.wa-float img{width:32px}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .split{grid-template-columns:1fr}
  .burger{display:flex}
  nav{
    position:fixed;inset:72px 0 auto;background:var(--cream);
    flex-direction:column;gap:0;padding:.5rem 0 1.2rem;
    border-bottom:1px solid var(--line);
    transform:translateY(-120%);transition:transform .32s ease;
    max-height:calc(100vh - 72px);overflow:auto;
  }
  body.nav-open nav{transform:translateY(0)}
  nav a{padding:.95rem 1.4rem;font-size:1.02rem;border-bottom:1px solid var(--line)}
  nav a::after{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}