/* ==========================================================================
   reset.css — Modern CSS Reset
   Inspired by Andy Bell's modern reset, trimmed for this portfolio.
   Removes browser defaults and sets sensible baselines so styles.css is
   predictable across browsers.
   ========================================================================== */

/* Use border-box on every element — width includes padding & border. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margins so spacing is intentional, controlled in styles.css. */
* {
  margin: 0;
  padding: 0;
}

/* Allow percentage-based heights in the application. */
html,
body {
  height: 100%;
}

/* Add accessible line-height; improve text rendering on macOS/iOS. */
body {
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Improve media defaults — block-level + responsive by default. */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Inherit fonts in form elements (they don't by default). */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Long words break instead of overflowing. */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Headings need balanced wrapping for cleaner line breaks (modern browsers). */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* Better paragraph wrapping where supported. */
p {
  text-wrap: pretty;
}

/* Smooth scrolling for anchor links, respecting reduced-motion preference. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Remove default list styles where roles are applied (e.g., nav lists). */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Anchors inherit color by default — easier to theme. */
a {
  color: inherit;
  text-decoration: none;
}

/* Visible focus ring for keyboard users only (better than the default). */
:focus-visible {
  outline: 2px solid var(--accent, #8b7355);
  outline-offset: 3px;
  border-radius: 4px;
}