.story-detail { max-width: 1180px; margin: 0 auto; }
.story-kicker { display: flex; justify-content: space-between; gap: 20px; margin: 20px 0 14px; color: var(--muted); font-size: .78rem; }
.story-detail > h1 { max-width: 1050px; margin: 0 0 16px; font-family: var(--serif); font-size: clamp(3rem, 5.5vw, 5.6rem); font-weight: 640; letter-spacing: -.055em; line-height: .98; }
.story-intro { max-width: 700px; margin-bottom: 22px; color: var(--ink-soft); font-size: 1rem; line-height: 1.75; }
.story-figure { margin: 0; }
.story-figure img { height: min(58vw, 620px); object-fit: cover; }
.story-figure figcaption { padding: 8px 0; color: var(--muted); font-size: .72rem; }
.story-body-grid { display: grid; grid-template-columns: 1.55fr .75fr; gap: clamp(28px, 5vw, 70px); margin-top: 26px; }
.story-body { font-family: var(--serif); font-size: 1.08rem; line-height: 1.95; }
.story-body p { margin-bottom: 18px; }
.dropcap::first-letter { float: left; margin: .12em .11em 0 0; color: var(--coral); font-size: 4.5em; line-height: .72; }
.related-strip { margin-top: 34px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.related-grid article { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.related-grid h3 { margin: 11px 0 0; font-family: var(--serif); font-size: 1.35rem; }
.why-layout { display: grid; grid-template-columns: minmax(350px, .9fr) minmax(430px, 1.1fr); gap: clamp(28px, 5vw, 70px); max-width: 1160px; margin: 0 auto; align-items: center; }
.why-story-preview img { height: min(56vw, 560px); object-fit: cover; margin-bottom: 16px; }
.why-story-preview h2 { margin: 12px 0 14px; font-family: var(--serif); font-size: 2rem; line-height: 1.25; }
.why-panel { padding: clamp(22px, 4vw, 48px); border-top: 4px solid var(--coral); background: var(--paper-light); box-shadow: var(--shadow); }
.why-panel h1 { margin: 0 0 14px; font-family: var(--serif); font-size: clamp(2.65rem, 4vw, 4rem); font-weight: 650; letter-spacing: -.045em; line-height: 1.04; }
.why-lead { margin-bottom: 20px; color: var(--ink-soft); font-size: 1rem; line-height: 1.75; }
.reason-list { list-style: none; margin: 0; padding: 0; }
.reason-list li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 15px 0; border-top: 1px solid var(--rule); }
.reason-list li > span { color: var(--coral); font-family: var(--serif); font-weight: 800; }
.reason-list strong { font-size: .94rem; }
.reason-list p { margin: 3px 0 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.6; }
.plain-note { margin: 16px 0; padding: 12px 14px; background: var(--paper-deep); color: var(--muted); font-size: .76rem; line-height: 1.55; }
@media (max-width: 760px) {
  .story-detail > h1 { font-size: clamp(2.8rem, 12vw, 5rem); }
  .story-body-grid, .why-layout { grid-template-columns: 1fr; }
  .source-card { order: -1; }
  .related-grid { grid-template-columns: 1fr; }
  .why-story-preview img { height: 420px; }
}
@media (max-width: 560px) {
  .story-detail > h1 { font-size: 3rem; line-height: 1.02; }
  .story-figure img { height: 300px; }
  .story-body { font-size: 1rem; }
  .source-card { padding: 17px; }
  .why-story-preview img { height: 300px; }
  .why-story-preview h2 { font-size: 1.65rem; }
  .why-panel { padding: 20px 17px; }
  .why-panel h1 { font-size: 2.8rem; }
}