The cascade bites back

Fork the starter from the Phase 01 assignments repository. It is one HTML file and one stylesheet, and six things on the page are the wrong colour, the wrong size or in the wrong place.

Each bug has a different cause, one per mechanism: an origin conflict where a browser default is winning; an !important in a vendor stylesheet; a layer ordering mistake; a specificity escalation where a later rule is too weak; a source-order accident inside a bundled file; and one where the property being fought over is inherited and the fight is happening on the wrong element entirely.

The rule for the whole exercise: you may not add !important, and you may not add an id selector. Both of those are ways of winning an argument without understanding it, and both leave the codebase worse. Everything is fixable within the rules.

The method, for each one. Open DevTools, select the element, and look at the Styles panel. Your declaration will be there, struck through. Whatever is above it is what beat it. Then ask: which step? If the winner has the same specificity, it is source order or layers. If it has higher specificity, it is step three. If it is in a different origin band, you will see !important or the user agent stylesheet heading.

For each fix, write one line in cascade-notes.md: the symptom, the step that caused it, and the change you made. Six lines. That file is what you will look at in six months when it happens again, and it will be more useful than anything you could search for.

When you are done, do the optional harder version: reorganise the whole stylesheet into @layer reset, base, components, utilities and confirm every fix still holds with the escalations removed. If it does, you have just seen why layers exist.