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

img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ── VARIABLES ─────────────────────────────────────── */
:root {
  --black:      #080808;
  --white:      #f8f7f3;
  --cream:      #f0ede6;
  --card-bg:    #ffffff;
  --card-border:#e0ddd7;
  --photo-bg:   #e8e5de;
  --text-main:  #080808;
  --text-muted: #999;
  --text-body:  #444;
  --green:      #4caf50;
  --gray-dot:   #ccc;
  --rule:       2px solid #080808;
  --font-serif: 'Times New Roman', Times, serif;
  --font-mono:  'Courier New', Courier, monospace;
  --font-impact: Impact, 'Arial Narrow', sans-serif;
}

/* ── BASE ──────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  background: var(--white);
  color: var(--text-main);
  font-family: var(--font-serif);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── ANIMATIONS ────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.85); }
}