*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* The `hidden` attribute has to beat a component's own display rule (.o-stack's flex, say), or a
   controller clearing and setting `el.hidden` — menu_controller on a dropdown, tabs_controller on
   a panel — would leave it on screen. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }
/* An anchored section clears the pinned menu bar, which would otherwise stand over the heading a
   contents link just jumped to. */
:target { scroll-margin-top: calc(var(--bar-h) + var(--space-lg)); }

/* Held in the generic layer because several components animate with it rather than one owning it.
   The cadence is --blink, which reduced motion zeroes. */
@keyframes gantry-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }