/* ==========================================================================
   INFINITY CITY · Journal article (single post, /journal/<slug>/) · v6 (2026-10-30) — loads after ifc-home.css and
   ifc-journal.css. Read surface: a light article head (breadcrumb Home / Journal / title, topic + date + read time,
   title + subtitle, lead) beside the cover; one centred reading column (max 720px; 860px with 20px text from 1024px)
   where text and pictures share the same width (no picture is wider than a line of text); captions; a pull quote;
   three related posts. v6.1 (2026-10-30, user review): no "At a glance" panel, no package link, no wide images.
   Every block below maps to a WordPress block or block pattern (see SPEC).
   ========================================================================== */
:root{--ic-crumb-sep:#B7BECC}
.ic-crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:10px;list-style:none;margin:0 0 18px;padding:0;font:500 15px/1.4 var(--ic-font);color:var(--ic-muted)}
.ic-crumb li+li::before{content:"/";margin-right:10px;color:var(--ic-crumb-sep)}
.ic-crumb a{position:relative;transition:color .2s}
.ic-crumb a::after{content:"";position:absolute;inset:-14px -8px}
.ic-crumb a:hover{color:var(--ic-ink);text-decoration:underline;text-underline-offset:3px}
.ic-crumb [aria-current]{color:var(--ic-ink)}
.ic-crumb li:last-child{display:flex;align-items:baseline;min-width:0;max-width:100%}
.ic-crumb li:last-child span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- article head ---------- */
.ic-header[data-ic-over] ~ main#main > .ic-arthead:first-child{border-top:var(--ic-top-h) solid transparent}
.ic-arthead{position:relative;background:var(--ic-paper);padding:24px var(--ic-gutter) 40px;border-bottom:1px solid var(--ic-line)}
.ic-arthead__in{display:grid;gap:28px}
.ic-arthead__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0;font:500 14px/1.4 var(--ic-font);color:var(--ic-muted)}
.ic-arthead__meta a{font-weight:600;color:var(--ic-mount-deep)}
.ic-arthead__meta a:hover{text-decoration:underline;text-underline-offset:3px}
.ic-arthead__meta span + span::before,.ic-arthead__meta a + span::before{content:"·";margin-right:14px;color:var(--ic-crumb-sep)}
.ic-arthead__h{margin:14px 0 0;font-size:32px;line-height:1.05}
.ic-arthead__sub{margin:12px 0 0;font:600 20px/1.3 var(--ic-font);color:var(--ic-ink)}
.ic-arthead__lead{margin:22px 0 0;max-width:58ch;font-size:18px;line-height:1.6;color:var(--ic-text)}
.ic-arthead__pic{margin:0}
.ic-arthead__pic img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--ic-radius)}
.ic-arthead__pic figcaption{margin-top:10px}

/* ---------- body: reading column + aside ---------- */
.ic-art{padding:48px var(--ic-gutter) 72px;background:#fff}
.ic-art__col{max-width:720px;margin:0 auto}
@media (min-width:1024px){.ic-art__col{max-width:860px}}
.ic-prose{min-width:0;font-size:16px;line-height:1.65;color:var(--ic-text)}
.ic-prose > * + *{margin-top:20px}
.ic-prose h2{margin-top:52px;font:600 24px/1.25 var(--ic-font);letter-spacing:-.01em;color:var(--ic-ink);text-wrap:balance}
.ic-prose h2 + p{margin-top:14px}
.ic-prose h3{margin-top:36px;font:600 19px/1.3 var(--ic-font);color:var(--ic-ink)}
.ic-prose a:not(.ic-btn){color:var(--ic-ink);text-decoration:underline;text-decoration-color:var(--ic-sky);text-decoration-thickness:2px;text-underline-offset:3px}
.ic-prose strong{font-weight:600;color:var(--ic-ink)}
.ic-prose ul,.ic-prose ol{padding-left:1.25em}
.ic-prose li + li{margin-top:8px}

/* figures: in the column, two-up, or out to the full content width */
.ic-fig{margin:36px 0 0}
.ic-fig img{display:block;width:100%;height:auto;border-radius:var(--ic-radius)}
.ic-cap,.ic-fig figcaption{display:block;margin-top:10px;font-size:14px;line-height:1.45;color:var(--ic-muted)}
.ic-fig2{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:36px 0 0}
.ic-fig2 .ic-fig{margin:0}
.ic-fig2 img{aspect-ratio:4/3;object-fit:cover}

/* pull quote */
.ic-pq{margin:44px 0 0;padding:20px 0 0;border-top:2px solid var(--ic-ink)}
.ic-pq p{margin:0;font:600 22px/1.35 var(--ic-font);letter-spacing:-.01em;color:var(--ic-ink);text-wrap:balance}

/* related */
.ic-arel{padding:64px var(--ic-gutter) 80px;background:var(--ic-paper)}
.ic-arel .ic-posts{margin-top:28px}

@media (min-width:768px){
  .ic-fig2{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
@media (min-width:1024px){
  .ic-arthead{padding:30px var(--ic-pad-x) 64px}
  .ic-crumb ol{font-size:16px;margin-bottom:26px}
  .ic-arthead__in{grid-template-columns:minmax(0,1fr) minmax(0,400px);column-gap:80px;align-items:end}
  .ic-arthead__h{font-size:52px;margin-top:18px}
  .ic-arthead__sub{font-size:26px;margin-top:14px}
  .ic-arthead__lead{margin-top:28px;font-size:20px;line-height:1.6}
  .ic-art{padding:72px var(--ic-pad-x) 112px}
  .ic-prose{font-size:20px;line-height:1.65}
  .ic-prose > * + *{margin-top:24px}
  .ic-prose h2{margin-top:72px;font-size:30px}
  .ic-prose h2 + p{margin-top:16px}
  .ic-fig,.ic-fig2{margin-top:40px}
  .ic-fig figcaption{font-size:15px}
  .ic-pq{margin-top:52px}
  .ic-pq p{font-size:30px}
  .ic-arel{padding:96px var(--ic-pad-x) 120px}
}