/* dankhan.com — site styles.
   Element-level layout styles remain as inline style attributes in index.html;
   this file holds the document-wide resets, link/focus states, hover hooks and
   the reduced-motion rules. */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body { margin: 0; background: oklch(0.985 0.003 90); color: oklch(0.24 0.008 260); font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif; text-wrap: pretty; -webkit-font-smoothing: antialiased; }
  * { box-sizing: border-box; }
  p { margin: 0; }
  ul { margin: 0; padding: 0; list-style: none; }
  h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
  img { max-width: 100%; }
  /* width/height attrs are presentational hints; never let them force a height */
  img[width][height] { height: auto; }
  a { color: oklch(0.5 0.12 280); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: oklch(0.5 0.12 280 / 0.4); text-underline-offset: 0.2em; }
  a:hover { text-decoration-color: oklch(0.5 0.12 280); }
  a:focus-visible { outline: 2px solid oklch(0.5 0.12 280); outline-offset: 3px; border-radius: 2px; }
  ::selection { background: oklch(0.5 0.12 280 / 0.16); }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

  /* hover treatments (were inline in the dev implementation) */
  [data-hover="img"]:hover { opacity: 0.9; }
  [data-hover="totop"]:hover { color: oklch(0.3 0.008 260); border-color: oklch(0.24 0.008 260 / 0.3); }
  [data-home]:hover { border-bottom-color: oklch(0.24 0.008 260 / 0.45); }