/* Hybrid (from Concept C) — blog index: Chronicles */
.sg-bl-hero { position: relative; min-height: 420px; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.sg-bl-art { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; z-index: -2; }
.sg-bl-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12,10,8,.92), rgba(12,10,8,.5) 50%, rgba(12,10,8,.15)), linear-gradient(180deg, transparent 60%, rgba(12,10,8,.4)); }
.sg-bl-in { width: 100%; padding-top: 70px; padding-bottom: 50px; }
.sg-bl-sec { padding-top: 30px; }
.sg-illum { flex: none; width: 74px; height: 74px; border-radius: 8px; display: grid; place-items: center; font: 900 42px/1 var(--font-display); color: #8a1c22; background: radial-gradient(circle at 40% 35%, #fff4d6, #e8cf8f 60%, #b8943a); border: 2px solid #8a6420; box-shadow: inset 0 0 0 4px rgba(255,255,255,.35), inset 0 0 0 6px rgba(138,28,34,.25), 0 8px 20px rgba(0,0,0,.5); text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.sg-feat { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); border-radius: 18px; overflow: hidden; border: 1px solid var(--gold-hair); background: var(--panel); text-decoration: none; color: inherit; box-shadow: 0 24px 50px rgba(0,0,0,.5); transition: transform .3s var(--ease-spring), box-shadow .3s; margin-bottom: 22px; }
.sg-feat:hover { transform: translateY(-3px); box-shadow: 0 30px 60px rgba(0,0,0,.6), 0 0 30px rgba(212,175,55,.15); }
.sg-feat-img { position: relative; min-height: 320px; }
.sg-feat-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.sg-feat:hover .sg-feat-img img { transform: scale(1.04); }
.sg-feat-b { padding: 30px; display: grid; gap: 14px; align-content: center; justify-items: start; }
.sg-feat-b h2 { margin: 0; font: 700 clamp(24px, 2.4vw, 34px)/1.15 var(--font-heading); color: var(--gold); letter-spacing: .02em; }
.sg-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font: 600 11px/1 var(--font-heading); letter-spacing: .18em; text-transform: uppercase; color: var(--cream-faint); }
.sg-meta i { width: 4px; height: 4px; border-radius: 50%; background: var(--gold-dim); }
.sg-ex { margin: 0; font: italic 18px/1.5 var(--font-lore); color: var(--cream-dim); }
.sg-bl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 16px; }
.sg-post { display: grid; grid-template-rows: auto 1fr; border-radius: 16px; overflow: hidden; border: 1px solid var(--umber); background: var(--panel); text-decoration: none; color: inherit; transition: transform .28s var(--ease-spring), box-shadow .28s, border-color .28s; }
.sg-post:hover { transform: translateY(-4px) scale(1.02); border-color: var(--gold-hair); box-shadow: 0 20px 40px rgba(0,0,0,.55), 0 0 26px rgba(212,175,55,.14); }
.sg-post-img { position: relative; aspect-ratio: 16 / 8; overflow: hidden; }
.sg-post-img img { width: 100%; height: 100%; object-fit: cover; }
.sg-post-img .sg-illum { position: absolute; left: 16px; bottom: -26px; width: 58px; height: 58px; font-size: 32px; }
.sg-post-b { padding: 36px 18px 18px; display: grid; gap: 10px; align-content: start; }
.sg-post-b h3 { margin: 0; font: 700 19px/1.25 var(--font-heading); color: var(--cream); letter-spacing: .02em; }
.sg-post-b .sg-ex { font-size: 16px; }
@media (max-width: 900px) { .sg-feat { grid-template-columns: 1fr; } .sg-feat-img { min-height: 220px; } }