/* Insights in the MycoMuse journal format (Felix, 2026-10-16), on MindMorph's
   palette and type. Linked from insights.php, insights-tag.php and post.php
   only, so it sits after inner.css and overrides the card-grid blog rules
   there without touching them. Phone first; 921px is the sidebar breakpoint
   the rest of the theme uses. */

/* index and tag headers: label, heading, intro stacked, like the journal */
.jr-head h1{max-width:16em}
.jr-head .phead-lede{max-width:38em}
.jr-col{max-width:46rem}

/* ---------- the list rows ---------- */
.journal-list{margin-top:8px;border-bottom:var(--hair,1px) solid var(--line)}
.journal-item{position:relative;padding:22px 0;border-top:var(--hair,1px) solid var(--line)}
.journal-item.has-thumb{display:flex;gap:14px;align-items:flex-start}
.journal-thumb{flex:none;display:block;width:88px;border-radius:var(--radius-img);overflow:hidden;background:var(--wash-deep)}
.journal-thumb img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.journal-body{min-width:0}
.journal-item h2,.journal-item h3{margin:0;font:500 1.22rem/1.3 var(--serif);color:var(--ink);text-wrap:balance;letter-spacing:0}
.journal-item h2 a,.journal-item h3 a{color:inherit;text-decoration:none}
/* the whole row answers a tap: the title link's box covers it */
.journal-item h2 a::after,.journal-item h3 a::after{content:"";position:absolute;inset:0}
.journal-item:hover h2 a,.journal-item:hover h3 a,.journal-item h2 a:focus-visible,.journal-item h3 a:focus-visible{color:var(--accent);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
.journal-date{margin:6px 0 0;font:500 .8rem/1.3 var(--sans);letter-spacing:.06em;color:var(--quiet)}
.journal-teaser{margin:8px 0 0;color:var(--ink-soft);font-size:.95rem;line-height:1.6}
@media (min-width:561px){
  .journal-item{padding:26px 0}
  .journal-item.has-thumb{gap:20px}
  .journal-thumb{width:120px}
  .journal-item h2{font-size:1.4rem}
}

/* ---------- one post ---------- */
.jr-post .post-head .eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px}
.jr-post .post-head .eyebrow time{color:var(--quiet);letter-spacing:.1em}
.jr-dot{color:var(--quiet)}
.jr-post .post-head h1{font-size:clamp(2rem,7vw,3.2rem);max-width:20em}
.post-byline{margin-top:16px}
.post-byline a{color:var(--ink);text-underline-offset:.18em}
.jr-post .post-hero img{aspect-ratio:16/9}
.jr-post .prose-post h2{font-size:clamp(1.4rem,4.8vw,1.75rem)}
.post-faq h2{font-size:clamp(1.4rem,4.8vw,1.75rem)}

/* inline diagrams that ship inside a post's text (an <svg> in a figure) */
.prose .post-figure{margin:2em 0}
.prose .post-figure svg{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius-img)}
.prose .post-figure figcaption{margin-top:10px;font-size:.85rem;line-height:1.5;color:var(--quiet)}

/* "More from Insights": smaller stills, the teaser kept to two lines */
.post-related{margin-top:56px;padding-top:8px}
.post-related h2{font-size:1.5rem;margin:0 0 14px}
.post-related .journal-thumb{width:72px}
.post-related .journal-item h3{font-size:1.1rem}
.post-related .journal-teaser{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jr-all{margin-top:36px}
@media (min-width:561px){.post-related .journal-thumb{width:88px}}