/*
  Journal (blog listing + posts). Loaded by user/site/templates/blog.html.twig and item.html.twig only.
  Ported from the MawX WP theme (_blog.scss, _single.scss).
*/

/* Listing header ----------------------------------------------------------- */
.journal-header { padding: clamp(4rem, 2rem + 4vw, 6.25rem) 0 72px; }
.journal-header__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem); gap: clamp(2.5rem, 2rem + 4vw, 6rem); align-items: end; }
.journal-header__title { font-size: clamp(2.75rem, 1.5rem + 3.8vw, 5rem); line-height: 1.02; letter-spacing: -0.02em; max-width: 18ch; margin-top: 28px; text-wrap: balance; }
.journal-header__lede { max-width: 48ch; margin-top: 32px; }
.journal-header__aside { padding-top: 24px; border-top: 1px solid var(--ink); }
.journal-header__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 28px; margin: 0; }
.journal-header__facts div { display: grid; gap: 4px; }
.journal-header__facts dt { font-family: var(--maw-font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.journal-header__facts dd { margin: 0; font-family: var(--maw-font-heading); font-size: 26px; line-height: 1; color: var(--ink); }
.journal-header__standfirst { margin-top: 24px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); max-width: 30ch; }
@media (max-width: 860px) {
  .journal-header__inner { grid-template-columns: 1fr; gap: 36px; align-items: start; }
  .journal-header__standfirst { max-width: 48ch; }
}

/* Lead post: typographic, no image */
.lead-post { padding-block: 72px 56px; }
.lead-post__inner { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: clamp(2.5rem, 2rem + 4vw, 6rem); align-items: start; padding-top: 48px; border-top: 1px solid var(--ink); }
.lead-post__aside { display: flex; flex-direction: column; gap: 20px; }
.lead-post__label { font-family: var(--maw-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--plum); }
.lead-post__num { font-family: var(--maw-font-heading); font-weight: 300; font-size: clamp(5rem, 3rem + 6vw, 8.5rem); line-height: 0.85; letter-spacing: -0.04em; color: var(--ink); opacity: 0.12; margin: 4px 0 12px; }
.lead-post__facts { display: grid; gap: 14px; margin: 0; padding-top: 20px; border-top: 1px solid var(--rule); }
.lead-post__facts div { display: grid; gap: 2px; }
.lead-post__facts dt { font-family: var(--maw-font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.lead-post__facts dd { margin: 0; font-size: 14px; font-weight: 500; color: var(--ink); }
.lead-post__title { font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4.25rem); line-height: 1.04; letter-spacing: -0.02em; max-width: 24ch; margin: 0 0 28px; text-wrap: balance; }
.lead-post__title a { color: inherit; transition: color 0.2s ease; }
.lead-post__title a:hover { color: var(--plum); text-decoration: none; }
.lead-post__excerpt { font-family: var(--maw-font-heading); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.5; color: var(--ink-soft); max-width: 52ch; margin-bottom: 36px; }
.lead-post__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-top: 28px; border-top: 1px solid var(--rule); }
@media (max-width: 860px) {
  .lead-post { padding-block: 48px 32px; }
  .lead-post__inner { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; }
  .lead-post__aside { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "label num" "facts facts"; column-gap: 24px; align-items: end; }
  .lead-post__label { grid-area: label; }
  .lead-post__num { grid-area: num; font-size: 4rem; margin: 0; text-align: right; }
  .lead-post__facts { grid-area: facts; grid-template-columns: repeat(3, auto); justify-content: start; gap: 24px; }
}

/* Bylines (journal.byline macro): .featured__byline / .article-byline */
.featured__byline, .article-byline { display: flex; align-items: center; gap: 12px; }
:is(.featured__byline, .article-byline, .author-card) :is(.featured__byline-avatar, .article-byline-avatar, .author-card__avatar) {
  display: flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--gradient-navy-plum); color: var(--cream); font-family: var(--maw-font-heading); font-style: italic; font-size: 13px;
}
:is(.featured__byline-text, .article-byline-text) { display: flex; flex-direction: column; text-align: left; font-size: 13px; line-height: 1.4; }
:is(.featured__byline-name, .article-byline-name) { font-weight: 600; color: var(--ink); }
:is(.featured__byline-role, .article-byline-role) { color: var(--ink-mute); margin-top: 2px; font-size: 12px; }

