/* ── StopHurting — plain static styles. Palette pulled from the live site. ── */
:root{
  --orange:#e07b39;
  --orange-dark:#d65c38;
  --blue:#215387;
  --ink:#1a202c;
  --gray:#4a5568;
  --light:#edf2f7;
  --paper:#f7fafc;
  --white:#ffffff;
  --radius:14px;
  --shadow:0 1px 2px rgba(26,32,44,.06), 0 8px 24px rgba(26,32,44,.07);
  --wrap:1080px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--orange-dark)}
h1,h2,h3{line-height:1.2;margin:0 0 .5em}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}

/* ── Header ── */
.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(247,250,252,.9);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--light);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:800;font-size:1.25rem;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand-mark{font-size:1.3rem}
.brand-accent{color:var(--orange)}
.nav{display:flex;gap:1.4rem;font-weight:600}
.nav a{color:var(--gray);white-space:nowrap}
.nav a:hover{color:var(--orange)}

/* ── Hero ── */
.hero{position:relative;min-height:clamp(340px,52vh,520px);display:flex;align-items:center;overflow:hidden}
.hero-img{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02)}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(26,32,44,.82) 0%,rgba(26,32,44,.55) 42%,rgba(33,83,135,.30) 100%);
}
.hero-content{position:relative;color:var(--white);max-width:680px;padding-top:48px;padding-bottom:48px}
.hero h1{font-size:clamp(1.9rem,4.4vw,3rem);font-weight:800;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.25)}
.hero-sub{font-size:clamp(1.02rem,1.6vw,1.2rem);color:#f1f5f9;margin:.2rem 0 1.6rem;max-width:600px}

.btn{
  display:inline-block;background:var(--orange);color:#fff;font-weight:700;
  padding:.8rem 1.5rem;border-radius:999px;box-shadow:var(--shadow);
  transition:transform .15s ease,background .15s ease;
}
.btn:hover{background:var(--orange-dark);color:#fff;transform:translateY(-2px)}

/* ── Sections ── */
.section{padding:56px 22px 24px}
.section-title{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:800;text-align:center;margin-bottom:1.6rem}
.section-title::after{content:"";display:block;width:64px;height:4px;border-radius:4px;background:var(--orange);margin:.6rem auto 0}

/* ── Cards ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px}
.card{
  display:block;background:var(--white);border:1px solid var(--light);
  border-radius:var(--radius);padding:22px 22px 24px;box-shadow:var(--shadow);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(26,32,44,.12);border-color:#e2e8f0}
.card h3{font-size:1.18rem;color:var(--ink);margin:.55rem 0 .35rem}
.card:hover h3{color:var(--blue)}
.card p{margin:0;color:var(--gray);font-size:.97rem}

.chip{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:.28rem .6rem;border-radius:999px}
.chip-myth{background:#fce9dd;color:var(--orange-dark)}
.chip-remedy{background:#e3edf6;color:var(--blue)}

/* ── Footer ── */
.site-footer{margin-top:48px;background:var(--ink);color:#cbd5e0}
.footer-inner{padding:40px 22px;text-align:center}
.footer-brand{font-weight:800;font-size:1.15rem;color:#fff;margin:0 0 .25rem}
.footer-tag{margin:0 0 1rem;color:#e2e8f0}
.footer-fine{font-size:.85rem;color:#94a3b8;margin:0}

@media(max-width:560px){
  .nav{gap:1rem;font-size:.92rem}
  .nav a:first-child{display:none}
  .hero-scrim{background:linear-gradient(180deg,rgba(26,32,44,.55) 0%,rgba(26,32,44,.82) 100%)}
}

/* ── Article pages ── */
.article-wrap{max-width:760px;margin:0 auto;padding:34px 22px 10px}
.breadcrumb{font-size:.9rem;color:var(--gray);margin-bottom:1.1rem}
.breadcrumb a{color:var(--gray);font-weight:600}
.breadcrumb a:hover{color:var(--orange)}
.article-header{margin-bottom:1.2rem}
.article-header .chip{margin-bottom:.85rem}
.article-header h1{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;line-height:1.15}
.dek{font-size:1.15rem;color:var(--gray);margin:.55rem 0 0}
.featured{border-radius:var(--radius);margin:1.4rem 0;box-shadow:var(--shadow);width:100%}
.prose{font-size:1.08rem;line-height:1.75;color:#2d3748}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:1.5rem;font-weight:800;color:var(--ink);margin-top:1.7em}
.prose h3{font-size:1.22rem;font-weight:700;color:var(--ink);margin-top:1.4em}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--orange-dark)}
.prose img{border-radius:10px;margin:1.4em 0}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.4em}
.prose blockquote{border-left:4px solid var(--orange);background:var(--light);padding:.8em 1.1em;border-radius:0 10px 10px 0;color:var(--gray);font-style:italic}
.porting-note{background:#fff7ed;border:1px dashed var(--orange);color:var(--orange-dark);padding:.9em 1.1em;border-radius:10px;font-size:.95rem;margin:1.4rem 0}
.article-foot{max-width:760px;margin:2.4rem auto 1rem;padding:1.4rem 22px 0;border-top:1px solid var(--light)}
.back-link{font-weight:700;color:var(--blue)}
.back-link:hover{color:var(--orange-dark)}