/* ============================================================
   Rakefet Paz · מאמנת מנטלית
   Palette sampled from her own material:
     paper   #FFFFFF   the ground of her logo and every IG graphic
     cream   #F4E7DF   the cream circle in her logo
     greige  #E8E2E4   the mauve circle in her logo
     blue    #6F9DAC   her Instagram accent (headlines, heart-line)
     rose    #E0858C   her Instagram underline stroke
   Signature: the hand-drawn line-with-a-heart she draws under
   every post — used here as the divider between sections,
   redrawn in a different shape each time.
   ============================================================ */

:root{
  --paper:   #FFFFFF;
  --cream:   #F4E7DF;
  --greige:  #E8E2E4;
  --blue:    #6F9DAC;
  --blue-ink:#3D6478;   /* darker shade for text — 6.4:1 on white */
  --rose:    #E0858C;
  --ink:     #171214;
  --ink-soft:#5C5052;

  --display: "Playpen Sans Hebrew", "Assistant", sans-serif;
  --body:    "Assistant", "Segoe UI", system-ui, sans-serif;
  --latin:   "Bellefair", "Times New Roman", serif;

  --hair: 1px solid #E9E2DF;
  --head-h: 4.75rem;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --ease: cubic-bezier(.22,.61,.36,1);
  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }

::selection{ background:var(--blue); color:#fff; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  font-size:1.0625rem;
  line-height:1.75;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }

