/* Hiroi Journal — article + index pages, on the app's ink-on-washi system.
   Loads AFTER style.css and only on /journal pages. Tokens come from style.css. */

.post { max-width: 720px; margin: 0 auto; }
.crumbs { font-size: 13px; color: var(--ink-2); padding: 6px 0 0; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { margin: 0 8px; opacity: 0.5; }

.post-head { padding: 26px 0 6px; }
.post-kicker { font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin-bottom: 14px; }
.post-head h1 { font-size: clamp(30px, 4.4vw, 44px); line-height: 1.3; font-weight: 800; letter-spacing: 0.01em; }
.post-meta { margin-top: 16px; color: var(--ink-2); font-size: 14px; }

.post-hero { width: 100%; height: auto; margin: 30px 0 6px; border-radius: var(--r-hero);
  border: 1px solid var(--hairline); display: block; }

.prose { font-size: 17.5px; line-height: 1.85; }
.prose h2 { font-size: clamp(22px, 2.8vw, 28px); font-weight: 800; line-height: 1.4;
  margin: 46px 0 4px; letter-spacing: 0.01em; }
.prose h3 { font-size: 19px; font-weight: 700; margin: 30px 0 2px; }
.prose p { margin: 16px 0; }
.prose ul { margin: 16px 0; padding-left: 1.2em; }
.prose li { margin: 8px 0; color: var(--ink); }
.prose a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold); }
.prose a:hover { background: rgba(166, 127, 30, 0.08); }
.prose strong { font-weight: 700; }

.post-foot { max-width: 720px; margin: 54px auto 0; padding-top: 30px; border-top: 1px solid var(--hairline); }
.post-foot .cta-row { margin: 0 0 24px; }
.other-langs { font-size: 14px; color: var(--ink-2); margin-bottom: 34px; }
.other-langs a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline); margin-left: 8px; }

.read-next-h { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin-bottom: 14px; }
.read-next { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rn-card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card);
  padding: 18px 20px; text-decoration: none; color: var(--ink); display: block; }
.rn-card:hover { border-color: rgba(26, 26, 34, 0.22); }
.rn-card .k { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.rn-card .t { margin-top: 8px; font-weight: 700; font-size: 16px; line-height: 1.5; }

/* ---- index ---- */
.j-head { max-width: 720px; margin: 0 auto; padding: 34px 0 4px; }
.j-head .eyebrow { margin-bottom: 14px; }
.j-head h1 { font-size: clamp(32px, 4.6vw, 48px); font-weight: 800; letter-spacing: 0.01em; }
.j-head p { color: var(--ink-2); margin-top: 12px; font-size: 18px; max-width: 34em; }
.j-list { max-width: 720px; margin: 20px auto 0; padding-bottom: 24px; }
.j-card { display: flex; gap: 24px; align-items: center; text-decoration: none; color: var(--ink);
  border-top: 1px solid var(--hairline); padding: 26px 0; }
.j-thumb { flex: 0 0 240px; }
.j-thumb img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  border-radius: var(--r-card); border: 1px solid var(--hairline); }
.j-body { flex: 1; min-width: 0; }
.j-card .k { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.j-card h2 { font-size: 22px; font-weight: 800; line-height: 1.42; margin: 8px 0 0; }
.j-card p { color: var(--ink-2); font-size: 15.5px; margin: 8px 0 0; }
.j-card .m { color: var(--ink-2); font-size: 13px; margin-top: 12px; }
.j-card:hover h2 { color: var(--gold); }

@media (max-width: 640px) {
  .read-next { grid-template-columns: 1fr; }
  .j-card { flex-direction: column; align-items: stretch; gap: 14px; }
  .j-thumb { flex: none; }
}