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

html {
  font-size: 18px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: hidden;
}

/* ─────────────────────────────────────────────────────────────
   BODY — dot-grid background + ambient glow layers
───────────────────────────────────────────────────────────── */
body {
  font-family: var(--f-body);
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-hi);
  background-color: var(--bg-0);
  background-image:
    radial-gradient(circle, var(--dot-color) var(--dot-px), transparent var(--dot-px));
  background-size: var(--dot-gap) var(--dot-gap);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Ambient radial gradients — depth layer */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 15% 5%,  rgba(1, 191, 255, 0.027) 0%, transparent 100%),
    radial-gradient(ellipse 50% 35% at 85% 95%, rgba(74, 158, 255, 0.024) 0%, transparent 100%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(192,132, 252, 0.015) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* ─────────────────────────────────────────────────────────────
   SITE WRAPPER
───────────────────────────────────────────────────────────── */
#page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ─────────────────────────────────────────────────────────────
   MAIN LAYOUT
───────────────────────────────────────────────────────────── */
#primary,
.site-main,
main {
  flex: 1;
  position: relative;
  z-index: 1;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: var(--s7) var(--pad-x);
  width: 100%;
}

/* Wide / full-width Gutenberg blocks */
.alignwide  { max-width: var(--wide-w); margin-left: auto; margin-right: auto; }
.alignfull  { width: 100%; max-width: none; }

/* ─────────────────────────────────────────────────────────────
   ARTICLE WRAPPER
───────────────────────────────────────────────────────────── */
.post-entry {}