.wrap{
  width:100%;
  max-width:72rem;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap--narrow{ max-width:52rem; }

.vh{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

.hero,.about,.voice,.feed,.contact,.page-head,.empty{
  scroll-margin-top:calc(var(--head-h) + .5rem);
}

.skip{
  position:absolute; inset-inline-start:0; top:0; z-index:99;
  background:var(--ink); color:#fff; padding:.75rem 1.25rem;
  transform:translateY(-130%);
}
.skip:focus{ transform:translateY(0); }

:where(a,button,summary):focus-visible{
  outline:2px solid var(--blue-ink);
  outline-offset:3px;
}

/* ── shared type ──────────────────────────────────────────── */

.eyebrow{
  margin:0 0 1.1rem;
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.2em;
  color:var(--blue-ink);
}

.h2{
  margin:0 0 1.25rem;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.9rem,4vw,2.75rem);
  line-height:1.25;
  text-wrap:balance;
}

.prose p{ margin:0 0 1.15em; color:var(--ink-soft); }
.prose p:last-child{ margin-bottom:0; }

.btn{
  display:inline-block;
  padding:.85rem 2rem;
  min-height:44px;
  border:1px solid var(--blue);
  border-radius:999px;
  color:var(--blue-ink);
  font-size:.95rem;
  letter-spacing:.04em;
  text-decoration:none;
  background:transparent;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn:hover{ background:var(--blue-ink); border-color:var(--blue-ink); color:#fff; }

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  min-height:44px;
  color:var(--blue-ink);
  font-size:.95rem;
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.link-arrow::after{ content:"←"; transition:transform .35s var(--ease); }
.link-arrow:hover{ border-bottom-color:var(--blue); }
.link-arrow:hover::after{ transform:translateX(-.3em); }

/* ── dividers: her hand-drawn mark, a different shape each time ── */

.divider{
  display:block;
  margin-inline:auto;
  color:var(--blue);
}
.divider--heart{ width:min(80%,22rem); }
.divider--stroke{ width:min(60%,14rem); color:var(--rose); }
.divider--arc{ width:min(70%,18rem); }
.divider--wave{ width:min(78%,20rem); }

.divider-slot{ padding-block:clamp(2.75rem,6vw,4.5rem); }
.divider-slot--tight{ padding-block:clamp(1.75rem,4vw,2.75rem); }

/* ── masthead ─────────────────────────────────────────────── */

.masthead{
  position:sticky; top:0; z-index:40;
  background:var(--paper);
  border-bottom:1px solid transparent;
  transition:border-color .3s linear;
}
.masthead.is-stuck{ border-bottom-color:#EFE7E4; }

.masthead__inner{
  max-width:72rem;
  margin-inline:auto;
  padding-inline:var(--gutter);
  min-height:var(--head-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}

.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.brand__mark{
  position:relative; flex:none;
  width:2.15rem; height:2.15rem;
  isolation:isolate;
}
.brand__c{ position:absolute; border-radius:50%; mix-blend-mode:multiply; }
.brand__c--cream{ inset:0 0 auto auto; width:66%; height:66%; background:var(--cream); }
.brand__c--greige{ inset:auto auto 0 0; width:78%; height:78%; background:var(--greige); }

.brand__type{ display:block; line-height:1; }
.brand__name{ display:block; font-family:var(--latin); font-size:1.4rem; letter-spacing:.01em; }
.brand__role{
  display:block; margin-top:.2rem;
  font-size:.5625rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--ink-soft);
}

.nav__list{ display:flex; align-items:center; gap:.35rem; }
.nav__list a{
  display:inline-flex; align-items:center;
  min-height:44px; padding:0 .9rem;
  font-size:.95rem; text-decoration:none;
  position:relative;
}
.nav__list a::after{
  content:"";
  position:absolute; inset-inline:.9rem; bottom:.85rem;
  height:1px; background:var(--blue);
  transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav__list a:hover::after,
.nav__list a[aria-current="page"]::after{ transform:scaleX(1); }

a.nav__cta{
  margin-inline-start:.5rem;
  border:1px solid var(--greige);
  border-radius:999px;
  padding:0 1.25rem;
  color:var(--blue-ink);
  transition:border-color .35s var(--ease);
}
a.nav__cta::after{ display:none; }
a.nav__cta:hover{ border-color:var(--blue); }

.burger{
  display:none; position:relative;
  width:44px; height:44px;
  border:0; background:transparent; cursor:pointer; padding:0;
}
.burger__bar{
  position:absolute; top:50%; left:50%;
  width:22px; height:1px; margin-left:-11px;
  background:var(--ink);
  transition:transform .35s var(--ease);
}
.burger__bar:first-child{ transform:translateY(-3.5px); }
.burger__bar:last-child{ transform:translateY(3.5px); }
.burger[aria-expanded="true"] .burger__bar:first-child{ transform:rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:last-child{ transform:rotate(-45deg); }

/* ── hero ─────────────────────────────────────────────────── */

.hero{ padding-block:clamp(2.5rem,5vw,4.5rem) clamp(2rem,4vw,3rem); }

.hero__grid{
  display:grid;
  gap:clamp(2.5rem,6vw,4.5rem);
  align-items:center;
}

.hero__title{
  margin:0 0 1.5rem;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2rem,4.6vw,3.15rem);
  line-height:1.25;
  text-wrap:balance;
}

.hero__lead{
  margin:0 0 2rem;
  max-width:36ch;
  font-weight:300;
  font-size:clamp(1.05rem,1.5vw,1.22rem);
  line-height:1.8;
  color:var(--ink-soft);
}
.hero__lead strong{ font-weight:600; color:var(--ink); }

.hero__actions{
  margin:0;
  display:flex; flex-wrap:wrap; align-items:center;
  gap:1rem 1.75rem;
}

.portrait{
  position:relative;
  margin:0 auto;
  width:100%; max-width:27rem;
  aspect-ratio:1;
  isolation:isolate;
}
.portrait__c{ position:absolute; border-radius:50%; mix-blend-mode:multiply; }
.portrait__c--cream{ top:0; inset-inline-end:0; width:54%; height:54%; background:var(--cream); }
.portrait__c--greige{ top:19%; inset-inline-end:15%; width:44%; height:44%; background:var(--greige); }

.portrait__img{
  position:absolute;
  bottom:0; inset-inline-start:0;
  width:84%; height:84%;
  border-radius:50%;
  object-fit:cover;
  z-index:2;
}
.portrait__ring{
  position:absolute;
  bottom:-2.5%; inset-inline-start:-2.5%;
  width:89%; height:89%;
  border:1px solid var(--blue);
  border-radius:50%;
  opacity:.5;
  z-index:1;
}

@media (min-width:64rem){
  .hero__grid{ grid-template-columns:1.1fr .9fr; }
  .hero__portrait{ transform:translateY(1rem); }
}
@media (min-width:48rem) and (max-width:63.99rem){
  .portrait{ margin-inline-start:auto; margin-inline-end:0; }
}

/* ── about (centred — no image) ───────────────────────────── */

.about{ padding-block:clamp(1rem,2vw,2rem); }
.about__inner{ text-align:center; }
.about__inner .prose{
  max-width:44ch;
  margin-inline:auto;
  font-size:1.06rem;
}

/* ── her own words ────────────────────────────────────────── */

.voice{
  padding-block:clamp(3.5rem,7vw,5.5rem);
  background:var(--cream);
  text-align:center;
}
.voice__quote{
  margin:0 auto;
  max-width:24ch;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.35rem);
  line-height:1.45;
}
.voice__attr{
  margin:1.75rem 0 0;
  font-size:.78rem;
  letter-spacing:.2em;
  color:var(--ink-soft);
}

/* ── instagram feed ───────────────────────────────────────── */

.feed{ padding-block:clamp(1rem,2vw,2rem); text-align:center; }
.feed__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(.6rem,1.6vw,1rem);
  margin-block:clamp(1.75rem,4vw,2.5rem);
}
.feed__item{
  display:block;
  overflow:hidden;
  border-radius:.35rem;
  background:var(--greige);
}
.feed__item img{
  width:100%; aspect-ratio:1; object-fit:cover;
  transition:transform .6s var(--ease);
}
.feed__item:hover img{ transform:scale(1.04); }

@media (min-width:48rem){
  .feed__grid{ grid-template-columns:repeat(4,1fr); }
}

/* ── contact ──────────────────────────────────────────────── */

.contact{ padding-block:clamp(3rem,6vw,5rem); }
.contact__grid{ display:grid; gap:clamp(2.5rem,5vw,4rem); align-items:start; }
.contact__lead{
  margin:0;
  max-width:34ch;
  font-weight:300;
  font-size:clamp(1rem,1.35vw,1.13rem);
  line-height:1.8;
  color:var(--ink-soft);
}

.channel{ border-top:var(--hair); }
.channels .channel:last-child{ border-bottom:var(--hair); }
.channel a{
  display:grid; gap:.15rem;
  padding-block:1.15rem; min-height:44px;
  text-decoration:none;
  transition:padding-inline-start .4s var(--ease);
}
.channel__label{
  font-family:var(--latin);
  font-size:.95rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--blue-ink);
}
.channel__value{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.05rem,2vw,1.35rem);
  unicode-bidi:isolate;
  text-align:right;
  transition:color .3s linear;
}
.channel a:hover{ padding-inline-start:.6rem; }
.channel a:hover .channel__value{ color:var(--blue-ink); }

@media (min-width:64rem){
  .contact__grid{ grid-template-columns:1fr 1fr; }
  .channels{ padding-top:.35rem; }
}

/* ── inner pages ──────────────────────────────────────────── */

.page-head{
  padding-block:clamp(3rem,6vw,5rem) clamp(1rem,2vw,1.5rem);
  text-align:center;
}
.page-head__lead{
  margin:0 auto;
  max-width:40ch;
  font-weight:300;
  color:var(--ink-soft);
  line-height:1.8;
}

.empty{
  padding-block:clamp(1.5rem,3vw,2.5rem) clamp(4rem,8vw,6.5rem);
  text-align:center;
}
.empty__card{
  max-width:34rem;
  margin-inline:auto;
  padding:clamp(2.25rem,5vw,3.25rem) clamp(1.5rem,4vw,2.75rem);
  background:var(--cream);
  border-radius:1.25rem;
}
.empty__title{
  margin:0 0 .75rem;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.35rem,2.6vw,1.75rem);
  line-height:1.35;
}
.empty__text{
  margin:0 0 1.75rem;
  color:var(--ink-soft);
  font-weight:300;
}
.empty__actions{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:1rem 1.5rem;
}

