/* ==========================================================================
   ARTICLE PAGES — the treatment pages, "on me", and the products page.
   One measure, one rhythm, and the same rounded language as the home page.
   ========================================================================== */
.crumb{
  font-size:12px; letter-spacing:.1em; color:var(--muted);
  margin-block-end:var(--s4);
}
.crumb a{ color:var(--muted); transition:color .25s ease }
.crumb a:hover{ color:var(--ink) }

.art-hero{ padding-block:calc(var(--hdr-h,72px) + var(--s5)) var(--s5) }
.art-hero__grid{
  display:grid; grid-template-columns:minmax(0,1fr) var(--shot-w);
  gap:var(--s5); align-items:stretch;
}
@media (max-width:900px){ .art-hero__grid{ grid-template-columns:1fr } }
.art-hero__h{
  font-size:var(--h1); font-weight:300; line-height:1.1;
  margin-block-start:12px;
}
.art-hero__h strong{ font-weight:800 }
@media (max-width:640px){ .art-hero__h{ font-size:34px } }
.art-hero__lede{
  font-size:19px; line-height:1.7; font-weight:300; color:var(--ink);
  margin-block-start:var(--s3); max-width:52ch;
}
.art-hero__cta{ margin-block-start:var(--s4) }

.art__shot{
  margin:0; border-radius:var(--r-lg); overflow:hidden; background:var(--panel);
  align-self:stretch; width:100%; height:auto; min-height:340px;
}
.art__shot img{ width:100%; height:100%; object-fit:cover; display:block }
.art__shot--empty{ position:relative; aspect-ratio:5/6 }
.art__shot--empty::after{
  content:attr(data-need); position:absolute; inset-block-end:14px; inset-inline-start:14px;
  font-size:11px; letter-spacing:.16em; color:var(--muted);
}
@media (max-width:900px){ .art__shot{ aspect-ratio:5/4; min-height:0 } }

/* one measure for reading, so a long section never runs the full band */
.art__narrow{ max-width:74ch }
.art__narrow p{
  font-size:16px; line-height:1.85; color:var(--text);
  margin-block-start:var(--s3);
}
.art__narrow p:first-of-type{ margin-block-start:0 }

/* the four questions she set on their own lines */
.ask{
  margin-block:var(--s5); padding-inline-start:var(--s4);
  border-inline-start:2px solid var(--line);
}
.ask__q{
  font-size:21px; font-weight:300; line-height:1.5; color:var(--ink);
  margin:0 0 6px;
}

.certs{ margin-block-start:var(--s5) }
.certs .about__fact{ grid-template-columns:1fr }

/* ---- questions and answers --------------------------------------------- */
.faq{ display:grid; gap:12px; max-width:74ch }
.faq-item{
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:0 var(--s4); background:var(--paper);
}
.faq-item summary{
  list-style:none; cursor:pointer; padding-block:var(--s3);
  font-size:17px; font-weight:400; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
}
.faq-item summary::-webkit-details-marker{ display:none }
/* a drawn mark rather than the browser's triangle */
.faq-item summary::after{
  content:""; flex:none; width:14px; height:14px;
  background:
    linear-gradient(var(--ink),var(--ink)) center/14px 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/1px 14px no-repeat;
  transition:transform .3s var(--ease-out,ease);
}
.faq-item[open] summary::after{
  background:linear-gradient(var(--ink),var(--ink)) center/14px 1px no-repeat;
  transform:rotate(180deg);
}
.faq-item__a{ padding-block-end:var(--s3) }
.faq-item__a p{
  font-size:15px; line-height:1.8; color:var(--muted); margin-block-start:10px;
}
.faq-item__a p:first-child{ margin-block-start:0 }

/* ---- the products grid -------------------------------------------------- */
.prods__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5) var(--s4) }
@media (max-width:900px){ .prods__grid{ grid-template-columns:1fr 1fr; gap:var(--s4) var(--s3) } }
.prods__grid .prod__shot{ width:min(100%,224px); margin-inline:auto }
.prod__need{
  display:block; margin-block-start:8px;
  font-size:11px; letter-spacing:.14em; color:var(--muted); opacity:.6; font-style:italic;
}


/* her instruction for this page was "בנקודות לרשום מפחית קמטוטים וקמטים" */
.art-hero__points{ list-style:none; margin:var(--s3) 0 0; padding:0 }
.art-hero__points li{
  position:relative; padding-inline-start:18px;
  font-size:16px; line-height:1.8; color:var(--ink);
}
.art-hero__points li::before{
  content:""; position:absolute; inset-inline-start:0; top:.72em;
  width:6px; height:6px; border-radius:50%; background:var(--ink);
}


/* her quotation — it lives here now, not on the home page */
.pull{ margin:0 0 var(--s5); padding-inline-start:var(--s4);
       border-inline-start:2px solid var(--line) }
.pull__q{ font-size:22px; font-weight:300; line-height:1.5; color:var(--ink); margin:0 }
.pull p:last-child{ margin-block-start:var(--s3); font-size:15px; color:var(--muted) }