/* ============================================================
   Journal — index and single post
   ============================================================ */
.jhero { padding-block: clamp(1.25rem, 1rem + 1vw, 2.25rem) clamp(2.5rem, 2rem + 2vw, 4rem); }
.jhero h1 { font-size: var(--step-4); margin-top: 0; }

.meta {
  display: flex; align-items: center; gap: .8rem;
  font-family: var(--ui); font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 1rem;
}
.meta__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--clay); }

/* ---------- lead card ---------- */
.lead__card {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  text-decoration: none; color: inherit;
  background: var(--sand);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.lead__card figure { margin: 0; overflow: hidden; height: 100%; max-height: 560px; }
.lead__card img {
  width: 100%; height: 100%; aspect-ratio: 4/3; max-height: 560px;
  object-fit: cover; transition: transform .8s var(--ease);
}
.lead__card:hover img { transform: scale(1.04); }
.lead__body { padding: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(1.5rem, 1rem + 2vw, 3rem) clamp(1.5rem, 1rem + 2vw, 3rem) 0; }
.lead__body h2 { font-size: var(--step-2); }
.lead__desc { color: var(--ink-soft); max-width: 40ch; }

/* ---------- grid ---------- */
.jgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.jcard { text-decoration: none; color: inherit; display: grid; align-content: start; }
.jcard figure { margin: 0 0 1.4rem; overflow: hidden; border-radius: var(--radius-lg); }
.jcard img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform .8s var(--ease); }
.jcard:hover img { transform: scale(1.04); }
.jcard h3 { font-size: var(--step-1); }
.jcard__desc { color: var(--ink-soft); font-size: var(--step-0); }

@media (prefers-reduced-motion: reduce) {
  .lead__card:hover img, .jcard:hover img, .mcard:hover img { transform: none; }
}

/* ---------- pagination ---------- */
.pagination { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.pagination .nav-links {
  display: flex; gap: .6rem; align-items: center; justify-content: center; flex-wrap: wrap;
  font-family: var(--ui); font-size: .78rem; letter-spacing: .1em;
}
.pagination .page-numbers {
  display: grid; place-items: center;
  min-width: 2.4rem; padding: .55em .8em;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  text-decoration: none;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.pagination .page-numbers:hover { border-color: var(--ink); }
.pagination .page-numbers.current { background: var(--clay); border-color: var(--clay); color: var(--paper); }
.pagination .page-numbers.dots { border-color: transparent; }

/* ---------- single post ---------- */
.ph { padding-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.ph__meta {
  display: flex; gap: .7rem; align-items: center;
  font-family: var(--ui); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 1.6rem;
}
.ph__meta a { text-decoration: none; color: var(--clay-deep); }
.ph h1 { font-size: var(--step-4); }
.ph__desc { font-size: var(--step-1); color: var(--ink-soft); max-width: 44ch; }
.ph__by {
  font-family: var(--ui); font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.ph__fig { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.ph__fig img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-lg); }

.prose { padding-block: clamp(3rem, 2rem + 3vw, 5rem); }
.page-links { font-family: var(--ui); font-size: .8rem; letter-spacing: .1em; text-align: center; }

.pf { background: var(--sand); padding-block: var(--section-y); }
.pf h2 { font-size: var(--step-3); }
.pf .btn { margin-top: 1.4rem; }

.more__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.mcard { text-decoration: none; color: inherit; }
.mcard figure { margin: 0 0 1.2rem; overflow: hidden; border-radius: var(--radius-lg); }
.mcard img { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform .8s var(--ease); }
.mcard:hover img { transform: scale(1.04); }
.mcard h3 { font-size: var(--step-1); }

/* ---------- search results ---------- */
.sres { display: grid; gap: 2rem; }
.sres__item { border-bottom: 1px solid var(--line-soft); padding-bottom: 2rem; }
.sres__item h2 { font-size: var(--step-2); margin-bottom: .3em; }
.sres__item h2 a { text-decoration: none; }
.sres__item p { color: var(--ink-soft); max-width: 60ch; }
.sres__kind {
  font-family: var(--ui); font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--clay-deep);
}

.sform { display: flex; gap: .6rem; flex-wrap: wrap; margin: 2rem 0; max-width: 30rem; }
.sform input[type="search"] {
  flex: 1 1 14rem;
  font-family: var(--body); font-size: 1rem;
  padding: .9em 1.2em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
}

@media (max-width: 860px) {
  .lead__card { grid-template-columns: 1fr; }
  .lead__body { padding: 0 1.5rem 2rem; }
}