/* ── JOURNAL LIST PAGE ── */
#journal-hero {
  padding-top: var(--nav-h);
  background: var(--black);
  min-height: 260px;
  display: flex; flex-direction: column; justify-content: flex-end;
  position: relative; overflow: hidden;
}
.jh-bg-word {
  position: absolute;
  font-family: var(--serif);
  font-size: clamp(5rem, 16vw, 12rem);
  font-weight: 900; color: rgba(255,255,255,.03);
  line-height: 1; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap; pointer-events: none;
  letter-spacing: -.02em; user-select: none;
}
.jh-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 48px calc(var(--sp) * 4) 52px;
  position: relative; z-index: 1;
}
.jh-label {
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sage-light); margin-bottom: 14px;
}
.jh-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900; line-height: 1.1;
  letter-spacing: -.02em; color: var(--white); margin-bottom: 16px;
}
.jh-title em { font-style: italic; color: var(--sage-light); }
.jh-sub { font-size: 14px; color: var(--ondark-1); max-width: 480px; line-height: 1.6; }

#journal-hero .breadcrumb { background: transparent; border-bottom: 1px solid rgba(255,255,255,.06); }
#journal-hero .breadcrumb-inner { color: var(--ondark-2); }
#journal-hero .breadcrumb-inner a { color: var(--ondark-2); }
#journal-hero .breadcrumb-inner a:hover { color: rgba(255,255,255,.85); }
#journal-hero .breadcrumb-sep { color: rgba(255,255,255,.15); }
#journal-hero .bc-current { color: rgba(255,255,255,.6); }

#journal-tags {
  padding: 24px 0 0;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
}
.jt-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 calc(var(--sp) * 4) 20px;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.jt-label {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-right: 4px;
}
.jt-pill {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 14px; border: 1px solid var(--border); border-radius: 100px;
  color: var(--muted); background: none; cursor: pointer;
  transition: all .15s; font-family: var(--sans);
}
.jt-pill:hover { border-color: var(--sage); color: var(--sage); }
.jt-pill.on { background: var(--black); border-color: var(--black); color: var(--white); }
.jt-inner:empty { display: none; padding: 0; margin: 0; }

#journal-posts { padding: 64px 0 100px; background: var(--cream); }
.jp-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 calc(var(--sp) * 4); }

.jp-list { display: flex; flex-direction: column; }

.jp-item {
  display: grid; grid-template-columns: 1fr 200px;
  gap: 32px; align-items: start;
  padding: 36px 0; border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: opacity .15s;
}
.jp-item.hidden { display: none; }
.jp-item:hover { opacity: .75; }

.jp-meta {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.jp-date {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.jp-tag {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 8px; border: 1px solid var(--border);
  border-radius: 100px; color: var(--muted);
}
.jp-tag-rubrica {
  border-color: var(--sage-deep); background: var(--sage-deep); color: var(--white);
}
.jp-author {
  font-size: 11px; color: var(--muted); margin-left: auto;
}
.jp-microtags {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px;
}
.jp-microtag {
  font-size: 11px; color: var(--muted); opacity: .8;
}
.jp-title {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
  font-weight: 700; line-height: 1.25;
  color: var(--black); margin-bottom: 10px;
  letter-spacing: -.01em;
}
.jp-excerpt {
  font-size: 14px; color: var(--muted); line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.jp-read {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sage-text); margin-top: 14px; display: inline-block;
}

.jp-cover {
  width: 200px; height: 134px;
  background: var(--black); border-radius: var(--radius);
  overflow: hidden; flex-shrink: 0;
}
.jp-cover img { width: 100%; height: 100%; object-fit: cover; }
.jp-cover-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.6rem; font-weight: 900;
  color: rgba(255,255,255,.08); letter-spacing: -.02em;
  text-transform: uppercase;
}

.jp-empty {
  padding: 60px 0; text-align: center;
  font-size: 15px; color: var(--muted); font-style: italic;
}

@media (max-width: 680px) {
  .jp-item { grid-template-columns: 1fr; gap: 16px; }
  .jp-cover { width: 100%; height: 180px; order: -1; }
  .jp-title { font-size: 1.3rem; }
}