/* =========================
   Journal page shell
========================= */

body .n21journal-page-shell {
  padding: 22px 0 40px !important;
}

body .n21journal-wrap {
  width: min(1000px, calc(100% - 24px)) !important;
  margin: 0 auto !important;
}

/* =========================
   Shared panel styling
========================= */

body .n21journal-panel {
  background: rgba(10, 12, 20, 0.94) !important;
  border: 1px solid rgba(150, 170, 230, 0.18) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28) !important;
  padding: 24px !important;
}

body .n21journal-page-title,
body .n21journal-entry-title,
body .n21journal-card-title {
  line-height: 1.2 !important;
}

body .n21journal-page-title {
  text-align: center !important;
  margin: 0 0 10px !important;
}

body .n21journal-page-intro {
  text-align: center !important;
  margin: 0 0 28px !important;
  opacity: 0.88 !important;
  line-height: 1.7 !important;
}

/* =========================
   Journal listing
========================= */

body .n21journal-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

body .n21journal-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(150, 170, 230, 0.12) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}

body .n21journal-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25) !important;
  border-color: rgba(150, 170, 230, 0.28) !important;
}

body .n21journal-card-link {
  display: flex !important;
  gap: 18px !important;
  align-items: stretch !important;
  padding: 18px !important;
  text-decoration: none !important;
  color: inherit !important;
}

body .n21journal-thumb-wrap {
  width: 220px !important;
  min-width: 220px !important;
}

body .n21journal-thumb {
  display: block !important;
  width: 100% !important;
  height: 140px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

body .n21journal-card-content {
  flex: 1 !important;
  min-width: 0 !important;
}

body .n21journal-card-title {
  margin: 0 0 8px !important;
  font-size: 1.5rem !important;
}

body .n21journal-card-date {
  margin: 0 0 12px !important;
  font-size: 0.95rem !important;
  opacity: 0.75 !important;
}

body .n21journal-card-excerpt {
  margin: 0 0 14px !important;
  line-height: 1.75 !important;
  opacity: 0.95 !important;
}

body .n21journal-readmore {
  display: inline-block !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

/* =========================
   Entry page
========================= */

body .n21journal-backlink {
  display: inline-block !important;
  margin: 0 0 14px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

body .n21journal-entry-panel {
  padding: 28px !important;
}

body .n21journal-entry-title {
  margin: 0 0 10px !important;
}

body .n21journal-entry-date {
  margin: 0 0 22px !important;
  opacity: 0.75 !important;
}

body .n21journal-entry-thumb {
  display: block !important;
  width: 100% !important;
  max-width: 720px !important;
  height: auto !important;
  margin: 0 auto 24px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body .n21journal-entry-body {
  line-height: 1.85 !important;
}

body .n21journal-entry-body p:first-child {
  margin-top: 0 !important;
}

body .n21journal-entry-body img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 12px !important;
}

body .n21journal-entry-body a {
  text-decoration: underline !important;
}

body .n21journal-entry-body h2,
body .n21journal-entry-body h3,
body .n21journal-entry-body h4 {
  margin-top: 1.6em !important;
  margin-bottom: 0.6em !important;
}

/* =========================
   Mobile
========================= */

@media (max-width: 760px) {
  body .n21journal-page-shell {
    padding-top: 16px !important;
  }

  body .n21journal-panel,
  body .n21journal-entry-panel {
    padding: 18px !important;
  }

  body .n21journal-card-link {
    flex-direction: column !important;
    gap: 14px !important;
  }

  body .n21journal-thumb-wrap {
    width: 100% !important;
    min-width: 0 !important;
  }

  body .n21journal-thumb {
    height: auto !important;
    max-height: 280px !important;
  }

  body .n21journal-card-title {
    font-size: 1.3rem !important;
  }
}