/* ── legal pages ──────────────────────────────────────────── */

.legal{ padding-block:clamp(1rem,2vw,2rem) clamp(4rem,8vw,6rem); }
.legal__body{ max-width:42rem; margin-inline:auto; }
.legal__updated{
  margin:0 0 2.5rem;
  text-align:center;
  font-size:.85rem;
  color:var(--ink-soft);
  opacity:.75;
}
.legal__body h2{
  margin:2.25rem 0 1rem;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.2rem,2.1vw,1.5rem);
  line-height:1.35;
}
.legal__body h2:first-child{ margin-top:0; }
.legal__body p{ margin:0 0 1.15em; color:var(--ink-soft); }
.legal__body p:last-child{ margin-bottom:0; }
.legal__body ul{
  margin:0 0 1.15em;
  padding-inline-start:1.3em;
  list-style:disc;
  color:var(--ink-soft);
}
.legal__body li{ margin-bottom:.5em; }
.legal__body li:last-child{ margin-bottom:0; }
.legal__body a{ color:var(--blue-ink); text-decoration:underline; text-underline-offset:.2em; }

/* ── footer ───────────────────────────────────────────────── */

.foot{ padding-block:clamp(2.75rem,5vw,3.75rem); background:var(--cream); }
.foot__inner{ display:grid; gap:1.5rem; justify-items:center; text-align:center; }
.foot__logo{ width:10.5rem; height:auto; mix-blend-mode:multiply; }

