/* Blog-only layout. Tokens, nav, page-head and footer come from the main
   site's stylesheets, fetched at build time (docs/adr/0002). */

.post-list { list-style: none; margin: 0 0 var(--space-16); padding: 0; display: grid; gap: var(--space-5); max-width: 820px; }
.post-card a { display: block; background: #fff; border: 1px solid var(--paper-3); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-8); color: inherit; text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease; }
.post-card a:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.post-card h2 { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: var(--w-xbold); letter-spacing: -.01em; margin: 0 0 var(--space-2); color: var(--ink-900); }
.post-card p { margin: 0; color: var(--ink-700); line-height: var(--lh-normal); }
.post-date { font-family: var(--font-sans); font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--guru-700) !important; margin-bottom: var(--space-2) !important; }
.post-empty { color: var(--ink-500); margin-bottom: var(--space-16); }

.post-body { max-width: 760px; padding-bottom: var(--space-16); }
.post-hero { width: 100%; height: auto; border-radius: var(--radius-lg); margin: 0 0 var(--space-8); }
.prose { font-family: var(--font-body); font-size: 1.125rem; line-height: 1.7; color: var(--ink-900); }
.prose h2 { font-family: var(--font-display); font-size: var(--t-3xl); font-weight: var(--w-black); letter-spacing: -.02em; margin: var(--space-12) 0 var(--space-4); }
.prose h3 { font-family: var(--font-display); font-size: var(--t-xl); font-weight: var(--w-xbold); margin: var(--space-8) 0 var(--space-3); }
.prose a { color: var(--link); }
.prose a:hover { color: var(--link-hover); }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.prose blockquote { margin: var(--space-6) 0; padding: var(--space-4) var(--space-6); background: var(--paper-2); border-left: 4px solid var(--guru-500); border-radius: var(--radius-sm); }
.prose code { font-family: var(--font-mono); font-size: .9em; background: var(--paper-2); padding: .1em .35em; border-radius: var(--radius-xs); }

.post-tags { list-style: none; padding: 0; margin: var(--space-10) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.post-tags a { display: inline-block; font-family: var(--font-sans); font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--sen-700); background: var(--sen-100); padding: 4px 12px; border-radius: var(--radius-pill); text-decoration: none; }
.post-back { margin-top: var(--space-8); font-family: var(--font-sans); font-weight: var(--w-bold); }
.pager { display: flex; justify-content: space-between; margin-bottom: var(--space-16); font-family: var(--font-sans); font-weight: var(--w-bold); }

.yt { margin: 0 0 var(--space-8); }
.yt-facade, .yt iframe { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--sen-900); }
.yt-facade img { width: 100%; height: 100%; object-fit: cover; }
.yt-play { position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--guru-600); box-shadow: var(--shadow-md); }
.yt-play::after { content: ""; position: absolute; top: 50%; left: 50%; margin: -12px 0 0 -7px; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff; }
.yt-facade:hover .yt-play, .yt-facade:focus-visible .yt-play { background: var(--guru-700); }
.yt-facade:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.yt-label { position: absolute; left: var(--space-4); bottom: var(--space-4); right: var(--space-4); color: #fff; font-family: var(--font-sans); font-weight: var(--w-bold); text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.yt figcaption { margin-top: var(--space-2); font-family: var(--font-sans); font-size: var(--t-sm); color: var(--ink-500); }

/* Five nav links don't fit a phone; the logo already links home. */
@media (max-width: 640px) {
  .nav-links a.nav-wide { display: none; }
  .nav-links a { white-space: nowrap; }
}