/* Общие стили сайта семейного архива */
:root{
  --ink:#2b2a33;
  --muted:#6d6a7a;
  --line:#c9c4d4;
  --accent:#8a2f3b;
  --union:#f6f1e4;
  --union-b:#c2a35c;
  --bg:#faf9f6;
  --card:#ffffff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:Georgia,'Times New Roman',serif;
  background:var(--bg); color:var(--ink);
  margin:0; min-height:100vh;
}

/* ---- верхняя навигация (вкладки) ---- */
.tabs{
  background:var(--card);
  border-bottom:2px solid var(--line);
  position:sticky; top:0; z-index:50;
  box-shadow:0 1px 4px rgba(40,35,60,.06);
}
.tabs-inner{
  max-width:940px; margin:0 auto; padding:0 16px;
  display:flex; align-items:flex-end; gap:4px; flex-wrap:wrap;
}
.site-title{
  font-weight:bold; font-size:15px; color:var(--accent);
  padding:14px 14px 12px 0; margin-right:auto; letter-spacing:.02em;
}
.tabs a{
  display:inline-block; padding:12px 18px 10px;
  color:var(--muted); text-decoration:none; font-size:15px;
  border:2px solid transparent; border-bottom:none;
  border-radius:10px 10px 0 0; margin-bottom:-2px;
}
.tabs a:hover{color:var(--ink); background:var(--bg)}
.tabs a.active{
  color:var(--ink); background:var(--bg);
  border-color:var(--line);
  border-bottom:2px solid var(--bg);
  font-weight:bold;
}

/* ---- общая колонка контента ---- */
.page{max-width:940px; margin:0 auto; padding:28px 16px 64px}
.page h1{font-size:25px; margin:6px 0 4px}
.page .sub{color:var(--muted); font-size:14px; margin-bottom:22px; line-height:1.5}

/* ---- расшифровка ---- */
.doc h2{
  font-size:19px; margin:38px 0 14px; padding-bottom:6px;
  border-bottom:2px solid var(--line);
}
.doc p{line-height:1.65; font-size:16px; margin:0 0 14px}
.doc .pagemark{
  display:inline-block; background:var(--union); border:1px solid var(--union-b);
  color:#7a5c1a; border-radius:14px; padding:2px 14px;
  font-size:12.5px; margin:26px 0 14px; font-family:Arial,sans-serif;
}
.doc .intro{
  background:var(--card); border:1.5px solid var(--line); border-left:5px solid var(--union-b);
  border-radius:8px; padding:14px 18px; margin-bottom:10px;
  font-size:14px; color:var(--muted); line-height:1.6;
}
.doc .sig{font-style:italic; text-align:right; font-size:17px; margin-top:26px}
.download{
  display:inline-block; margin-top:8px; font-size:14px;
  color:var(--accent); text-decoration:none; border-bottom:1px dotted var(--accent);
}

/* ---- галерея сканов ---- */
.grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:18px; margin-top:10px;
}
.grid figure{
  margin:0; background:var(--card); border:1.5px solid var(--line);
  border-radius:10px; padding:10px; text-align:center;
  box-shadow:0 1px 3px rgba(40,35,60,.07);
}
.grid img{
  width:100%; height:auto; display:block; border-radius:6px;
  cursor:zoom-in; border:1px solid var(--line);
}
.grid figcaption{font-size:13px; color:var(--muted); margin-top:8px; line-height:1.4}

/* ---- лайтбокс ---- */
.lightbox{
  position:fixed; inset:0; background:rgba(20,18,26,.92);
  display:none; z-index:100; align-items:center; justify-content:center;
}
.lightbox.open{display:flex}
.lightbox img{
  max-width:92vw; max-height:88vh; box-shadow:0 6px 40px rgba(0,0,0,.6);
  background:#fff;
}
.lightbox .lb-caption{
  position:absolute; bottom:14px; left:0; right:0; text-align:center;
  color:#e8e5ef; font-size:14px; font-family:Arial,sans-serif;
}
.lightbox button{
  position:absolute; background:none; border:none; color:#e8e5ef;
  font-size:44px; cursor:pointer; padding:18px; line-height:1;
  font-family:Georgia,serif; opacity:.8;
}
.lightbox button:hover{opacity:1}
.lb-close{top:6px; right:12px}
.lb-prev{left:6px; top:50%; transform:translateY(-50%)}
.lb-next{right:6px; top:50%; transform:translateY(-50%)}

/* ---- контактная плашка и подвал ---- */
.contact{
  margin:40px 0 0; padding:14px 18px; background:var(--union);
  border:1.5px solid var(--union-b); border-radius:8px;
  font-size:14.5px; text-align:center;
}
.contact a{color:#8a5a10; font-weight:bold}
footer.site{
  max-width:940px; margin:28px auto 0; padding:0 16px 40px;
  font-size:12px; color:var(--muted); line-height:1.6;
}

@media (max-width:520px){
  .site-title{width:100%; padding-bottom:0}
  .tabs a{padding:10px 12px 8px; font-size:14px}
}