.story { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(var(--space-6), 5vw, var(--space-8)); align-items: center; padding-block: var(--space-8); border-top: var(--hairline) solid var(--border); scroll-margin-top: var(--nav-h); }
.story.is-flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.story.is-flip .story-media { order: 2; }
.story-media { display: grid; gap: var(--space-3); min-width: 0; }
.story-lead { display: block; width: 100%; padding: 0; border: 0; background: var(--tint); cursor: pointer; }
.story-lead img { width: 100%; height: auto; }
.story-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.story-thumbs button { padding: 0; border: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tint); cursor: pointer; }
.story-thumbs img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.story-thumbs button:hover img { transform: scale(1.05); }
.story-copy { display: grid; gap: var(--space-4); justify-items: start; }
.story-copy h3 { font-size: var(--fs-h2); }
.story-copy p { color: var(--muted); }
.story-copy dl { width: 100%; margin: 0; display: grid; gap: var(--space-2); padding-block: var(--space-3); border-block: var(--hairline) solid var(--border); font-size: var(--fs-small); }
.story-copy dl div { display: flex; justify-content: space-between; gap: var(--space-4); }
.story-copy dt { color: var(--muted); }
.story-copy dd { margin: 0; text-align: right; }
@media (max-width: 860px) {
  .story, .story.is-flip { grid-template-columns: 1fr; padding-block: var(--space-7); }
  .story.is-flip .story-media { order: 0; }
}

.sample-note { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.04em; color: var(--muted); }
.story-worries { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5) var(--space-7); align-items: center; padding-bottom: var(--space-6); }
.story-score { display: flex; align-items: baseline; gap: var(--space-3); }
.story-score b { font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--fs-h1); line-height: 1; }
.story-score span { max-width: 7rem; color: var(--muted); font-size: var(--fs-small); line-height: 1.3; }
.story-pills { display: grid; gap: var(--space-3); }
.story-pills > span { color: var(--muted); font-size: var(--fs-small); }
.story-pills > div { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.story-quote { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 1.45rem; line-height: 1.3; text-wrap: pretty; animation: quote-in var(--dur-slow) var(--ease-out); }
@keyframes quote-in { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 860px) { .story-worries { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .story-quote { animation: none; } }