/* ============================================================
   HEALTH JOURNAL
   ============================================================ */
.jx__top, .art__top{ background:var(--ground-2); padding:calc(104px + env(safe-area-inset-top,0px)) 0 clamp(30px,4.5vh,50px); border-bottom:1px solid var(--line); }
.crumbs{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; font-size:.78rem; color:var(--muted); margin-bottom:1.2rem; }
.crumbs a{ color:var(--accent-dk); font-weight:700; }
.jx__top h1{ font-family:var(--f-display); font-size:clamp(2.1rem,5vw,3.6rem); line-height:1.05; letter-spacing:-.02em; color:var(--ink); margin:0; }
.jx__top h1 em{ font-style:italic; font-weight:400; color:var(--accent-dk); }
.jx__lede{ margin:1.2rem 0 0; max-width:64ch; font-size:clamp(1rem,1.2vw,1.1rem); line-height:1.7; color:var(--body); }

.jx__tools{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; margin-top:2rem; }
.jx__find{ position:relative; flex:1 1 260px; max-width:340px; }

/* ---- the service the search matched ------------------------------------
   A panel, not a card in the grid: it is a different kind of answer from an
   article, and it should not look like one. */
.svcprompt[hidden]{ display:none !important; }
.svcprompt{
  display:grid; grid-template-columns:auto 1fr auto; gap:1.15rem; align-items:center;
  margin-top:clamp(20px,3vh,30px);
  padding:1.25rem clamp(1.1rem,2vw,1.6rem);
  background:var(--accent-pale); border:1.5px solid var(--accent-soft);
  border-radius:20px;
  animation:svcin .5s var(--ease) both;
}
@keyframes svcin{ from{ opacity:0; transform:translateY(-8px) } to{ opacity:1; transform:none } }
.svcprompt__ico{
  flex:none; width:54px; height:54px; border-radius:17px; display:grid; place-items:center;
  background:var(--accent); color:#fff; line-height:0;
}
.svcprompt__ico svg{ width:26px; height:26px; }
.svcprompt__k{
  margin:0 0 .2rem; font-size:.68rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-dk);
}
.svcprompt__h{ margin:0; font-family:var(--f-display); font-size:1.12rem; font-weight:700; color:var(--ink); }
.svcprompt__p{ margin:.25rem 0 0; font-size:.88rem; line-height:1.5; color:var(--body); }
.svcprompt__go{ display:flex; gap:.5rem; flex-wrap:wrap; }
.svcprompt__go .btn{ white-space:nowrap; }
@media (max-width:860px){
  .svcprompt{ grid-template-columns:auto 1fr; }
  .svcprompt__go{ grid-column:1 / -1; }
}
@media (prefers-reduced-motion:reduce){ .svcprompt{ animation:none; } }
.jx__find svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--muted); pointer-events:none; }
.jx__find input{ width:100%; padding:.68rem .8rem .68rem 34px; border:1px solid var(--line-2); border-radius:10px; background:var(--card); font:inherit; font-size:.9rem; color:var(--ink); }
.jx__find input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.jx__cats{ display:flex; flex-wrap:wrap; gap:.45rem; }
.jx__cats button{
  font:inherit; font-size:.8rem; font-weight:700; cursor:pointer;
  padding:.5rem 1rem; border-radius:999px; border:1px solid var(--line-2);
  background:var(--card); color:var(--body); transition:all .3s var(--ease);
}
.jx__cats button:hover{ border-color:var(--accent); color:var(--accent-dk); }
.jx__cats button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.jx__count{ margin:1.1rem 0 0; font-size:.82rem; color:var(--muted); }

.jx{ background:var(--ground); }
.jx__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:clamp(14px,1.8vw,22px); }
.jx__grid > *{ min-width:0; }
.jcard{
  position:relative; display:flex; flex-direction:column; gap:.55rem;
  padding:clamp(20px,2.2vw,28px); border-radius:16px; overflow:hidden;
  background:var(--card); border:1px solid var(--line);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .35s var(--ease);
}
/* a card with artwork puts the picture flush to the top edge */
.jcard--art{ padding:0; gap:0; }
.jcard__body{ display:flex; flex-direction:column; gap:.55rem; flex:1; padding:clamp(18px,2vw,24px); }

/* ---- the placeholder artwork ----
   Generated rather than photographed, so the journal reads as finished while
   real photography is still being shot. Give an article an "img" and the
   photograph replaces this with no other change. */
