/* ============================================================
   BASE — reset, page ground, shared primitives
   ============================================================ */

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

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  color: var(--ink);
  background-color: var(--paper);
  /* graph paper: minor lines every 28px, major every 140px */
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 140px 140px, 140px 140px, 28px 28px, 28px 28px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* paper grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--pink); color: var(--paper-card); }

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
em { font-style: italic; }
strong { font-weight: 600; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }

/* pink notebook margin rule */
.margin-rule {
  position: fixed;
  top: 0; bottom: 0;
  left: 56px;
  width: 1px;
  background: var(--pink);
  opacity: 0.35;
  z-index: 1;
  pointer-events: none;
}

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }