/* Journal styles. Extends styles-v7.css; reuses its tokens so the blog cannot
   drift from the rest of the site. */

/* ------------------------------------------------------------ index grid */
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:2.5rem 2rem}
.post-card a{display:block;text-decoration:none;color:inherit}
.post-card .thumb{display:block;aspect-ratio:16/10;overflow:hidden;margin-bottom:1.1rem;
  background:rgba(16,13,11,.06)}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease)}
.post-card a:hover .thumb img{transform:scale(1.04)}
.post-card h3{font-size:1.35rem;line-height:1.25;margin:0 0 .55rem;font-weight:600}
.post-card p{margin:0 0 .7rem;opacity:.75;font-size:.95rem;line-height:1.6}
.post-card .card-meta{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:.55}

/* ----------------------------------------------------------- article body */
.post-meta{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;opacity:.6;
  margin-top:1.4rem}
.post-body{max-width:46rem;font-size:1.03rem;line-height:1.8}
.post-body h2{font-size:1.7rem;line-height:1.25;margin:2.6rem 0 .8rem;font-weight:600}
.post-body h3{font-size:1.25rem;margin:2rem 0 .6rem;font-weight:600}
.post-body p{margin:0 0 1.15rem}
.post-body ul,.post-body ol{margin:0 0 1.15rem;padding-left:1.3rem}
.post-body li{margin-bottom:.45rem}
.post-body blockquote{margin:1.8rem 0;padding-left:1.4rem;border-left:2px solid var(--red);
  font-size:1.15rem;line-height:1.6;font-style:italic;opacity:.9}
.post-body a{color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--red)}
.post-body a:hover{color:var(--red)}
.post-body img{max-width:100%;height:auto;margin:1.6rem 0}

/* Images placed between paragraphs. They break the measure deliberately -
   the text column is 46rem for readability, but a photograph at that width
   reads as an afterthought, so figures run wider on larger screens. */
.post-body figure{margin:2.4rem 0}
.post-body figure img{display:block;width:100%;margin:0;border-radius:2px}
.post-body figcaption{margin-top:.7rem;font-size:.82rem;line-height:1.5;
  letter-spacing:.02em;opacity:.62}
@media(min-width:1100px){
  .post-body figure.wide{width:min(58rem,calc(100vw - 8rem))}
}
@media(prefers-reduced-motion:no-preference){
  .post-body figure img{transition:opacity .4s ease}
}

/* ------------------------------------------------------------------ likes */
.post-like{margin-top:2.4rem}
.like-btn{display:inline-flex;align-items:center;gap:.55rem;padding:.6rem 1.15rem;
  font:600 .8rem/1 'Montserrat',sans-serif;letter-spacing:.06em;
  color:inherit;background:transparent;border:1px solid currentColor;border-radius:2rem;
  cursor:pointer;opacity:.65;transition:opacity .3s,background .3s,color .3s}
.like-btn:hover{opacity:1}
.like-btn.liked{background:var(--red);border-color:var(--red);color:var(--ink);opacity:1}

/* --------------------------------------------------------------- comments */
.post-comments{max-width:46rem}
.comment-list{list-style:none;margin:0 0 2.6rem;padding:0}
.comment-list li{padding:1.2rem 0;border-top:1px solid rgba(168,159,147,.28)}
.comment-list li.reply{margin-left:2rem}
.comment-list .who{display:flex;gap:.8rem;align-items:baseline;margin:0 0 .4rem;
  font-size:.78rem;letter-spacing:.06em}
.comment-list .who b{font-size:.95rem;letter-spacing:0}
.comment-list .who time{opacity:.55;text-transform:uppercase;font-size:.7rem;letter-spacing:.1em}
.comment-list p{margin:0;line-height:1.7;opacity:.85}

.comment-form{display:grid;gap:.9rem;max-width:34rem}
.comment-form label{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  opacity:.6}
.comment-form small{display:block;margin-top:.3rem;text-transform:none;letter-spacing:0;
  font-size:.72rem;opacity:.7}
.comment-form input,.comment-form textarea{display:block;width:100%;margin-top:.45rem;
  padding:.7rem .85rem;font:400 .95rem 'Montserrat',sans-serif;color:inherit;
  background:transparent;border:1px solid rgba(168,159,147,.4);border-radius:2px}
.comment-form input:focus,.comment-form textarea:focus{outline:0;border-color:var(--red)}
.comment-form button{justify-self:start;padding:.75rem 1.5rem;
  font:600 .8rem 'Montserrat',sans-serif;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);background:var(--red);border:0;border-radius:2px;cursor:pointer}
.comment-form .muted{font-size:.78rem;opacity:.6;margin:0}

@media(max-width:640px){
  .post-grid{gap:2rem}
  .comment-list li.reply{margin-left:1rem}
}