/*
  Blog (Journal) single/archive pages and the Logo Mark single page —
  extends front.css/pages.css tokens and shared components
  (.term-hero*, .page-hero, .page-layout, .sidebar-card, .journal-grid/
  .jcard, .mark-grid, .gli-fallback-tile). Only the pieces those don't
  already cover live here: the post hero, sidebar term pills, post
  navigation, and comment styling.
*/

/* Journal post hero */
.post-hero{
  position:relative; padding:150px 0 60px;
  background-image:radial-gradient(var(--line) 1px, transparent 1px);
  background-size:26px 26px; background-position:-6px -6px;
}
.post-hero-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:40px; align-items:center; }
.post-hero h1{ font-size:clamp(30px,4.6vw,50px); line-height:1.08; margin-top:14px; max-width:22ch; }
.post-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:18px; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:12.5px; color:var(--ink-faint); }
.post-meta .sep{ color:var(--line); }
.post-hero-visual{ aspect-ratio:1/0.8; }
.post-hero-visual img{ width:100%; height:100%; object-fit:cover; border:1px solid var(--line); border-radius:var(--radius-sm); display:block; }

/* Small inline term pills — a mark's taxonomy terms in the sidebar */
.term-pill-list{ display:flex; flex-wrap:wrap; gap:8px; }
.term-pill{
  display:inline-flex; align-items:center; font-size:12.5px; font-weight:600;
  padding:7px 12px; border:1px solid var(--line); border-radius:999px;
  transition:border-color .2s ease, color .2s ease;
}
.term-pill:hover{ border-color:var(--ink); color:var(--magenta); }

/* Post navigation (prev/next) */
.post-navigation{ margin-top:48px; padding-top:28px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.post-navigation .nav-links{ display:flex; justify-content:space-between; width:100%; gap:20px; flex-wrap:wrap; }
.post-navigation .nav-subtitle{ display:block; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:6px; }
.post-navigation .nav-title{ font-weight:700; font-size:15px; transition:color .2s ease; }
.post-navigation a:hover .nav-title{ color:var(--magenta); }
.post-navigation .nav-next{ text-align:right; margin-left:auto; }

/* Comments */
.comments-area{ margin-top:56px; padding-top:40px; border-top:1px solid var(--line); }
.comments-title{ font-family:'Bricolage Grotesque',sans-serif; font-size:22px; margin-bottom:24px; }
.comment-list{ list-style:none; margin:0; padding:0; }
.comment-list .children{ list-style:none; margin:0; padding-left:32px; }
.comment-list .comment-body{ padding:18px 0; border-bottom:1px solid var(--line); }
.comment-list .comment-author .avatar{ border-radius:50%; margin-right:10px; vertical-align:middle; }
.comment-list .comment-author .fn{ font-weight:700; }
.comment-list .comment-metadata{ font-size:12px; color:var(--ink-faint); font-family:'IBM Plex Mono',ui-monospace,monospace; }
.comment-list .comment-content p{ margin-top:8px; color:var(--ink-soft); }
.comment-list .reply a{ font-size:12px; font-weight:700; font-family:'IBM Plex Mono',ui-monospace,monospace; text-transform:uppercase; letter-spacing:.05em; }
.comment-list .reply a:hover{ color:var(--magenta); }
.comment-reply-title{ font-family:'Bricolage Grotesque',sans-serif; font-size:18px; margin:32px 0 16px; }
.comment-form p{ margin-bottom:14px; }
.comment-form label{ display:block; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea{
  width:100%; border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px;
  font-family:'Manrope',sans-serif; font-size:15px; color:var(--ink); background:var(--paper);
}
.comment-form input:focus, .comment-form textarea:focus{ outline:none; border-color:var(--ink); }
.comment-form .form-submit input[type="submit"]{
  display:inline-flex; align-items:center; font-size:14px; font-weight:700; padding:11px 20px;
  border:1px solid var(--ink); background:var(--ink); color:#fff; border-radius:var(--radius-sm); cursor:pointer;
  transition:background .25s ease;
}
.comment-form .form-submit input[type="submit"]:hover{ background:var(--magenta); border-color:var(--magenta); }
.no-comments{ color:var(--ink-soft); }

@media (max-width:900px){
  .post-hero-grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .post-hero{ padding:120px 0 48px; }
}