:root { --ink: #211a14; --muted: #6b5f57; --cream: #fff8ef; --paper: #ffffff; --saffron: #e8720c; --saffron-dark: #c25a02; --maroon: #a5223a; --maroon-dark: #7e1a2c; --maroon-light: #fbe9ec; --green: #1f7a3d; --green-light: #e6f4ea; --border: #eadfcf; --border-soft: #f0e6d6; --shadow-sm: 0 2px 10px rgba(33, 26, 20, 0.06); --shadow-md: 0 14px 32px rgba(33, 26, 20, 0.10); --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --grad-primary: linear-gradient(90deg, var(--maroon) 0%, var(--saffron) 100%); --font-head: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* Defensive safety net: mobile WebViews can lock the layout viewport to the widest content ever rendered on the page (even a momentary flash before JS/CSS settles) and never shrink it back, which desyncs window.innerWidth from the visible screen. Wide content (tables, maps) already scrolls inside its own container, so clipping here costs nothing on purpose. Scoped to body only, NOT html — overflow on disables position:sticky for every descendant (breaks the sticky header). */ body { margin: 0; overflow-x: hidden; max-width: 100%; font-family: var(--font-body); color: var(--ink); background: var(--cream); line-height: 1.6; } img { max-width: 100%; display: block; } /* Dropdowns — consistent styling everywhere a