:root {
    --bg: #f4f3ef;
    --text: #111;
    --muted: #666;
    --line: rgba(17, 17, 17, 0.14);
    --white: #fff;
    --radius: 2px;
    --max-width: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family: Inter, Helvetica Neue, Helvetica, Arial, sans-serif; font-weight:400; line-height:1.4; }

a { color: inherit; text-decoration:none; }

/* HERO */
.hero { position:relative; min-height:100vh; height:100svh; overflow:hidden; display:flex; align-items:flex-end; color:white; background:#111; }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-overlay { position:absolute; inset:0; z-index:1; background: linear-gradient( to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.08) 45%, rgba(0,0,0,0.52) 100% ); }
.hero-content { position:relative; z-index:2; width:100%; padding:40px; }
/* Brand styles moved to brand.css */

/* Navigation */
.app-nav { position:absolute; top:28px; right:40px; display:flex; gap:18px; align-items:center; z-index:3; }
.app-nav a { color:white; font-size:13px; text-transform:uppercase; letter-spacing:0.08em; padding-bottom:4px; border-bottom:1px solid transparent; }
.app-nav a:hover, .app-nav a.active { border-bottom-color: rgba(255,255,255,.8); }

.hero-title { max-width:900px; margin:0; font-size:clamp(48px,8vw,120px); font-weight:400; line-height:0.92; letter-spacing:-0.055em; }
.hero-subtitle { margin-top:28px; font-size:14px; letter-spacing:0.03em; opacity:0.9; }
.scroll-link { display:inline-flex; align-items:center; gap:10px; margin-top:50px; font-size:13px; border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:5px; }

/* FOOTER */
.footer { padding:45px 40px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:30px; font-size:12px; color:var(--muted); }

/* MOBILE */
@media (max-width: 760px) {
    .hero-content { padding:25px; }
    .brand { top:25px; left:25px; }
    .hero-title { font-size: clamp(48px, 15vw, 80px); }
    .exhibitions { padding:80px 20px 90px; }
    .section-header { margin-bottom:55px; display:block; }
    .section-description { margin-top:25px; }
    .exhibition-grid { grid-template-columns:1fr; }
    .exhibition-card { min-height:360px; padding:27px; }
    .card-main { margin-top:55px; }
    .card-name { font-size:38px; }
    .card-bottom { display:block; }
    .tags { max-width:100%; }
    .visit-link { display:inline-block; margin-top:25px; }
    .footer { padding:30px 20px; display:block; }
}
