.zone-hero{position:relative;width:100%;height:480px;background-image:var(--banner);background-size:cover;background-position:center;display:flex;align-items:center;color:#fff}
.zone-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,.35) 60%,rgba(0,0,0,0) 100%)}
.zone-hero-inner{position:relative;z-index:2;max-width:800px}
.zone-title{font-size:3rem;margin:0 0 10px}
.zone-desc{font-size:1.25rem;margin:0}
.zone-info{padding:60px 0}
.zone-info h2{margin-bottom:20px}

/* Nav */
.zone-nav{padding:20px 0;background:rgba(13,38,61,.9);backdrop-filter:blur(6px);margin-bottom:20px}
.zone-nav.sticky{position:sticky;top:0;left:0;right:0;z-index:900}
.zone-nav-list{display:flex;justify-content:center;gap:32px;list-style:none;margin:0;padding:0}
.zone-nav-list .nav-link{color:#9db0c1;text-decoration:none;font-weight:500;position:relative;padding:6px 4px;transition:color .2s}
.zone-nav-list .nav-link.active,.zone-nav-list .nav-link:hover{color:#fff}
.zone-nav-list .nav-link.active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:#ffc04d;border-radius:1px}

/* Masonry grid */
.exhibits-masonry{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px;margin-top:30px}

/* Glass cards */
.exhibit-card.glass{background:rgba(13,38,61,.65);backdrop-filter:blur(6px)}
/* Generic card glass variant used on zone page (interactive/quiz wrappers) */
.card.glass{
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* Drawer */
.drawer{position:fixed;top:0;bottom:0;right:-420px;width:420px;max-width:90%;background:#0d263d;color:#fff;padding:24px;transition:right .4s ease;z-index:1100;overflow-y:auto}
.drawer.open{right:0}
.drawer-close{position:absolute;top:12px;right:16px;font-size:1.5rem;color:#fff;background:none;border:none;cursor:pointer}
.drawer-img{width:100%;border-radius:6px;margin-bottom:16px}
.drawer-title{margin:0}
.drawer-year{color:#1e90ff;font-size:.9rem}
/* Drawer article content */
.drawer-content{font-size:.95rem;line-height:1.55;margin-top:10px}
.drawer-content p{margin:0 0 .8rem}
.drawer-content h1,.drawer-content h2,.drawer-content h3{margin:1rem 0 .5rem}
.drawer-content a{color:#7ec6ff;text-decoration:underline}
.drawer-content img{max-width:100%;border-radius:6px;margin:.5rem 0}
.drawer-content ul,.drawer-content ol{padding-left:1.2rem;margin:.5rem 0 1rem}

/* Tabs */
.zone-tabs ul{display:flex;gap:20px;list-style:none;padding:40px 0 0;margin:0;border-bottom:2px solid #1e2a38}
.zone-tabs a{padding:8px 12px;color:#9db0c1;text-decoration:none;font-weight:500;transition:color .2s}
.zone-tabs a.active,.zone-tabs a:hover{color:#fff;border-bottom:2px solid #1e90ff}

/* Exhibits grid */
.exhibits-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px;margin-top:30px}
.exhibit-card{position:relative;cursor:pointer;background:#0d263d;border-radius:8px;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,.25);display:flex;flex-direction:column;height:100%}
.exhibit-thumb{width:100%;padding-top:60%;background-size:cover;background-position:center}
.exhibit-body{padding:16px;display:flex;flex-direction:column;gap:6px;color:#fff}
.exhibit-title{font-size:1.1rem;margin:0}
.exhibit-year{font-size:.9rem;color:#1e90ff}
.exhibit-desc{font-size:.9rem;line-height:1.3em;margin:0}
.exhibit-more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:600;color:#fff;background:rgba(30,144,255,.0);border:0;opacity:0;transition:background .3s,opacity .3s}
.exhibit-card:hover{transform:translateY(-4px);box-shadow:0 6px 14px rgba(0,0,0,.4)}
.exhibit-card:hover .exhibit-more{background:rgba(30,144,255,.4);opacity:1}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(40px);transition:all .6s cubic-bezier(.25,.8,.25,1)}
.reveal.visible{opacity:1;transform:none}

/* Modal */
.modal{display:none;position:fixed;inset:0;z-index:1000}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.modal-dialog{position:relative;background:#0d263d;margin:5% auto;padding:24px;border-radius:10px;max-width:600px;color:#fff;display:flex;flex-direction:column;gap:12px}
.modal-close{position:absolute;top:8px;right:12px;font-size:1.5rem;color:#fff;background:none;border:none;cursor:pointer}
.modal-img{width:100%;border-radius:6px}
.modal-title{margin:0;font-size:1.4rem}
.modal-year{color:#1e90ff;font-size:.9rem}

/* Tabs active */
.zone-tabs a.active{color:#fff;border-color:#1e90ff}

/* Morse interactive */
.interactive{padding:60px 0;text-align:center}
.morse-controls{display:flex;justify-content:center;gap:40px;margin-top:20px}
.morse-btn{font-size:1.8rem;width:64px;height:64px;background:#1e2a38;color:#fff;border:2px solid #1e90ff;border-radius:50%;cursor:pointer;transition:background .2s;display:flex;align-items:center;justify-content:center}
.morse-btn:hover{background:#1e90ff}

/* ---------- Timeline ---------- */
@keyframes pulseLine{0%{opacity:.7}50%{opacity:1}100%{opacity:.7}}
@keyframes pulseMarker{0%{transform:translateY(-50%) scale(.95)}50%{transform:translateY(-50%) scale(1.15)}100%{transform:translateY(-50%) scale(.95)}}
.timeline{position:relative;display:flex;gap:40px;overflow-x:auto;scroll-snap-type:x mandatory;padding:100px 0;perspective:1000px;}
.timeline::-webkit-scrollbar{height:8px;background:transparent}
.timeline::-webkit-scrollbar-thumb{background:#1e90ff;border-radius:4px}
.timeline-road{position:absolute;left:0;right:0;top:50%;height:4px;background:linear-gradient(90deg,#1e90ff 0%,#00d4ff 100%);transform:translateY(-50%);animation:pulseLine 4s ease-in-out infinite;pointer-events:none}
.tl-item{position:relative;flex:0 0 300px;scroll-snap-align:center;padding:0}
.tl-item.left{--tilt:-8deg;margin-top:60px}
.tl-item.right{--tilt:8deg;margin-bottom:60px}
.tl-marker{position:absolute;left:50%;top:50%;width:16px;height:16px;border-radius:50%;background:#1e90ff;transform:translate(-50%,-50%);box-shadow:0 0 6px 3px rgba(30,144,255,.5);animation:pulseMarker 3s infinite}
.tl-item.left .tl-marker{left:50%;transform:translate(-50%,-50%)}
.tl-item.right .tl-marker{left:50%;transform:translate(-50%,-50%)}
.tl-card{position:relative;background:rgba(255,255,255,.07);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:24px;color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.3);transition:transform .5s,box-shadow .5s;transform-style:preserve-3d}
.tl-card:hover{transform:translateY(-6px) rotateY(var(--tilt,0deg)) translateZ(30px);box-shadow:0 14px 30px rgba(0,0,0,.55)}
.tl-title{margin:0;font-size:1.25rem}
.tl-year{display:block;font-size:.85rem;color:#1e90ff;margin-bottom:6px}
.tl-desc{font-size:.95rem;line-height:1.4em;margin:6px 0 0}
.tl-more{margin-top:12px; position:relative; z-index:2}
.tl-more.btn{display:inline-flex; align-items:center; gap:8px; box-shadow: var(--shadow-sm)}
.tl-more.btn:hover{box-shadow: var(--shadow-md); transform: translateY(-1px)}
/* Ensure all anchors/buttons inside timeline cards are always on top and clickable */
.tl-card a.btn,
.tl-card .tl-more{
  position: relative;
  z-index: 20; /* гарантируем поверх всех декоративных слоёв */
}
.tl-card::before,
.tl-card::after{pointer-events:none}
.tl-thumb{pointer-events:none}
/* Timeline thumbs */
.tl-thumb{margin:-10px -10px 10px; border-radius:10px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.35)}
.tl-thumb img{width:100%; height:200px; object-fit:cover; display:block}
#year-indicator{position:fixed;top:90px;left:32px;font-size:2rem;font-weight:700;color:#1e90ff;z-index:50;pointer-events:none;opacity:.8}
.tl-marker.active{box-shadow:0 0 20px 6px #00e1ff,0 0 40px 10px rgba(0,225,255,.6);background:#00e1ff}
@media(max-width:768px){
  .timeline{overflow-x:hidden;display:block;padding:60px 0}
  .timeline-road{left:18px;right:auto;width:4px;height:100%;top:0;transform:none;background:linear-gradient(180deg,#1e90ff 0%,#00d4ff 100%)}
  .tl-item{flex:none;width:100%;padding:30px 30px}
  .tl-item.left,.tl-item.right{margin:0;text-align:left}
  .tl-marker{left:0;top:50%;transform:translateY(-50%)}
  .tl-thumb img{height:160px}
}

/* ----- Ruler vertical timeline overrides ----- */
.timeline{position:relative;display:block;overflow:visible;padding:80px 0;}
.timeline-road{position:absolute;top:0;bottom:0;left:50%;width:4px;background:
  repeating-linear-gradient(to bottom, transparent 0 38px, #00d4ff 38px 40px),
  linear-gradient(180deg,#1e90ff 0%,#00d4ff 100%);transform:translateX(-50%);box-shadow:0 0 10px #00d4ff;pointer-events:none}
.timeline-path{position:absolute;inset:0;pointer-events:none;z-index:0;}
.tl-item{position:relative;z-index:1;padding:40px 0;}
.tl-card{width:45%;}
.tl-item.left .tl-card{margin-left:0;margin-right:auto;text-align:right;}
.tl-item.right .tl-card{margin-left:auto;margin-right:0;text-align:left;}

/* ---- Projects section ---- */
.projects{padding:60px 0}
.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-top:16px}
.project-card.glass{background:rgba(255,255,255,.07);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.project-card h3{margin:0 0 6px}
.project-card p{margin:.2rem 0 .6rem}
.project-card ul,.project-card ol{margin:.3rem 0 .6rem;padding-left:1.2rem}
.project-card a.read-more{display:inline-block;margin-right:.6rem}