/* More from the journal: typographic index */
.article-list { padding-bottom: 120px; }
.article-list__head { display: flex; justify-content: space-between; align-items: baseline; padding-block: 24px; border-block: 1px solid var(--rule); }
.article-list__head h2 { font-size: 22px; letter-spacing: -0.01em; }
.article-list__head .count { font-family: var(--maw-font-mono); font-size: 12px; color: var(--ink-mute); }
.article-index { list-style: none; margin: 0; padding: 0; }
.article-row { display: grid; grid-template-columns: 5.5rem 9rem minmax(0, 1fr) auto; gap: 40px; align-items: start; padding-block: 36px; border-bottom: 1px solid var(--rule); color: inherit; }
.article-row:hover { text-decoration: none; }
.article-row:hover .article-row__title { color: var(--plum); }
.article-row:hover .article-row__num { opacity: 0.55; }
.article-row:hover .article-row__arrow { transform: translateX(6px); color: var(--plum); }
.article-row__num { font-family: var(--maw-font-heading); font-weight: 300; font-size: 44px; line-height: 0.9; letter-spacing: -0.03em; color: var(--ink); opacity: 0.22; transition: opacity 0.2s ease; }
.article-row__meta { display: grid; gap: 6px; padding-top: 6px; font-family: var(--maw-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.article-row__cat { color: var(--plum); font-weight: 600; }
.article-row__body { display: block; }
.article-row__title { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 2rem); line-height: 1.15; letter-spacing: -0.015em; max-width: 34ch; margin: 0 0 12px; transition: color 0.2s ease; text-wrap: balance; }
.article-row__excerpt { display: block; font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 60ch; }
.article-row__end { display: flex; align-items: center; gap: 16px; padding-top: 8px; font-family: var(--maw-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; }
.article-row__arrow { font-family: var(--maw-font-heading); font-size: 22px; line-height: 1; color: var(--ink); transition: transform 0.25s ease, color 0.2s ease; }
@media (max-width: 1024px) { .article-row { grid-template-columns: 4rem 8rem minmax(0, 1fr); gap: 28px; } .article-row__end { grid-column: 2 / -1; padding-top: 0; } }
@media (max-width: 640px) {
  .article-row { grid-template-columns: 3rem minmax(0, 1fr); gap: 16px 20px; padding-block: 28px; }
  .article-row__num { font-size: 32px; grid-row: 1 / span 3; }
  .article-row__meta { grid-template-columns: auto auto; gap: 14px; padding-top: 2px; }
  .article-row__end { grid-column: 2; }
}

/* Post --------------------------------------------------------------------- */
.read-progress { position: fixed; top: 0; left: 0; z-index: 100; height: 2px; width: 0; background: var(--plum); transition: width 0.1s linear; }
.container--narrow { --maw-container: 46rem; }
.container--article-head { --maw-container: 68rem; }
.article-header { padding: 56px 0; text-align: center; }
.article-header .breadcrumb { justify-content: center; margin-bottom: 40px; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; }
.article-header .breadcrumb__current { font-weight: 600; }
.article-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; margin-bottom: 36px; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.article-meta__cat { padding: 4px 10px; border: 1px solid var(--plum); border-radius: 100px; color: var(--plum); font-weight: 600; letter-spacing: 0.1em; transition: background 0.2s ease, color 0.2s ease; }
a.article-meta__cat:hover { background: var(--plum); color: var(--cream); text-decoration: none; }
.article-meta__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--rule); }
.article-title { font-size: clamp(2.25rem, 1.3rem + 3vw, 4rem); line-height: 1.08; max-width: 31ch; margin: 0 auto 32px; }
.article-dek { font-family: var(--maw-font-heading); font-weight: 300; font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem); line-height: 1.5; color: var(--ink-soft); max-width: 56ch; margin: 0 auto; }
.article-byline { display: inline-flex; gap: 16px; margin-top: 48px; padding: 16px 28px; background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 100px; }

