Prompt it

Build a polished, responsive editorial article header/byline card for a design publication using only semantic HTML and dependency-free vanilla CSS. Include an uppercase category label, a strong balanced headline, a short readable summary, and a footer containing an author identity (use an address element with an aria-hidden initials avatar, author name, and role), a machine-readable publication date using time datetime, and estimated reading time. Add a prominent “Read article” anchor with a decorative arrow. Keep the style calm and modern: white surface, deep blue-green ink, muted slate body text, a restrained teal action, subtle border and soft shadow, generous but compact spacing. Make it fit 320px wide without horizontal scrolling; stack footer information and make the call-to-action full-width on narrow screens. Preserve semantic heading order and accessible labels, readable contrast, visible keyboard focus, and at least 44px action height. Respect prefers-reduced-motion. Use system fonts, no JavaScript, libraries, remote assets, or framework utilities. Scope every CSS selector under .cf-article-byline and ensure each custom class used in CSS exists in the supplied HTML so changing CSS in the live editor visibly updates the preview.