.post-masonry {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 32px;
  column-count: auto;
}
.post-masonry .story-post {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 0;
  padding-top: 20px;
}
.story-post .post-image,
.story-post.tall .post-image,
.story-post.compact .post-image {
  aspect-ratio: 16 / 9;
  flex: none;
  background: #e7e8e6;
  margin-bottom: 22px;
}
.story-post .post-image img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
}
.story-post:hover .post-image img { filter: none; }
.story-post h3 {
  font-size: 28px;
  letter-spacing: 0;
  line-height: 1.22;
  margin: 16px 0;
}
.story-post p { font-size: 16px; max-width: 640px; }
.story-post small { align-self: flex-start; margin-top: auto; }
.drawer-panel { max-width: 1040px; width: min(94vw, 1040px); }
.drawer-panel { box-sizing: border-box; }
.drawer-panel > *, .drawer-body section > * { min-width: 0; max-width: 100%; }
.drawer-panel h2, .drawer-panel h3, .drawer-panel p { overflow-wrap: anywhere; letter-spacing: 0; }
.drawer-panel img[hidden] { display: none; }
.drawer-panel blockquote[hidden] { display: none; }
.drawer-panel.badminton-case #drawer-image { display: block; width: auto; max-width: 100%; max-height: 620px; margin: 0 auto; object-fit: contain; }
.drawer-panel.hyrox-case #drawer-image { display: block; max-height: 560px; width: 100%; object-fit: contain; background: #e7e8e6; }
.drawer-panel.hyrox-case .drawer-inline-image img { max-height: 660px; width: 100%; object-fit: contain; background: #e7e8e6; }
.drawer-panel .case-data-visual { display: block; height: auto; min-height: 0; aspect-ratio: auto; margin: 0; padding: 28px; background: #eeefec; border-top: 1px solid #ccc; border-radius: 0; overflow: visible; }
.drawer-panel .case-data-visual::after, .drawer-panel .case-field-photos figure::after { display: none; }
.case-data-visual figcaption { font-size: 13px; color: #666; margin-bottom: 18px; }
.case-data-visual h4 { font-size: 30px; line-height: 1.2; margin: 0 0 28px; overflow-wrap: anywhere; }
.case-data-visual dl { margin: 0 0 24px; }
.case-data-visual dl > div { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; padding: 14px 0; border-top: 1px solid #ccc; }
.case-data-visual dt, .case-data-visual dd { margin: 0; font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
.case-data-visual dd { font-weight: 600; }
.drawer-panel .case-data-visual p { font-size: 14px; }
.case-field-photos { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin: 28px 0; }
.drawer-panel .case-field-photos figure { display: block; margin: 0; min-width: 0; min-height: 0; height: auto; aspect-ratio: auto; padding: 0; background: transparent; border-radius: 0; }
.drawer-panel .case-field-photos img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.case-field-photos figcaption { font-size: 13px; line-height: 1.5; color: #666; padding: 12px 0; }
.drawer-panel .case-field-photos img { max-height: 420px; width: 100%; object-fit: contain; }
.case-stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-bottom: 30px; }
.case-stat-grid strong { display: block; font-size: 42px; line-height: 1.2; }
.case-stat-grid span { font-size: 13px; color: #555; }
.case-timeline { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; padding: 20px 0; margin: 0 0 20px; list-style: none; border-top: 1px solid #555; font-size: 13px; }
.case-bar-chart { margin-bottom: 24px; }
.case-chart-group { margin-bottom: 22px; }
.case-chart-group h5 { margin: 0 0 10px; font-size: 15px; line-height: 1.5; font-weight: 500; }
.case-bar-row { display: grid; grid-template-columns: 130px minmax(0,1fr) 85px; align-items: center; gap: 12px; min-height: 30px; }
.case-bar-row.single { grid-template-columns: minmax(0,1fr) 110px; }
.case-bar-row strong { font-size: 15px; text-align: right; }
.case-series { font-size: 12px; color: #666; }
.case-bar-track { height: 24px; position: relative; background: #e1e4e1; }
.case-bar-track::after { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: #8b9692; }
.case-bar-track i { display: block; position: absolute; top: 4px; height: 16px; width: var(--bar-size); background: #267c75; }
.case-bar-track i.positive { left: 50%; }
.case-bar-track i.negative { right: 50%; }
.case-bar-track i.series-1 { background: #606c7d; }
.case-chart-legend { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 24px; font-size: 13px; }
.case-chart-legend span::before { content: ''; display: inline-block; width: 12px; height: 12px; background: #267c75; margin-right: 8px; }
.case-chart-legend span + span::before { background: #606c7d; }
@media(max-width: 500px) {
  .case-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .case-bar-row { grid-template-columns: 78px minmax(0,1fr) 65px; gap: 6px; }
  .case-bar-row strong { font-size: 12px; }
  .case-timeline { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .case-data-visual { padding: 18px; }
  .case-data-visual h4 { font-size: 24px; }
  .case-data-visual dl > div { grid-template-columns: 1fr; gap: 6px; }
  .case-field-photos { grid-template-columns: 1fr; }
}
.drawer-panel #drawer-image,
.drawer-gallery img,
.drawer-inline-image img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
  transform: none;
}
@media (max-width: 760px) {
  .post-masonry { grid-template-columns: 1fr; gap: 32px; }
  .story-post h3 { font-size: 25px; }
  .drawer-panel { width: 100%; padding: 24px 20px 40px; }
}