/* Article body */
.article-body { max-width: none; padding: 16px 0 96px; border-top: 1px solid var(--rule); padding-top: 40px; }
.article-body > * + * { margin-top: 28px; }
.article-body p { font-size: 18px; line-height: 1.75; color: var(--ink); letter-spacing: -0.005em; }
.article-body h2 { font-size: clamp(1.625rem, 1.3rem + 0.9vw, 2.125rem); line-height: 1.2; letter-spacing: -0.015em; max-width: 32ch; margin-top: 64px; }
.article-body h3 { font-weight: 500; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; margin-top: 40px; }
.article-body :is(h2, h3) + p { margin-top: 12px; }
.article-body h4 { font-family: var(--maw-font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.article-body a { color: var(--plum); text-decoration: none; border-bottom: 1px solid currentColor; }
.article-body a:hover { color: var(--plum-deep); }
.article-body :is(ul, ol) { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.article-body li { position: relative; padding-left: 28px; margin: 0; font-size: 17px; line-height: 1.65; color: var(--ink); }
.article-body ul li::before { content: ""; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--plum); transform: translateY(-50%); }
.article-body ol { counter-reset: list; }
.article-body ol li { counter-increment: list; padding-left: 36px; }
.article-body ol li::before { content: counter(list, decimal-leading-zero); position: absolute; left: 0; top: 4px; font-family: var(--maw-font-mono); font-size: 12px; font-weight: 500; color: var(--plum); }
.article-body blockquote { margin-block: 56px; padding: 0; border: 0; text-align: center; }
.article-body blockquote::before, .article-body blockquote::after { content: ""; display: block; width: 40px; height: 1px; margin: 0 auto 32px; background: var(--plum); }
.article-body blockquote::after { margin: 32px auto 0; }
.article-body blockquote p { font-family: var(--maw-font-heading); font-style: italic; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.3; max-width: 32ch; margin: 0 auto; }

/* Author card */
.author-card { display: grid; grid-template-columns: 64px 1fr; gap: 24px; align-items: start; padding: 40px 0 96px; border-top: 1px solid var(--rule); }
.author-card .author-card__avatar { width: 64px; height: 64px; font-size: 22px; }
.author-card__label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; }
.author-card__name { font-size: 24px; letter-spacing: -0.01em; }
.author-card__sub { font-size: 13px; color: var(--ink-mute); margin-top: 4px; }
.author-card__bio { font-size: 15px; line-height: 1.65; color: var(--ink-soft); margin-top: 16px; }

/* Related posts */
.related { padding-block: 96px; background: var(--paper); border-top: 1px solid var(--rule); }
.related__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 40px; }
.related__head h2 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.25rem); }
.related__head a { font-size: 14px; font-weight: 600; color: var(--plum); }
.related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.related-card { display: flex; flex-direction: column; color: inherit; }
.related-card:hover { text-decoration: none; }
.related-card:hover .related-card__title { color: var(--plum); }
.related-card__thumb { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; background: var(--gradient-navy-plum); margin-bottom: 20px; }
.related-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.related-card__thumb-label { position: absolute; top: 14px; left: 16px; font-family: var(--maw-font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(245 241 232 / 0.7); }
.related-card__thumb-num { position: absolute; top: 12px; right: 16px; font-family: var(--maw-font-heading); font-style: italic; font-size: 15px; color: rgb(245 241 232 / 0.6); }
.related-card__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.related-card__meta .cat { color: var(--plum); font-weight: 600; }
.related-card__meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--rule); }
.related-card__title { font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; transition: color 0.2s ease; }
.related-card__excerpt { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin-top: 10px; }
@media (max-width: 960px) { .related__grid { grid-template-columns: 1fr; } }