/* ==========================================================================
   RESET — generic, element-level normalization. No classes here.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
/* height: auto is the important half here — any <img width height> (added
   for the browser's layout-shift hint) would otherwise win over the
   intrinsic aspect ratio the moment CSS constrains width alone. */
img, picture { max-width: 100%; height: auto; display: block; }
input, button { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
html { scroll-behavior: smooth; }

/* progressive enhancement: lets --grad-angle be transitioned/animated smoothly
   (used by the hero frame's conic-gradient ring) where @property is supported */
@property --grad-angle {
    syntax: '<angle>';
    inherits: true;
    initial-value: 0deg;
}