/* Atlas — restored simple header + large contextual photos */
:root{
  --bg:#f7f8fc;
  --paper:#ffffff;
  --ink:#0b1324;
  --muted:#5b667f;
  --line:#e8ecf4;
  --accent:#7c3aed;
  --accent2:#06b6d4;
  --radius:18px;
  --shadow:0 18px 50px rgba(15,21,40,.08);
}
.dark{
  --bg:#0f1218;
  --paper:#141b2a;
  --ink:#e8edf6;
  --muted:#9aa6c1;
  --line:#22304a;
  --accent:#8b5cf6;
  --accent2:#22d3ee;
  --shadow:0 16px 44px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:18px/1.9 "Noto Serif Armenian","Noto Serif","DejaVu Serif",Georgia,serif
}

/* Header (restored) */
.topbar{
  position:sticky;top:0;z-index:40;
  backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(to bottom,rgba(247,248,252,.9),rgba(247,248,252,.7));
  border-bottom:1px solid var(--line)
}
.dark .topbar{background:linear-gradient(to bottom,rgba(20,27,42,.88),rgba(20,27,42,.66))}
.brand{display:flex;align-items:center;gap:12px;padding:10px 16px}
.logo{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--accent2))}
.title h1{margin:0;font-size:20px}
.title p{margin:0;color:var(--muted);font-size:12px}
.tools{position:absolute;right:12px;top:8px;display:flex;gap:8px}
.ghost{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px 10px;cursor:pointer}
.progress{height:3px}
#pbar{display:block;height:3px;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2))}

/* Layout */
#main{max-width:1100px;margin:26px auto;padding:0 16px 80px}
.doc{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.sec{padding:26px}
.sec + .sec{border-top:1px solid var(--line)}
.doc h2{margin:0 0 .6em;font-size:30px}
.doc h3{margin:0 0 .4em;font-size:24px;border-left:4px solid var(--accent);padding-left:10px}
.doc p{text-align:justify;margin:.9em 0}

/* Two-column sections with visible photo */
.twocol{
  display:grid;gap:20px;
  grid-template-columns: 1.3fr .9fr;
  align-items:start;
}
@media(max-width:900px){
  .twocol{grid-template-columns:1fr}
}

/* Photo block */
.photo{margin:0}
.photo img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line);display:block}
.photo figcaption{color:var(--muted);font-size:13px;margin-top:6px}

/* TOC */
.toc{
  position:fixed;left:14px;top:86px;bottom:14px;width:250px;display:none;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px;overflow:auto;box-shadow:var(--shadow)
}
.toc a{display:block;color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:10px}
.toc a.active,.toc a:hover{background:rgba(124,58,237,.12);color:var(--ink)}
@media(min-width:1200px){
  .toc{display:block}
  #main{margin-left:280px}
}

/* Footer */
.foot{padding:26px;text-align:center;color:var(--muted)}

/* Print */
@media print{
  .topbar,.toc,.foot{display:none!important}
  body{background:#fff;color:#000}
  #main{margin:0;padding:0}
  .doc{border:none;box-shadow:none}
}