@font-face{ font-family:'Wremena'; src:url('../Wremena-Bold.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap }
@font-face{ font-family:'Wremena'; src:url('../Wremena-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap }

  :root{
    --bg:#07140c;
    --bg-2:#07140c;
    --bg-soft:#0b1f12;
    --bg-rgb:7,20,12;
    --bg-base-rgb:10,13,11;
    --bg-shadow-rgb:12,16,14;
    --bg-deep-rgb:10,16,13;
    --bg-veil-rgb:12,18,15;
    --bg-soft-rgb:11,31,18;
    --surface:#10271a;
    --surface-rgb:16,39,26;
    --text:#e4f2e8;
    --text-rgb:228,242,232;
    --text-strong:rgba(var(--text-rgb),.92);
    --text-soft:rgba(var(--text-rgb),.72);
    --text-bright:rgba(var(--text-rgb),.98);
    --text-faint:rgba(var(--text-rgb),.58);
    --muted:#9fb6a7;
    --muted-rgb:159,182,167;
    --acid:#63b957;
    --acid-2:#3e8644;
    --acid-rgb:99,185,87;
    --acid-strong-rgb:62,134,68;
    --accent-soft:rgba(var(--acid-rgb),.12);
    --accent-softer:rgba(var(--acid-rgb),.08);
    --accent-glow:rgba(var(--acid-rgb),.28);
    --wire:#1a2a22;
    --maxw:1100px;
    --radius:18px;
    --shadow:0 10px 40px rgba(0,0,0,.55);
    --body-shadow:inset 0 0 200px 80px rgba(0,0,0,.55);
    --fade:400ms cubic-bezier(.2,.65,.2,1);
    --ticker-h:46px;
    --focus:2px solid rgba(var(--acid-rgb),.55);
    --hero-image:url('../images/font.webp');
    --hero-overlay:linear-gradient(180deg, rgba(var(--bg-base-rgb),.85), rgba(var(--bg-base-rgb),.2) 40%, rgba(var(--bg-base-rgb),.85));
    --hero-filter:grayscale(100%) contrast(1.05) brightness(.6);
  }

  :root[data-theme="light"]{
    --bg:#f6f8ff;
    --bg-2:#ffffff;
    --bg-soft:#eef2ff;
    --bg-rgb:246,248,255;
    --bg-base-rgb:255,255,255;
    --bg-shadow-rgb:214,223,250;
    --bg-deep-rgb:228,234,255;
    --bg-veil-rgb:220,229,255;
    --bg-soft-rgb:238,242,255;
    --surface:#ffffff;
    --surface-rgb:255,255,255;
    --text:#1c2340;
    --text-rgb:28,35,64;
    --text-strong:rgba(var(--text-rgb),.9);
    --text-soft:rgba(var(--text-rgb),.7);
    --text-bright:rgba(var(--text-rgb),.95);
    --text-faint:rgba(var(--text-rgb),.55);
    --muted:#5d6b90;
    --muted-rgb:93,107,144;
    --acid:#4b63e0;
    --acid-2:#2f4acb;
    --acid-rgb:75,99,224;
    --acid-strong-rgb:47,74,203;
    --accent-soft:rgba(var(--acid-rgb),.12);
    --accent-softer:rgba(var(--acid-rgb),.08);
    --accent-glow:rgba(var(--acid-rgb),.22);
    --wire:#d4dcf7;
    --shadow:0 18px 48px rgba(82,102,182,.18);
    --focus:2px solid rgba(var(--acid-rgb),.45);
    --body-shadow:inset 0 0 90px 30px rgba(120,140,220,.18);
    --hero-image:url('../fon2.webp');
    --hero-overlay:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0));
    --hero-filter:contrast(1.02) brightness(1.08);
  }

  html[data-theme="light"] .paper{ opacity:.08; mix-blend-mode:multiply; }
  html[data-theme="light"] .noise{ opacity:.04; mix-blend-mode:normal; }
  html[data-theme="light"] .background-lattice{ opacity:.24; mix-blend-mode:normal; }
  html[data-theme="light"] .frame-lines{
    border:1px solid rgba(var(--acid-rgb),.16);
    box-shadow:0 0 0 1px rgba(255,255,255,.55) inset, 0 0 28px rgba(var(--acid-rgb),.16);
    mix-blend-mode:normal;
  }
  html[data-theme="light"] .hero .badge{ background:rgba(var(--acid-rgb),.12); border-color:rgba(var(--acid-rgb),.2); color:var(--text-strong); }

  html[data-theme="light"] .hero .wrap :is(.badge, h1, .type, .lead, .down){
    text-shadow:
      -1px -1px 0 #ffffff,
       1px -1px 0 #ffffff,
      -1px  1px 0 #ffffff,
       1px  1px 0 #ffffff;
    -webkit-text-stroke:1px #ffffff;
    paint-order:stroke fill;
  }
  html[data-theme="light"] .hero-highlight{
    background:rgba(255,255,255,.78);
    border-color:rgba(var(--acid-rgb),.18);
    box-shadow:0 12px 28px rgba(120,140,220,.18);
    color:var(--text);
    text-shadow:none;
    -webkit-text-stroke:0;
    paint-order:normal;
  }

  html[data-theme="light"] .intro,
  html[data-theme="light"] .stat,
  html[data-theme="light"] .stele,
  html[data-theme="light"] .tick,
  html[data-theme="light"] .fact,
  html[data-theme="light"] .card,
  html[data-theme="light"] .q,
  html[data-theme="light"] .archive,
  html[data-theme="light"] .archive-item,
  html[data-theme="light"] .chronicles-item,
  html[data-theme="light"] .g-popover,
  html[data-theme="light"] .g-arrow,
  html[data-theme="light"] dialog#heroModal,
  html[data-theme="light"] .toast{
    background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(var(--bg-soft-rgb),.94));
    border-color:rgba(var(--acid-rgb),.18);
    box-shadow:0 18px 44px rgba(92,112,190,.18);
    color:var(--text);
  }
  html[data-theme="light"] .chronicles-item{ border-color:rgba(var(--acid-rgb),.2); }
  html[data-theme="light"] .chronicles-item figcaption{ color:var(--text-soft); }

  html[data-theme="light"] .ticker{
    background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(234,238,255,.96));
    border-top:1px solid rgba(var(--acid-rgb),.2);
    box-shadow:0 -12px 30px rgba(120,140,220,.16);
  }
  html[data-theme="light"] .ticker .label{
    background:rgba(var(--acid-rgb),.12);
    border-color:rgba(var(--acid-rgb),.24);
    color:var(--acid-2);
  }

  html[data-theme="light"] .map__legend-toggle{
    background:rgba(255,255,255,.9);
    color:var(--text-strong);
    box-shadow:0 14px 30px rgba(92,112,190,.18);
  }
  html[data-theme="light"] .map__legend-toggle:not(:disabled):focus-visible{ background:rgba(var(--acid-rgb),.18); box-shadow:0 16px 32px rgba(var(--acid-rgb),.22); }
  html[data-theme="light"] .map__legend-panel{
    background:rgba(255,255,255,.92);
    border-color:rgba(var(--acid-rgb),.16);
    box-shadow:0 20px 40px rgba(92,112,190,.2);
    color:var(--text);
  }

  html[data-theme="light"] .stamp-info{
    background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(var(--bg-soft-rgb),.9));
    box-shadow:0 12px 30px rgba(90,110,190,.16);
    border-color:rgba(var(--acid-rgb),.26);
  }

  html[data-theme="light"] .archive-btn.read{
    background:rgba(var(--acid-rgb),.12);
    border-color:rgba(var(--acid-rgb),.28);
    color:var(--acid);
  }
  html[data-theme="light"] .archive-btn.read:hover,
  html[data-theme="light"] .archive-btn.read:focus-visible{
    background:rgba(var(--acid-rgb),.2);
    box-shadow:0 12px 26px rgba(var(--acid-rgb),.22);
  }

  html[data-theme="light"] .theme-toggle{
    box-shadow:0 10px 26px rgba(92,112,190,.2);
    background:rgba(var(--acid-rgb),.12);
  }
  html[data-theme="light"] .theme-toggle__status{ color:#fff; }

  html[data-theme="light"] footer{ color:var(--text-soft); }
  html[data-theme="light"] dialog#heroModal::backdrop{ background:rgba(24,34,72,.48); }




  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family:'Wremena','Times New Roman',serif;
    background-color:var(--bg);
    color:var(--text);
    text-align:center;
    line-height:1.5;
    letter-spacing:.2px;
    overflow-x:hidden;
    box-shadow: var(--body-shadow);
    transition:background-color .45s ease, color .45s ease, box-shadow .6s ease;
    padding-bottom: var(--ticker-h);
  }

  /* Бумажная фактура */
  .paper { pointer-events:none; position:fixed; inset:0; z-index:-3; opacity:.10; mix-blend-mode:multiply;
    background-image:
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="260" height="260" viewBox="0 0 260 260"><filter id="f"><feTurbulence type="fractalNoise" baseFrequency="0.75" numOctaves="2" seed="4"/></filter><rect width="100%" height="100%" filter="url(%23f)" opacity="0.45"/></svg>');
    background-size: 360px 360px;
  }

  /* Плёночный шум */
  .noise { pointer-events:none; position:fixed; inset:0; z-index:-1; opacity:.06; mix-blend-mode:overlay;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.5"/></svg>');
    animation:grain 8s steps(10) infinite;
  }
  @keyframes grain{ 0%{transform:translate(0,0)} 10%{transform:translate(-5%,-10%)} 20%{transform:translate(-15%,5%)} 30%{transform:translate(7%,-25%)} 40%{transform:translate(-5%,25%)} 50%{transform:translate(-15%,10%)} 60%{transform:translate(15%,0%)} 70%{transform:translate(0%,15%)} 80%{transform:translate(3%,5%)} 90%{transform:translate(-10%,10%)} 100%{transform:translate(0,0)} }

  .background-lattice{
    position:fixed; inset:0; pointer-events:none;
    background-image:
      linear-gradient(90deg, rgba(var(--acid-rgb),.05) 1px, transparent 1px),
      linear-gradient(180deg, rgba(var(--acid-rgb),.05) 1px, transparent 1px);
    background-size:120px 120px;
    mix-blend-mode:overlay;
    opacity:.3;
    z-index:0;
  }
  @media (max-width:760px){
    .background-lattice{ background-size:80px 80px; opacity:.22; }
  }

  .frame-lines{
    position:fixed; inset:3vmax; pointer-events:none;
    border:1px solid rgba(var(--acid-rgb),.16);
    border-radius:calc(var(--radius)*1.6);
    box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 0 38px rgba(var(--acid-rgb),.08);
    mix-blend-mode:screen;
    opacity:.8;
    z-index:1;
  }
  @media (max-width:760px){
    .frame-lines{ inset:5vw; border-radius:calc(var(--radius)*1.1); opacity:.7; }
  }

  .corner-tape{
    position:fixed;
    width:160px;
    height:28px;
    pointer-events:none;
    background:linear-gradient(90deg, rgba(var(--acid-rgb),.4) 0%, rgba(var(--acid-rgb),.12) 100%);
    border:1px solid rgba(var(--acid-rgb),.28);
    border-radius:999px;
    box-shadow:0 14px 28px rgba(0,0,0,.32);
    z-index:3;
    mix-blend-mode:screen;
  }
  .corner-tape::after{
    content:""; position:absolute; inset:4px 8px; border:1px dashed rgba(var(--acid-rgb),.32); border-radius:999px; opacity:.75;
  }
  .corner-tape--tl{ top:60px; left:calc(4vw + 16px); transform:rotate(-6deg); }
  .corner-tape--br{ bottom:60px; right:calc(4vw + 16px); transform:rotate(7deg); }
  @media (max-width:900px){
    .corner-tape{ display:none; }
  }

  a{color:var(--acid); text-decoration:none}
  img{max-width:100%; height:auto; display:block; margin-inline:auto}
  :focus-visible{ outline: var(--focus); outline-offset:3px }

  /* Навигация */
  .nav{
    position:fixed; inset-inline:0; top:0; z-index:40;
    display:flex; align-items:center; justify-content:center; gap:18px; padding:12px 18px;
    background:linear-gradient(180deg, rgba(var(--bg-base-rgb),.86), rgba(var(--bg-base-rgb),.35) 70%, transparent);
    backdrop-filter:saturate(1.1) blur(6px);
    border-bottom:1px solid rgba(var(--acid-rgb),.12);
    transition:background .3s ease, border-color .3s ease;
  }
  body.nav-open{ overflow:hidden; }
  .nav__links{
    display:flex; align-items:center; justify-content:center; gap:14px;
    position:relative;
  }
  .nav__toggle{
    display:none; align-items:center; gap:10px;
    padding:8px 14px; border-radius:999px;
    border:1px solid rgba(var(--acid-rgb),.18);
    background:rgba(var(--acid-rgb),.08); color:var(--text);
    font:600 12px/1 Wremena, serif; letter-spacing:.5px; text-transform:uppercase;
    cursor:pointer; transition:transform .15s ease, background-color .2s ease, border-color .2s ease;
  }
  .nav__toggle:hover, .nav__toggle:focus-visible{ transform:translateY(-1px); outline:none; background:rgba(var(--acid-rgb),.12); border-color:rgba(var(--acid-rgb),.32); }
  .nav__toggle-text{ display:inline-flex; align-items:center; }
  .nav__toggle-icon{
    position:relative; display:inline-block; width:18px; height:2px;
    background:currentColor; border-radius:2px; transition:transform .2s ease, background-color .2s ease;
  }
  .nav__toggle-icon::before, .nav__toggle-icon::after{
    content:""; position:absolute; left:0; width:18px; height:2px; border-radius:2px; background:currentColor; transition:transform .2s ease, opacity .2s ease;
  }
  .nav__toggle-icon::before{ transform:translateY(-6px); }
  .nav__toggle-icon::after{ transform:translateY(6px); }
  .nav.is-open .nav__toggle-icon{ background:transparent; }
  .nav.is-open .nav__toggle-icon::before{ transform:translateY(0) rotate(45deg); }
  .nav.is-open .nav__toggle-icon::after{ transform:translateY(0) rotate(-45deg); }
  .nav a{
    display:inline-flex; align-items:center; justify-content:center;
    padding:8px 12px; border:1px solid rgba(var(--acid-rgb),.18);
    border-radius:999px; font-weight:600; font-family:Wremena, serif; letter-spacing:.5px;
    transition:transform .15s ease, background-color .2s;
  }
  .nav a:hover, .nav a:focus-visible{ transform:translateY(-1px); background:rgba(var(--acid-rgb),.08); outline:none }
  .spacer{height:60px}
  @media (max-width:760px){
    .nav{ justify-content:space-between; padding:10px 14px; gap:12px; }
    .nav__toggle{ display:inline-flex; font-size:11px; padding:8px 12px; }
    .nav__links{
      position:fixed; top:58px; inset-inline:14px; display:flex; flex-direction:column; align-items:stretch; gap:10px;
      padding:16px 14px; border-radius:16px;
      border:1px solid rgba(var(--acid-rgb),.25); background:rgba(var(--bg-rgb),.94);
      box-shadow:0 18px 36px rgba(0,0,0,.45);
      pointer-events:none; opacity:0; transform:translateY(-12px) scale(.96);
      transition:opacity .22s ease, transform .22s ease;
    }
    .nav__links a{ width:100%; padding:10px 14px; font-size:13px; letter-spacing:.4px; }
    .nav.is-open .nav__links{ opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }
    .spacer{ height:56px; }
  }

  /* HERO */
  .hero{
    position:relative; min-height:92vh; display:grid; place-items:center; padding:120px 20px 80px;
    overflow:hidden; isolation:isolate;
    background:
      radial-gradient(60% 80% at 50% 0%, rgba(var(--acid-rgb),.10), transparent 70%),
      linear-gradient(180deg, rgba(var(--bg-shadow-rgb),0) 0%, rgba(var(--bg-shadow-rgb),.35) 55%, rgba(var(--bg-shadow-rgb),1) 100%);
  }
  .hero::before{
    content:""; position:absolute; inset:-10% -10% -5% -10%;
    background:
      var(--hero-overlay),
      var(--hero-image) center/cover no-repeat;
    filter:var(--hero-filter);
    z-index:-2;
  }

  /* Силуэты + параллакс */
  .silhouettes{ position:absolute; inset-inline:0; bottom:-2px; pointer-events:none; z-index:-1; opacity:.55; }
  .silhouettes svg{ position:absolute; bottom:0; fill:var(--bg-soft); stroke:rgba(var(--acid-rgb),.08); stroke-width:.6 }
  .sil-1{ left:-4%; width:min(48vw, 720px) }
  .sil-2{ right:-2%; width:min(44vw, 640px) }

  /* «Туман/газ» */
  .smoke, .smoke::after{
    content:""; position:absolute; inset:-20% -20%;
    background:
      radial-gradient(220px 140px at 10% 30%, rgba(var(--acid-rgb),.12), transparent 60%),
      radial-gradient(260px 160px at 80% 40%, rgba(var(--acid-rgb),.10), transparent 60%),
      radial-gradient(240px 180px at 60% 80%, rgba(var(--acid-rgb),.09), transparent 60%),
      radial-gradient(180px 120px at 40% 10%, rgba(var(--acid-rgb),.08), transparent 60%);
    mix-blend-mode:screen; filter:blur(16px) saturate(1.1);
    animation: drift 26s linear infinite;
    z-index:-1;
  }
  .smoke::after{ animation: drift2 34s linear infinite; opacity:.85; }
  @keyframes drift{ 0%{transform:translate(-2%, -1%) scale(1.05)} 50%{transform:translate(3%, 2%) scale(1.08)} 100%{transform:translate(-2%, -1%) scale(1.05)} }
  @keyframes drift2{ 0%{transform:translate(3%, 2%) scale(1)} 50%{transform:translate(-2%, -3%) scale(1.05)} 100%{transform:translate(3%, 2%) scale(1)} }

  /* Штамп-логотип */
  .stamp-logo{
    position:absolute; top:18px; left:16px; z-index:5;
    font-family:Wremena, serif; text-transform:uppercase;
    font-size: clamp(18px, 2.2vw, 28px); letter-spacing:1px; color:var(--text-strong);
    padding:6px 14px; border:2px solid rgba(var(--acid-rgb),.28); border-radius:7px;
    transform: rotate(-6deg);
    box-shadow:0 0 0 2px rgba(var(--acid-rgb),.12) inset, 0 6px 18px rgba(0,0,0,.35);
    background:linear-gradient(180deg, rgba(var(--acid-rgb),.06), rgba(var(--acid-rgb),.02));
  }
  .stamp-info{ position:absolute; top:110px; right:24px; z-index:5; width:230px; padding:14px 18px; text-align:center; font-family:Wremena, serif; font-size:14px; line-height:1.5; letter-spacing:.4px; border:2px solid rgba(var(--acid-rgb),.25); border-radius:12px; background:linear-gradient(180deg, rgba(var(--bg-veil-rgb),.92), rgba(24,36,28,.78)); box-shadow:0 10px 26px rgba(0,0,0,.38); transform: rotate(8deg); }
  .stamp-info::before{ content:""; position:absolute; inset:6px; border:1px dashed rgba(var(--acid-rgb),.25); border-radius:8px; opacity:.6; }
  .stamp-info span{ position:relative; display:block; }
  .stamp-info .stamp-label{ font-size:12px; text-transform:uppercase; color:rgba(var(--text-rgb),.72); letter-spacing:.6px; }
  .stamp-info .stamp-name{ font-weight:600; color:var(--text-bright); margin:2px 0; }
  .stamp-info .stamp-phone{ margin-top:6px; font-size:13px; color:rgba(var(--text-rgb),.85); letter-spacing:.4px; }
  @media (max-width:760px){ .stamp-info{ position:static; margin:16px auto 0; transform:rotate(0); width:min(320px, 92%); } }

  .stamp-logo::after{
    content:"ВОСТОЧНЫЙ ФРОНТ";
    display:block;
    margin-top:4px;
    font:700 11px Wremena, serif;
    letter-spacing:.4em;
    color:rgba(var(--acid-rgb),.82);
    text-align:center;
  }

  .hero h1{
    font-family:Wremena, serif;
    font-size: clamp(40px, 6vw, 92px);
    line-height:1.02;
    margin:0 0 12px;
    letter-spacing:1px;
    text-transform:uppercase;
    text-shadow: 0 0 12px rgba(var(--acid-rgb),.2), 0 0 2px rgba(var(--acid-rgb),.4);
  }
  /* Машинка */
  .type{
    display:inline-block;
    border-right:2px solid rgba(var(--acid-rgb),.6);
    white-space:pre;
    overflow:hidden;
  }
  .type.done{ border-color:transparent }

  /* Газетное «мерцание» */
  .hero p.lead{ max-width:900px; margin:0 auto 26px; font-size: clamp(16px, 2vw, 20px); color:var(--muted); animation:newsflick 8s ease-in-out infinite both; }
  @keyframes newsflick{ 0%,9%,11%,100% { opacity:1; text-shadow:none } 10%{ opacity:.86; text-shadow:0 0 6px rgba(var(--acid-rgb),.06) } 52%{ opacity:.98 } 70%{ opacity:.94 } }

  .badge{
    display:inline-block; padding:6px 12px; border-radius:999px;
    border:1px solid rgba(var(--acid-rgb),.25); background:rgba(var(--acid-rgb),.06);
    font-weight:600; letter-spacing:.6px; text-transform:uppercase; font-size:12px; color:var(--text-strong);
  }

  /* outline is applied per-theme */

  .down{
    display:inline-block; margin-top:22px; padding:10px 16px; border-radius:999px;
    border:1px solid rgba(var(--acid-rgb),.25); background:rgba(var(--acid-rgb),.08);
    font-weight:700; letter-spacing:.6px; transition:transform .2s;
  }
  .down:hover, .down:focus-visible{ transform:translateY(2px); outline:none }

  .hero-highlight{
    display:inline-block;
    padding:14px 22px;
    border-radius:20px;
    background:linear-gradient(135deg, rgba(var(--bg-veil-rgb),.85), rgba(var(--bg-base-rgb),.55));
    border:1px solid rgba(var(--acid-rgb),.22);
    box-shadow:0 16px 32px rgba(0,0,0,.42);
    color:var(--text-strong);
    backdrop-filter:blur(8px);
    text-shadow:none;
    -webkit-text-stroke:0;
    paint-order:normal;
  }

  /* theme toggle */
  .theme-toggle{
    position:absolute; right:18px; bottom:clamp(108px, 13vh, 180px); z-index:10;
    display:inline-flex; align-items:center; gap:12px;
    padding:11px 18px; border-radius:999px;
    border:1px solid rgba(var(--acid-rgb),.28);
    background:rgba(var(--acid-rgb),.09);
    color:var(--text-strong);
    font:600 13px/1 Wremena, serif;
    letter-spacing:.35px;
    text-transform:none;
    box-shadow:0 8px 26px rgba(0,0,0,.32);
    transition:transform .18s ease, background-color .28s ease, border-color .28s ease, box-shadow .28s ease;
    cursor:pointer;
  }
  .theme-toggle:hover{ transform:translateY(1px); }
  .theme-toggle:focus-visible{ outline:var(--focus); outline-offset:4px; }
  .theme-toggle__decor{
    position:relative;
    width:32px; height:32px;
    border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, rgba(var(--acid-rgb),.34), rgba(var(--acid-rgb),.1));
    box-shadow:0 0 14px rgba(var(--acid-rgb),.4);
    overflow:hidden;
    transition:transform .6s cubic-bezier(.2,.65,.2,1), background .4s ease, box-shadow .4s ease;
  }
  .theme-toggle__icon{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    opacity:0;
    transform:scale(.7) rotate(-8deg);
    transition:opacity .4s ease, transform .5s cubic-bezier(.2,.65,.2,1);
  }
  .theme-toggle__icon::before,
  .theme-toggle__icon::after{
    content:'';
    position:absolute;
    border-radius:50%;
  }
  .theme-toggle__icon--moon::before{
    width:18px; height:18px;
    background:radial-gradient(circle at 32% 32%, rgba(248,244,214,.95) 0%, rgba(214,205,160,.92) 60%, rgba(158,148,108,.82) 100%);
    box-shadow:-7px 0 0 0 rgba(12,20,30,.72);
  }
  .theme-toggle__icon--moon::after{
    width:6px; height:6px;
    background:rgba(255,255,255,.28);
    transform:translate(4px,-4px);
    box-shadow:-5px 5px 0 -1px rgba(255,255,255,.18);
    opacity:.85;
  }
  .theme-toggle__icon--sun::before{
    width:17px; height:17px;
    background:radial-gradient(circle at 32% 32%, rgba(255,247,194,1) 0%, rgba(255,214,114,1) 60%, rgba(244,168,60,1) 100%);
    box-shadow:0 0 16px rgba(255,206,102,.6);
  }
  .theme-toggle__icon--sun::after{
    width:4px; height:4px;
    background:rgba(255,214,110,.65);
    box-shadow:
      0 -13px 0 rgba(255,214,110,.65),
      0 13px 0 rgba(255,214,110,.65),
      13px 0 0 rgba(255,214,110,.65),
      -13px 0 0 rgba(255,214,110,.65),
      9px 9px 0 rgba(255,214,110,.35),
      -9px 9px 0 rgba(255,214,110,.35),
      9px -9px 0 rgba(255,214,110,.35),
      -9px -9px 0 rgba(255,214,110,.35);
  }
  .theme-toggle__text{
    display:flex; flex-direction:column; text-align:left; line-height:1.1;
  }
  .theme-toggle__title{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.32em;
    color:var(--text-faint);
  }
  .theme-toggle__status{
    font-size:14px;
    color:var(--text-strong);
  }
  .theme-toggle[aria-pressed="true"]{
    background:rgba(var(--acid-rgb),.16);
    border-color:rgba(var(--acid-rgb),.45);
    box-shadow:0 12px 32px rgba(var(--acid-rgb),.24);
  }
  .theme-toggle[aria-pressed="true"] .theme-toggle__decor{
    transform:rotate(18deg) scale(1.08);
    background:linear-gradient(135deg, rgba(var(--acid-rgb),.52), rgba(255,214,110,.28));
    box-shadow:0 0 20px rgba(255,214,110,.32);
  }
  .theme-toggle[aria-pressed="false"] .theme-toggle__icon--moon{
    opacity:1;
    transform:scale(1) rotate(-4deg);
  }
  .theme-toggle[aria-pressed="true"] .theme-toggle__icon--sun{
    opacity:1;
    transform:scale(1) rotate(6deg);
  }
  @media (prefers-reduced-motion:reduce){
    .theme-toggle,
    .theme-toggle__decor,
    .theme-toggle__icon{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
  }

  /* РљРЅРѕРїРєР° Р·РІСѓРєР° */
  @media (max-width:640px){
    body{ font-size:15px; }
    .hero{ min-height:calc(100svh - 56px); padding:96px 18px 64px; }
    .hero::before{ transform:scale(1.08); transform-origin:center top; background-position:center 18%; }
    .hero .wrap{ text-align:center; }
    .hero h1{
      display:flex; justify-content:flex-end; text-align:right;
      margin:0 0 12px auto; width:min(320px, 92vw);
      font-size:clamp(34px, 11vw, 54px); letter-spacing:.34px;
    }
    .hero .type{
      display:inline-block; max-width:100%;
      white-space:normal; text-align:right;
      text-wrap:balance; overflow-wrap:break-word; word-break:normal;
      line-height:1.05; padding-right:2px;
    }
    .hero p.lead{ font-size:clamp(15px, 4.6vw, 18px); margin-bottom:20px; }
    .badge{ font-size:11px; padding:5px 12px; letter-spacing:.34em; }
    .down{ margin-top:18px; padding:9px 14px; font-size:13px; }
    .theme-toggle{ right:12px; bottom:82px; padding:9px 14px; gap:10px; }
    .theme-toggle__decor{ width:28px; height:28px; }
    .theme-toggle__title{ font-size:9px; letter-spacing:.28em; }
    .theme-toggle__status{ font-size:13px; }
    .stamp-logo{ top:14px; left:12px; padding:6px 12px; font-size:clamp(18px, 6vw, 24px); transform:rotate(-4deg); }
    .stamp-logo::after{ font-size:10px; letter-spacing:.32em; }
    .stamp-info{ margin-top:18px; }
  }
  @media (max-width:480px){
    .hero{ padding:88px 14px 56px; min-height:calc(100svh - 52px); }
    .hero h1{ font-size:clamp(30px, 12vw, 46px); width:min(260px, 90vw); letter-spacing:.18px; }
    .hero .type{ line-height:1.08; }
    .hero p.lead{ font-size:clamp(14px, 4.8vw, 17px); }
    .badge{ font-size:10px; padding:5px 10px; letter-spacing:.28em; }
    .theme-toggle{ padding:8px 12px; gap:8px; bottom:70px; }
    .theme-toggle__decor{ width:26px; height:26px; }
    .theme-toggle__status{ font-size:12px; }
    .stamp-logo{ top:12px; left:10px; font-size:clamp(16px, 7vw, 22px); }
  }

  /* Секции / контейнер */
  section{ padding:60px 16px; }
  .wrap{ max-width:var(--maxw); margin-inline:auto }

  /* ВСТУПИТЕЛЬНЫЙ БЛОК */
  .intro{
    text-align:left;
    border-radius:var(--radius);
    background:linear-gradient(180deg, rgba(22,36,29,.78), rgba(11,17,14,.96));
    border:1px solid rgba(var(--acid-rgb),.2);
    box-shadow:var(--shadow);
    padding:24px 18px;
  }
  .intro p{ margin:0 0 12px; color:var(--text-soft); }
  .intro strong{ color:var(--text-bright) }

  /* Блоки статистики */
  .stats{ display:grid; gap:20px; }
  .stat{ position:relative; border-radius:var(--radius);
    background:linear-gradient(180deg, rgba(22,36,29,.75), rgba(11,17,14,.9));
    border:1px solid rgba(var(--acid-rgb),.18); box-shadow:var(--shadow); padding:28px 16px; overflow:hidden; }
  .stat h3{ margin:4px 0 14px; font-family:Wremena, serif; letter-spacing:.6px }
  .counter{ font-family:Wremena, serif; font-weight:700; letter-spacing:2px; font-size: clamp(42px, 8vw, 86px);
    text-shadow: 0 0 20px rgba(var(--acid-rgb),.2), 0 0 4px rgba(var(--acid-rgb),.6); color:var(--acid); }
  .sub{ color:var(--muted); font-size:14px }

  .stele{
    background:
      linear-gradient(180deg, rgba(var(--bg-veil-rgb),1), rgba(var(--bg-base-rgb),.95) 55%, rgba(var(--bg-veil-rgb),1)),
      radial-gradient(140px 40px at 50% -10%, rgba(var(--acid-rgb),.25), transparent 60%);
    border:1px solid rgba(var(--acid-rgb),.25);
  }
  .stele::before{ content:""; position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(100px 30px at 20% 10%, rgba(var(--acid-rgb),.12), transparent 60%),
      radial-gradient(160px 50px at 80% 20%, rgba(var(--acid-rgb),.10), transparent 60%),
      radial-gradient(80px 30px at 60% 85%, rgba(var(--acid-rgb),.08), transparent 60%);
    filter:blur(10px); mix-blend-mode:screen; opacity:.9; animation:breath 6s ease-in-out infinite; }
  @keyframes breath{ 0%,100%{opacity:.7} 50%{opacity:1} }

  .candles{ display:flex; gap:10px; justify-content:center; margin-top:12px }
  .candle{ width:5px; height:18px; border-radius:2px; background:linear-gradient(var(--text-bright), var(--acid)); filter:blur(.2px); animation:flick 1.6s ease-in-out infinite; opacity:.8 }
  .candle:nth-child(2){ animation-delay:.3s } .candle:nth-child(3){ animation-delay:.5s }
  @keyframes flick{ 0%,100%{transform:translateY(0) scaleY(1)} 50%{transform:translateY(-2px) scaleY(1.08)} }

  /* Карта — плейсхолдер */
.map{ position:relative; display:flex; flex-direction:column; gap:clamp(16px, 4vw, 24px); align-items:center;
    padding:clamp(20px, 5vw, 36px); border-radius:var(--radius);
    background:linear-gradient(180deg, rgba(var(--bg-veil-rgb),.9), rgba(var(--bg-deep-rgb),.82));
    border:1px solid rgba(var(--acid-rgb),.3); box-shadow:var(--shadow); text-align:left; }
  .map__text{ max-width:70ch; text-align:center; }
  .map__text h3{ margin:0 0 6px; font-family:Wremena, serif; text-transform:uppercase; letter-spacing:.08em; }
  .map__text .sub{ margin:0; color:var(--text-soft); font-size:15px; }
  .map__toolbar{ width:100%; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; align-items:center;
    color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.1em; }
  .map__label{ font-weight:700; color:var(--text-soft); }
  .map__year{ border:1px solid rgba(var(--acid-rgb),.35); background:rgba(var(--acid-rgb),.12); color:var(--text);
    padding:6px 14px; border-radius:999px; font:600 12px/1 Wremena, serif; letter-spacing:.1em; text-transform:uppercase;
    cursor:pointer; transition:background .2s ease, transform .2s ease, border-color .2s ease; }
  .map__year:hover, .map__year:focus-visible{ background:rgba(var(--acid-rgb),.2); transform:translateY(1px); outline:none; }
  .map__year.is-active{ background:rgba(var(--acid-rgb),.4); border-color:rgba(var(--acid-rgb),.65); color:#0b160e; }
  .map__stage{ position:relative; width:100%; max-width:min(100%, 960px); aspect-ratio:960/857; border-radius:16px;
    overflow:hidden; border:1px solid rgba(255,255,255,.08); box-shadow:0 20px 50px rgba(0,0,0,.45); background:#050c08; }
  .map__base{ width:100%; height:100%; object-fit:cover; display:block; user-select:none; pointer-events:none;
    filter:contrast(1.05) saturate(.97); }
  .map__canvas{ position:absolute; inset:0; width:100%; height:100%; }
  .map__tooltip{ position:absolute; display:none; min-width:120px; max-width:260px; padding:10px 12px;
    background:rgba(14,24,18,.9); color:var(--text); border:1px solid rgba(var(--acid-rgb),.4); border-radius:10px;
    box-shadow:0 16px 30px rgba(0,0,0,.5); font-size:14px; line-height:1.4; z-index:5; pointer-events:none; }
  .map__tooltip-title{ margin:0 0 6px; font:700 13px/1.3 Wremena, serif; letter-spacing:.05em; text-transform:uppercase; }
  .map__tooltip-body{ margin:0; color:var(--text-soft); font-size:13px; line-height:1.45; }
  .map__tooltip-body + .map__tooltip-body{ margin-top:6px; }
  .map__hint{ margin:0; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.1em; opacity:.8; text-align:center; }
  .map__hint[data-status="error"]{ color:#f8bdbd; }
  .map__legend{ position:absolute; right:clamp(12px, 4vw, 24px); bottom:clamp(12px, 4vw, 24px); display:flex; flex-direction:column; align-items:flex-end; gap:8px; width:fit-content; max-width:min(280px, 90vw); z-index:6; pointer-events:none; }
  .map__legend > *{ pointer-events:auto; }
  .map__legend[hidden]{ display:none !important; }
  .map__legend-toggle{ border:1px solid rgba(var(--acid-rgb),.35); background:rgba(var(--bg-rgb),.85); color:var(--text); padding:6px 16px; border-radius:999px; font:600 12px/1 Wremena, serif; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; box-shadow:0 12px 26px rgba(0,0,0,.45); transition:background var(--fade), transform var(--fade), box-shadow var(--fade); }
  .map__legend-toggle:disabled{ opacity:.45; cursor:default; box-shadow:none; }
  .map__legend-toggle:not(:disabled):hover,
  .map__legend-toggle:not(:disabled):focus-visible{ background:rgba(var(--acid-rgb),.28); transform:translateY(-2px); outline:var(--focus); box-shadow:0 16px 28px rgba(0,0,0,.4); }
  .map__legend-panel{ display:flex; flex-direction:column; gap:10px; padding:14px 16px; border-radius:14px; border:1px solid rgba(var(--text-rgb),.14); background:rgba(var(--bg-soft-rgb),.94); backdrop-filter:blur(14px) saturate(120%); box-shadow:0 24px 40px rgba(0,0,0,.45); min-width:200px; max-width:min(260px, 82vw); }
  .map__legend-panel[hidden]{ display:none !important; }
  .map__legend-title{ margin:0; font:700 13px/1 Wremena, serif; letter-spacing:.12em; text-transform:uppercase; color:var(--text-bright); }
  .map__legend-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
  .map__legend-item{ display:flex; align-items:flex-start; gap:12px; font-size:12px; color:var(--text-soft); }
  .map__legend-marker{ width:18px; height:18px; border-radius:50%; background:var(--legend-color, rgba(var(--text-rgb),.28)); border:1px solid rgba(var(--text-rgb),.3); display:inline-flex; align-items:center; justify-content:center; color:var(--bg); font-size:12px; line-height:1; position:relative; overflow:hidden; }
  .map__legend-marker--empty{ background:rgba(var(--text-rgb),.16); color:var(--text-soft); }
  .map__legend-marker--has-icon{ color:var(--text); }
  .map__legend-icon{ display:inline-flex; align-items:center; justify-content:center; font-size:11px; line-height:1; pointer-events:none; }
  .map__legend-text{ display:flex; flex-direction:column; gap:4px; text-align:left; }
  .map__legend-label{ font-weight:600; color:var(--text-bright); letter-spacing:.05em; text-transform:uppercase; }
  .map__legend-note{ font-size:11px; color:var(--text-soft); letter-spacing:.02em; }
  @media (max-width:720px){
    .map{ padding:24px 16px; }
    .map__toolbar{ font-size:11px; gap:8px; }
    .map__year{ padding:5px 12px; font-size:11px; }
    .map__stage{ border-radius:12px; }
    .map__legend{ right:16px; bottom:16px; max-width:85vw; }
    .map__legend-toggle{ font-size:10px; padding:5px 12px; letter-spacing:.1em; }
    .map__legend-panel{ padding:12px 14px; min-width:180px; max-width:min(240px, 88vw); }
    .map__legend-item{ font-size:11px; gap:10px; }
    .map__legend-label{ font-size:11px; letter-spacing:.04em; }
  }

  /* ХРОНОЛОГИЯ full-bleed */
  .timeline-bleed{ width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
    padding: 32px 0 8px; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
    border-block:1px solid rgba(255,255,255,.06); }
  .tl-head{ position:relative; display:flex; align-items:center; justify-content:center; padding: 0 clamp(16px, 4vw, 48px); }
  .tl-head h3{ margin:0; font-family:Wremena, serif; text-transform:uppercase; text-align:center; }
  .tl-ctrls{ position:absolute; right: clamp(16px, 4vw, 48px); top:50%; transform:translateY(-50%); display:flex; gap:8px; }
  .tl-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px;
    border:1px solid rgba(var(--acid-rgb),.25); background:rgba(var(--acid-rgb),.08); color:var(--text); font-weight:700;
    box-shadow:var(--shadow); transition:transform .15s ease, background .2s ease; }
  .tl-btn:hover, .tl-btn:focus-visible{ transform:translateY(1px); background:rgba(var(--acid-rgb),.14); outline:none }

  .year-scale{ margin-top:6px; display:flex; gap:40px; justify-content:center; padding: 0 clamp(16px, 4vw, 48px);
    color:var(--muted); font-family:Wremena, serif; text-transform:uppercase; letter-spacing:.06em; font-size:12px; opacity:.85; }
  .year-scale .dot{ width:6px; height:6px; border-radius:50%; background: var(--acid); display:inline-block; margin-right:8px; opacity:.8 }

  .timeline{ position:relative; overflow-x:auto; overflow-y:hidden; padding:14px 0 6px;
    -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scrollbar-width:none; -ms-overflow-style:none; }
  .timeline::-webkit-scrollbar{ height:0; display:none }

  .ticks{ position:relative; display:inline-grid; grid-auto-flow:column; grid-auto-columns:min(78ch, 82vw);
    gap: clamp(16px, 3vw, 28px); align-items:start; padding:28px clamp(16px, 4vw, 48px); }
  .ticks::before{ content:""; position:absolute; left:0; right:0; top:58px; height:2px;
    background:linear-gradient(90deg, rgba(var(--acid-rgb),.45), rgba(var(--acid-rgb),.18)); }

  .tick{ scroll-snap-align:start; position:relative; background:linear-gradient(180deg, rgba(22,36,29,.8), rgba(11,17,14,.95));
    border:1px solid rgba(var(--acid-rgb),.2); border-radius:14px; padding:16px 12px 18px; min-height:160px;
    box-shadow:var(--shadow); transition:transform .25s var(--fade), box-shadow .4s var(--fade), border-color .4s var(--fade);
    display:grid; grid-template-columns:120px 1fr; gap:12px; text-align:left; }
  .tick:hover{ transform:translateY(-3px) }
  .tick .when{ font-family:Wremena, serif; color:var(--acid); letter-spacing:.06em }
  .tick strong{ color:#f0e0b6; text-transform:uppercase; font-family:Wremena, serif }
  .tick p{ margin:6px 0 0; color:var(--text-soft); font-size:14px }
  .tick .media{ grid-column: 1 / -1; margin-top:10px; aspect-ratio:16/9; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.06); }
  /* Важно: без sepia */
  .tick .media img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.03) saturate(.95) }

  /* Перmalink якорь */
  .permalink{ position:absolute; top:8px; right:10px; font:700 14px Wremena, serif; opacity:.0;
    padding:2px 6px; border-radius:6px; border:1px solid rgba(var(--acid-rgb),.22); background:rgba(var(--acid-rgb),.06); transition:opacity .2s; }
  .tick:hover .permalink, .tick:focus-within .permalink{ opacity:.9 }
  .tick.highlight{ border-color:rgba(var(--acid-rgb),.55); box-shadow:0 0 0 2px rgba(var(--acid-rgb),.25), 0 0 24px rgba(var(--acid-rgb),.18); }

  /* Глоссарий — триггеры (автогенерируемые) */
  .term{ border:none; background:none; color:var(--text-bright); padding:0; cursor:help; text-decoration:underline dotted; text-underline-offset:3px; font-weight:600 }

  /* Popover */
  .g-popover{ position:fixed; z-index:1000; max-width:min(88vw, 420px); background:linear-gradient(180deg, rgba(22,36,29,.95), rgba(11,17,14,.98));
    border:1px solid rgba(var(--acid-rgb),.35); border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.6); padding:12px 14px; }
  .g-popover h5{ margin:0 0 6px; font:700 14px Wremena, serif; letter-spacing:.04em; color:var(--text-soft); }
  .g-popover p{ margin:0; color:var(--text-soft); font-size:14px; }
  .g-popover .close{ position:absolute; top:6px; right:8px; border:1px solid rgba(var(--acid-rgb),.3); background:rgba(var(--acid-rgb),.08);
    color:var(--text); border-radius:8px; padding:2px 8px; font:700 12px Wremena, serif; cursor:pointer }
  .g-arrow{ position:fixed; width:12px; height:12px; background:linear-gradient(180deg, rgba(22,36,29,.95), rgba(11,17,14,.98));
    border-left:1px solid rgba(var(--acid-rgb),.35); border-top:1px solid rgba(var(--acid-rgb),.35); transform:rotate(45deg); z-index:1000 }

  /* Исторические справки */
  .facts{ display:grid; gap:16px; }
  .fact{ background:linear-gradient(180deg, rgba(22,36,29,.75), rgba(11,17,14,.95));
    border:1px solid rgba(var(--acid-rgb),.18); border-radius:var(--radius); padding:18px 14px; }
  .fact h4{ margin:6px 0 8px; font-family:Wremena, serif }
  .fact p{ margin:0; color:var(--text-soft) }

  /* Осовец */
  .osovets{
    position:relative;
    overflow:hidden;
    padding:42px 24px;
    background:linear-gradient(180deg, rgba(var(--bg-veil-rgb),1), rgba(var(--bg-veil-rgb),.85)),
      radial-gradient(120% 80% at 50% -20%, rgba(var(--acid-rgb),.12), transparent 60%);
    border:1px solid rgba(var(--acid-rgb),.25);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
  }
  .osovets h3{ margin:6px 0 18px; font-family:Wremena, serif; font-size:clamp(32px, 4.8vw, 48px); line-height:1.1; }
  .osovets p{ font-size:clamp(18px, 3.2vw, 30px); line-height:1.6; margin:0 0 16px; }
  .osovets .sub{ font-weight:600; }
  .osovets strong{ font-weight:700; }
  .osovets__link a{ display:inline-block; font-size:clamp(18px, 2.6vw, 28px); font-weight:700; text-decoration:none; border-bottom:1px solid rgba(var(--acid-rgb),.5); padding-bottom:4px; }
  .osovets__link a:hover{ border-bottom-color:rgba(var(--acid-rgb),.8); }
  .gasline{ height:8px; margin:14px auto 0; max-width:420px; border-radius:999px;
    background:linear-gradient(90deg, rgba(var(--acid-rgb),.1), rgba(var(--acid-rgb),.6), rgba(var(--acid-rgb),.1)); filter:blur(.2px); animation:flow 6s linear infinite; }
  @keyframes flow{ 0%{background-position:0 0} 100%{background-position:420px 0} }

  /* Галерея героев */
  .heroes{ display:grid; gap:16px; }
  .card{ background:linear-gradient(180deg, rgba(22,36,29,.78), rgba(11,17,14,.98));
    border:1px solid rgba(var(--acid-rgb),.18); border-radius:16px; padding:14px; box-shadow:var(--shadow); cursor:pointer }
  .avatar{ width:116px; height:116px; border-radius:50%; object-fit:cover; border:2px solid rgba(var(--acid-rgb),.25); filter:grayscale(100%) contrast(1.05); }
  .hero-name{ font-weight:700; font-family:Wremena, serif; margin:10px 0 6px }
  .hero-meta{ color:var(--muted); font-size:13px; margin:0 0 6px }
  .hero-desc{ margin:0; color:var(--text-soft) }

  /* Модал досье героя */
  dialog#heroModal{ width:min(92vw, 760px); border:none; border-radius:14px; padding:0;
    background:linear-gradient(180deg, rgba(18,28,23,.98), rgba(var(--bg-deep-rgb),.98)); color:var(--text); }
  dialog#heroModal::backdrop{ background:rgba(0,0,0,.55) }
  .modal-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid rgba(var(--acid-rgb),.2) }
  .modal-title{ font:700 20px Wremena, serif; letter-spacing:.04em }
  .modal-close{ border:1px solid rgba(var(--acid-rgb),.3); background:rgba(var(--acid-rgb),.08); color:var(--text); border-radius:8px; padding:6px 10px; font:700 13px Wremena, serif; cursor:pointer }
  .modal-body{ display:grid; grid-template-columns:160px 1fr; gap:16px; padding:16px }
  .modal-body img{ width:160px; height:160px; object-fit:cover; border-radius:10px; border:2px solid rgba(var(--acid-rgb),.25); filter:grayscale(100%) contrast(1.05) }
  .meta{ color:var(--muted); margin:4px 0 10px; font-size:14px }
  .bio{ margin:0; color:var(--text-soft); line-height:1.6 }

  /* Аккордеон */
  .acc{ max-width:var(--maxw); margin-inline:auto; text-align:center }
  .q{ margin:10px 0; border:1px solid rgba(var(--acid-rgb),.2); border-radius:12px; overflow:hidden; background:linear-gradient(180deg, rgba(22,36,29,.7), rgba(11,17,14,.95)); }
  .q summary{ list-style:none; cursor:pointer; padding:14px 16px; font-weight:700; font-family:Wremena, serif; }
  .q summary::-webkit-details-marker{ display:none }
  .q .a{ padding:0 16px 14px; color:var(--text-soft) }

  /* Появления при скролле */
