/* Blog: posts page /blog/ (templates/home.html), archives and search (templates/index.html), single articles
   (templates/single.html). Stux has no blog, so this is built from its design language at a 1280px viewport:
   the PROJECTS page title, a Process-style wide card for the newest article, photo-led cards with a yellow arrow
   square (team cards) and a yellow chip + "(02)" index (awards rows), the About intro grid for the article, and the
   closing CTA band. Every rule hangs off an sx-bl-* class that only these templates print. */

/* ---------------------------------------------------------- post list (posts page, archives, keep reading) */
.sx-bl { box-sizing: border-box; }
.sx-bl-index { padding: clamp(24px, 3.4vw, 50px) var(--sx-pad) 0; }
.sx-bl .sx-bl-posts {
	--sx-bl-col: clamp(14px, 1.6vw, 22px);
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(56px, 6.6vw, 96px) var(--sx-bl-col);
	margin: 0 !important; padding: 0 !important; list-style: none; counter-reset: sxbl var(--sx-bl-n, 0);
}
.sx-bl .sx-bl-posts > li { margin: 0 !important; counter-increment: sxbl; min-width: 0; }

/* card: 16:10 photo with a yellow arrow square, chip + date + "(02)", sentence-case title, 3-line excerpt.
   The title link is stretched over the whole card, so the card is one link with the article's name. */
