/* ROVE — blog-post page. Shared chrome in site.css; tokens in colors_and_type.css. */

.article-top { padding: 56px 0 0; }
  .crumb { display: inline-flex; gap: 8px; align-items: center; font: var(--t-meta); color: var(--ink-2); text-decoration: none; margin-bottom: 28px; }
  .crumb:hover { color: var(--forest-700); }
  .article-head { max-width: 760px; margin: 0 auto; text-align: center; }
  .article-head .cat { font: var(--t-caps); letter-spacing: 0.12em; text-transform: uppercase; color: var(--soil-600); }
  .article-head h1 { font: var(--t-display-l); letter-spacing: -0.015em; margin: 16px 0 20px; text-wrap: balance; }
  .article-head .sub { font: 400 20px/1.5 var(--font-sans); color: var(--ink-2); text-wrap: pretty; }
  .article-byline { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; }
  .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--soil-300); display: grid; place-items: center; color: var(--soil-600); font: 600 15px/1 var(--font-sans); flex: 0 0 auto; }
  .article-byline .n { font: var(--t-body-strong); font-size: 14px; text-align: left; }
  .article-byline .d { font: var(--t-meta); color: var(--ink-2); margin-top: 1px; text-align: left; }

  .hero-img { margin: 48px auto 0; max-width: 1080px; }
  .hero-img figure { margin: 0; }
  .hero-img img { width: 100%; height: 520px; object-fit: cover; border-radius: var(--r-xl); display: block; box-shadow: var(--shadow-2); }
  .hero-img figcaption { font: var(--t-meta); color: var(--ink-2); text-align: center; margin-top: 12px; }

  /* Prose */
  .prose { max-width: 680px; margin: 0 auto; padding: 56px 0 0; }
  .prose p { font: 400 18px/1.7 var(--font-sans); color: var(--ink-1); margin: 0 0 24px; text-wrap: pretty; }
  .prose h2 { font: var(--t-h1); margin: 40px 0 14px; letter-spacing: -0.005em; }
  .prose .lead { font: 400 21px/1.6 var(--font-sans); color: var(--ink-1); }
  .prose a { color: var(--forest-700); }
  .pullquote {
    margin: 40px 0; padding: 4px 0 4px 28px; border-left: 3px solid var(--forest-500);
    font: 500 26px/1.35 var(--font-display); letter-spacing: -0.01em; color: var(--forest-900); text-wrap: balance;
  }
  .inline-img { margin: 40px 0; }
  .inline-img img { width: 100%; height: 380px; object-fit: cover; border-radius: var(--r-l); display: block; }
  .inline-img figcaption { font: var(--t-meta); color: var(--ink-2); margin-top: 10px; }
  .prose figure { margin: 0; }

  .article-foot { max-width: 680px; margin: 8px auto 0; padding: 40px 0; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 16px; }
  .article-foot .avatar { width: 56px; height: 56px; font-size: 18px; }
  .article-foot .n { font: var(--t-body-strong); }
  .article-foot .b { font: var(--t-small); color: var(--ink-2); margin-top: 4px; max-width: 480px; }

  /* Related */
  .related { background: var(--cream-100); border-top: 1px solid var(--line); }
  .related .wrap { padding: 72px 0; }
  .related h3 { font: var(--t-h1); margin: 0 0 28px; }
  .rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .rel { display: flex; flex-direction: column; text-decoration: none; background: #fff; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--shadow-1), var(--shadow-inset); transition: transform var(--d-fast) var(--ease-out); }
  .rel:hover { transform: translateY(-3px); }
  .rel .ph { aspect-ratio: 3/2; }
  .rel .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .rel .body { padding: 18px 18px 20px; }
  .rel .cat { font: var(--t-caps); letter-spacing: 0.12em; text-transform: uppercase; color: var(--forest-700); }
  .rel h4 { font: var(--t-h2); margin: 8px 0 0; color: var(--ink-1); text-wrap: balance; }

  @media (max-width: 880px) {
    .hero-img img { height: 320px; }
    .rel-grid { grid-template-columns: 1fr; }
    .article-head h1 { font: var(--t-display-m); }
  }