/* Journal listing cards, article covers and optional search. Loaded after design.css. */
body.journal-page [hidden]{display:none!important}
body.journal-page .journal-intro{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px 32px;padding:24px 0 40px}
body.journal-page .journal-intro h1{font-size:60px;line-height:1.1}
body.journal-page .journal-intro p{margin:0;font-size:16px;line-height:24px}

/* Search: revealed by journal-search.js only */
body.journal-page .journal-search{display:grid;gap:8px;margin:0 0 32px;max-width:none}
body.journal-page .journal-search label{font-size:14px;line-height:20px;color:var(--muted)}
body.journal-page .journal-search-row{display:flex;flex-wrap:wrap;gap:8px}
body.journal-page .journal-search input{flex:1 1 160px;min-width:0;min-height:48px;padding:12px 16px;font:inherit;font-size:16px;line-height:24px;color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:8px}
body.journal-page .journal-search button{flex:0 0 auto;min-height:48px;max-width:100%;padding:12px 16px;font:inherit;font-size:14px;line-height:20px;color:var(--ink);background:var(--soft);border:1px solid var(--rule);border-radius:8px;cursor:pointer;white-space:normal;overflow-wrap:anywhere}
body.journal-page .journal-search :is(input,button):focus-visible{outline:2px solid var(--ink);outline-offset:2px}
body.journal-page .journal-search-status{min-height:20px;margin:0;font-size:14px;line-height:20px;color:var(--muted)}
body.journal-page .journal-search-empty{margin:0;padding-top:32px;border-top:1px solid var(--rule);font-size:16px;line-height:24px;color:var(--muted)}

/* Listing: one article per row, with cover left and copy right. */
body.journal-page .journal-list{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:start}
body.journal-page .journal-list>li{border-top:1px solid var(--rule);min-width:0}
body.journal-page .journal-list .journal-card{position:relative;display:grid;grid-template-columns:minmax(160px,28%) minmax(0,1fr);align-items:start;gap:32px;padding:28px 0;color:inherit;text-decoration:none;border-radius:0}
body.journal-page .journal-list .journal-card:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
body.journal-page .journal-card-cover{display:block;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:8px;background:var(--soft)}
body.journal-page .journal-card-cover img{display:block;width:100%;height:100%;object-fit:cover}
body.journal-page .journal-card-text{display:grid;grid-column:2;gap:10px;min-width:0;padding-right:32px}
body.journal-page .journal-card-text>*{grid-column:1;grid-row:auto}
body.journal-page .journal-entry-text .journal-card-text{padding-top:0;border-top:0}
body.journal-page .journal-list .journal-card h2{font-size:24px;line-height:1.4;letter-spacing:-.02em;font-weight:600;margin:0;overflow-wrap:anywhere}
body.journal-page .journal-list .journal-card p{font-size:16px;line-height:1.65;color:var(--muted);margin:0;overflow-wrap:anywhere}
body.journal-page .journal-list .journal-card:hover h2{text-decoration:underline;text-underline-offset:4px}
body.journal-page .journal-list .journal-card .ui-arrow{position:absolute;right:0;top:30px}
body.journal-page .journal-list :lang(ja) :is(h2,p){letter-spacing:0;line-break:strict}

/* Tags (listing and article header) */
body.journal-page .journal-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
body.journal-page .journal-tags li{min-width:0;padding:0;font-size:13px;line-height:20px;color:var(--muted);border:0;border-radius:0;overflow-wrap:anywhere}
body.journal-page .article-heading .journal-tags{margin-top:24px}
.journal-preview-notice{margin:0 0 24px;font-size:12px;line-height:20px;color:var(--muted)}

/* Article */
body.journal-page .journal-article-cover{margin:0 0 48px;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:var(--soft)}
body.journal-page .journal-article-cover img{display:block;width:100%;height:100%;object-fit:cover}
/* Prose titles fill the available line; global hero phrase/balance rules made
   long Japanese titles leave an isolated three-character opening line. */
body.journal-page :is(.article-heading h1,.journal-card h2){overflow-wrap:anywhere;word-break:normal;text-wrap:wrap;line-break:strict}
body.journal-page .article-body{min-width:0}
body.journal-page .article-body img{display:block;border-radius:8px;margin:32px 0}
body.journal-page .article-body :is(ul,ol){margin:0 0 24px;padding-left:1.5em}
body.journal-page .article-body li+li{margin-top:8px}
body.journal-page .article-body :not(pre)>code{padding:.1em .35em;font-size:.88em;background:var(--soft);border-radius:4px;overflow-wrap:anywhere}
body.journal-page .article-body pre{margin:0 0 24px}
body.journal-page .article-body pre code{overflow-wrap:normal;white-space:pre}
body.journal-page .article-body table{margin:0 0 24px}
body.journal-page .article-body th{font-weight:600;border-bottom-color:var(--ink)}
body.journal-page .article-body blockquote p:last-child{margin-bottom:0}
body.journal-page .article-body hr{border:0;border-top:1px solid var(--rule);margin:48px 0}
html:lang(ja) body.journal-page .journal-post{font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP','Yu Gothic UI','Yu Gothic',Meiryo,sans-serif}
html:lang(ja) body.journal-page :is(.article-heading h1,.article-body :is(h2,h3,h4)){letter-spacing:0;line-height:1.45}
html:lang(ja) body.journal-page .article-heading h1{font-size:40px}
html:lang(ja) body.journal-page .article-body{line-height:1.95;line-break:strict;text-align:start}

@media(max-width:760px){
  body.journal-page .journal-intro{gap:12px 16px}
  body.journal-page .journal-intro h1{font-size:48px}
  body.journal-page .journal-intro p{font-size:14px}
  html:lang(ja) body.journal-page .article-heading h1{font-size:30px}
  body.journal-page .journal-list{gap:0}
  body.journal-page .journal-list .journal-card{grid-template-columns:clamp(76px,24vw,112px) minmax(0,1fr);gap:16px;padding:24px 0}
  body.journal-page .journal-card-text{gap:8px;padding-right:0}
  body.journal-page .journal-entry-text .journal-card-text{grid-column:1/-1}
  body.journal-page .journal-list .journal-card .ui-arrow{display:none}
  body.journal-page .journal-card-text time{font-size:12px;line-height:18px}
  body.journal-page .journal-list .journal-card p{font-size:14px;line-height:1.65}
  body.journal-page .journal-list .journal-card h2{font-size:18px;line-height:1.5}
  body.journal-page .journal-search{margin-bottom:40px}
  body.journal-page .journal-article-cover{margin-bottom:32px}
}