.sx-bl .sx-bl-card { position: relative; display: flex; flex-direction: column; height: 100%; color: var(--sx-ink); }
.sx-bl .sx-bl-card > * { margin: 0 !important; }
.sx-bl .sx-bl-img { position: relative; overflow: hidden; width: 100%; background: #cfcfcf; aspect-ratio: 16 / 10; }
.sx-bl .sx-bl-img img { display: block; width: 100%; height: 100% !important; object-fit: cover; border-radius: 0 !important; transition: transform .9s var(--sx-ease); }
.sx-bl .sx-bl-card:hover .sx-bl-img img { transform: scale(1.04); }
/* yellow arrow square, inside the photo's bottom-right corner (Stux team cards) */
.sx-bl .sx-bl-img::after {
	content: "↗"; content: "↗" / ""; position: absolute; right: clamp(10px, 1.1vw, 14px); bottom: clamp(10px, 1.1vw, 14px); z-index: 2;
	display: grid; place-items: center; width: clamp(34px, 3.1vw, 40px); height: clamp(34px, 3.1vw, 40px);
	background: var(--sx-yellow); color: var(--sx-ink); font: 400 16px/1 var(--edol-font-text); transition: transform .3s var(--sx-ease);
}
.sx-bl .sx-bl-card:hover .sx-bl-img::after { transform: rotate(45deg); }
/* yellow READ tag: follows the mouse over the photo (page-blog.js sets --mx/--my and .is-view), like the VIEW tag on project cards */
.sx-bl .sx-bl-img::before {
	content: "Read"; content: "Read" / ""; position: absolute; left: var(--mx, 50%); top: var(--my, 50%); z-index: 3; pointer-events: none;
	padding: 6px 13px; background: var(--sx-yellow); color: var(--sx-ink); font: 700 11.5px/1.4 var(--edol-font-text); font-stretch: 100%;
	text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translate(-50%, -50%) scale(.6);
	transition: opacity .2s ease, transform .25s var(--sx-ease);
}
body:not(.sx-bl-js) .sx-bl .sx-bl-card:hover .sx-bl-img::before, .sx-bl .sx-bl-card.is-view .sx-bl-img::before { opacity: 1; transform: translate(-50%, -50%); }
@media (hover: hover) and (pointer: fine) { .sx-bl .sx-bl-card.is-view .sx-bl-title a::after { cursor: none; } }

.sx-bl .sx-bl-meta { display: flex; align-items: center; gap: 10px; min-height: 24px; margin-top: clamp(12px, 1.25vw, 16px) !important; font-size: 13px; line-height: 1.2; color: #6b6b6b; }
.sx-bl .sx-bl-meta > * { margin: 0 !important; }
.sx-bl .sx-bl-meta::after { content: "(" counter(sxbl, decimal-leading-zero) ")"; margin-left: auto; font-size: 11px; font-stretch: 100%; letter-spacing: 0; color: #6b6b6b; }
.sx-bl-related .sx-bl-meta::after { content: none; }
.sx-bl .sx-bl-chip { position: relative; z-index: 2; font-size: 0; }
.sx-bl .sx-bl-chip a { display: inline-block; padding: 4px 7px 3px; background: var(--sx-yellow); color: var(--sx-ink); font-size: 12.5px; line-height: 1.25; letter-spacing: 0; text-decoration: none; }
.sx-bl .sx-bl-chip a:hover { background: var(--sx-ink); color: var(--sx-yellow); }
.sx-bl .sx-bl-date { font-size: 13px; letter-spacing: 0; }
.sx-bl .sx-bl-title {
	margin-top: clamp(8px, .9vw, 12px) !important; max-width: 24em; font-size: clamp(19px, 1.72vw, 24px) !important; font-weight: 500 !important;
	font-stretch: 105%; line-height: 1.18 !important; letter-spacing: -.015em; text-transform: none; text-wrap: balance; color: inherit;
}
.sx-bl .sx-bl-title a {
	display: inline; color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--sx-ease);
	-webkit-box-decoration-break: clone; box-decoration-break: clone; /* the underline runs under every line of a long title */
}
.sx-bl .sx-bl-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sx-bl .sx-bl-card:hover .sx-bl-title a { background-size: 100% 1px; }
.sx-bl .sx-bl-title a:focus-visible { outline: none; }
.sx-bl .sx-bl-title a:focus-visible::after { outline: 2px solid var(--sx-ink); outline-offset: 6px; }
.sx-bl .sx-bl-ex { margin-top: 10px !important; max-width: 46ch; font-size: clamp(13.5px, 1.1vw, 15px); line-height: 1.5; color: #5e5e5e; }
.sx-bl .sx-bl-ex p { margin: 0; max-width: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sx-bl .sx-bl-ex .wp-block-post-excerpt__more-text { display: none; }

/* ---------------------------------------------------------- the newest article on each page: a wide Process-style card
   (Stux v8916 f073/f079): black panel on the left with the date in yellow at the top and the title at the bottom,
   the photo on the right inset 10px from the card's top, right and bottom edges. */
.sx-bl-index .sx-bl-posts > li:first-child { grid-column: 1 / -1; }
.sx-bl-index .sx-bl-posts > li:first-child .sx-bl-card { background: var(--sx-ink); color: #fff; }
.sx-bl-index .sx-bl-posts > li:first-child .sx-bl-meta { display: contents; color: rgba(255,255,255,.6); }
.sx-bl-index .sx-bl-posts > li:first-child .sx-bl-meta::after { content: none; }
.sx-bl-index .sx-bl-posts > li:first-child .sx-bl-date { color: var(--sx-yellow); font-size: clamp(30px, 3.6vw, 54px); font-weight: 600; font-stretch: 112%; line-height: 1; letter-spacing: -.035em; }
.sx-bl-index .sx-bl-posts > li:first-child .sx-bl-title { max-width: 15em; font-size: clamp(21px, 2.2vw, 34px) !important; line-height: 1.12 !important; letter-spacing: -.02em; }
.sx-bl-index .sx-bl-posts > li:first-child .sx-bl-ex { max-width: 40ch; color: rgba(255,255,255,.62); }
.sx-bl-index .sx-bl-posts > li:first-child .sx-bl-title a:focus-visible::after { outline-offset: 4px; }
@media (min-width: 761px) {
	.sx-bl-index .sx-bl-posts > li:first-child .sx-bl-card {
		--p: clamp(18px, 2vw, 30px);
		display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); grid-template-rows: auto 1fr auto auto auto var(--p);
		min-height: clamp(440px, 42vw, 680px);
	}
	.sx-bl-index .sx-bl-posts > li:first-child .sx-bl-img { grid-column: 2; grid-row: 1 / -1; width: auto; height: auto; aspect-ratio: auto !important; margin: 10px 10px 10px 0 !important; }
	.sx-bl-index .sx-bl-posts > li:first-child .sx-bl-img img { position: absolute; inset: 0; }
	.sx-bl-index .sx-bl-posts > li:first-child .sx-bl-date { grid-column: 1; grid-row: 1; padding: var(--p) var(--p) 0; }
	.sx-bl-index .sx-bl-posts > li:first-child .sx-bl-title { grid-column: 1; grid-row: 3; padding: 0 var(--p); }
	.sx-bl-index .sx-bl-posts > li:first-child .sx-bl-ex { grid-column: 1; grid-row: 4; padding: 0 var(--p); margin-top: 14px !important; }
	.sx-bl-index .sx-bl-posts > li:first-child .sx-bl-chip { grid-column: 1; grid-row: 5; padding: 24px var(--p) 0; }
}

/* ---------------------------------------------------------- pagination: Stux buttons and square page numbers */
.sx-bl .sx-bl-pager { margin: clamp(64px, 7.8vw, 110px) 0 0 !important; padding: 0 !important; gap: 8px !important; flex-wrap: wrap; font-family: var(--edol-font-text); }
.sx-bl-pager > * { margin: 0 !important; }
.sx-bl-pager .wp-block-query-pagination-numbers { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-bl-pager .page-numbers {
	display: grid; place-items: center; box-sizing: border-box; min-width: 52px; height: 52px; padding: 0 10px; border: 1px solid var(--sx-ink);
	color: var(--sx-ink); font: 800 12.5px/1 var(--edol-font-text); letter-spacing: -.02em; text-decoration: none; transition: background-color .25s, border-color .25s;
}
.sx-bl-pager .page-numbers.current { background: var(--sx-ink); color: #fff; }
.sx-bl-pager .page-numbers.dots { border-color: transparent; min-width: 24px; padding: 0; }
.sx-bl-pager a.page-numbers:hover { background: var(--sx-yellow); border-color: var(--sx-yellow); }
.sx-bl-pager .wp-block-query-pagination-previous, .sx-bl-pager .wp-block-query-pagination-next {
	display: inline-flex; align-items: center; box-sizing: border-box; height: 52px; background: var(--sx-ink); color: #fff;
	font: 800 12.5px/1 var(--edol-font-btn); letter-spacing: -.04em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.sx-bl-pager .wp-block-query-pagination-next { padding-left: 15px; }
.sx-bl-pager .wp-block-query-pagination-previous { padding-right: 15px; flex-direction: row-reverse; }
.sx-bl-pager .wp-block-query-pagination-previous::after, .sx-bl-pager .wp-block-query-pagination-next::after {
	content: "→"; content: "→" / ""; flex: none; display: grid; place-items: center; box-sizing: border-box; width: 42px; height: 44px; margin: 0 4px 0 15px; padding-bottom: 3px;
	background: var(--sx-yellow); color: var(--sx-ink); font: 400 19px/1 var(--edol-font-text); letter-spacing: 0; transition: transform .3s var(--sx-ease);
}
.sx-bl-pager .wp-block-query-pagination-previous::after { content: "←"; content: "←" / ""; margin: 0 15px 0 4px; }
.sx-bl-pager .wp-block-query-pagination-next:hover::after { transform: translateX(3px); }
.sx-bl-pager .wp-block-query-pagination-previous:hover::after { transform: translateX(-3px); }

/* nothing published yet (or an empty archive) */
.sx-bl .sx-bl-empty { padding: clamp(56px, 7vw, 100px) 0; border-top: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc; text-align: center; }
.sx-bl .sx-bl-empty > * { margin: 0 auto !important; max-width: none; }
.sx-bl .sx-bl-empty-t { font-size: clamp(24px, 2.6vw, 38px); font-weight: 500; font-stretch: 110%; line-height: 1.1; letter-spacing: -.03em; text-transform: uppercase; }
.sx-bl .sx-bl-empty-p { margin-top: 14px !important; font-size: 15px; line-height: 1.5; color: #5e5e5e; }

/* ---------------------------------------------------------- single article: photo hero (About-style cover) */
.sx-bl-hero .sx-cover-copy { width: 100%; }
.sx-bl-hero .sx-cover-title { max-width: 15.5em; margin-inline: auto !important; font-size: clamp(32px, 4.9vw, 84px) !important; line-height: .95 !important; text-wrap: balance; }
.sx-bl-hero .sx-cover-sub { margin-top: clamp(16px, 1.65vw, 24px) !important; }
.sx-bl-hero .sx-pill a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------- single article: About-style intro grid
   label and facts in the left third (they stay in view while reading), the article from one third */
.sx-bl-article { display: grid; grid-template-columns: calc(33.333% - var(--sx-pad) / 3) minmax(0, 1fr); align-items: start; }
.sx-bl-article > .sx-bl-aside { position: sticky; top: calc(var(--sx-header-h) + 28px); padding-right: 24px; }
body.admin-bar .sx-bl-article > .sx-bl-aside { top: calc(var(--sx-header-h) + 60px); }
.sx-bl-aside > * { margin: 0 !important; }
.sx-bl-facts { max-width: 250px; margin-top: clamp(28px, 3vw, 40px) !important; border-bottom: 1px solid #d6d6d6; }
.sx-bl-row { padding: 12px 0 13px; border-top: 1px solid #d6d6d6; }
.sx-bl-row dt { font-size: 11px; font-stretch: 110%; line-height: 1.2; letter-spacing: 0; text-transform: uppercase; color: var(--sx-label); }
.sx-bl-row dd { margin: 5px 0 0; font-size: 14px; line-height: 1.35; color: var(--sx-ink); }
.sx-bl-row a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sx-bl-aside .sx-bl-back { margin-top: clamp(24px, 2.6vw, 34px) !important; }

.sx-bl-main { min-width: 0; }
.sx-bl-main > * { margin: 0 !important; }
/* the hand-written excerpt is the big opening sentence (About 01: 41px, first line indented) */
.sx-bl-article .sx-bl-lead {
	max-width: 16.5em; margin-bottom: clamp(36px, 4.4vw, 64px) !important; font-size: clamp(24px, 3.2vw, 52px); font-weight: 400; font-stretch: 100%;
	line-height: 1.04; letter-spacing: -.025em; text-indent: 2em; color: #1c1c1c; text-wrap: pretty;
}
/* article text */
.sx-bl-prose { max-width: 41em; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.65; letter-spacing: -.005em; color: #2b2b2b; }
.sx-bl-main .sx-bl-prose > * { max-width: none; margin: 0 0 1.15em !important; }
.sx-bl-main .sx-bl-prose > :last-child { margin-bottom: 0 !important; }
.sx-bl-main .sx-bl-prose h2 {
	margin: 2.2em 0 .8em !important; font-size: clamp(22px, 2.2vw, 34px) !important; font-weight: 500 !important; font-stretch: 110%;
	line-height: 1.1 !important; letter-spacing: -.03em; text-transform: uppercase; color: var(--sx-ink);
}
.sx-bl-main .sx-bl-prose h3, .sx-bl-main .sx-bl-prose h4 { margin: 1.9em 0 .6em !important; font-size: clamp(18px, 1.6vw, 22px) !important; font-weight: 500 !important; line-height: 1.2 !important; color: var(--sx-ink); }
.sx-bl-main .sx-bl-prose > h2:first-child, .sx-bl-main .sx-bl-prose > h3:first-child { margin-top: 0 !important; }
.sx-bl-prose a { color: var(--sx-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; background: linear-gradient(var(--sx-yellow), var(--sx-yellow)) 0 100% / 100% 0 no-repeat; transition: background-size .3s var(--sx-ease); }
.sx-bl-prose a:hover { background-size: 100% 100%; }
.sx-bl-prose strong { font-weight: 600; color: var(--sx-ink); }
/* lists: hairline rows with a "(01)" index on the right (Stux awards rows) */
.sx-bl-prose ul, .sx-bl-prose ol { padding: 0; list-style: none; counter-reset: sxli; border-top: 1px solid #d6d6d6; }
.sx-bl-prose li { counter-increment: sxli; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin: 0; padding: 13px 0 14px; border-bottom: 1px solid #d6d6d6; line-height: 1.45; }
.sx-bl-prose li::after { content: "(" counter(sxli, decimal-leading-zero) ")"; flex: none; font-size: 11px; color: #6b6b6b; }
.sx-bl-prose li > ul, .sx-bl-prose li > ol { display: none; }
/* quotes: yellow mark, bold uppercase words (Stux founder quote) */
.sx-bl-main .sx-bl-prose blockquote { margin: 2.2em 0 !important; padding: 0; border: 0; }
.sx-bl-prose blockquote::before {
	content: "“"; content: "“" / ""; display: grid; place-items: center; box-sizing: border-box; width: 44px; height: 44px; padding-top: .42em; margin-bottom: 22px;
	background: var(--sx-yellow); color: var(--sx-ink); font: 800 30px/1 var(--edol-font-head); font-stretch: 125%;
}
.sx-bl-prose blockquote p { margin: 0; font-size: clamp(18px, 1.9vw, 28px); font-weight: 700; font-stretch: 118%; line-height: 1.15; letter-spacing: -.03em; text-transform: uppercase; color: #202020; }
.sx-bl-prose blockquote cite { display: block; margin-top: 14px; font-size: 14px; font-style: normal; color: #444; }
.sx-bl-prose img { display: block; width: 100%; height: auto; border-radius: 0; }
.sx-bl-prose figure { margin-inline: 0; }
.sx-bl-prose figcaption { margin-top: 10px; font-size: 13px; color: #6b6b6b; text-align: left; }
.sx-bl-main .sx-bl-prose hr { border: 0; border-top: 1px solid #d6d6d6; margin: 2.4em 0 !important; }

/* ---------------------------------------------------------- single article: keep reading (2 cards under the heading) */
.sx-bl-more .sx-head { margin-bottom: clamp(44px, 5.5vw, 80px) !important; }
@media (min-width: 761px) { .sx-bl-related { margin-left: calc(33.333% - var(--sx-pad) / 3) !important; } }

/* ---------------------------------------------------------- phones */
@media (max-width: 760px) {
	.sx-bl .sx-bl-posts { grid-template-columns: minmax(0, 1fr); gap: 52px; }
	.sx-bl-index .sx-bl-posts > li:first-child .sx-bl-card { --p: 18px; padding-bottom: 22px; }
	.sx-bl-index .sx-bl-posts > li:first-child .sx-bl-img { width: auto; margin: 8px 8px 0 !important; }
	.sx-bl-index .sx-bl-posts > li:first-child .sx-bl-date { order: 1; padding: 22px var(--p) 0; font-size: 30px; }
	.sx-bl-index .sx-bl-posts > li:first-child .sx-bl-title { order: 2; padding: 0 var(--p); margin-top: 22px !important; }
	.sx-bl-index .sx-bl-posts > li:first-child .sx-bl-ex { order: 3; padding: 0 var(--p); }
	.sx-bl-index .sx-bl-posts > li:first-child .sx-bl-chip { order: 4; padding: 18px var(--p) 0; }
	.sx-bl-pager .wp-block-query-pagination-numbers { order: 3; width: 100%; justify-content: center; }
	/* label and facts above the article, the "All articles" button after it */
	.sx-bl-article { grid-template-columns: minmax(0, 1fr); }
	.sx-bl-article > .sx-bl-aside { display: contents; }
	.sx-bl-facts { max-width: none; margin-bottom: 40px !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); column-gap: 16px; border-bottom: 0; }
	.sx-bl-row { border-bottom: 1px solid #d6d6d6; }
	.sx-bl-aside .sx-bl-back { order: 2; margin-top: 44px !important; }
	.sx-bl-article:has(+ .sx-bl-more) .sx-bl-back { display: none; } /* the next section starts with the same button */
	.sx-bl-more .sx-h2 br { display: none; }
	.sx-bl-article .sx-bl-lead { text-indent: 1.5em; }
	.sx-bl-prose li { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.sx-bl .sx-bl-img img, .sx-bl .sx-bl-img::after, .sx-bl .sx-bl-img::before, .sx-bl .sx-bl-title a, .sx-bl-pager *, .sx-bl-pager *::after, .sx-bl-prose a { transition: none !important; }
	.sx-bl .sx-bl-card:hover .sx-bl-img img { transform: none; }
}