html.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--fade), transform .6s var(--fade) }
html.js .reveal.show{ opacity:1; transform:none }

  /* Телеграфная лента */
  .ticker{ position:fixed; left:0; right:0; bottom:0; height:var(--ticker-h);
    background:linear-gradient(180deg, rgba(22,36,29,.86), rgba(11,17,14,.96));
    border-top:1px solid rgba(var(--acid-rgb),.22); box-shadow:0 -10px 30px rgba(0,0,0,.45);
    display:flex; align-items:center; gap:12px; padding:0 10px; z-index:60; overflow:hidden; }
  .ticker .label{ font:700 13px Wremena, serif; color:var(--text-strong); letter-spacing:.6px; padding:6px 10px; border:1px solid rgba(var(--acid-rgb),.3); border-radius:6px; background:rgba(var(--acid-rgb),.08); }
  .ticker .viewport{ flex:1; overflow:hidden }
  .ticker .track{ display:inline-flex; gap:36px; white-space:nowrap; will-change:transform; animation:tape 48s linear infinite; }
  .ticker:hover .track{ animation-play-state:paused }
  @keyframes tape{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
  .ticker .item{ color:var(--muted); font-size:14px }
  .ticker .dot{ width:6px; height:6px; border-radius:50%; background:var(--acid); display:inline-block; margin:0 10px; opacity:.9 }

  /* Toast */
  .toast{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--ticker-h) + 18px); z-index:80;
    background:linear-gradient(180deg, rgba(22,36,29,.96), rgba(11,17,14,.98));
    color:var(--text-soft); border:1px solid rgba(var(--acid-rgb),.35); border-radius:10px; padding:10px 14px;
    box-shadow:0 10px 30px rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .25s var(--fade), transform .25s var(--fade); }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(-6px) }

  /* Адаптив */
  @media (min-width:740px){
    .stats{ grid-template-columns: 1fr; }
    .facts{ grid-template-columns:1fr 1fr; }
    .heroes{ grid-template-columns:repeat(3, 1fr); }
  }
  @media (min-width:1040px){
    .facts{ grid-template-columns:repeat(3,1fr); }
  }

  /* Меньше анимаций */
  @media (prefers-reduced-motion:reduce){
    .smoke, .smoke::after, .stele::before, .gasline, .hero p.lead, .ticker .track{ animation:none }
html.js .reveal{ transition:none }
    .type{ border-right:none }
    .permalink{ transition:none }
  }

  footer{ padding:40px 12px; color:var(--muted) }

