/* Hedl Ranč — blog and recipes (blog*.html, recept*.html): the farm's own posts and recipes, moved over from the old
   site with their wording unchanged. Builds on .doc / .doc__head / .doc__body in pages.css. */

/* ───────── index: cards ───────── */
.jgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 4.4vw, 72px) var(--g); }
@media (max-width: 1100px) { .jgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .jgrid { grid-template-columns: 1fr; } }
.jcard { display: grid; gap: 14px; align-content: start; color: inherit; text-decoration: none; }
.jcard__img { aspect-ratio: 16 / 10; }
.jcard__img img { transition: opacity .9s var(--ease-out), scale 1.2s var(--ease); }
.jcard__date { color: var(--muted); margin-top: 4px; }
.jcard__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.45rem, 1.9vw, 1.95rem); line-height: 1.1; letter-spacing: -.008em; text-wrap: balance; transition: color .35s var(--ease); }
.jcard:hover .jcard__title { color: var(--muted); }
.jcard:hover .jcard__img img { scale: 1.035; }
.jcard:focus-visible { outline: 2px solid currentColor; outline-offset: 8px; border-radius: 3px; }
.jgroup + .jgroup { margin-top: clamp(72px, 9vw, 140px); }
.jgroup > h2 { margin-bottom: clamp(24px, 3vw, 40px); padding-top: 22px; border-top: 1px solid var(--line); }

/* ───────── one post or recipe ───────── */
.doc__head .mono a { color: inherit; text-decoration: none; }
.doc__head .mono a:hover { text-decoration: underline; text-underline-offset: 3px; }
.jpost__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.5rem, 5.4vw, 5.4rem); line-height: 1; letter-spacing: -.02em; max-width: 19ch; text-wrap: balance; }
.jpost__cover { aspect-ratio: 16 / 9; max-width: 1100px; margin-bottom: clamp(44px, 6vw, 88px); }
.jpost .doc__body h2 {
  margin-top: 2em; padding-top: 0; border-top: 0;
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.3vw, 2.15rem); line-height: 1.14; letter-spacing: -.01em; text-transform: none;
}
.jpost .doc__body h3 { margin-top: 1.7em; font-size: clamp(1.35rem, 1.8vw, 1.6rem); }
.jpost .doc__body h4 { margin-top: 1.6em; font-family: var(--sans); font-weight: 600; font-size: 1.0625rem; line-height: 1.4; }
.jpost .doc__body h2 + *, .jpost .doc__body h3 + *, .jpost .doc__body h4 + * { margin-top: .6em; }
.jpost .doc__body > :first-child { margin-top: 0; }
.jpost .doc__body strong { font-weight: 600; }
.jpost .doc__body :is(h2, h3) strong { font-weight: inherit; }
.jpost .doc__body ul { list-style: disc; padding-left: 1.25em; }
.jpost .doc__body ol { list-style: decimal; padding-left: 1.4em; }
.jpost .doc__body li::marker { color: var(--muted); }
.jpost .doc__body .lede + .lede { margin-top: .7em; }
.jpost .doc__body .lede + :not(.lede) { margin-top: 2em; }
/* recipes: the steps are headings in their text; quieter than an article's */
.jrecipe .doc__body h2 { font-size: clamp(1.4rem, 1.9vw, 1.75rem); margin-top: 1.7em; }
.jpost__back { margin-top: clamp(56px, 7vw, 104px); }
@media (max-width: 640px) {
  .jpost__cover { aspect-ratio: 4 / 3; margin-inline: calc(var(--g) * -1); border-radius: 0; }
}