Act as an editorial designer and front-end engineer. Build the article template for {{business_name}}'s blog or guides in my {{tech_stack}} project. Fonts: {{brand_fonts}}. Style: {{visual_style}}. Use the existing content pipeline. Reading comfort: - body 18px at 1280 and 17px at 360, line height 1.65, measure 65 to 72 characters, paragraph spacing 1em, left-aligned, never justified - headings on a 1.25 scale with 1.5em above and 0.5em below, so each heading belongs to what follows - body text at full text color, not light gray; links underlined with 0.15em offset Table of contents: - built from h2 and h3 at build time - 1280: a sticky rail (220px) beside a 680px text column, highlighting the current section with IntersectionObserver and aria-current="true" - 768 and 360: a collapsible "On this page" disclosure under the title - each heading has an anchor and a copy-link button with an accessible name; scroll-margin-top clears the sticky header Elements: - code blocks scroll sideways inside themselves, with a copy button that announces "Copied" - wide tables sit in a focusable, labeled region that scrolls on its own; the page never scrolls sideways at 360 - images and figures with captions; wide images may break out to 960px at 1280 - blockquotes, footnotes with back-links, and callouts with a text label, not color alone Header: title, dek, author, published and updated dates in time elements, reading time. Article structured data; a print stylesheet that hides nav. States: an article with no headings hides the contents; a missing hero image collapses; very long titles wrap with balance. Motion: smooth scrolling only when prefers-reduced-motion allows it. Avoid: lines past 80 characters, reading progress bars, sticky share buttons covering text, drop caps on everything, gray-on-white body copy.