/* Particles: falling ash/sparks */
.particles{ position:fixed; inset:0; pointer-events:none; z-index:2; overflow:hidden; }
.particles .particle{
  position:absolute;
  top:-12vh;
  width:var(--size,.3rem);
  height:var(--size,.3rem);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,244,214,.92) 0%, rgba(255,244,214,.52) 45%, rgba(255,244,214,.14) 70%, rgba(255,244,214,0) 85%);
  box-shadow:0 0 16px rgba(255,214,140,.48);
  opacity:var(--alpha,.62);
  filter:blur(.35px);
  mix-blend-mode:screen;
  animation:fall var(--dur,14s) linear infinite;
  will-change:transform,opacity;
}
.particles .particle.spark{
  background:radial-gradient(circle, rgba(255,214,170,.95) 0%, rgba(255,214,170,.55) 40%, rgba(255,214,170,0) 80%);
  box-shadow:0 0 22px rgba(255,188,120,.68);
  opacity:var(--alpha,.75);
}
@keyframes fall{
  0%{ transform:translate3d(var(--drift, 0vw), -16vh, 0); opacity:0; }
  12%{ opacity:var(--alpha,.62); }
  100%{ transform:translate3d(calc(var(--drift, 0vw) * .6), 114vh, 0); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .particles{ display:none } }

/* Fog / mist overlay on hero */
.hero .fog{ position:absolute; inset:-16% -12%; z-index:0; pointer-events:none;
  background:
    radial-gradient(45% 30% at 50% 20%, rgba(255,255,255,.24), rgba(255,255,255,0) 70%),
    radial-gradient(48% 32% at 62% 62%, rgba(var(--text-rgb),.15), rgba(var(--text-rgb),0) 74%),
    radial-gradient(32% 26% at 36% 78%, rgba(var(--text-rgb),.12), rgba(var(--text-rgb),0) 70%),
    linear-gradient(180deg, rgba(34,48,38,.28), rgba(var(--bg-veil-rgb),0));
  filter: blur(26px) saturate(1.18);
  mix-blend-mode:screen;
  opacity:.88;
  animation: fogMove 52s ease-in-out infinite;
}@keyframes fogMove{ 0%{ transform: translate3d(-1%, -1%, 0) scale(1.02) } 50%{ transform: translate3d(2%, 1.5%, 0) scale(1.05) } 100%{ transform: translate3d(-1%, -1%, 0) scale(1.02) } }

/* Intro readability improvements */
.intro{ padding: 32px 24px; }
.intro p{ margin: 0 0 16px; text-indent: 1.6em; font-size: clamp(16px, 1.9vw, 19px); line-height: 1.8; color: var(--text-strong); }
.intro strong{ color:var(--text-bright); background: linear-gradient(transparent 62%, rgba(var(--acid-rgb),.18) 62%); padding: 0 2px; }
@media (min-width: 900px){ .intro{ padding: 36px 28px } }

.conclusion-block{
  display:grid;
  gap:clamp(18px, 3vw, 28px);
}

.conclusion-heading{
  margin:0;
  font-family:Wremena, serif;
  font-size:clamp(26px, 4vw, 36px);
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--text-bright);
}

