/* =========================================================
   BASE — wrapped in :where() so every rule has ZERO specificity.
   NVL lesson #4: resets must never beat component colours.
   ========================================================= */
:where(*,*::before,*::after){box-sizing:border-box}
:where(html){scroll-behavior:smooth;-webkit-text-size-adjust:100%}
:where(body){margin:0;font-family:var(--omp-f-body);font-size:var(--omp-fs-body);line-height:1.6;color:var(--omp-ink);background:var(--omp-white);-webkit-font-smoothing:antialiased;overflow-x:clip}
:where(h1,h2,h3,h4,h5,h6){font-family:var(--omp-f-display);font-weight:700;line-height:1.1;color:var(--omp-acacia);margin:0 0 .5em}
:where(p){margin:0 0 1em}
:where(a){color:var(--omp-murram);text-decoration-thickness:1px;text-underline-offset:3px}
:where(a:hover){color:var(--omp-murram-deep)}
:where(img,svg,video){max-width:100%;height:auto}
:where(img){display:block}
:where(button,input,select,textarea){font:inherit;color:inherit}
:where(ul.omp-list,ol.omp-list){list-style:none;margin:0;padding:0}

:focus-visible{outline:3px solid var(--omp-savanna);outline-offset:3px}

/* NVL lesson #5: decorative layers never block clicks */
.omp-deco,
[class^="omp-"]::before,[class*=" omp-"]::before,
[class^="omp-"]::after,[class*=" omp-"]::after{pointer-events:none}

.omp-icon{display:inline-block;flex-shrink:0;vertical-align:middle;max-width:none}

.screen-reader-text:not(:focus){position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}