/* ============================================
   Object / Project / Journal — Shared
   ============================================ */

/* ============================================
   Journal / Page Hero (list & single共通)
   ============================================ */
.p-journal-hero {
  background: var(--color-paper-2);
  padding: calc(var(--header-h) + var(--sp-9)) 0 var(--sp-9);
}
@media (min-width: 768px) {
  .p-journal-hero {
    padding: calc(var(--header-h) + var(--sp-10)) 0 var(--sp-10);
  }
}
.p-journal-hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.p-journal-hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-solid);
  letter-spacing: var(--ls-tight);
  margin-top: var(--sp-4);
}
.p-journal-hero__title em {
  font-style: italic;
  color: var(--color-brand);
}
.p-journal-hero__lead {
  margin-top: var(--sp-4);
  font-size: var(--fs-lead);
  color: var(--color-ink-2);
  max-width: 56ch;
}

/* ============================================
   Journal / List Page
   ============================================ */
.p-jlist {
  background: var(--color-paper);
  padding: var(--sp-9) 0;
}
@media (min-width: 768px) {
  .p-jlist {
    padding: var(--sp-10) 0;
  }
}
.p-jlist__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.p-jlist__grid {
  display: grid;
  gap: var(--sp-7) var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .p-jlist__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .p-jlist__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.p-jlist__foot {
  margin-top: var(--sp-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}
.p-jlist__count {
  font-size: var(--fs-sm);
  color: var(--color-mute);
  letter-spacing: var(--ls-meta);
}

/* ============================================
   Journal / Single Article
   ============================================ */

/* Article meta header */
.p-article-header {
  background: var(--color-paper-2);
  padding: calc(var(--header-h) + var(--sp-8)) 0 var(--sp-8);
}
.p-article-header__inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  gap: var(--sp-4);
}
.p-article-breadcrumb {
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-mute);
}
.p-article-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.p-article-breadcrumb li + li::before {
  content: "/";
  margin-right: var(--sp-2);
  color: currentColor;
}
.p-article-breadcrumb a:hover {
  color: var(--color-brand);
}
.p-article-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(var(--fs-subtitle), 5vw, var(--fs-section-title));
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--color-ink);
  text-wrap: balance;
}
.p-article-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--color-mute);
  letter-spacing: var(--ls-meta);
}
.p-article-meta__sep {
  color: var(--color-line);
}
.p-article-meta time {
  color: var(--color-ink-2);
}

/* Article hero visual */
.p-article-visual {
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--color-paper-3);
}
@media (max-width: 767px) {
  .p-article-visual {
    aspect-ratio: 4 / 3;
  }
}
.p-article-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Article body — prose */
.p-article-body {
  background: var(--color-paper);
  padding: var(--sp-7) 0;
}
@media (min-width: 768px) {
  .p-article-body {
    padding: var(--sp-8) 0;
  }
}
.p-article-body__inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.prose {
  display: grid;
  gap: var(--sp-5);
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  color: var(--color-ink-2);
}
.prose h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(var(--fs-card-title), 3vw, var(--fs-subtitle));
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--color-ink);
  margin-top: var(--sp-4);
}
.prose h3 {
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: var(--ls-heading);
  margin-top: var(--sp-3);
}
.prose p {
  color: var(--color-ink-2);
}
.prose strong {
  color: var(--color-ink);
  font-weight: 600;
}
.prose ul,
.prose ol {
  padding-left: var(--sp-6);
  display: grid;
  gap: var(--sp-2);
}
.prose ul {
  list-style: disc;
}
.prose ol {
  list-style: decimal;
}
.prose li {
  color: var(--color-ink-2);
}
.prose blockquote {
  border-left: 3px solid var(--color-brand);
  padding: var(--sp-4) var(--sp-6);
  background: var(--color-paper-2);
  border-radius: var(--radius-none) var(--radius-sm) var(--radius-sm) var(--radius-none);
}
.prose blockquote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-card-title);
  line-height: var(--lh-body);
  color: var(--color-ink);
}
.prose figure {
  display: grid;
  gap: var(--sp-3);
}
.prose figure img {
  width: 100%;
  border-radius: var(--radius-sm);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.prose figcaption {
  font-size: var(--fs-sm);
  color: var(--color-mute);
  letter-spacing: var(--ls-meta);
  text-align: center;
}
.prose hr {
  border: 0;
  border-top: 1px solid var(--color-line);
  margin: var(--sp-3) 0;
}

/* Prev / Next navigation */
.p-article-nav {
  border-top: 1px solid var(--color-line);
  background: var(--color-paper);
}
.p-article-nav__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.p-article-nav__item {
  padding: var(--sp-7) var(--sp-5) var(--sp-7) 0;
  display: grid;
  gap: var(--sp-2);
  border-bottom: 1px solid var(--color-line);
  transition: color var(--dur-1) var(--ease-out);
}
.p-article-nav__item:hover {
  color: var(--color-brand);
}
.p-article-nav__item--next {
  padding: var(--sp-7) 0 var(--sp-7) var(--sp-5);
  text-align: right;
  border-left: 1px solid var(--color-line);
}
.p-article-nav__label {
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-mute);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.p-article-nav__item--next .p-article-nav__label {
  justify-content: flex-end;
}
.p-article-nav__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--color-ink);
  text-wrap: balance;
  transition: color var(--dur-1) var(--ease-out);
}
.p-article-nav__item:hover .p-article-nav__heading {
  color: var(--color-brand);
}

/* Back to list */
.p-article-back {
  background: var(--color-paper);
  padding: var(--sp-9) 0 var(--sp-10);
  display: flex;
  justify-content: center;
}