.detail-posture-image {
  margin: 34px 0 0;
}

.detail-posture-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--ink);
  background: #fff;
}

.detail-posture-frame::after {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 6px 8px;
  background: var(--lime);
  font: 500 8px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  content: "Visual reference";
}

.detail-posture-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .2s ease;
}

.detail-posture-image figcaption {
  padding-top: 9px;
  color: var(--muted);
  font: 500 9px/1.5 var(--mono);
}

.detail-posture-image figcaption a {
  text-underline-offset: 3px;
}

@media (max-width: 860px) {
  .detail-posture-frame { aspect-ratio: 16 / 9; }
  .detail-posture-image { max-width: 720px; }
}

/* Condition pages favor comprehension over the dictionary-like base layout. */
.is-condition-detail .detail-layout {
  grid-template-columns: minmax(340px, .9fr) minmax(0, 1.1fr);
  gap: clamp(56px, 8vw, 112px);
  margin-top: 64px;
  align-items: start;
}

.is-condition-detail .detail-intro { max-width: 560px; }
.is-condition-detail .detail-kicker { color: #7d3428; font-weight: 700; }
.is-condition-detail .detail-layout h2 {
  max-width: 560px;
  margin-top: 16px;
  font-size: clamp(50px, 5.2vw, 72px);
  line-height: .94;
  text-wrap: balance;
}
.is-condition-detail .detail-summary { max-width: 540px; margin-top: 26px; color: #4f4d47; font-size: 18px; line-height: 1.7; }
.is-condition-detail .detail-care-path { margin-top: 28px; padding: 15px 0 0; border: 0; border-top: 1px solid var(--line); background: transparent; }
.is-condition-detail .detail-care-path.is-musculoskeletal-condition { border: 0; border-top: 1px solid var(--line); background: transparent; }
.is-condition-detail .detail-care-path strong { color: #7d3428; font-size: 9px; }
.is-condition-detail .detail-care-path p { max-width: 500px; margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.55; }

.detail-condition-meta {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.detail-condition-meta-item { min-width: 0; padding: 16px 16px 17px 0; display: grid; gap: 7px; }
.detail-condition-meta-item + .detail-condition-meta-item { padding-left: 18px; border-left: 1px solid var(--line); }
.detail-condition-meta-item span { color: #7d3428; font: 500 8px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .09em; }
.detail-condition-meta-item strong { font-size: 13px; line-height: 1.35; }

.is-condition-detail .detail-facts { min-width: 0; }
.detail-facts-heading { margin-bottom: 28px; }
.detail-facts-heading h3 { max-width: 620px; margin: 10px 0 12px; font-size: clamp(32px, 3.6vw, 48px); line-height: 1; letter-spacing: -.055em; text-wrap: balance; }
.detail-facts-heading > p:last-child { max-width: 620px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.is-condition-detail .detail-fields { display: block; border-top: 1px solid var(--ink); }
.is-condition-detail .detail-field {
  min-height: 96px;
  padding: 19px 0;
  display: grid;
  grid-template-columns: minmax(130px, .42fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.is-condition-detail .detail-field dt { padding-top: 3px; color: #7d3428; font-size: 9px; line-height: 1.45; }
.is-condition-detail .detail-field dd { max-width: 520px; font-size: 15px; line-height: 1.6; }
.is-condition-detail .detail-field[data-field="screening"] {
  min-height: 128px;
  margin-top: 18px;
  padding: 24px;
  display: grid;
  grid-template-columns: minmax(130px, .42fr) minmax(0, 1fr);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.is-condition-detail .detail-field[data-field="screening"] dt { color: var(--lime); }
.is-condition-detail .detail-field[data-field="screening"] dd { font-size: 16px; line-height: 1.55; }
.is-condition-detail .detail-disclaimer { margin-top: 16px; padding: 17px 19px; border: 0; background: #ebe7df; color: #5d5850; font-size: 11px; line-height: 1.6; }
.is-condition-detail .detail-source { margin-top: 13px; padding-left: 1px; color: var(--muted); font-size: 10px; line-height: 1.5; }

.condition-next-steps {
  margin-top: clamp(72px, 9vw, 122px);
  padding-top: 48px;
  border-top: 1px solid var(--ink);
}
.condition-next-heading { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(320px, 1.1fr); gap: 24px 64px; align-items: end; }
.condition-next-heading .detail-kicker { grid-column: 1 / -1; color: #7d3428; }
.condition-next-heading h3 { max-width: 650px; font-size: clamp(36px, 5vw, 62px); line-height: .95; letter-spacing: -.06em; }
.condition-next-heading > p:last-child { max-width: 570px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.condition-next-grid { margin-top: 38px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--ink); }
.condition-next-card { min-height: 292px; padding: 24px; display: flex; flex-direction: column; border-right: 1px solid var(--ink); background: rgba(255,255,255,.28); }
.condition-next-card:last-child { border-right: 0; background: color-mix(in srgb, var(--lime) 12%, var(--paper)); }
.condition-next-number { color: #7d3428; font: 500 10px/1 var(--mono); letter-spacing: .1em; }
.condition-next-card h4 { max-width: 280px; margin-top: 42px; font-size: 22px; line-height: 1.08; letter-spacing: -.04em; }
.condition-next-card p { margin-top: 14px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.condition-next-card strong { margin-top: auto; padding-top: 26px; font: 600 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.condition-related-guides { margin-top: 76px; }
.condition-related-guides h3 { margin-top: 10px; font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -.05em; }
.condition-guide-grid { margin-top: 26px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.condition-guide-link { min-height: 180px; padding: 20px; display: flex; flex-direction: column; border: 1px solid var(--line); color: var(--ink); text-decoration: none; background: rgba(255,255,255,.3); transition: transform .18s ease, background .18s ease; }
.condition-guide-link:hover { transform: translateY(-3px); background: #fff; }
.condition-guide-link span { color: #7d3428; font: 500 9px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.condition-guide-link strong { margin-top: 28px; font-size: 18px; line-height: 1.15; letter-spacing: -.03em; }
.condition-guide-link b { margin-top: auto; padding-top: 22px; font-size: 12px; }

@media (max-width: 900px) {
  .is-condition-detail .detail-layout { grid-template-columns: 1fr; gap: 46px; }
  .is-condition-detail .detail-layout h2 { max-width: 760px; }
  .condition-next-heading { grid-template-columns: 1fr; }
  .condition-next-heading .detail-kicker { grid-column: auto; }
  .condition-next-grid { grid-template-columns: 1fr; }
  .condition-next-card { min-height: 0; border-right: 0; border-bottom: 1px solid var(--ink); }
  .condition-next-card:last-child { border-bottom: 0; }
  .condition-next-card h4 { margin-top: 24px; }
  .condition-guide-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .is-condition-detail .detail-layout { margin-top: 34px; }
  .is-condition-detail .detail-layout h2 { font-size: clamp(42px, 13vw, 58px); }
  .detail-condition-meta { grid-template-columns: 1fr; }
  .detail-condition-meta-item + .detail-condition-meta-item { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
  .is-condition-detail .detail-field,
  .is-condition-detail .detail-field[data-field="screening"] { grid-template-columns: 1fr; gap: 9px; }
  .condition-next-steps { padding-top: 34px; }
  .condition-next-card { padding: 22px; }
}