/* ============================================================
   base.css — reset, @font-face, element defaults
   ============================================================ */

/* ── Messina Sans — 12 WOFF2 weights ── */
@font-face { font-family: 'MessinaSans'; src: url('/versions/v4-michaels-version/assets/fonts/MessinaSans-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'MessinaSans'; src: url('/versions/v4-michaels-version/assets/fonts/MessinaSans-LightItalic.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'MessinaSans'; src: url('/versions/v4-michaels-version/assets/fonts/MessinaSans-Book.woff2') format('woff2'); font-weight: 350; font-style: normal; font-display: swap; }
@font-face { font-family: 'MessinaSans'; src: url('/versions/v4-michaels-version/assets/fonts/MessinaSans-BookItalic.woff2') format('woff2'); font-weight: 350; font-style: italic; font-display: swap; }
@font-face { font-family: 'MessinaSans'; src: url('/versions/v4-michaels-version/assets/fonts/MessinaSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'MessinaSans'; src: url('/versions/v4-michaels-version/assets/fonts/MessinaSans-RegularItalic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'MessinaSans'; src: url('/versions/v4-michaels-version/assets/fonts/MessinaSans-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'MessinaSans'; src: url('/versions/v4-michaels-version/assets/fonts/MessinaSans-SemiBoldItalic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'MessinaSans'; src: url('/versions/v4-michaels-version/assets/fonts/MessinaSans-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'MessinaSans'; src: url('/versions/v4-michaels-version/assets/fonts/MessinaSans-BoldItalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'MessinaSans'; src: url('/versions/v4-michaels-version/assets/fonts/MessinaSans-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'MessinaSans'; src: url('/versions/v4-michaels-version/assets/fonts/MessinaSans-BlackItalic.woff2') format('woff2'); font-weight: 900; font-style: italic; font-display: swap; }

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-weight: var(--fw-regular);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--text);
  background-color: var(--off-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Skip link ── */
.skip-link {
  position: absolute;
  top: -999px;
  left: 0;
  padding: 0.75rem 1.25rem;
  background: var(--red);
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  z-index: 9999;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ── Focus ── */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* ── Images ── */
img, svg { display: block; max-width: 100%; }

/* ── Links ── */
a { color: inherit; }

/* ── Lists ── */
ul, ol { list-style: none; }

/* ── Headings ── */
h1 {
  font-size: var(--text-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--dark);
}
h2 {
  font-size: var(--text-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--dark);
}
h3 {
  font-size: var(--text-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  color: var(--dark);
}
h4 {
  font-size: var(--text-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  color: var(--dark);
}

/* ── Paragraph ── */
p {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--text);
}