/* blog.css — extends index.css. Load index.css first, then this file. */

.wide{
  max-width:1100px;
}

.back-link{
  display:inline-flex;
  align-items:center;
  gap:0.55rem;
  font-size:0.7rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--fg-dim);
  text-decoration:none;
  margin-bottom:2.4rem;
  opacity:0;
  animation:rise 0.7s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:0.02s;
  transition:color 0.3s ease, gap 0.3s ease;
}

.back-link i{ font-size:0.65rem; }

.back-link:hover,
.back-link:focus-visible{
  color:var(--fg);
  gap:0.8rem;
}

/* ---------- tile grid (blog homepage) ---------- */

.post-grid{
  margin-top:3.4rem;
  padding-top:2.2rem;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:clamp(1.8rem, 4vw, 2.8rem);
  opacity:0;
  animation:rise 0.8s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:0.42s;
}

.post-tile{
  display:flex;
  flex-direction:column;
  gap:0.95rem;
  text-decoration:none;
  color:var(--fg);
}

.post-thumb{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--bg-soft);
}

.post-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(1) contrast(1.05);
  transform:scale(1.02);
  transition:filter 0.55s ease, transform 0.6s cubic-bezier(.16,1,.3,1);
}

.post-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid transparent;
  transition:border-color 0.4s ease;
  pointer-events:none;
}

.post-tile:hover .post-thumb img,
.post-tile:focus-visible .post-thumb img{
  filter:grayscale(0) contrast(1);
  transform:scale(1.08);
}

.post-tile:hover .post-thumb::after,
.post-tile:focus-visible .post-thumb::after{
  border-color:var(--fg);
}

.post-tile:focus-visible{ outline:none; }
.post-tile:focus-visible .post-thumb{ outline:1px solid var(--fg); outline-offset:4px; }

.post-meta{
  font-size:0.62rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--fg-dim);
}

.post-title{
  font-family:'Fraunces', serif;
  font-weight:400;
  font-size:1.15rem;
  line-height:1.28;
  transition:color 0.3s ease;
}

.post-tile:hover .post-title,
.post-tile:focus-visible .post-title{
  color:var(--fg-dim);
}

/* ---------- single post page ---------- */

.post-hero{
  margin-top:2.6rem;
  width:100%;
  aspect-ratio:16/9;
  border:1px solid var(--line);
  overflow:hidden;
  opacity:0;
  animation:rise 0.8s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:0.3s;
}

.post-hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.post-body{
  margin-top:2.6rem;
  padding-top:2.1rem;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:1.3rem;
  font-size:0.95rem;
  line-height:1.8;
  color:var(--fg);
  opacity:0;
  animation:rise 0.8s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:0.42s;
}

.post-body p{ opacity:0.9; }

.post-body h2{
  font-family:'Fraunces', serif;
  font-weight:400;
  font-size:1.4rem;
  margin-top:0.6rem;
  color:var(--fg);
}

.post-body blockquote{
  border-left:1px solid var(--line);
  padding-left:1.2rem;
  color:var(--fg-dim);
  font-style:italic;
}

@media (max-width:480px){
  .post-grid{ gap:1.6rem; }
  .post-title{ font-size:1.05rem; }
}