:root{--bg:#0b0b0c;--card:#111;--muted:#9aa0a6;--accent:#8b0000}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#050506 0%, #0b0b0c 100%);color:#e8e8e8;font-family:Inter,system-ui,Segoe UI,Arial}
.top{padding:28px 24px;text-align:center}
.top h1{margin:0;font-size:32px;letter-spacing:1px}
.top-menu{display:flex;justify-content:center;gap:18px;align-items:center;margin-bottom:12px}
.top-menu a{color:#f5f7f8;text-decoration:none;padding:10px 14px;border-radius:8px;border:1px solid transparent;font-size:16px;transition:all .18s ease}
.top-menu a:hover{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.06);transform:translateY(-2px);color:#ffffff}
.top-menu .brand{font-weight:700}
.top-menu .lang-switch{font-size:14px;color:#f3f6f7;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.02);font-weight:600;transition:transform .12s ease,background .12s ease}
.top-menu .lang-switch:hover{background:rgba(255,255,255,0.06);transform:translateY(-1px)}
.subtitle{color:var(--muted);margin-top:6px}
.map-link{color:#fff;background:#221212;padding:6px 10px;border-radius:6px;text-decoration:none;border:1px solid #3a2020}
.filters{display:flex;justify-content:center;padding:12px}
.filters form{display:flex;gap:8px}
.filters input{background:#111;border:1px solid #222;color:#ddd;padding:8px;border-radius:6px}
.filters button{background:var(--accent);color:#fff;padding:8px 12px;border:none;border-radius:6px}
.filters .reset{color:var(--muted);align-self:center;margin-left:8px}
.filters select{background:#111;border:1px solid #222;color:#ddd;padding:8px 12px;border-radius:6px}
.map{padding:18px;text-align:center}
.cards-wrap{position:relative;padding:24px}
.cards{display:flex;gap:18px;overflow-x:auto;padding:18px 36px;scroll-snap-type:x mandatory;align-items:stretch}
.cards{ -ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */ }
.cards::-webkit-scrollbar{ height: 0; }
.card{min-width:320px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,0.6);scroll-snap-align:center;display:flex;flex-direction:column}
.portrait{height:220px;background-size:cover;background-position:center}
.meta{padding:12px}
.meta h3{margin:0 0 8px 0}
.info{color:var(--muted);font-size:14px;display:flex;flex-direction:column;gap:4px}
.details{display:inline-block;margin-top:10px;padding:8px 12px;background:transparent;border:1px solid #333;color:#fff;border-radius:8px;text-decoration:none}
.nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.6);width:48px;height:80px;display:flex;align-items:center;justify-content:center;border-radius:8px;color:#fff;font-size:36px;cursor:pointer}
.nav.left{left:8px}
.nav.right{right:8px}
.detail .hero{display:flex;gap:20px;padding:24px;align-items:center}
.portrait-large{width:260px;height:260px;background-size:cover;border-radius:8px}
.details-side h1{margin:0}
.story{padding:24px;color:var(--muted)}
.gallery-grid{display:flex;gap:8px;padding:24px}
.gitem{width:160px;height:120px;background-size:cover;background-position:center;border-radius:6px}
/* small screens */
@media (max-width:720px){.cards{padding:12px}.card{min-width:260px}.portrait{height:180px}.portrait-large{width:160px;height:160px}.detail .hero{flex-direction:column;align-items:flex-start}}