/* HealSpace articles — shared styles. Tokens come from /colors_and_type.css. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:84px}
body{margin:0;background:var(--hs-cream);color:var(--hs-ink-2);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--hs-sky-deep)}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}

/* header */
.hs-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--hs-line-soft)}
.hs-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px}
.hs-head img{height:48px;width:auto;display:block}
.hs-nav{display:flex;align-items:center;gap:28px}
.hs-nav a{font-family:var(--font-display);font-weight:500;font-size:15px;color:var(--hs-teal);text-decoration:none}
.hs-nav a:hover{color:var(--hs-sky)}

/* buttons */
.btn{font-family:var(--font-display);font-weight:600;font-size:15px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:9px;padding:13px 26px;text-decoration:none;white-space:nowrap;transition:all var(--dur) var(--ease-soft)}
.btn-primary{background:var(--hs-sky);color:#fff;box-shadow:var(--shadow-sky)}
.btn-primary:hover{background:var(--hs-sky-deep)}
.hs-nav .btn{color:#fff;padding:9px 18px;font-size:14px}

/* breadcrumb + eyebrow */
.crumbs{font-family:var(--font-display);font-size:13px;color:var(--hs-ink-3);margin:28px 0 0}
.crumbs a{color:var(--hs-ink-2);text-decoration:none}
.crumbs a:hover{color:var(--hs-sky-deep)}
.eyebrow{font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--hs-gold-deep);margin:0}

/* article */
.article{max-width:760px;margin:0 auto;padding:0 32px 24px}
.article h1{font-size:clamp(30px,4vw,44px);line-height:1.15;color:var(--hs-teal);margin:12px 0 18px;text-wrap:balance}
.byline{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--hs-ink-3);margin:0 0 26px;padding:0 0 18px;border-bottom:1px solid var(--hs-line)}
.byline strong{color:var(--hs-teal);font-weight:700}
.answer{background:var(--hs-sky-soft);border-radius:var(--r-lg);padding:22px 26px;margin:0 0 30px}
.answer p{margin:0;font-size:18px;line-height:1.6;color:var(--hs-teal)}
.article h2{font-size:clamp(22px,2.4vw,28px);color:var(--hs-teal);margin:40px 0 12px}
.article h3{font-size:19px;color:var(--hs-teal);margin:26px 0 8px}
.article p{font-size:17px;line-height:1.7;margin:0 0 16px}
.article ul,.article ol{margin:0 0 18px;padding-left:22px}
.article li{font-size:17px;line-height:1.65;margin:0 0 8px}
.article li strong,.article p strong{color:var(--hs-teal)}
.callout{display:flex;gap:14px;align-items:flex-start;background:var(--hs-sprout-soft);border-radius:var(--r-lg);padding:20px 24px;margin:26px 0}
.callout p{margin:0;font-size:16.5px;color:var(--hs-teal)}
.crisis{background:var(--hs-coral-soft);border-radius:var(--r-lg);padding:20px 24px;margin:30px 0}
.crisis p{margin:0 0 8px;font-size:16px;color:var(--hs-teal)}
.crisis p:last-child{margin:0}

/* faq */
.faq{display:flex;flex-direction:column;gap:12px;margin:8px 0 10px}
.faq details{background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow-sm);padding:0 22px}
.faq summary{cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:600;font-size:16.5px;color:var(--hs-teal);padding:18px 30px 18px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:14px;font-size:24px;font-weight:400;color:var(--hs-sky)}
.faq details[open] summary::after{content:"–"}
.faq details p{font-size:16px;line-height:1.6;margin:0;padding:0 0 18px}

/* reviewer + sources */
.reviewer{display:flex;gap:16px;align-items:center;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:20px 24px;margin:36px 0 0}
.reviewer img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.reviewer p{margin:0;font-size:15px;line-height:1.5}
.reviewer p strong{color:var(--hs-teal)}
.sources{margin:30px 0 0;padding:18px 0 0;border-top:1px solid var(--hs-line)}
.sources h2{font-size:17px;margin:0 0 10px}
.sources li{font-size:14.5px}
.disclaimer{font-size:14px !important;color:var(--hs-ink-3);margin-top:22px !important}

/* cta */
.cta{background:var(--hs-sky-soft);border-radius:var(--r-xl);padding:34px 32px;margin:40px 0 0;text-align:center}
.cta h2{margin:0 0 10px !important}
.cta p{max-width:520px;margin:0 auto 20px !important}

/* index cards */
.list-head{max-width:760px;margin:0 auto;padding:40px 32px 10px;text-align:center}
.list-head h1{font-size:clamp(30px,4vw,44px);color:var(--hs-teal);margin:12px 0 12px}
.list-head p{font-size:17px;line-height:1.6;margin:0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;padding:30px 0 10px;margin:0;list-style:none}
.cards li{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:26px 24px;display:flex;flex-direction:column;gap:10px}
.cards .tag{align-self:flex-start;font-family:var(--font-display);font-weight:600;font-size:12px;padding:5px 12px;border-radius:var(--r-pill);background:var(--hs-gold-soft);color:#8a6a00}
.cards h2{font-size:19px;line-height:1.3;margin:0}
.cards h2 a{color:var(--hs-teal);text-decoration:none}
.cards h2 a:hover{color:var(--hs-sky-deep)}
.cards p{font-size:15px;line-height:1.55;margin:0}
.cards .meta{font-size:13px;color:var(--hs-ink-3)}

/* footer */
.hs-foot{border-top:1px solid var(--hs-line-soft);margin-top:56px}
.hs-foot .wrap{padding-top:36px;padding-bottom:28px;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:20px}
.hs-foot img{height:42px;width:auto;display:block;margin-bottom:12px}
.hs-foot p{font-size:13.5px;line-height:1.6;color:var(--hs-ink-3);margin:0}
.hs-foot a{color:var(--hs-teal);font-weight:600;text-decoration:none}
.hs-foot a:hover{color:var(--hs-sky)}

@media (max-width:860px){ .hs-nav a:not(.btn){display:none} }
@media (max-width:560px){
  .wrap,.article,.list-head{padding-left:16px;padding-right:16px}
  .hs-head img{height:40px}
  .cta{padding:26px 18px}
}