/* ============================================================
   /journal — landing index + post page
   Borrows the editorial layout from the case-study + about pages,
   set on the dark base canvas with a light prose flow for posts.
   ============================================================ */

/* ---------- Hero (index + post) ---------- */
.journal-hero {
  /* Top padding matches every other hero on the site (svc-hero,
     work-hero, about-hero, person-hero, section-hero). Keeps the
     eyebrow at a consistent distance from the nav across pages. */
  padding: calc(var(--nav-h) + 40px) var(--pad-x) clamp(56px, 7vh, 96px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  border-bottom: 1px solid var(--border);
  background-color: var(--bg);
  background-image: radial-gradient(circle, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 28px 28px;
}
.journal-hero__eye {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.journal-hero__eye .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(91, 90, 255, .15);
}
.journal-hero__title {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  font-size: clamp(40px, 5.6vw, 96px);
  letter-spacing: -.035em;
  line-height: 1.05;
  max-width: 22ch;
}
.journal-hero__title em { font-style: italic; font-weight: 500; color: var(--cream); }
.journal-hero__sub {
  font-size: clamp(17px, .4vw + 1rem, 20px);
  line-height: 1.55;
  color: #cfcfcf;
  max-width: 60ch;
}

/* ---------- Index list ---------- */
.journal-list {
  padding: clamp(56px, 7vw, 96px) var(--pad-x) clamp(72px, 9vw, 120px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
@media (max-width: 720px) {
  .journal-list { grid-template-columns: 1fr; }
}
.journal-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: linear-gradient(180deg, #141414, #111);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .25s;
}
.journal-card:hover { transform: translateY(-3px); border-color: var(--blue); }
.journal-card__link {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2.6vw, 32px);
  color: inherit;
  text-decoration: none;
}
.journal-card__meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.journal-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 1.6vw + .5rem, 32px);
  letter-spacing: -.022em;
  line-height: 1.15;
  max-width: 22ch;
}
.journal-card__title em { font-style: italic; font-weight: 500; color: var(--cream); }
.journal-card__excerpt {
  font-size: 15.5px;
  line-height: 1.6;
  color: #b8b8b8;
  max-width: 56ch;
}
.journal-card__more {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.journal-card:hover .journal-card__more { color: var(--cream); }

/* ---------- Post page ---------- */
.journal-post {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 64px) var(--pad-x) clamp(72px, 9vw, 120px);
}
.journal-post__head { margin-bottom: clamp(32px, 4vw, 56px); }
.journal-post__eye {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.journal-post__eye .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(91, 90, 255, .15);
}
.journal-post__title {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  font-size: clamp(36px, 5vw, 72px);
  letter-spacing: -.035em;
  line-height: 1.05;
  max-width: 22ch;
  margin-bottom: 18px;
}
.journal-post__title em { font-style: italic; font-weight: 500; color: var(--cream); }
.journal-post__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.journal-post__meta a { color: #fff; }

.journal-post__body {
  font-size: clamp(17px, .4vw + 1rem, 20px);
  line-height: 1.7;
  color: #d6d6d6;
}
.journal-post__body p { margin: 0 0 1.2em; }
.journal-post__body p:last-child { margin-bottom: 0; }
.journal-post__body strong { color: #fff; font-weight: 500; }

.journal-post__foot {
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
}