.jart{ display:block; position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--accent-pale); }
.jart__svg, .jart__img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.jcard:hover .jart__svg, .jcard:hover .jart__img{ transform:scale(1.04); }

.art__hero{ margin:clamp(24px,4vh,40px) 0 0; }
.art__hero .jart, .art__hero > svg, .art__hero > img{ border-radius:16px; }
.art__hero .jart__svg, .art__hero .jart__img{
  display:block; width:100%; aspect-ratio:16/7; object-fit:cover; border-radius:16px;
}
.art__hero figcaption{ margin:.7rem 0 0; font-size:.78rem; color:var(--muted); }
.jcard:hover{ transform:translateY(-5px); border-color:rgba(var(--accent-rgb),.4); box-shadow:0 24px 44px -26px rgba(var(--accent-rgb),.5); }
.jcard__cat{ font-size:.62rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-dk); }
.jcard__h{ font-family:var(--f-display); font-size:1.08rem; font-weight:600; color:var(--ink); line-height:1.3; letter-spacing:-.01em; }
.jcard__d{ font-size:.88rem; color:var(--body); line-height:1.55; }
.jcard__foot{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-top:auto; padding-top:.9rem; }
.jcard__read{ font-size:.74rem; color:var(--muted); font-weight:600; }
.jcard__go{ display:inline-flex; align-items:center; gap:.4rem; font-size:.68rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--accent-dk); transition:gap .35s var(--ease); }
.jcard__go svg{ width:12px; height:12px; }
.jcard:hover .jcard__go{ gap:.72rem; }
.jcard.hide{ display:none; }
.js .jcard{ opacity:0; transform:translateY(16px); }
.js .jcard.in{ opacity:1; transform:none; transition:opacity .5s var(--ease), transform .6s var(--spring); }
.js .jcard.in:hover{ transform:translateY(-5px); }
.jx__none{ margin:1.4rem 0 0; color:var(--body); }

.jx__close{ background:var(--ground-2); text-align:center; }
.jx__close .lede{ margin:1rem auto 0; max-width:60ch; }
.jx__closebtns{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:2rem; }

/* ---- the article ---- */
.art__wrap{ max-width:760px; }
.art__cat{ font-size:.68rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--accent-dk); margin:0 0 .7rem; }
.art__top h1{ font-family:var(--f-display); font-size:clamp(1.9rem,4.2vw,3rem); line-height:1.1; letter-spacing:-.02em; color:var(--ink); margin:0; }
.art__top h1 em{ font-style:italic; font-weight:400; color:var(--accent-dk); }
.art__stand{ margin:1.2rem 0 0; font-size:clamp(1.02rem,1.3vw,1.15rem); line-height:1.7; color:var(--body); }
.art__meta{ display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; margin:1.6rem 0 0; font-size:.78rem; color:var(--muted); }
.art__meta span{ display:inline-flex; align-items:center; gap:.4rem; }
.art__meta span + span::before{ content:""; width:3px; height:3px; border-radius:50%; background:var(--line-2); }

.art{ background:var(--ground); padding-bottom:clamp(40px,7vh,80px); }
.art__key{
  margin:clamp(26px,4vh,44px) 0 0; padding:clamp(20px,2.4vw,30px);
  border-radius:16px; background:var(--accent-pale); border:1px solid rgba(var(--accent-rgb),.22);
}
.art__key h2{ font-family:var(--f-display); font-size:.74rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-dk); margin:0 0 .9rem; }
.art__key ul{ margin:0; padding-left:1.1rem; display:grid; gap:.55rem; color:var(--ink); font-size:.95rem; line-height:1.6; }
.art__key li::marker{ color:var(--accent); }

