/* Fonts, reset and page frame. No component styling here. */

@font-face { font-family: "Neue Montreal"; src: url("../assets/fonts/NeueMontreal-100.otf") format("opentype"); font-weight: 100; font-display: swap; }
@font-face { font-family: "Neue Montreal"; src: url("../assets/fonts/NeueMontreal-400.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Neue Montreal"; src: url("../assets/fonts/NeueMontreal-400i.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Neue Montreal"; src: url("../assets/fonts/NeueMontreal-500.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Neue Montreal"; src: url("../assets/fonts/NeueMontreal-700.otf") format("opentype"); font-weight: 700; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--outer);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--outer);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-pale); text-decoration: none; }
a:hover { color: var(--ink); }

img { max-width: 100%; }
input, select, textarea, button { font-family: inherit; }
::placeholder { color: var(--ink-4); }
:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
[hidden]:not([hidden="until-found" i]) { display: none !important; }

/* Page frame. .page is the container that every cqw unit refers to. */
.page-outer {
  background: var(--outer);
  display: flex;
  justify-content: center;
  min-height: 100vh;
}
.page {
  background: var(--bg);
  overflow: clip;
  container-type: inline-size;
  width: 100%;
  transition: opacity 0.2s ease;
}
/* Content is filled in by JS; boot.js sets this class and site.js removes it. */
html.is-loading .page { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .page { transition: none; }
}