/* Farm stories: the real place, an explicit example, and records to try. */
.farm-story { margin: 3rem 0; padding: clamp(1.5rem,4vw,3rem); background: #e9e9d8; border: 1px solid #bdc7b0; border-radius: 3px; scroll-margin-top: 1.5rem; }
.farm-story .story-label { display: inline-block; margin: 0 0 1rem; padding: .35rem .7rem; background: #f0d48e; color: #4b492d; font-size: .8125rem; }
.farm-story .story-eyebrow { font-size: .875rem; letter-spacing: .06em; color: #4c6447; }
.farm-story h2 { max-width: 760px; }
.story-pair { display: grid; grid-template-columns: 1.05fr 1fr; gap: 1.5rem; margin: 2rem 0; align-items: stretch; }
.story-pair figure { margin: 0; display: flex; flex-direction: column; background: #214535; color: #f5f0dd; }
.story-pair figure img { display: block; width: 100%; height: 100%; min-height: 250px; object-fit: cover; }
.story-pair figcaption { padding: .8rem 1rem; font-size: .8125rem; }
.story-record { background: #fffaf0; border: 1px solid #c9ccb9; padding: 1.5rem; }
.story-record > span { font-size: .8125rem; color: #657055; }
.story-record h3 { font: 400 1.8rem/1.2 Georgia,serif; margin: 1rem 0; }
.story-record dl { margin: 0; }
.story-record dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-top: 1px solid #d8dccb; }
.story-record dt { color: #5b6953; }
.story-record dd { margin: 0; text-align: right; font-weight: 600; }
.story-record .story-result { color: #8a4a30; }
.story-timeline { list-style: none; padding: 0 !important; margin: 2rem 0; }
.story-timeline li { display: grid; grid-template-columns: 10rem 1fr; gap: 1.5rem; padding: 1.1rem 0; border-top: 1px solid #b8c3aa; margin: 0; }
.story-timeline time, .story-timeline .story-step { font-size: .875rem; color: #58684d; }
.story-timeline h3 { margin: 0 0 .5rem; font-size: 1.15rem; }
.story-timeline p { margin: 0; }
.story-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; margin-top: 1.8rem; }
.story-actions a { display: block; max-width: 100%; padding-block: .35rem; font-size: 1rem; line-height: 1.5; text-underline-offset: .3em; }
.story-actions a:first-child { padding: .8rem 1rem; background: #244b36; color: #fff; text-decoration: none; }
.story-actions a:hover { text-decoration: underline; }
.story-meta { font-size: .8125rem !important; color: #58684d; }
.story-excerpt { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2.5rem; }
.story-excerpt h2 { font-size: clamp(2rem,3.6vw,3.3rem); }
.story-excerpt .story-steps p { border-top: 1px solid #bbc5af; padding-top: 1rem; }
.story-excerpt .story-steps strong { display: block; font-size: .875rem; color: #586b4c; margin-bottom: .4rem; }
.story-library { margin: 3rem 0; }
.story-library > details { border-top: 1px solid #b3c0a7; padding: 1.3rem 0; scroll-margin-top: 1rem; }
.story-library summary { cursor: pointer; font: 400 clamp(1.4rem,2.5vw,2rem)/1.3 Georgia,serif; padding: .5rem 0; }
.story-library summary::marker { color: #73854f; }
.story-library .farm-story { margin: 1rem 0; }
.story-route { display: flex; flex-wrap: wrap; gap: .7rem 1.5rem; margin: 1.5rem 0 2rem; }
.story-route a { font-size: .9375rem; text-transform: none; letter-spacing: 0; text-decoration: underline; }
@media(max-width:780px) { .story-pair,.story-excerpt { grid-template-columns: 1fr; gap: 1.5rem; } .story-timeline li { grid-template-columns: 1fr; gap: .4rem; } .story-record dl > div { flex-wrap: wrap; } .farm-story { margin-block: 2rem; } }