@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:#1b130d;
    --bg-2:#22170e;
    --bg-soft:#2a1b10;
    --bg-rgb:27,19,13;
    --bg-base-rgb:22,14,10;
    --bg-shadow-rgb:18,12,9;
    --bg-deep-rgb:15,10,7;
    --bg-veil-rgb:28,20,14;
    --bg-soft-rgb:42,27,16;
    --surface:#2f1d11;
    --surface-rgb:47,29,17;
    --text:#f9ecd7;
    --text-rgb:249,236,215;
    --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:#c7b199;
    --muted-rgb:199,177,153;
    --acid:#c47a38;
    --acid-2:#a45f24;
    --acid-rgb:196,122,56;
    --acid-strong-rgb:164,95,36;
    --accent-soft:rgba(var(--acid-rgb),.16);
    --accent-softer:rgba(var(--acid-rgb),.08);
    --accent-glow:rgba(var(--acid-rgb),.32);
    --wire:#3a2416;
    --maxw:1100px;
    --radius:18px;
    --shadow:0 10px 40px rgba(0,0,0,.65);
    --body-shadow:inset 0 0 200px 80px rgba(10,6,4,.65);
    --fade:400ms cubic-bezier(.2,.65,.2,1);
    --ticker-h:46px;
    --focus:2px solid rgba(var(--acid-rgb),.55);
    --hero-image:url('../fon.jpg');
    --hero-overlay:linear-gradient(180deg, rgba(14,9,6,.92), rgba(14,9,6,.25) 40%, rgba(10,6,4,.92));
    --hero-filter:sepia(1) contrast(.92) brightness(.68);
  }

  *{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;
    position:relative;
    white-space:pre;
    letter-spacing:.28em;
    opacity:0;
    transform:translate3d(0, 28px, 0) scale(.9);
    filter:blur(12px);
    overflow:hidden;
    transition:
      opacity 1.6s ease,
      transform 2.4s cubic-bezier(.16,.78,.21,1),
      letter-spacing 2.4s ease,
      filter 2.2s ease;
  }
  .type::before{
    content:'';
    position:absolute;
    inset:-14px;
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);
    opacity:0;
    transform:translateY(24px);
    transition:opacity 1.8s ease 1.1s, transform 2s cubic-bezier(.16,.78,.21,1) 1.1s;
    pointer-events:none;
  }
  .type::after{
    content:'';
    position:absolute;
    inset:-20px;
    background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 45%, transparent 70%);
    opacity:0;
    transform:skewX(-18deg) translateX(-140%);
    transition:transform 1.8s ease 1.4s, opacity .6s ease 1.4s;
    pointer-events:none;
  }
  .type.is-revealed{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    letter-spacing:.08em;
    filter:blur(0);
  }
  .type.is-revealed::before{
    opacity:.4;
    transform:translateY(0);
  }
  .type.is-revealed::after{
    opacity:.35;
    transform:skewX(-18deg) translateX(160%);
  }

  /* Газетное «мерцание» */
  .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;
  }

  /* РљРЅРѕРїРєР° Р·РІСѓРєР° */
  @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; }
    .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; }
    .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{
      transition:none;
      opacity:1;
      transform:none;
      filter:none;
      letter-spacing:.08em;
    }
    .type::before,
    .type::after{
      opacity:0;
      transition:none;
    }
    .permalink{ transition:none }
  }

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

/* Atmosphere: rising smoke */
.particles{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:6;
  overflow:hidden;
}
.particles::after{
  content:'';
  position:absolute;
  inset:-30% -20% 10% -20%;
  background:
    radial-gradient(70% 40% at 50% 90%, rgba(12,8,6,.7), transparent 70%),
    radial-gradient(60% 30% at 40% 85%, rgba(12,7,4,.55), transparent 70%);
  filter:blur(70px);
  opacity:.55;
}
.particles .smoke{
  position:absolute;
  bottom:-18vh;
  left:0;
  width:var(--smoke-width, 240px);
  height:var(--smoke-height, 420px);
  transform:translateX(-50%) scale(var(--scale-start,1));
  background:
    radial-gradient(ellipse at 50% 80%, rgba(255,221,188,.3) 0%, rgba(255,221,188,.08) 50%, transparent 80%),
    radial-gradient(ellipse at 35% 40%, rgba(255,255,255,.12) 0%, transparent 60%),
    radial-gradient(ellipse at 65% 32%, rgba(255,198,150,.1) 0%, transparent 70%);
  filter:blur(36px) saturate(.85);
  opacity:0;
  mix-blend-mode:screen;
  animation:smokeRise var(--duration,20s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
  box-shadow:0 0 140px rgba(255,214,160,.35);
}
.particles .smoke::before,
.particles .smoke::after{
  content:'';
  position:absolute;
  inset:8% 12%;
  background:radial-gradient(circle at 50% 50%, rgba(255,236,210,.16), transparent 65%);
  filter:blur(40px);
  opacity:.8;
  animation:smokePulse 6s ease-in-out infinite;
}
.particles .smoke::after{
  inset:18% 24%;
  opacity:.55;
  filter:blur(60px);
  animation-duration:8s;
  animation-delay:1s;
}
@keyframes smokePulse{
  0%,100%{ opacity:.65; }
  50%{ opacity:.25; }
}
@keyframes smokeRise{
  0%{
    opacity:0;
    transform:translate(-50%, 0) scale(var(--scale-start,1));
  }
  20%{
    opacity:.4;
  }
  50%{
    opacity:.65;
    transform:translate(calc(-50% + var(--drift-mid, 2vw)), -24vh) scale(var(--scale-mid,1.2));
  }
  85%{
    opacity:.3;
    transform:translate(calc(-50% + var(--drift-end, 5vw)), -44vh) scale(var(--scale-end,1.4));
  }
  100%{
    opacity:0;
    transform:translate(calc(-50% + var(--drift-end, 5vw)), -54vh) scale(var(--scale-end,1.45));
  }
}
@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%; }
  }