.conclusion-text p:last-child{ margin-bottom:0; }

.conclusion-images{
  position:relative;
  margin:clamp(18px, 3vw, 28px) auto 0;
  width:100%;
  max-width:50%;
}

.conclusion-img{
  display:block;
  width:100%;
  height:auto;
  transition:opacity .4s ease, filter .6s ease, transform .6s ease;
  filter:none;
  transform:scale(1);
}

.conclusion-img.is-hover{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}

.conclusion-images:hover .conclusion-img.is-hover,
.conclusion-images:focus-within .conclusion-img.is-hover{ opacity:1; }

.conclusion-images:hover .conclusion-img.is-default,
.conclusion-images:focus-within .conclusion-img.is-default{ opacity:0; filter:blur(6px); transform:scale(1.05); }



.chronicles{
  background:linear-gradient(180deg, rgba(22,36,29,.82), rgba(11,17,14,.96));
  border:1px solid rgba(var(--acid-rgb),.24);
  border-radius:var(--radius);
  box-shadow:0 20px 48px rgba(0,0,0,.42);
  padding:clamp(26px, 5vw, 40px);
}

.chronicles-head{
  text-align:center;
  max-width:680px;
  margin:0 auto clamp(22px, 4vw, 32px);
}

.chronicles-head h3{
  margin:0 0 12px;
  font-family:Wremena, serif;
  font-size:clamp(28px, 4.6vw, 40px);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-bright);
}