.art__body{ margin-top:clamp(26px,4vh,44px); }
.art__body h2{ font-family:var(--f-display); font-size:clamp(1.3rem,2.1vw,1.65rem); font-weight:600; color:var(--ink); line-height:1.25; letter-spacing:-.01em; margin:2.4rem 0 .9rem; }
.art__body h3{ font-family:var(--f-display); font-size:1.05rem; font-weight:700; color:var(--ink); margin:1.8rem 0 .6rem; }
.art__body p{ margin:0 0 1.05rem; color:var(--body); font-size:1rem; line-height:1.8; }
.art__body ul, .art__body ol{ margin:0 0 1.2rem; padding-left:1.2rem; display:grid; gap:.5rem; color:var(--body); font-size:1rem; line-height:1.7; }
.art__body li::marker{ color:var(--accent); }
.art__body strong{ color:var(--ink); font-weight:700; }
.art__body a{ color:var(--accent-dk); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.art__body > *:first-child{ margin-top:0; }
.art__note{ background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:12px; padding:1.1rem 1.3rem; margin:1.6rem 0; }
.art__note p{ margin:0; font-size:.94rem; }
.art__note p + p{ margin-top:.7rem; }
.art__warn{ border-left-color:var(--warm); background:rgba(var(--warm-rgb),.07); }

.art__faq{ margin-top:clamp(30px,5vh,52px); }
.art__faq h2{ font-family:var(--f-display); font-size:clamp(1.3rem,2.1vw,1.65rem); font-weight:600; color:var(--ink); margin:0 0 1.1rem; }
.art__faq details{ border-bottom:1px solid var(--line); }
.art__faq summary{ cursor:pointer; list-style:none; padding:1.05rem 2rem 1.05rem 0; position:relative; font-family:var(--f-display); font-size:1rem; font-weight:600; color:var(--ink); }
.art__faq summary::-webkit-details-marker{ display:none; }
.art__faq summary::after{ content:""; position:absolute; right:4px; top:50%; width:9px; height:9px; margin-top:-6px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg); transition:transform .3s var(--ease); }
.art__faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.art__faq details > div{ padding:0 0 1.1rem; }
.art__faq p{ margin:0; color:var(--body); font-size:.96rem; line-height:1.75; }

.art__cta{ margin-top:clamp(30px,5vh,52px); padding:clamp(24px,3vw,38px); border-radius:18px; background:var(--deep); color:rgba(var(--on-deep-rgb),.82); }
.art__ctak{ font-size:.68rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--accent-lt); margin:0 0 .6rem; }
.art__cta h2{ font-family:var(--f-display); font-size:clamp(1.3rem,2.2vw,1.75rem); font-weight:600; color:#fff; margin:0 0 .8rem; line-height:1.2; }
.art__cta p{ margin:0; font-size:.98rem; line-height:1.7; max-width:56ch; }
.art__ctabtns{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }
.art__cta .btn--line{ border-color:rgba(255,255,255,.4); color:#fff; }
.art__cta .btn--line:hover{ background:rgba(255,255,255,.12); }

/* the journal index: tools straight under the hero, then the grid */
/* the journal hero: clinic photographs on a slow cross-fade */
.hero__media--rotate img{
  position:absolute; top:0; left:0; width:100%; height:112%;
  opacity:0; transition:opacity 1.8s var(--ease);
  animation:none;
}
.hero__media--rotate img.on{ opacity:1; animation:kb 14s var(--ease) both; }
.hero__dots{ position:absolute; z-index:3; right:var(--gutter); bottom:1.4rem; display:flex; gap:.4rem; }
.hero__dots i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.4); transition:background .4s var(--ease), transform .4s var(--ease); }
.hero__dots i.on{ background:#fff; transform:scale(1.3); }
@media (prefers-reduced-motion:reduce){ .hero__media--rotate img{ transition:none; } .hero__media--rotate img.on{ animation:none; } }
.jx__bar{ padding-top:clamp(34px,5vh,54px); padding-bottom:0; }
.jx__bar .jx__tools{ margin-top:1.8rem; }
.jx__bar + .wrap .svcprompt{ margin-top:1.2rem; }
.jx__bar ~ .sec.jx{ padding-top:clamp(22px,3vh,34px); }
.art__disc{ margin:clamp(24px,4vh,40px) 0 0; font-size:.82rem; line-height:1.65; color:var(--muted); }
.art__disc strong{ color:var(--body); }

.art__more{ margin-top:clamp(34px,6vh,64px); padding-top:clamp(28px,4vh,44px); border-top:1px solid var(--line); }
.art__more h2{ font-family:var(--f-display); font-size:1.3rem; font-weight:600; color:var(--ink); margin:0 0 1.2rem; }
.art__morecards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; margin-bottom:1.6rem; }
.art__morecards > *{ min-width:0; }
.js .art__morecards .jcard{ opacity:1; transform:none; }

@media (max-width:620px){
  .jx__tools{ flex-direction:column; align-items:stretch; }
  .jx__find{ max-width:none; }
}
@media (prefers-reduced-motion:reduce){
  .jcard, .jx__cats button, .jcard__go, .art__faq summary::after{ transition:none; }
  .jcard:hover{ transform:none; }
}