/* =====================================================================
   Post-page component styles (the SSR /feed/<slug>/ pages link this plus the
   brand base injected by the server). Relies on the brand CSS variables.
   ===================================================================== */
article.post{ padding:42px 0 0 }
.post .kicker{ font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--crimson) }
.post h1{ font-family:var(--display); font-weight:500; font-size:clamp(34px,6.5vw,56px); line-height:1.05; margin:10px 0 8px; letter-spacing:-.01em; }
.post .byline{ color:var(--ink-soft); font-size:15px; margin:0 0 4px }
.post .byline .pd{ color:var(--gold); font-style:italic; font-family:var(--display); font-size:16px }

/* vote widget */
.post-vote{ display:inline-flex; align-items:center; gap:10px; margin:22px 0 6px;
  border:1px solid var(--line); border-radius:999px; padding:6px 8px; }
.post-vote button{ font:inherit; line-height:1; background:none; border:0; cursor:pointer; color:var(--ink-soft);
  font-size:16px; padding:4px 8px; border-radius:999px; transition:.12s ease }
.post-vote button:hover{ color:var(--crimson); background:var(--paper-2) }
.post-vote button.up[aria-pressed="true"]{ color:var(--crimson) }
.post-vote button.down[aria-pressed="true"]{ color:#3b6ea5 }
.post-vote .count{ font-family:var(--display); font-weight:600; font-size:18px; min-width:2ch; text-align:center }
.post-vote .vlabel{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); padding-right:6px }

.post-media{ max-width:100%; border-radius:12px; border:1px solid var(--line); margin:6px 0 18px; display:block }

/* poems read as verse; prose posts read as paragraphs */
.poem{ font-family:var(--display); font-size:clamp(18px,2.6vw,21px); line-height:1.85; color:var(--ink); }
.poem p{ margin:0 0 1.5em } .poem p:last-child{ margin-bottom:0 }
.prose{ font-size:17px; line-height:1.7; color:var(--ink); }
.prose p{ margin:0 0 1.1em } .prose p:last-child{ margin-bottom:0 }

.post .source{ margin-top:30px; font-size:13px; color:var(--ink-soft); overflow-wrap:anywhere }
.post .source a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--crimson); padding-bottom:1px }
.post .source a:hover{ color:var(--crimson) }