/* ============================================================
   Re:NiNE 鍼灸院 — 症状別の事例ページ 共通CSS
   既存 LP の和モダントーン(ベージュ+ゴールド+明朝)を継承
   ============================================================ */

:root{
  --bg:#FBFAF5;
  --bg-alt:#F2ECDD;
  --bg-deep:#E4D9BE;
  --ink:#1F1B17;
  --ink-mute:#4A4640;
  --ink-soft:#7C7669;
  --gold:#B4964F;
  --gold-deep:#7A5F26;
  --gold-soft:#DFCB94;
  --line:#E4DCC8;
  --line-soft:#EFE9D7;
  --deep:#2A1F1E;

  --serif:'Shippori Mincho B1','Yu Mincho','Hiragino Mincho ProN',serif;
  --sans:'Noto Sans JP','Hiragino Sans','Yu Gothic UI',sans-serif;
  --latin:'Cormorant Garamond',serif;

  --wrap-max:1160px;
  --wrap-narrow:820px;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
html,body{margin:0; padding:0;}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  font-weight:400;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  line-height:2;
  letter-spacing:.05em;
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}
p, h1, h2, h3, h4, h5, h6, li, dt, dd, span, a{ text-wrap: pretty; }
img{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}

/* ===== Site header (簡易ヘッダー — 戻るリンク付) ===== */
.case-header{
  position:sticky; top:0; z-index:50;
  background:rgba(242,236,221,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.case-header .inner{
  max-width:var(--wrap-max); margin:0 auto;
  padding:14px 22px;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
}
.case-header .brand{
  font-family:var(--serif); font-weight:500;
  font-size:13.5px; letter-spacing:.1em; color:var(--ink);
  /* keep the wordmark on a single line on narrow screens */
  white-space: nowrap;
  word-break: keep-all;
}
@media (min-width:768px){
  .case-header .brand{ font-size:15px; letter-spacing:.22em; }
}
.case-header .brand .en{
  display:block;
  font-family:var(--latin); font-style:italic;
  font-size:11px; letter-spacing:.28em; color:var(--gold-deep);
  margin-bottom:2px;
  white-space: nowrap;
}
.case-header .back{
  font-family:var(--serif); font-size:11px; letter-spacing:.06em;
  color:var(--ink-mute);
  padding:8px 4px;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
  /* keep the "← 症状別の事例一覧へ" link on one line */
  white-space: nowrap;
  word-break: keep-all;
  flex-shrink: 0;
}
@media (min-width:768px){
  .case-header .back{ font-size:12.5px; letter-spacing:.18em; }
}
.case-header .back:hover{ color:var(--gold-deep); border-bottom-color:var(--gold); }
.case-header .back::before{ content:"←"; margin-right:8px; color:var(--gold); }

/* ===== Page hero ===== */
.page-hero{
  padding: 88px 22px 56px;
  text-align:center;
  border-bottom:1px solid var(--line);
}
.page-hero .en{
  font-family:var(--latin); font-style:italic;
  font-size:14px; letter-spacing:.28em; color:var(--gold);
  margin-bottom:14px;
}
.page-hero h1{
  font-family:var(--serif); font-weight:500;
  font-size:30px; letter-spacing:.18em;
  color:var(--ink);
  margin:0 0 22px;
}
.page-hero .rule{
  width:44px; height:1px; background:var(--gold);
  margin:0 auto 22px;
}
.page-hero .lead{
  max-width:640px; margin:0 auto;
  font-family:var(--serif);
  font-size:14.5px; line-height:2.1; letter-spacing:.08em;
  color:var(--ink-mute);
}
@media (min-width:768px){
  .page-hero{ padding: 120px 22px 72px; }
  .page-hero h1{ font-size:40px; }
  .page-hero .en{ font-size:15px; }
  .page-hero .lead{ font-size:15.5px; }
}

/* ===== Section basics ===== */
.section{
  padding: 64px 22px;
}
.section-alt{ background:var(--bg-alt); }
.wrap{
  max-width:var(--wrap-narrow); margin:0 auto;
}
.wrap-wide{
  max-width:var(--wrap-max); margin:0 auto;
}
.sec-head{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:14px;
  margin-bottom:36px;
}
.sec-head .num{
  font-family:var(--latin); font-style:italic;
  font-size:38px; color:var(--gold); line-height:1;
}
.sec-head h2{
  font-family:var(--serif); font-weight:500;
  font-size:22px; letter-spacing:.16em;
  color:var(--ink);
  margin:0;
}
.sec-head .rule{
  width:36px; height:1px; background:var(--gold-deep);
}
@media (min-width:768px){
  .section{ padding: 96px 22px; }
  .sec-head h2{ font-size:26px; }
  .sec-head .num{ font-size:44px; }
}

/* ===== Causes list ===== */
.cause-list{
  list-style:none; padding:0; margin:0;
  display:grid; gap:14px;
}
.cause-list li{
  position:relative;
  padding: 16px 20px 16px 40px;
  background:#fff;
  border:1px solid var(--line);
  font-family:var(--serif);
  font-size:14.5px; line-height:1.85; letter-spacing:.06em;
  color:var(--ink-mute);
}
.cause-list li::before{
  content:""; position:absolute;
  left:18px; top:calc(0.9em + 4px);
  width:8px; height:8px;
  background:var(--gold);
  transform:rotate(45deg);
}
@media (min-width:768px){
  .cause-list li{ font-size:15px; padding: 18px 24px 18px 44px; }
  .cause-list li::before{ left:22px; }
}

/* ===== Approaches ===== */
.approach-list{
  display:grid; gap:20px;
}
.approach-item{
  background:#fff; border:1px solid var(--line);
  padding: 28px 24px;
  display:grid; grid-template-columns:auto 1fr;
  column-gap:22px; row-gap:10px;
  align-items:start;
}
.approach-item .a-num{
  font-family:var(--latin); font-style:italic;
  font-size:36px; color:var(--gold);
  line-height:1;
  grid-row:1 / span 2;
}
.approach-item h3{
  font-family:var(--serif); font-weight:500;
  font-size:16px; letter-spacing:.14em;
  color:var(--ink);
  margin:0;
  padding-top:6px;
}
.approach-item p{
  font-size:13.5px; line-height:2.1; letter-spacing:.06em;
  color:var(--ink-mute);
  margin:0;
}
@media (min-width:768px){
  .approach-item{ padding: 34px 32px; column-gap:28px; }
  .approach-item .a-num{ font-size:44px; }
  .approach-item h3{ font-size:18px; }
  .approach-item p{ font-size:14.5px; }
}

/* ===== Practitioner comment ===== */
.comment-card{
  background:#fff;
  border:1px solid var(--line);
  padding: 32px 28px;
  position:relative;
}
.comment-card::before{
  content:"“";
  position:absolute; top:12px; left:24px;
  font-family:var(--latin); font-style:italic;
  font-size:56px; color:var(--gold-soft);
  line-height:1;
}
.comment-card .role{
  font-family:var(--latin); font-style:italic;
  font-size:12px; letter-spacing:.22em; color:var(--gold-deep);
  margin-bottom:8px;
  padding-left:46px;
}
.comment-card p{
  font-family:var(--serif);
  font-size:14.5px; line-height:2.1; letter-spacing:.06em;
  color:var(--ink-mute);
  margin:0;
  padding-left:46px;
}
@media (min-width:768px){
  .comment-card{ padding: 40px 40px; }
  .comment-card p{ font-size:15.5px; }
}

/* ===== CTA ===== */
.case-cta{
  background:var(--deep);
  color:#fff;
  padding: 72px 22px;
  text-align:center;
}
.case-cta .en{
  font-family:var(--latin); font-style:italic;
  font-size:13px; letter-spacing:.28em; color:var(--gold-soft);
  margin-bottom:14px;
}
.case-cta h2{
  font-family:var(--serif); font-weight:500;
  font-size:22px; letter-spacing:.14em;
  color:#f6ecd5;
  margin:0 0 12px;
}
.case-cta p{
  font-family:var(--serif);
  font-size:13.5px; line-height:2; letter-spacing:.06em;
  color:#d9d0bf;
  margin:0 auto 28px;
  max-width:520px;
}
.case-cta .line-btn{
  display:inline-flex; align-items:center; gap:12px;
  padding: 15px 36px;
  background:#06C755;
  color:#fff;
  font-family:var(--serif); font-weight:500;
  font-size:14px; letter-spacing:.18em;
  border:none;
  transition:opacity .2s;
}
.case-cta .line-btn:hover{ opacity:.85; }
.case-cta .line-btn svg{ width:22px; height:22px; }
.case-cta .note{
  margin-top:18px;
  font-family:var(--latin);
  font-size:12px; letter-spacing:.18em;
  color:var(--gold-soft);
}
@media (min-width:768px){
  .case-cta{ padding: 96px 22px; }
  .case-cta h2{ font-size:28px; }
}

/* ===== Related cases nav ===== */
.related{
  padding: 56px 22px;
  border-top:1px solid var(--line);
  background:var(--bg-alt);
}
.related .wrap{ max-width:var(--wrap-max); }
.related h3{
  font-family:var(--serif); font-weight:500;
  font-size:15px; letter-spacing:.22em;
  color:var(--ink);
  text-align:center;
  margin:0 0 24px;
}
.related h3::after{
  content:""; display:block;
  width:36px; height:1px; background:var(--gold);
  margin:14px auto 0;
}
.related-list{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center;
  list-style:none; padding:0; margin:0;
}
.related-list a{
  display:inline-block;
  padding: 10px 18px;
  border:1px solid var(--line);
  background:#fff;
  font-family:var(--serif);
  font-size:12.5px; letter-spacing:.12em;
  color:var(--ink-mute);
  transition:color .2s, border-color .2s, background .2s;
}
.related-list a:hover{
  color:var(--gold-deep);
  border-color:var(--gold);
  background:#fff;
}
.related-list a.current{
  background:var(--ink); color:#fff; border-color:var(--ink);
}
.related .to-index{
  text-align:center; margin-top:28px;
}
.related .to-index a{
  font-family:var(--latin); font-style:italic;
  font-size:14px; letter-spacing:.22em; color:var(--gold-deep);
  border-bottom:1px solid var(--gold);
  padding-bottom:4px;
}

/* ===== Footer ===== */
.case-footer{
  padding: 40px 22px;
  text-align:center;
  border-top:1px solid var(--line);
  background:var(--bg);
}
.case-footer .brand{
  font-family:var(--serif); font-weight:500;
  font-size:14px; letter-spacing:.28em; color:var(--ink);
  margin-bottom:6px;
}
.case-footer .en{
  font-family:var(--latin); font-style:italic;
  font-size:11px; letter-spacing:.28em; color:var(--gold-deep);
  margin-bottom:14px;
}
.case-footer .info{
  font-family:var(--serif);
  font-size:11.5px; letter-spacing:.14em;
  color:var(--ink-soft);
  line-height:2;
}

/* ============================================================
   一覧ページ専用
   ============================================================ */
.case-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  max-width:var(--wrap-max);
  margin:0 auto;
}
@media (min-width:560px){
  .case-grid{ grid-template-columns:repeat(2, 1fr); gap:16px; }
}
@media (min-width:900px){
  .case-grid{ grid-template-columns:repeat(3, 1fr); gap:20px; }
}
@media (min-width:1100px){
  .case-grid{ grid-template-columns:repeat(4, 1fr); }
}

.case-card{
  position:relative;
  display:block;
  /* Per-symptom soft tint fill (falls back to white when no data-symptom) */
  background: color-mix(in oklab, var(--card-accent-soft) 55%, #fff);
  border:1px solid var(--card-accent-soft);
  padding: 32px 22px 30px;
  min-height:170px;
  transition:border-color .25s, transform .25s, box-shadow .25s, background .25s;
  overflow:hidden;
  /* Per-card accent tokens (defaulted; overridden by [data-symptom]) */
  --card-accent: var(--gold);
  --card-accent-soft: var(--gold-soft);
  --card-accent-deep: var(--gold-deep);
}
.case-card:hover{
  background: color-mix(in oklab, var(--card-accent-soft) 75%, #fff);
}
.case-card::before{
  content:"";
  position:absolute; top:0; left:0;
  width:100%; height:3px;
  background:var(--card-accent);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .3s ease;
}
.case-card:hover{
  border-color:var(--card-accent);
  transform:translateY(-2px);
  box-shadow: 0 10px 24px rgba(43,38,32,.06);
}
.case-card:hover::before{ transform:scaleX(1); }

/* Per-symptom accent applied to the card (mirrors body[data-symptom]) */
.case-card[data-symptom="lower-back-pain"]  { --card-accent:#B26240; --card-accent-soft:#F0DBCA; --card-accent-deep:#7C3E23; }
.case-card[data-symptom="postpartum"]       { --card-accent:#B77188; --card-accent-soft:#F1D9DF; --card-accent-deep:#7E3E52; }
.case-card[data-symptom="swelling"]         { --card-accent:#7A9070; --card-accent-soft:#DEE4CE; --card-accent-deep:#4A5C42; }
.case-card[data-symptom="sciatica"]         { --card-accent:#3E6A6E; --card-accent-soft:#CFDDDE; --card-accent-deep:#22474A; }
.case-card[data-symptom="hip-pain"]         { --card-accent:#A47638; --card-accent-soft:#E9D8B6; --card-accent-deep:#6E4C1B; }
.case-card[data-symptom="knee-pain"]        { --card-accent:#5B7EA0; --card-accent-soft:#D3DDE8; --card-accent-deep:#33526E; }
.case-card[data-symptom="frozen-shoulder"]  { --card-accent:#8E5A94; --card-accent-soft:#E1D0E3; --card-accent-deep:#5C3562; }
.case-card[data-symptom="rounded-shoulders"]{ --card-accent:#8B7A47; --card-accent-soft:#E4DAB6; --card-accent-deep:#5A4C22; }
.case-card[data-symptom="upper-back-pain"]  { --card-accent:#9F5450; --card-accent-soft:#EBD1CE; --card-accent-deep:#69302C; }
.case-card[data-symptom="shoulder-stiffness"]{--card-accent:#4E8079; --card-accent-soft:#C9DDD9; --card-accent-deep:#2C5751; }
.case-card[data-symptom="headache"]         { --card-accent:#7C6B94; --card-accent-soft:#D9D2E1; --card-accent-deep:#4E406A; }
.case-card[data-symptom="neck-pain"]        { --card-accent:#4A6E8C; --card-accent-soft:#C9D6E1; --card-accent-deep:#274863; }



.case-card .num{
  position:absolute;
  top:14px; right:18px;
  font-family:var(--latin); font-style:italic;
  font-size:22px; color:var(--card-accent-soft);
  line-height:1;
}
.case-card .name{
  font-family:var(--serif); font-weight:500;
  font-size:19px; letter-spacing:.14em;
  color:var(--ink);
  margin:0 0 6px;
}
.case-card .name-en{
  font-family:var(--latin); font-style:italic;
  font-size:13px; letter-spacing:.18em;
  color:var(--card-accent-deep);
  margin:0 0 18px;
}
.case-card .arrow{
  position:absolute;
  bottom:20px; right:22px;
  font-family:var(--latin); font-style:italic;
  font-size:14px; letter-spacing:.24em;
  color:var(--card-accent-deep);
  transition:transform .25s, color .25s;
}
.case-card:hover .arrow{
  transform:translateX(4px);
  color:var(--card-accent);
}

/* Intro at top of index */
.case-intro{
  max-width:var(--wrap-narrow); margin:0 auto 48px;
  text-align:center;
  padding: 0 22px;
}
.case-intro p{
  font-family:var(--serif);
  font-size:14.5px; line-height:2.1; letter-spacing:.08em;
  color:var(--ink-mute);
  margin:0;
}
@media (min-width:768px){
  .case-intro p{ font-size:15px; }
}

/* Disclaimer note — highlighted as a caution block */
.medical-note{
  position: relative;
  max-width:var(--wrap-narrow); margin:56px auto 0;
  padding: 26px 24px 24px;
  background:#FDF6EA;
  border:1px solid #D9B366;
  border-left: 4px solid var(--gold-deep);
  font-family:var(--serif);
  font-size:13px; line-height:2; letter-spacing:.06em;
  color:var(--ink);
  box-shadow: 0 2px 8px rgba(122, 95, 38, .08);
}
.medical-note::before{
  content: "!";
  position: absolute;
  top: -14px; left: 20px;
  width: 28px; height: 28px;
  background: var(--gold-deep);
  color: #fff;
  font-family: var(--serif); font-weight: 600;
  font-size: 16px; line-height: 28px;
  text-align: center;
  border-radius: 50%;
  letter-spacing: 0;
  box-shadow: 0 2px 6px rgba(122, 95, 38, .25);
}
.medical-note strong{
  display:block;
  font-family:var(--serif); font-weight:600;
  font-size:13px; letter-spacing:.24em;
  color:var(--gold-deep);
  margin-bottom:10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(122, 95, 38, .3);
}
@media (min-width: 768px){
  .medical-note{
    padding: 30px 32px 28px;
    font-size: 14px;
  }
  .medical-note strong{ font-size: 14px; }
}

/* ============================================================
   NEW: Case-index hero (v3) — split hero, no red bar
   ("Body Care Lab" style — big serif title + picker on left,
    organic-blob image slot on right)
   ============================================================ */
.index-hero{
  position: relative;
  padding: 40px 22px 48px;
  background: var(--bg);
  overflow: hidden;
}
.index-hero .wrap{
  max-width: var(--wrap-max); margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.index-hero-copy{
  display: grid; gap: 14px;
  align-items: start;
}
.index-hero-copy .en{
  font-family: var(--latin); font-style: italic; font-weight: 500;
  font-size: 12.5px; letter-spacing: .28em;
  color: var(--accent);
  margin: 0 0 2px;
}
.index-hero-copy h1{
  font-family: var(--serif); font-weight: 500;
  font-size: 30px; letter-spacing: .14em;
  color: var(--ink);
  line-height: 1.4;
  margin: 0 0 6px;
  word-break: keep-all;
}
.index-hero-copy .index-hero-lead{
  font-family: var(--serif);
  font-size: 13.5px; line-height: 2; letter-spacing: .06em;
  color: var(--ink-mute);
  margin: 4px 0 8px;
  max-width: 460px;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
/* Reuse .sym-picker styling — no change */

/* Right-side organic image slot (blob-clipped) */
.index-hero-media{
  position: relative;
  width: 100%;
  aspect-ratio: 5/4;
  max-width: 460px;
  margin: 0 auto;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(0,0,0,.05) 0 10px,
      rgba(0,0,0,.02) 10px 20px
    ),
    color-mix(in oklab, var(--accent-soft) 65%, #fff);
  border: 1px dashed rgba(0,0,0,.15);
  /* Organic blob shape */
  border-radius: 62% 38% 55% 45% / 55% 42% 58% 45%;
  display: grid;
  place-items: center;
  color: rgba(0,0,0,.35);
  font-family: 'SF Mono','Menlo',monospace;
  font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase;
}
.index-hero-media::before{
  content: "[ image ]";
}

@media (min-width: 768px){
  .index-hero{ padding: 72px 40px 88px; }
  .index-hero .wrap{
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: var(--wrap-narrow);
  }
  .index-hero-copy h1{ font-size: 44px; letter-spacing: .16em; }
  .index-hero-copy .en{ font-size: 14px; }
  .index-hero-copy .index-hero-lead{ font-size: 14.5px; }
}
@media (min-width: 1100px){
  .index-hero-copy h1{ font-size: 52px; }
}

/* ============================================================
   NEW: Symptom-page hero (v2) — bold red-bar headline + pills
   ============================================================ */

.sym-hero{
  padding: 40px 22px 44px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.sym-hero .wrap{
  max-width: var(--wrap-narrow);
  margin: 0 auto;
}
.sym-hero .en{
  font-family: var(--latin); font-style: italic; font-weight: 500;
  font-size: 12.5px; letter-spacing: .28em;
  color: var(--accent);
  margin: 0 0 24px;
  text-align: left;
}

/* Selector pill (dropdown) — "全ての事例を見る ▼" */
.sym-picker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin: 0 0 26px;
  position: relative;
}
.sym-picker::after{
  content: "▼";
  position: absolute;
  right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 10px;
  color: var(--accent);
  pointer-events: none;
}
.sym-picker select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 12px 44px 12px 20px;
  font-family: var(--serif);
  font-size: 14px; letter-spacing: .08em;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  min-width: 220px;
  transition: border-color .2s, color .2s;
}
.sym-picker select:hover,
.sym-picker select:focus{
  border-color: var(--accent);
  color: var(--accent-deep);
  outline: none;
}

/* Related-symptom pill tags above the red-bar headline */
.sym-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}
.sym-pill{
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--serif); font-weight: 500;
  font-size: 12px; letter-spacing: .08em;
  text-decoration: none;
  transition: opacity .2s, background-color .2s;
  word-break: keep-all;
  white-space: nowrap;
}
.sym-pill:hover{
  background: var(--accent-deep);
}
.sym-pill.is-current{
  background: var(--accent-deep);
  color: #fff;
}

/* Red-bar headline — big serif on tinted background bands */
.sym-headline{
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
}
.sym-headline .bar{
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background: var(--accent);
  color: #fff;
  padding: 8px 14px;
  font-family: var(--serif); font-weight: 500;
  font-size: 22px; line-height: 1.9; letter-spacing: .04em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.sym-headline .bar.bar-sm{
  font-size: 18px;
}
.sym-headline-row{
  /* wrapper so each .bar sits on its own row visually */
  display: block;
  margin-bottom: 4px;
}
.sym-lead{
  font-family: var(--serif);
  font-size: 13.5px; line-height: 2; letter-spacing: .06em;
  color: var(--ink-mute);
  margin: 22px 0 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
@media (min-width:768px){
  .sym-hero{ padding: 64px 40px 72px; }
  .sym-headline .bar{ font-size: 32px; padding: 10px 18px; line-height: 1.85; }
  .sym-headline .bar.bar-sm{ font-size: 26px; }
  .sym-lead{ font-size: 15px; }
  .sym-picker select{ font-size: 15px; min-width: 260px; }
  .sym-pill{ font-size: 13px; padding: 7px 16px; }
}

/* ============================================================
   NEW: Treatment card (v2) — soft-tinted panel + image slot
   ============================================================ */
.tx-panel{
  background: color-mix(in oklab, var(--accent-soft) 55%, #fff);
  padding: 22px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 12px;
}
.tx-panel + .tx-panel{ margin-top: 16px; }
.tx-panel-media{
  aspect-ratio: 4/3;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(0,0,0,.04) 0 8px,
      rgba(0,0,0,.02) 8px 16px
    ),
    #ffffff;
  border: 1px solid var(--accent-soft);
  display: grid;
  place-items: center;
  color: rgba(0,0,0,.35);
  font-family: 'SF Mono','Menlo',monospace;
  font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase;
  overflow: hidden;
}
.tx-panel-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tx-panel-body .tx-title{
  font-family: var(--serif); font-weight: 500;
  font-size: 16px; letter-spacing: .06em;
  color: var(--ink);
  line-height: 1.55;
  margin: 0 0 10px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.tx-panel-body .tx-body{
  font-family: var(--serif);
  font-size: 13.5px; line-height: 1.95; letter-spacing: .04em;
  color: var(--ink-mute);
  margin: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media (min-width:640px){
  .tx-panel{
    grid-template-columns: 200px 1fr;
    gap: 26px;
    padding: 28px;
    align-items: center;
  }
  .tx-panel-media{ aspect-ratio: 4/3; }
}
@media (min-width:768px){
  .tx-panel{
    grid-template-columns: 260px 1fr;
    gap: 32px;
    padding: 32px;
  }
  .tx-panel-body .tx-title{ font-size: 18px; }
  .tx-panel-body .tx-body{ font-size: 14.5px; }
}

/* Section head — new red-serif style for symptom body */
.symptom-body .sec-head-lg{
  margin-bottom: 24px;
}
.symptom-body .sec-head-lg h2{
  font-family: var(--serif); font-weight: 500;
  font-size: 22px; letter-spacing: .08em;
  color: var(--accent-deep);
  margin: 0;
  word-break: keep-all;
}
@media (min-width:768px){
  .symptom-body .sec-head-lg h2{ font-size: 28px; }
}

/* ============================================================
   Detailed case articles (per-symptom, 4 cases each)
   Uses --accent + --accent-soft + --accent-deep exposed by
   <body data-symptom="..."> classes below.
   ============================================================ */

/* Per-symptom accent tokens.
   Chosen to sit next to the brand's olive-gold — low saturation, warm base,
   only gently differentiated so a series of pages still reads as one family. */
body[data-symptom="lower-back-pain"]  { --accent:#B26240; --accent-soft:#F0DBCA; --accent-deep:#7C3E23; } /* terracotta */
body[data-symptom="postpartum"]       { --accent:#B77188; --accent-soft:#F1D9DF; --accent-deep:#7E3E52; } /* muted rose */
body[data-symptom="swelling"]         { --accent:#7A9070; --accent-soft:#DEE4CE; --accent-deep:#4A5C42; } /* sage */
body[data-symptom="sciatica"]         { --accent:#3E6A6E; --accent-soft:#CFDDDE; --accent-deep:#22474A; } /* teal (repurposed) */
body[data-symptom="hip-pain"]         { --accent:#A47638; --accent-soft:#E9D8B6; --accent-deep:#6E4C1B; } /* amber */
body[data-symptom="knee-pain"]        { --accent:#5B7EA0; --accent-soft:#D3DDE8; --accent-deep:#33526E; } /* dusty blue */
body[data-symptom="frozen-shoulder"]  { --accent:#8E5A94; --accent-soft:#E1D0E3; --accent-deep:#5C3562; } /* plum */
body[data-symptom="rounded-shoulders"]{ --accent:#8B7A47; --accent-soft:#E4DAB6; --accent-deep:#5A4C22; } /* olive */
body[data-symptom="upper-back-pain"]  { --accent:#9F5450; --accent-soft:#EBD1CE; --accent-deep:#69302C; } /* brick */
body[data-symptom="shoulder-stiffness"]{ --accent:#4E8079; --accent-soft:#C9DDD9; --accent-deep:#2C5751; } /* pine */
body[data-symptom="headache"]         { --accent:#7C6B94; --accent-soft:#D9D2E1; --accent-deep:#4E406A; } /* smoke purple */
body[data-symptom="neck-pain"]        { --accent:#4A6E8C; --accent-soft:#C9D6E1; --accent-deep:#274863; } /* slate blue */
/* Default fallback = brand gold */
body:not([data-symptom]){ --accent:var(--gold); --accent-soft:var(--gold-soft); --accent-deep:var(--gold-deep); }
/* Case index page — brand wine-red accent (matches homepage hero bars) */
body.symptom-body:not([data-symptom]){ --accent:#9E3733; --accent-soft:#F0D4CC; --accent-deep:#6E2622; }

/* Update page-hero to use accent when data-symptom set */
body[data-symptom] .page-hero .en{ color:var(--accent); }
body[data-symptom] .page-hero .rule{ background:var(--accent); }

/* Section head accent for detail pages */
.symptom-body .sec-head .num{ color:var(--accent); }
.symptom-body .sec-head .rule{ background:var(--accent-deep); }

/* Special notice — shown at top of headache page & similar */
.special-notice{
  max-width:var(--wrap-narrow); margin: 24px auto 0;
  padding: 18px 22px;
  background:#FFF9F0;
  border:1px solid var(--accent-soft);
  border-left:3px solid var(--accent);
  font-family:var(--serif);
  font-size:12.5px; line-height:1.95; letter-spacing:.05em;
  color:var(--ink-mute);
}
.special-notice .label{
  display:block;
  font-family:var(--serif); font-weight:600;
  font-size:11.5px; letter-spacing:.22em;
  color:var(--accent-deep);
  margin-bottom:8px;
}
@media (min-width:768px){
  .special-notice{ padding: 22px 28px; font-size:13.5px; }
}

/* ===== Case list (each symptom has 4 case articles) ===== */
.cases-stack{
  display:grid;
  gap: 28px;
  max-width:var(--wrap-narrow);
  margin: 0 auto;
}

.case-article{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  padding: 26px 22px 28px;
  overflow:hidden;
}
.case-article::before{
  content:"";
  position:absolute; top:0; left:0;
  width:4px; height:100%;
  background:var(--accent);
}
.case-article .ca-head{
  display:grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items:baseline;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.case-article .ca-num{
  font-family:var(--latin); font-style:italic; font-weight:500;
  font-size:26px; line-height:1;
  color:var(--accent);
  letter-spacing:.06em;
  white-space:nowrap;
}
.case-article .ca-num small{
  display:block;
  font-family:var(--latin); font-style:italic;
  font-size:10px; letter-spacing:.28em;
  color:var(--accent-deep);
  margin-bottom:4px;
}
.case-article .ca-title{
  font-family:var(--serif); font-weight:500;
  font-size:15.5px; letter-spacing:.06em;
  color:var(--ink);
  line-height:1.55;
  margin:0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.case-article .ca-title .attr{
  display:block;
  font-family:var(--sans);
  font-size:11.5px; letter-spacing:.14em;
  color:var(--ink-soft);
  margin-top:6px;
  font-weight:400;
}

.case-article .ca-block{
  margin-top: 18px;
}
.case-article .ca-block:first-of-type{
  margin-top: 0;
}
.case-article .ca-block-label{
  display:inline-block;
  font-family:var(--serif); font-weight:600;
  font-size:11.5px; letter-spacing:.22em;
  color:var(--accent-deep);
  padding: 3px 10px;
  background:var(--accent-soft);
  margin-bottom:10px;
}

/* Symptoms — bullet list */
.case-article .sym-list{
  list-style:none; padding:0; margin:0;
  display:grid; gap:6px;
}
.case-article .sym-list li{
  position:relative;
  padding-left: 18px;
  font-family:var(--serif);
  font-size:13.5px; line-height:1.85; letter-spacing:.04em;
  color:var(--ink-mute);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.case-article .sym-list li::before{
  content:"";
  position:absolute; left:2px; top:0.75em;
  width:6px; height:6px;
  background:var(--accent);
  transform:rotate(45deg);
}

/* Cause paragraph */
.case-article .cause-text{
  font-family:var(--serif);
  font-size:13.5px; line-height:2; letter-spacing:.04em;
  color:var(--ink-mute);
  margin:0;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* Treatment items */
.case-article .tx-list{
  list-style:none; padding:0; margin:0;
  display:grid; gap:14px;
  counter-reset: tx;
}
.case-article .tx-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap: 12px;
  padding: 12px 14px;
  background: color-mix(in oklab, var(--accent-soft) 45%, #fff);
  border:1px solid var(--accent-soft);
}
.case-article .tx-item .tx-num{
  counter-increment: tx;
  font-family:var(--latin); font-style:italic; font-weight:500;
  font-size:18px; color:var(--accent-deep); line-height:1;
  min-width:1.4em;
}
.case-article .tx-item .tx-num::before{
  content: counter(tx, decimal-leading-zero);
}
.case-article .tx-item .tx-title{
  font-family:var(--serif); font-weight:600;
  font-size:13px; letter-spacing:.06em;
  color:var(--ink);
  line-height:1.5;
  margin: 0 0 4px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.case-article .tx-item .tx-body{
  font-family:var(--serif);
  font-size:12.5px; line-height:1.85; letter-spacing:.04em;
  color:var(--ink-mute);
  margin:0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

@media (min-width:768px){
  .cases-stack{ gap:36px; }
  .case-article{ padding: 36px 40px 38px; }
  .case-article::before{ width:5px; }
  .case-article .ca-head{ gap:20px; margin-bottom:24px; padding-bottom:20px; }
  .case-article .ca-num{ font-size:34px; }
  .case-article .ca-title{ font-size:17.5px; letter-spacing:.08em; }
  .case-article .ca-title .attr{ font-size:12.5px; margin-top:8px; }
  .case-article .ca-block-label{ font-size:12.5px; padding:4px 14px; margin-bottom:14px; }
  .case-article .sym-list li{ font-size:14.5px; padding-left:22px; }
  .case-article .cause-text{ font-size:14.5px; }
  .case-article .tx-list{ gap:16px; }
  .case-article .tx-item{ padding:16px 20px; gap:16px; }
  .case-article .tx-item .tx-num{ font-size:22px; }
  .case-article .tx-item .tx-title{ font-size:14.5px; }
  .case-article .tx-item .tx-body{ font-size:13.5px; }
}

/* Global disclaimer at bottom of each detail page */
.global-disclaimer{
  max-width: var(--wrap-narrow); margin: 48px auto 0;
  padding: 22px 24px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  font-family: var(--serif);
  font-size: 12.5px; line-height: 2; letter-spacing:.05em;
  color: var(--ink-mute);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.global-disclaimer .label{
  display:block;
  font-family:var(--serif); font-weight:600;
  font-size:11.5px; letter-spacing:.22em;
  color:var(--accent-deep);
  margin-bottom:8px;
}
@media (min-width:768px){
  .global-disclaimer{ padding: 26px 32px; font-size:13.5px; }
}