.chronicles-head .sub{
  margin:0;
  font-size:15px;
  color:var(--text-soft);
}

.chronicles-grid{
  display:grid;
  gap:clamp(18px, 3vw, 24px);
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}

.chronicles-item{
  border:1px solid rgba(var(--acid-rgb),.28);
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(18,28,23,.94), rgba(var(--bg-deep-rgb),.94));
  box-shadow:0 16px 36px rgba(0,0,0,.38);
  transition:transform .28s ease, box-shadow .3s ease, border-color .3s ease;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-height:100%;
}

.chronicles-item img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  filter:saturate(.92) contrast(1.05);
}

.chronicles-item figcaption{
  margin:0;
  padding:16px 18px 20px;
  font:500 15px/1.6 Wremena, serif;
  color:var(--text-soft);
  letter-spacing:.02em;
  text-align:center;
}

.chronicles-item:hover,
.chronicles-item:focus-within{
  transform:translateY(-4px);
  box-shadow:0 20px 42px rgba(0,0,0,.46);
  border-color:rgba(var(--acid-rgb),.42);
}

.chronicles-item:focus-within{ outline:none; }
.chronicles-item a{ color:inherit; text-decoration:none; }

@media (min-width:1040px){
  .chronicles-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (max-width:640px){
  .chronicles-grid{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .chronicles-item{
    width:auto;
    background:none;
    border:none;
    box-shadow:none;
    border-radius:0;
    padding:0;
  }
  .chronicles-item img{
    width:min(80vw, 320px);
  }
  .chronicles-item figcaption{
    width:min(80vw, 320px);
    margin-inline:auto;
    padding:12px 0 0;
  }
}
html.no-js .reveal{ opacity:1 !important; transform:none !important }





  /* РђСЂС…РёРІ */
  /* РђСЂС…РёРІ */
  .archive{ max-width:var(--maxw); margin-inline:auto; text-align:center; background:linear-gradient(180deg, rgba(22,36,29,.78), rgba(11,17,14,.96)); border:1px solid rgba(var(--acid-rgb),.2); border-radius:var(--radius); box-shadow:var(--shadow); padding:32px 26px; }
  .archive-head{ max-width:720px; margin:0 auto 28px; }
  .archive-head h2{ margin:0 0 12px; font-size:clamp(30px, 4.4vw, 44px); text-transform:uppercase; letter-spacing:.06em; }
  .archive-head p{ margin:0; color:var(--text-soft); line-height:1.7; }
  .archive-grid{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); justify-items:center; }
  .archive-item{ width:100%; max-width:340px; display:flex; flex-direction:column; align-items:center; gap:16px; border:1px solid rgba(var(--acid-rgb),.24); border-radius:18px; background:linear-gradient(180deg, rgba(18,28,23,.92), rgba(var(--bg-deep-rgb),.98)); padding:20px 18px 24px; box-shadow:0 16px 36px rgba(0,0,0,.38); position:relative; overflow:hidden; }
  .archive-item::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:18px; border:1px solid rgba(var(--acid-rgb),.18); opacity:.4; }
  .archive-item .cover{ width:100%; max-width:200px; aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(var(--acid-rgb),.24), rgba(var(--acid-rgb),.05)); border-radius:12px; overflow:hidden; border:1px solid rgba(var(--acid-rgb),.28); }
  .archive-item .cover img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:screen; opacity:.82; }
  .archive-body h3{ margin:0 0 10px; font-size:clamp(20px, 3.2vw, 26px); letter-spacing:.04em; }
  .archive-body p{ margin:0 0 16px; color:var(--text-soft); line-height:1.6; }
  .archive-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:18px; }
  .archive-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; text-decoration:none; padding:10px 20px; border-radius:999px; border:1px solid rgba(var(--acid-rgb),.35); background:rgba(var(--acid-rgb),.12); color:var(--acid); transition:transform .18s ease, background-color .2s ease, box-shadow .2s ease; }
  .archive-btn:hover, .archive-btn:focus-visible{ transform:translateY(-2px); background:rgba(var(--acid-rgb),.22); box-shadow:0 8px 18px rgba(var(--acid-rgb),.18); outline:none; }
  .archive-btn.read{ color:var(--text); background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.24); }
  .archive-btn.read:hover, .archive-btn.read:focus-visible{ background:rgba(255,255,255,.16); box-shadow:0 10px 22px rgba(12,16,14,.4); }

  .stamp-logo .stamp-sub{ display:block; font:700 12px Wremena, serif; letter-spacing:.35em; margin-top:4px; }







  @media (max-width:520px){
    .map__legend{ right:12px; bottom:12px; align-items:stretch; max-width:94vw; }
    .map__legend-panel{ width:100%; max-width:100%; }
  }

