/* ===== Reset, base typography, scrollbars, focus ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-base-solid);
  color: var(--text-bright-accent);
  font-family: var(--font-stack);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
img, svg { display: block; }
button {
  font-family: inherit; color: inherit; background: none; border: 0;
  padding: 0; cursor: pointer; font-size: inherit;
}
a { color: inherit; text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, p { margin: 0; font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
input {
  font-family: inherit; color: var(--text-bright-accent);
  background: none; border: 0; outline: none;
}
::placeholder { color: #8a8a8a; }

/* Typography helpers */
.t-title-xl {
  font-size: clamp(2.2rem, 5.2vw, 5.6rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.02;
}
.t-title-lg { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
.t-title-md { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }
.t-subdued { color: var(--text-subdued); }

/* Scrollbars (desktop chrome-like) */
.scrolly { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
.scrolly::-webkit-scrollbar { width: 12px; height: 12px; }
.scrolly::-webkit-scrollbar-thumb {
  background: transparent;
}
.scrolly:hover::-webkit-scrollbar-thumb,
.scrolly::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb); }

/* Focus visibility — keyboard only */
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 2px; }

/* Ellipsis */
.ellip { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ellip2, .clamp2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Utility */
.hidden { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* Route transition (momentum rail easing) */
.view-enter {
  animation: viewIn var(--dur-med) var(--ease-momentum) both;
}
@keyframes viewIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Font faces */
@font-face {
  font-family: 'Figtree';
  src: url('../assets/fonts/figtree-var.ttf') format('truetype');
  font-weight: 300 900;
  font-display: swap;
}