/* ============================================================
   Fonts (self-hosted — no external loads)
   ============================================================ */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2-variations"),
       url("../fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable-Italic.woff2") format("woff2-variations"),
       url("../fonts/InterVariable-Italic.woff2") format("woff2");
}

/* ============================================================
   Base typography & layout
   ============================================================ */
html {
  background: var(--bg);
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}

body {
  font-family: var(--font-sans);
  font-feature-settings: "cv11", "ss01", "ss03"; /* nicer Inter alts */
  font-size: 17px;
  color: var(--text);
  background: var(--bg);
  transition: background 0.2s ease, color 0.2s ease;
  /* respect iOS notch */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow-x: hidden; /* prevent any minor horizontal-scroll surprises */
}

.page {
  max-width: 880px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 6rem;
}

/* Tablet */
@media (max-width: 900px) {
  .page { padding: 3rem 1.5rem 5rem; }
}

/* Phone */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .page { padding: 1.75rem 1.1rem 4rem; }
}

/* Very narrow phones */
@media (max-width: 360px) {
  .page { padding: 1.25rem 0.9rem 3.5rem; }
}

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

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.15s ease;
}
a:hover { color: var(--link-hover); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

p { color: var(--text); max-width: var(--measure); }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 3rem 0 2rem;
}

/* selection */
::selection { background: var(--accent-soft); color: var(--text); }

/* Hidden SVG defs container — used to share atom paths/gradients between
   multiple <svg class="atom"> elements without a visible footprint. */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* small utility — extra top margin for a follow-up paragraph after entries */
.spacer-top { margin-top: 1.5rem; }