/* ================================================================== RESET — reset + raw HTML element defaults. Nothing in this file is a class. If you're tempted to add a class here, it belongs in components.css or pages.css instead. This file only answers: "what does a bare , , etc. look like before any component touches it?" Element-level typography (h1–h3, p, ul, li) already lives in tokens.css next to the type tokens they use — that's the one exception, kept there so type primitives and their application stay in the same place. ================================================================== */ /* tokens.css is intentionally NOT re-imported here: main.css already loads it before this file in the cascade (tokens -> reset -> components -> pages), so every custom property below is already available. Re-importing here just added an extra hop to the CSS import chain for no benefit. */ html { overflow-x: clip; /* clip instead of hidden: prevents horizontal scrollbar from the off-canvas drawer without creating a scroll container. overflow:hidden creates a scroll container which clips position:fixed descendants on some browsers — exactly what was stopping the drawer from appearing. */ } * { margin: 0; padding: 0; box-sizing: border-box; } img { max-width: 100%; height: auto; /* Baseline safety net so no image can ever render wider than its container or override a component's aspect-ratio-based sizing (e.g. .pli, .lore) just because it has HTML width/height attributes. Anything that needs a different, explicit size (.hero-mock, .lightbox img, .image-card img) sets its own width/height and wins on specificity as normal. */ } picture { display: contents; /*