/* ============================================================
   Base — reset, document defaults, page container, typography helpers.
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* The one !important in the codebase: author display rules must never un-hide [hidden]. */
[hidden] { display: none !important; }

img, svg { flex-shrink: 0; }

button, input, textarea { font-family: inherit; }

fieldset {
  min-width: 0;
  border: 0;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* -- Scrollbars -- */
* {
  scrollbar-width: thin;
  scrollbar-color: #2e2e2e transparent;
}
::-webkit-scrollbar              { width: 5px; height: 5px; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner       { background: transparent; }
::-webkit-scrollbar-thumb        { background: #2e2e2e; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover  { background: var(--border-hover); }
::-webkit-scrollbar-button       { display: none; width: 0; height: 0; }

/* -- Page container --
   Every <main> is a .page; pages tune width/padding through custom props
   instead of redefining the container. */
.page {
  flex: 1;
  width: 100%;
  max-width: var(--page-width, 1500px);
  margin: 0 auto;
  padding: var(--page-padding, 0 var(--gutter));
}

/* -- Typography helpers -- */
.muted { color: var(--text-muted); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}