/* NOUSOOS blog — public styles, built on site tokens from styles.css */
.bl-body { background:var(--bg); color:var(--ink); min-height:100vh; display:flex; flex-direction:column; }
.bl-body .foot { margin-top:auto; }

/* top nav (reuses .nav / .nav--minimal; just add logo + visible rule) */
.bl-topnav { border-bottom:1px solid var(--rule); }
.bl-brand { display:flex; align-items:center; }
.bl-brand img { height:20px; width:auto; }

/* ─── index ─── */
.bl-index { padding:clamp(56px,8vw,104px) 0 clamp(72px,10vw,128px); }
.bl-index__head { max-width:760px; margin-bottom:clamp(40px,6vw,72px); }
.bl-kicker { font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 16px; }
.bl-index__title { font-size:clamp(40px,7vw,84px); font-weight:600; letter-spacing:-0.04em; line-height:0.98; margin:0 0 20px; text-transform:lowercase; }
.bl-index__tag { font-size:clamp(16px,2vw,20px); color:var(--ink-soft); margin:0; max-width:46ch; line-height:1.5; }

.bl-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,3vw,48px) clamp(24px,2.4vw,40px); }
.bl-card { display:flex; flex-direction:column; }
.bl-card__img { display:block; aspect-ratio:3/2; overflow:hidden; background:var(--bg-deep); margin-bottom:20px; }
.bl-card__img img { width:100%; height:100%; object-fit:cover; }
.bl-card__meta { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 10px; }
.bl-card__title { font-size:clamp(19px,1.6vw,23px); font-weight:600; letter-spacing:-0.02em; line-height:1.18; margin:0 0 12px; }
.bl-card__title a:hover { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.bl-card__ex { font-size:15px; color:var(--ink-soft); margin:0 0 16px; line-height:1.55; }
.bl-card__more { font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); margin-top:auto; transition:gap .2s; display:inline-block; }
.bl-card__more:hover { padding-left:4px; }
.bl-empty { color:var(--ink-soft); font-size:18px; }

/* ─── article ─── */
.bl-article { padding:clamp(48px,7vw,88px) 0 clamp(72px,10vw,120px); }
.bl-article article { max-width:760px; }
.bl-article .bl-kicker { margin-bottom:20px; }
.bl-title { font-size:clamp(30px,5vw,56px); font-weight:600; letter-spacing:-0.035em; line-height:1.04; margin:0 0 36px; }
.bl-cover { margin:0 0 44px; overflow:hidden; background:var(--bg-deep); }
.bl-cover img { width:100%; height:auto; display:block; }

.bl-content { font-size:clamp(17px,1.3vw,19px); line-height:1.72; color:#1a1a18; }
.bl-content > *:first-child { margin-top:0; }
.bl-content p { margin:0 0 1.45em; }
.bl-content h2 { font-size:clamp(26px,2.6vw,33px); font-weight:600; letter-spacing:-0.025em; line-height:1.18; margin:1.9em 0 .6em; }
.bl-content h3 { font-size:clamp(21px,2vw,25px); font-weight:600; letter-spacing:-0.015em; margin:1.7em 0 .5em; }
.bl-content h4 { font-size:19px; font-weight:600; margin:1.5em 0 .4em; }
.bl-content a { text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.bl-content a:hover { color:var(--ink-soft); }
.bl-content ul, .bl-content ol { margin:0 0 1.45em; padding-left:1.3em; }
.bl-content li { margin:0 0 .55em; padding-left:.2em; }
.bl-content blockquote { margin:2em 0; padding:4px 0 4px 26px; border-left:2px solid var(--ink); font-size:clamp(20px,2.2vw,26px); line-height:1.4; letter-spacing:-0.02em; font-weight:500; }
.bl-content img { margin:2em 0; }
.bl-content figure { margin:2em 0; }
.bl-content figcaption { font-size:13px; color:var(--ink-soft); margin-top:10px; }
.bl-content pre { background:#1a1a18; color:#f1eeea; padding:20px 22px; overflow:auto; font-size:14px; margin:1.7em 0; }
.bl-content code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; background:var(--bg-deep); padding:2px 6px; }
.bl-content pre code { background:none; padding:0; }
.bl-content hr { border:0; border-top:1px solid var(--rule); margin:2.6em 0; }

.bl-back { margin-top:64px; padding-top:30px; border-top:1px solid var(--rule); font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.bl-back a:hover { text-decoration:underline; text-underline-offset:3px; }

/* ─── responsive ─── */
@media (max-width:880px){
  .bl-grid { grid-template-columns:repeat(2,1fr); }
  .bl-brand { display:none; }
}
@media (max-width:560px){
  .bl-grid { grid-template-columns:1fr; gap:36px; }
}