/* ===========================================
   BASE — variables, reset, utilities, buttons, pagination
   =========================================== */

:root {
    --bg:           #080808;
    --surface:      #111111;
    --surface-2:    #1a1a1a;
    --text:         #f0f0f0;
    --text-dim:     #777777;
    --accent:       #3b82f6;
    --accent-glow:  rgba(59, 130, 246, 0.15);
    --white:        #ffffff;
    --font-serif:   'Playfair Display', Georgia, serif;
    --font-sans:    'Inter', system-ui, sans-serif;
    --ease:         cubic-bezier(0.16, 1, 0.3, 1);
    --transition:   0.6s var(--ease);
    --container:    1280px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; width: 100%; height: auto; object-fit: cover; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.5rem, 5vw, 4rem); }
.overline { display: block; font-size: 0.7rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.section-title { font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; font-style: italic; line-height: 1.2; margin-bottom: 2.5rem; }

.btn { display: inline-block; padding: 0.85rem 2rem; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; border: 1px solid transparent; cursor: pointer; transition: all 0.3s ease; }
.btn--light { border-color: var(--white); color: var(--white); }
.btn--light:hover { background: var(--white); color: var(--bg); }
.btn--dark { background: var(--accent); border-color: var(--accent); color: var(--white); }
.btn--dark:hover { background: transparent; color: var(--accent); }
.btn--outline { border-color: var(--text-dim); color: var(--text); }
.btn--outline:hover { border-color: var(--white); }

.pagination .nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; font-size: 0.8rem; border: 1px solid var(--surface-2); color: var(--text-dim); transition: all 0.3s; }
.pagination .page-numbers.current, .pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent); }