/* =========================================================================== DvaDoma, BLOG (lb-* namespace). Loaded only on /blog pages, on top of tokens.css + dvadoma.css + landing.css (the public shell: nav, footer, the body.lp box-sizing reset and the one .dd-container grid). Index: masthead, search, then the articles as plain text rows. Article: a centred reading column with the table of contents in a right rail. Both: one quiet product note at the foot of the page, and nothing else selling anything anywhere above it. No cover art, no category labels, no tags, no badges, no card walls. The blog is writing, so type and hairlines carry it. House rules that shape everything below (docs/SESSION-HANDOFF §standing): - no coloured stripe pinned to the edge of a card, on any side - no emoji, no serif, no tinted pill badges - no em dash anywhere, in any language - one box model and one content grid, shared with the nav and the footer =========================================================================== */ /* ── shared chrome ───────────────────────────────────────────────────── */ .lb-page { padding-block: 2.6rem 4.5rem; } /* NO max-width here, EVER (settled 2026-08-26 the hard way, four rounds). The project rule that tools/audit-layout.js enforces (QA BULGU 34) is: every page wrapper shares the nav's exact content edges. Blog content therefore FILLS this grid: the list as stacked full-width rows, the article as a stretching text column plus the fixed rail (see .lb-art-grid). Every earlier variant (left-pinned reading measure, centred 68rem frame, narrow list column) made content narrower than the page and was rejected by the user. Run `node tools/audit-layout.js` before calling ANY change to this file done. */ .lb-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; font-size:var(--dd-fs-sm); color:var(--dd-muted); margin:0 0 1.6rem; padding:0; list-style:none; } .lb-crumbs li { display:flex; align-items:center; gap:.45rem; min-width:0; } .lb-crumbs li + li::before { content:"/"; color:var(--dd-border-strong); } .lb-crumbs a { color:var(--dd-muted); text-decoration:none; } .lb-crumbs a:hover { color:var(--dd-primary); } .lb-crumbs [aria-current="page"] { color:var(--dd-text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:34ch; } /* On a phone an article title is longer than the screen, so the last crumb wraps to its own line behind a stray separator and the trail reads as broken. Drop it: the H1 sits directly below and says the same thing, and the full trail is still published in the BreadcrumbList JSON-LD, so nothing is lost to a crawler. Hiding the
  • takes its "/" with it, because the separator is drawn by li + li::before. */ @media (max-width:700px){ .lb-crumbs li:last-child { display:none; } } /* One muted line of facts: published, revised, reading time. Never chips. */ .lb-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:0; font-size:var(--dd-fs-sm); color:var(--dd-muted); } .lb-meta > * + *::before { content:"\00b7"; margin-right:.5rem; color:var(--dd-border-strong); } /* The article byline spells out "Objavljeno" and "Posodobljeno", so it is long enough to wrap, and a dot separator drawn with ::before then lands at the START of the wrapped line as a stray bullet. The labels already do the separating there, so the dots come off and the items are held apart by a wider gap instead. The list rows keep their dots: their dates carry no label. */ .lb-art-head .lb-meta { gap:.3rem 1.35rem; } .lb-art-head .lb-meta > * + *::before { content:none; margin-right:0; } /* On a phone the three facts cannot share two lines without one of them ending up stranded beside another, so each takes its own row. Predictable at every width, and the labels read as a short record rather than a broken sentence. */ @media (max-width:700px){ .lb-art-head .lb-meta { flex-direction:column; align-items:flex-start; gap:.2rem; } } /* Reading time is a different KIND of fact from the two dates: an estimate about the reader's time, not a record of the article's. So it is set apart, and the three lines stop reading as one grey block. The shift is in HUE, not lightness: a lighter grey is the obvious move and it is the wrong one, because --dd-faint is marked decorative-only in tokens.css and measures about 2.4:1 on this paper, well under the 4.5:1 AA floor for body text. The ochre is darker than the greys it sits beside, so it stays legible while clearly not being one of them. Not --dd-secondary-dark: that token measures exactly 4.50:1 here, the AA floor with no margin at all. This is one step darker. It is a literal because there is no darker ochre in tokens.css yet; if one is added, swap it in. */ .lb-art-head .lb-meta > span:last-child { color:#7B5E20; } /* ── masthead ────────────────────────────────────────────────────────── */ .lb-masthead { display:grid; gap:.9rem; max-width:640px; } .lb-h1 { margin:0; font-size:clamp(2rem, 4.2vw, 2.8rem); line-height:1.08; letter-spacing:-.03em; font-weight:var(--dd-fw-bold); color:var(--dd-text); } .lb-lead { margin:0; font-size:var(--dd-fs-lg); line-height:1.6; color:var(--dd-muted); } /* ── search ──────────────────────────────────────────────────────────── */ /* A real