/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; position: relative; }

.texture-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  background-image: url('/static/assets/img/black_paper_texture.webp');
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.05;
  mix-blend-mode: color-burn;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
ul { list-style: none; }

/* === LAYOUT === */
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-4); }
@media (min-width: 768px)  { .container { padding: 0 var(--space-8); } }
@media (min-width: 1024px) { .container { padding: 0 var(--space-12); } }

/* === TYPOGRAPHY === */
.display-2xl { font-family: var(--font-display); font-size: clamp(36px,5.5vw,56px); line-height: 1.05; font-weight: 700; }
.display-xl  { font-family: var(--font-display); font-size: clamp(30px,4vw,48px);   line-height: 1.1;  font-weight: 700; }
.display-lg  { font-family: var(--font-display); font-size: clamp(26px,3.5vw,40px); line-height: 1.15; font-weight: 700; }
.display-md  { font-family: var(--font-display); font-size: clamp(22px,3vw,32px);   line-height: 1.2;  font-weight: 600; }
.display-sm  { font-family: var(--font-display); font-size: clamp(18px,2.5vw,24px); line-height: 1.3;  font-weight: 600; }
.body-lg  { font-size: 18px; line-height: 1.65; }
.body-sm  { font-size: 14px; line-height: 1.55; }
.caption  { font-size: 12px; line-height: 1.4; }