/* Blog index styles, 2026-10-01. Moved out of site/blog.html so /blog stays under 60 KB. The build copies this file because blog.html links it. */
/* ---- cover artwork (branded, editorial — no placeholder text) ---- */
.bcover { position: relative; overflow: hidden; background: var(--kit-ink); }
.bcover__mesh { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 36px 36px; }
.bcover__glow { position: absolute; inset: 0; }
.bcover__glow--a { background: radial-gradient(70% 80% at 72% 24%, rgba(238,77,31,.5), transparent 60%), radial-gradient(80% 90% at 20% 90%, rgba(35,55,241,.42), transparent 62%); }
.bcover__glow--b { background: radial-gradient(72% 84% at 24% 22%, rgba(35,55,241,.46), transparent 60%), radial-gradient(70% 80% at 86% 88%, rgba(75,53,200,.4), transparent 62%); }
.bcover__glow--c { background: radial-gradient(74% 80% at 80% 80%, rgba(238,77,31,.42), transparent 60%), radial-gradient(70% 90% at 16% 18%, rgba(75,53,200,.4), transparent 60%); }
.bcover__mark { position: absolute; left: 22px; bottom: 18px; z-index: 1; display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.bcover__mark svg { width: 15px; height: 15px; fill: rgba(255,255,255,.92); }

/* ---- in-page section heads ---- */
.fn-head { max-width: 1248px; margin: 0 auto clamp(26px,3.2vw,40px); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.fn-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--kit-fox-500); }
.fn-title { font-family: var(--font-display); font-size: clamp(25px,2.9vw,38px); line-height: 1.05; letter-spacing: -.02em; margin-top: 11px; color: var(--fg-1); }
.fn-sub { font-size: 15px; color: var(--fg-2); margin-top: 9px; max-width: 56ch; line-height: 1.55; }
.fn-follow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2); text-decoration: none; padding: 10px 16px; border: 1px solid var(--border); border-radius: 999px; transition: border-color var(--dur-base), color var(--dur-base), transform var(--dur-base) var(--ease-out); }
.fn-follow svg { width: 15px; height: 15px; }
.fn-follow:hover { border-color: var(--kit-fox-500); color: var(--fg-1); transform: translateY(-2px); }

/* ---- source badge ---- */
.srcbadge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-3); }
.srcbadge svg { width: 14px; height: 14px; }
.srcbadge--li svg { color: #0A66C2; }
.srcbadge--ig svg { color: #E1306C; }

/* ---- pinned LinkedIn articles ---- */
.pinned { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(22px,2.6vw,34px); max-width: 1248px; margin: 0 auto clamp(64px,8vw,104px); }
.fnote { display: flex; flex-direction: column; text-decoration: none; border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; background: #fff; transition: transform .4s var(--ease-out), border-color .4s, box-shadow .4s; }
.fnote:hover { transform: translateY(-5px); border-color: var(--kit-fox-300); box-shadow: 0 26px 52px -30px rgba(238,77,31,.42); }
.fnote__media { aspect-ratio: 16/10; }
.fnote__media .bcover { width: 100%; height: 100%; transition: transform var(--dur-slow) var(--ease-out); }
.fnote:hover .fnote__media .bcover { transform: scale(1.04); }
.fnote__media img { width: 100%; height: 100%; object-fit: cover; object-position: left center; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.fnote:hover .fnote__media img { transform: scale(1.04); }
.fnote__body { padding: 19px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.fnote__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fnote__cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--kit-fox-500); }
/* Card text is fixed, not ragged (2026-09-18): headline at most 3 lines and always reserving 2,
   dek exactly 3 lines, so every card in a row lines up whatever the copy length. */
.fnote h3 { margin-top: 13px; font-family: var(--font-display); font-size: 20px; line-height: 1.18; letter-spacing: -.01em; color: var(--fg-1); transition: color var(--dur-fast) var(--ease-out); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: calc(2 * 1.18em); }
.fnote:hover h3 { color: var(--kit-fox-700); }
.fnote p { margin-top: 9px; font-size: 14px; line-height: 1.5; color: var(--fg-2); flex: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: calc(3 * 1.5em); }
.fnote__go { margin-top: auto; padding-top: 17px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12px; color: var(--kit-fox-600); transition: gap var(--dur-base) var(--ease-out); }
.fnote:hover .fnote__go { gap: 11px; }

/* ---- the wall: auto-updating social grid (widget slot + fallback) ---- */
.wall-wrap { max-width: 1248px; margin: 0 auto; }
#social-wall:not(:empty) { min-height: 320px; }
#social-wall:not(:empty) + .wall { display: none; }   /* live widget present → hide fallback */
.wall { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.wallcard { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); text-decoration: none; display: flex; flex-direction: column; min-height: 244px; transition: transform .35s var(--ease-out), box-shadow .35s; }
.wallcard:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -24px rgba(0,0,0,.34); }
/* LinkedIn text post */
.wallcard--li { background: #fff; padding: 18px; }
.wallcard__head { display: flex; align-items: center; gap: 10px; }
.wallcard__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--kit-ink); display: grid; place-items: center; flex: none; }
.wallcard__avatar img { width: 19px; height: 19px; }
.wallcard__who b { display: block; font-size: 13px; color: var(--fg-1); line-height: 1.2; }
.wallcard__who span { font-size: 11px; color: var(--fg-3); font-family: var(--font-mono); }
.wallcard__txt { margin-top: 13px; font-size: 13.5px; line-height: 1.5; color: var(--fg-2); flex: 1; }
.wallcard__eng { margin-top: 14px; display: flex; gap: 16px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.wallcard__eng span { display: inline-flex; align-items: center; gap: 5px; }
.wallcard__eng svg { width: 13px; height: 13px; }
/* Instagram image tile */
.wallcard--ig img.wallcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wallcard--ig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,10,15,.74), transparent 52%); }
.wallcard__ig-meta { position: relative; margin-top: auto; padding: 14px; z-index: 1; display: flex; align-items: center; gap: 8px; color: #fff; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; }
.wallcard__ig-meta svg { width: 15px; height: 15px; flex: none; }
.wall-note { max-width: 1248px; margin: 22px auto 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3); display: flex; align-items: center; gap: 8px; }
.wall-note i { width: 7px; height: 7px; border-radius: 50%; background: var(--kit-electric-400); box-shadow: 0 0 0 3px rgba(46,107,245,.18); }

/* social CTA buttons — brand colours */
.ctaband__actions .cta-li { background: #0A66C2 !important; color: #fff !important; border-color: #0A66C2 !important; box-shadow: none !important; }
.ctaband__actions .cta-li:hover { background: #0959aa !important; transform: translateY(-2px); }
.ctaband__actions .cta-ig { background: linear-gradient(135deg, #E1306C 0%, #b32e9e 55%, #8a2bd0 100%) !important; color: #fff !important; border-color: transparent !important; box-shadow: none !important; }
.ctaband__actions .cta-ig:hover { filter: brightness(1.08); transform: translateY(-2px); }

@media (max-width: 980px){ .pinned { grid-template-columns: 1fr; } .wall { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .wall { grid-template-columns: 1fr; } }