/* The "journal" layout for the article list and the articles.
   Loaded after blog-type.css on the blog pages only. Same colours and the same
   two typefaces (Familjen Grotesk, Newsreader); no change to header or footer. */

/* ---------- the article list: rows, not cards ---------- */
.journal-list{padding:clamp(8px,1.5vw,16px) 0 clamp(56px,7vw,96px)}
.entry{display:grid;grid-template-columns:150px minmax(0,1fr) 300px;gap:clamp(20px,3vw,44px);align-items:start;
  padding:clamp(28px,3.4vw,44px) 0;border-bottom:1px solid var(--hair);text-decoration:none;color:var(--ink)}
.entry-meta{display:flex;flex-direction:column;gap:8px;padding-top:6px;font:500 14px/1.2 var(--sans);color:var(--muted)}
.entry-meta .num{font-weight:600;color:var(--purple-ink)}
.entry-meta .latest{align-self:flex-start;font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--purple-ink);background:var(--pale);border:1px solid var(--lilac);border-radius:999px;padding:6px 10px;margin-top:4px}
.entry h2{font-family:var(--sans);font-weight:600;font-size:clamp(23px,1.9vw,28px);line-height:1.18;letter-spacing:-.022em;
  margin:0 0 12px;transition:color .15s}
.entry:first-child h2{font-size:clamp(28px,2.6vw,38px)}
.entry p{font-family:var(--serif);font-size:clamp(16.5px,1.2vw,18px);line-height:1.58;color:#4a4a63;max-width:58ch;margin:0}
.entry .by{display:block;margin-top:16px;font:500 14px/1.4 var(--sans);color:var(--muted)}
.entry .cover{display:block;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--hair);
  transition:transform .25s ease,box-shadow .25s ease}
.entry .cover img{display:block;width:100%;height:100%}
.entry:hover h2{color:var(--purple-ink)}
.entry:hover .cover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(27,27,58,.08)}
.entry:focus-visible{outline:2px solid var(--purple-ink);outline-offset:6px;border-radius:8px}
@media (max-width:960px){.entry{grid-template-columns:minmax(0,1fr) 240px}.entry-meta{grid-column:1/-1;flex-direction:row;align-items:center;gap:14px;padding:0}}
@media (max-width:640px){.entry{grid-template-columns:1fr}.entry .cover{order:-1}}

/* ---------- an article: title block with its cover and a metadata strip ---------- */
.head.journal-head{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(24px,4vw,56px);align-items:end}
.journal-head .cover{width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--hair)}
.journal-head .cover img{display:block;width:100%;height:100%}
.meta-strip{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px clamp(28px,4vw,56px);margin-top:clamp(12px,2vw,24px);
  padding:18px 0;border-top:1px solid var(--hair);font-family:var(--sans)}
.meta-strip dt{font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.meta-strip dd{margin:0;font-size:15px;color:var(--ink)}
@media (max-width:860px){.head.journal-head{grid-template-columns:1fr}.journal-head .cover{max-width:360px;order:-1}}

/* ---------- reading layout: contents in the left margin, notes in the right ---------- */
.reading{display:grid;grid-template-columns:170px minmax(0,640px);column-gap:56px}
.reading article{border-top:0;padding-top:clamp(20px,2.5vw,32px)}
.reading article > *{max-width:none}
.toc{position:sticky;top:24px;align-self:start;padding-top:clamp(20px,2.5vw,32px);font-family:var(--sans)}
.toc span{display:block;font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--hair)}
.toc a{display:block;padding:7px 0 7px 14px;margin-left:-1px;border-left:2px solid transparent;font-size:14px;line-height:1.3;
  color:var(--muted);text-decoration:none;transition:color .15s,border-color .15s}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--purple-ink);border-left-color:var(--purple)}

/* a reference sits beside the sentence that cites it */
.note{float:right;clear:right;width:196px;margin:4px -232px 14px 0;padding-left:12px;border-left:2px solid var(--plt);
  font:400 13px/1.45 var(--sans);color:var(--muted)}
.note b{display:block;font-weight:600;color:var(--purple-ink);margin-bottom:2px}
.note a{color:var(--purple-ink)}

/* a sentence set on its own in bold becomes a pull quote */
article p:has(> strong:only-child){margin:1.7em 0;padding:4px 0 4px 24px;border-left:3px solid var(--purple)}
article p:has(> strong:only-child) strong{display:block;font-family:var(--serif);font-weight:500;font-size:1.42em;line-height:1.3;
  color:var(--navy);letter-spacing:-.005em}

@media (max-width:1180px){
  .reading{grid-template-columns:minmax(0,680px);justify-content:start}
  .toc{display:none}
  .note{display:none}   /* narrow screens: the references stay in the list at the end */
}