/* ===================================================================== VIZ3_BLOGHERO-INSTRUMENT.CSS · 18 Jul 2026 Instrument identity for blog posts (template cnp-blogpost-praxis.php). Linked from the template BEFORE wp_head, so it loads before cnp-blog.css/cnp-praxis.css — every override here therefore beats the theme rules on SPECIFICITY, not order (extra .praxis / element tags). Tokens use var(--cnp-*) with literal Instrument fallbacks so the file is self-sufficient when the gated instrument CSS is absent. Scope: .article-hero header, author bio ticket, related cards. Body copy, nav and footer untouched. Reversible: remove the + .viz3-* markup in the template. ===================================================================== */ /* ---- hero ground: Instrument cream + hairline ---- */ body.praxis .article-hero{ background: var(--cnp-cream, #F5EEE1); border-bottom: 1px solid var(--cnp-hair, #DED3BF); } /* ---- mono eyebrow row: kicker · hairline rule · index tag ---- */ body.praxis .viz3-postrow{ display: flex; align-items: center; gap: 14px; margin-top: 28px; } body.praxis .viz3-postrow__eyebrow{ font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cnp-orange-text, #A8481A); white-space: nowrap; } body.praxis .viz3-postrow__rule{ flex: 1; height: 1px; background: var(--cnp-hair, #DED3BF); } body.praxis .viz3-postrow__id{ font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; color: var(--cnp-soft, #7d7062); white-space: nowrap; } /* ---- category badge: pill → Instrument ticket tag ---- */ body.praxis .article-hero .category-badge{ color: var(--cnp-orange-text, #A8481A); background: var(--cnp-cream-2, #efe7da); border: 1px solid var(--cnp-hair, #DED3BF); border-radius: 2px; letter-spacing: .11em; margin-top: 16px; } /* ---- headline: Instrument serif scale ---- */ body.praxis .article-hero h1{ font-weight: 500; line-height: 1.08; letter-spacing: -.016em; } /* ---- author strip: hairline admit line ---- */ body.praxis .article-hero .author-line{ border-top: 1px solid var(--cnp-hair, #DED3BF); padding-top: 18px; margin-top: 4px; } /* ---- 2-column grid: engages ONLY when the (gated) hero injector adds a mapped Instrument card; otherwise the header stays single-column — graceful degradation, never a fabricated ticket ---- */ body.praxis .article-hero .container:has(> .mh-aside){ display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: clamp(32px, 4.5vw, 64px); align-items: center; } body.praxis .article-hero .container:has(> .mh-aside) > *{ min-width: 0; } body.praxis .article-hero .mh-copy{ min-width: 0; } body.praxis .article-hero .mh-aside{ min-width: 0; } /* card frame fallback (mirrors cnp-method-instrument.css .mh-card) */ body.praxis .article-hero .mh-card{ display: block; width: 100%; height: auto; aspect-ratio: 1080 / 1350; object-fit: cover; border-radius: 14px; border: 1px solid var(--cnp-hair, #DED3BF); box-shadow: 0 1px 0 rgba(42,33,27,.05), 0 24px 54px -30px rgba(42,33,27,.42); } @media (max-width: 920px){ body.praxis .article-hero .container:has(> .mh-aside){ grid-template-columns: 1fr; row-gap: 34px; } body.praxis .article-hero .mh-aside{ max-width: 420px; width: 100%; } } /* ---- author bio card → readout ticket (16px radius, card face, barcode stamp; no markup change needed) ---- */ body.praxis .author-card-inner{ position: relative; background: var(--cnp-card, #FBF6EB); border: 1px solid var(--cnp-hair, #DED3BF); border-radius: var(--cnp-radius, 16px); } body.praxis .author-card-inner::after{ content: ""; position: absolute; right: 28px; bottom: 24px; width: 74px; height: 18px; background: repeating-linear-gradient(90deg, var(--cnp-ink, #2A211B) 0 2px, transparent 2px 5px, var(--cnp-ink, #2A211B) 5px 6px, transparent 6px 9px, var(--cnp-ink, #2A211B) 9px 12px, transparent 12px 14px, var(--cnp-ink, #2A211B) 14px 15px, transparent 15px 19px); opacity: .5; pointer-events: none; } @media (max-width: 760px){ body.praxis .author-card-inner::after{ display: none; } /* centered layout: no stamp overlap */ } /* ---- related band + cards on the Instrument surfaces ---- */ body.praxis .related-section{ background: var(--cnp-cream-2, #efe7da); border-top: 1px solid var(--cnp-hair, #DED3BF); } body.praxis a.related-card{ background: var(--cnp-card, #FBF6EB); border: 1px solid var(--cnp-hair, #DED3BF); border-radius: var(--cnp-radius, 16px); } body.praxis .related-card .cat-badge{ color: var(--cnp-orange-text, #A8481A); }