.foot__nav{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.25rem 1.5rem;
}
.foot__nav a{
  display:inline-flex; align-items:center;
  min-height:44px;
  font-size:.95rem; text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .3s linear;
}
.foot__nav a:hover{ border-bottom-color:var(--blue); }

.foot__legal{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.25rem 1.25rem;
}
.foot__legal a{
  font-size:.8rem;
  color:var(--ink-soft);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .3s linear;
}
.foot__legal a:hover{ border-bottom-color:var(--blue); }

.foot__fine{
  margin:0; max-width:34ch;
  font-size:.78rem; line-height:1.6;
  color:var(--ink-soft); opacity:.75;
}
.foot__rights{
  margin:0;
  font-family:var(--latin);
  font-size:.85rem; letter-spacing:.14em;
  color:var(--ink-soft);
}

/* ── mobile nav ───────────────────────────────────────────── */

@media (max-width:63.99rem){
  .burger{ display:block; }
  .nav{
    position:fixed;
    inset:var(--head-h) 0 auto 0;
    background:var(--paper);
    border-bottom:1px solid #EFE7E4;
    transform:translateY(-8%);
    opacity:0; visibility:hidden;
    transition:opacity .3s linear, transform .35s var(--ease), visibility .3s linear;
  }
  .nav.is-open{ transform:translateY(0); opacity:1; visibility:visible; }
  .nav__list{
    flex-direction:column; align-items:stretch; gap:0;
    padding:.5rem var(--gutter) 1.75rem;
  }
  .nav__list a{
    min-height:56px; padding:0;
    font-family:var(--display); font-size:1.25rem;
    border-bottom:var(--hair);
  }
  .nav__list a::after{ display:none; }
  a.nav__cta{
    margin:1.25rem 0 0;
    padding:0 1.5rem;
    justify-content:center;
    border-color:var(--blue);
    border-radius:999px;
    font-family:var(--body);
    font-size:1rem;
  }
}

/* ── reveal ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference){
  .js [data-reveal]{
    opacity:0;
    transform:translateY(1.1rem);
    transition:opacity .85s var(--ease), transform .85s var(--ease);
  }
  .js [data-reveal-delay="1"]{ transition-delay:.09s; }
  .js [data-reveal-delay="2"]{ transition-delay:.18s; }
  .js [data-reveal-delay="3"]{ transition-delay:.27s; }
  .js [data-reveal].is-in{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}