/* ------------ Валера, интерактивный помощник ------------ */
.valera-assistant{
  position:fixed;
  right:16px;
  bottom:12px;
  width:min(360px, calc(100% - 32px));
  z-index:1300;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  pointer-events:none;
}

.valera-assistant > *{
  pointer-events:auto;
}

.valera-launcher{
  align-self:flex-end;
  width:64px;
  height:64px;
  border-radius:50%;
  border:none;
  background:rgba(0,0,0,.75);
  box-shadow:0 8px 20px rgba(0,0,0,.4);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  position:relative;
  transition:transform .2s ease, box-shadow .2s ease;
  animation:valeraBlink 2.8s infinite;
}

.valera-launcher img{
  width:40px;
  height:40px;
  object-fit:contain;
  pointer-events:none;
}

.valera-launcher__pulse{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.4);
  animation:valeraPulse 2.8s infinite;
}

.valera-launcher:focus-visible{
  outline:3px solid var(--accent, #c24b4d);
  outline-offset:3px;
}

.valera-launcher:hover{
  transform:translateY(-1px) scale(1.02);
  box-shadow:0 12px 24px rgba(0,0,0,.45);
}

.valera-panel{
  width:100%;
  order:-1;
  margin-bottom:8px;
  background:rgba(14,14,14,.94);
  color:#fff;
  border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  padding:24px;
  border:1px solid rgba(255,255,255,.1);
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease;
  backdrop-filter:blur(12px);
  display:flex;
  flex-direction:column;
  gap:20px;
  max-height:min(90vh, 640px);
  min-height:400px;
}

.valera-assistant.is-open .valera-panel{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

.valera-assistant.is-open .valera-launcher{
  animation:none;
}

.valera-header{
  display:flex;
  gap:12px;
  align-items:center;
}

.valera-header__text{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.valera-name{
  margin:0;
  font-weight:700;
  font-size:1rem;
  letter-spacing:.02em;
}

.valera-status{
  margin:0;
  font-size:.82rem;
  opacity:.7;
}

.valera-avatar{
  width:56px;
  height:56px;
  border-radius:14px;
  object-fit:cover;
  border:2px solid rgba(255,255,255,.2);
  background:#1f1f1f;
}

.valera-close{
  margin-left:auto;
  border:none;
  background:transparent;
  color:inherit;
  font-size:1.4rem;
  cursor:pointer;
}

.valera-chat{
  flex:1;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-right:4px;
  min-height:260px;
}

.valera-message{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.valera-message__bubble{
  padding:10px 14px;
  border-radius:16px;
  font-size:.98rem;
  line-height:1.4;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
}

.valera-message--valera{
  align-items:flex-start;
}

.valera-message--valera .valera-message__bubble{
  border-top-left-radius:4px;
  background:rgba(255,255,255,.08);
}

.valera-message--user{
  align-items:flex-end;
}

.valera-message--user .valera-message__bubble{
  border-top-right-radius:4px;
  background:linear-gradient(135deg, #c24b4d, #dd7f3d);
  border:none;
}

.valera-message--options .valera-message__bubble{
  width:100%;
  padding:0;
  background:transparent;
  border:none;
}

.valera-message--options .valera-options{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:8px 0 0;
}

.valera-options{
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
}

.valera-option{
  border-radius:12px;
  padding:10px 12px;
  text-align:left;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.03);
  color:inherit;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .15s ease;
}

.valera-option:hover{
  transform:translateX(2px);
  border-color:rgba(255,255,255,.4);
}

.valera-option:disabled{
  opacity:.6;
  cursor:not-allowed;
}

.valera-option--correct{
  border-color:#65db8d;
  background:rgba(101,219,141,.12);
}

.valera-option--wrong{
  border-color:#ff6b6b;
  background:rgba(255,107,107,.12);
}

.valera-visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}

@keyframes valeraPulse{
  0%{ transform:scale(1); opacity:.9; }
  50%{ transform:scale(1.25); opacity:0; }
  100%{ transform:scale(1.6); opacity:0; }
}

@keyframes valeraBlink{
  0%,80%,100%{ box-shadow:0 8px 20px rgba(0,0,0,.35); }
  40%{ box-shadow:0 10px 24px rgba(0,0,0,.55); }
}

@media (max-width:640px){
  .valera-assistant{
    right:12px;
    bottom:8px;
    width:calc(100% - 24px);
  }

  .valera-panel{
    max-height:80vh;
    min-height:340px;
    margin-bottom:6px;
  }
}