/* Journal — index + post */

.page-journal { background: var(--base); }

.j-hero {
  padding: 64px 0 32px;
  border-bottom: 1px solid var(--line);
}
.j-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 5vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 10px 0 18px;
}
.j-hero h1 em {
  font-style: italic;
  color: var(--terracotta);
  font-weight: 300;
}
.j-hero-lead {
  font-size: 19px;
  color: var(--ink-2);
  max-width: 600px;
  margin: 0;
  line-height: 1.5;
}

/* Post list wrapper. Was an inline style; needs to be a class so the
   short-viewport rules below can override it. */
.j-list { padding: 48px 0 96px; }

/* Laptop-height screens. Without this the hero fills the whole viewport and
   the page reads as empty until you scroll, because the first row of cards
   sits just below the fold. Tightening the hero lifts that row into view. */
@media (max-height: 900px) {
  .j-hero { padding: 36px 0 22px; }
  .j-hero h1 { font-size: clamp(34px, 3.6vw, 54px); margin: 8px 0 12px; }
  .j-hero-lead { font-size: 17px; max-width: 560px; }
  .j-list { padding: 28px 0 80px; }
}

/* Grid */
.j-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
@media (max-width: 900px) { .j-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 560px) { .j-grid { grid-template-columns: 1fr; gap: 24px; } }

.j-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  transition: transform .35s var(--ease);
}
.j-card:hover { transform: translateY(-3px); }
.j-card-media {
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--sand);
  margin-bottom: 16px;
}
.j-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.j-card:hover .j-card-media img { transform: scale(1.03); }
.j-card-body { padding: 0 4px; }
.j-card-cat {
  font-size: 11px;
  color: var(--terracotta);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.j-card-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--ink);
}
.j-card-excerpt {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0 0 12px;
}
.j-card-meta {
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.j-card-sep { margin: 0 6px; }

/* Post page */
.jp-hero {
  padding: 72px 0 24px;
}
.jp-back {
  display: inline-block;
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  margin-bottom: 24px;
  letter-spacing: 0.02em;
}
.jp-back:hover { color: var(--terracotta); }
.jp-cat {
  font-size: 11px;
  color: var(--terracotta);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.jp-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: var(--ink);
}
.jp-lead {
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 20px;
  max-width: 620px;
}
.jp-meta {
  font-size: 13px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.jp-sep { margin: 0 8px; }

/* Cover art is authored at 16:9 and is meant to be seen whole. The previous
   rule spanned the full viewport with a hard 560px height cap, so any window
   wider than about 995px silently centre-cropped the image, cutting headlines
   off the top and captions off the bottom. Capping the width instead keeps the
   full frame visible at every size. Full bleed still applies below 1200px, so
   mobile is unchanged. */
.jp-cover {
  margin: 40px auto 48px;
  max-width: 1200px;
}
.jp-cover img {
  width: 100%;
  height: auto;
  display: block;
}

/* Post body typography — editorial */
/* Keep the 32px side padding. This element is `class="jp-body wrap-narrow"`,
   and journal.css loads after core.css, so a shorthand `padding` here
   overrides .wrap-narrow's `padding: 0 32px` and pushes the text to the screen
   edge on mobile. It also left the body 32px wider than the title above it on
   desktop. Same applies to .jp-footer below. */
.jp-body {
  padding: 0 32px 64px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
}
.jp-body h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 56px 0 16px;
  color: var(--ink);
}
.jp-body h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.01em;
  margin: 40px 0 12px;
  color: var(--ink);
}
.jp-body p { margin: 0 0 20px; }
.jp-body ul, .jp-body ol { margin: 0 0 20px; padding-left: 24px; }
.jp-body li { margin-bottom: 8px; }
.jp-body strong { font-weight: 700; color: var(--ink); }
.jp-body a { color: var(--terracotta); text-decoration: underline; text-underline-offset: 3px; }
.jp-body a:hover { color: var(--terracotta-dark); }
.jp-body blockquote {
  border-left: 3px solid var(--terracotta);
  padding: 4px 0 4px 24px;
  margin: 32px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink);
}

/* CTA at foot of post */
.jp-footer {
  padding: 24px 32px 64px;
}
.jp-cta {
  background: var(--sand);
  border-radius: 16px;
  padding: 32px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.jp-cta h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  margin: 8px 0 4px;
  letter-spacing: -0.01em;
}
.jp-cta p {
  font-size: 14px;
  color: var(--ink-2);
  margin: 0;
  max-width: 360px;
}
.jp-cta .btn-primary {
  background: var(--terracotta-dark);
  color: var(--white);
  flex-shrink: 0;
}

/* More posts */
.jp-more {
  border-top: 1px solid var(--line);
  padding: 64px 0 96px;
}
.jp-more-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.015em;
  margin: 0 0 32px;
}