Prompt it

Create a beginner-friendly breadcrumb navigation using semantic HTML and dependency-free CSS. Use a nav labelled Breadcrumb containing an ordered list with Home and Recipes links and a non-linked current page named Responsive breadcrumb navigation with aria-current="page". Use root-relative example links and explain how to replace them with real parent URLs. Hide decorative separator characters from assistive technology. Make long page names wrap without horizontal page overflow at 320px and in a narrow grid preview. Give links generous padding and a clearly visible keyboard focus outline with readable colour contrast. Use system fonts and scoped classes, no JavaScript, no frameworks, no external assets, and no motion. If adding motion, include a reduced motion fallback. Return complete copy-ready HTML and CSS and briefly explain the hierarchy, current-page marker, and flex wrapping.