/* ============ Высота: новые части — переходы, свуши, Архив, Чертёжный стол, страницы, системы ============ */
:root {
  --paper: #ebe4d2; --paper-hi: #f6f2e8; --pink: #1d1b18; --pink-2: #5c5649; --pline: rgba(29, 27, 24, .22);
  --red: #b3261e; --blue: #22408f; --bar: #11100f;
  --bp: #f2f0e9; --bp-ink: #1b2a4a; --bp-ink2: #5b6a86; --bp-line: rgba(27, 42, 74, .22); --pencil: #cf3f27;
  --f-arc-h: 'Oswald', 'Arial Narrow', sans-serif; --f-arc: 'PT Serif', Georgia, serif; --f-type: 'PT Mono', 'Courier New', monospace;
  --f-bp-h: 'Jura', 'Bahnschrift', sans-serif; --f-bp-m: 'IBM Plex Mono', Consolas, monospace; --f-pen: 'Caveat', 'Segoe Print', cursive;
}
.curtain { display: none; }
.ft-v a { font: 500 12px/1 var(--f-mono); letter-spacing: .08em; }
.ft-v a i { display: none; }
.ft-v a.on { color: var(--hud); }

/* ---------- переходы ---------- */
.tr { position: fixed; inset: 0; z-index: 100; pointer-events: none; visibility: hidden; }
.tr.on { visibility: visible; }
/* облако */
.tr-cloud { transform: translate3d(0, 101%, 0); will-change: transform; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(232, 240, 248, 0) 0%, #e8eef5 14%, #cfdae6 50%, #e8eef5 86%, rgba(232, 240, 248, 0) 100%); }
.tr-cloud.go-in { transition: transform .42s cubic-bezier(.6, 0, .4, 1); transform: translate3d(0, -7%, 0); }
.tr-cloud.go-out { transition: transform .5s cubic-bezier(.6, 0, .4, 1); transform: translate3d(0, -110%, 0); }
/* захват цели */
.tr-lock { background: rgba(4, 7, 6, .9); opacity: 0; transition: opacity .2s; display: grid; place-items: center; }
.tr-lock.go-in { opacity: 1; }
.tr-lock.go-out { opacity: 0; transition: opacity .35s .05s; }
.lk { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; border: 2px solid var(--hud); transition: transform .38s cubic-bezier(.2, .8, .2, 1); }
.lk1 { border-right: 0; border-bottom: 0; transform: translate(-46vw, -44vh); }
.lk2 { border-left: 0; border-bottom: 0; transform: translate(calc(46vw - 46px), -44vh); }
.lk3 { border-right: 0; border-top: 0; transform: translate(-46vw, calc(44vh - 46px)); }
.lk4 { border-left: 0; border-top: 0; transform: translate(calc(46vw - 46px), calc(44vh - 46px)); }
.tr-lock.go-in .lk1 { transform: translate(-140px, -80px); } .tr-lock.go-in .lk2 { transform: translate(94px, -80px); }
.tr-lock.go-in .lk3 { transform: translate(-140px, 34px); } .tr-lock.go-in .lk4 { transform: translate(94px, 34px); }
.lk-c { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; border: 2px solid var(--hud); }
.lk-t { position: relative; margin-top: 150px; font: 600 clamp(14px, 2vw, 18px)/1 var(--f-mono); letter-spacing: .3em; color: var(--hud); text-transform: uppercase; }
/* новый лист */
.tr-sheet { transform: translate3d(0, 104%, 0); will-change: transform; display: grid; place-items: center; color: var(--bp-ink);
  background-color: var(--bp); background-image: linear-gradient(rgba(27, 42, 74, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(27, 42, 74, .11) 1px, transparent 1px); background-size: 50px 50px; }
.tr-sheet::before { content: ''; position: absolute; inset: 16px 16px 16px 34px; border: 2px solid var(--bp-ink); }
.tr-sheet > div { display: grid; gap: 10px; justify-items: center; text-align: center; }
.sh-n { font: 500 13px/1 var(--f-bp-m); letter-spacing: .3em; text-transform: uppercase; color: var(--pencil); }
.sh-t { font: 700 clamp(40px, 7vw, 96px)/1 var(--f-bp-h); text-transform: uppercase; }
.tr-sheet.go-in { transition: transform .45s cubic-bezier(.65, 0, .35, 1); transform: none; }
.tr-sheet.go-out { transition: transform .5s cubic-bezier(.65, 0, .35, 1); transform: translate3d(0, -104%, 0); }
/* развёртка радара */
.tr-scan { background: #030806; opacity: 0; transition: opacity .25s; display: grid; place-items: center; overflow: hidden; }
.tr-scan.go-in { opacity: 1; } .tr-scan.go-out { opacity: 0; transition-duration: .4s; }
.scan-r { position: absolute; left: 50%; top: 50%; width: 180vmax; height: 180vmax; margin: -90vmax; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(212, 255, 92, .4), rgba(212, 255, 92, 0) 16%, transparent 100%); }
.tr-scan.go-in .scan-r { animation: spin .9s linear infinite; }
.scan-t { position: relative; font: 700 clamp(28px, 5vw, 60px)/1 var(--f-disp); text-transform: uppercase; color: var(--hud); }
@keyframes spin { to { transform: rotate(1turn); } }
/* пролёт */
.tr-fly { opacity: 0; transition: opacity .3s; background: linear-gradient(180deg, #0a1a33, #2f5f8e 70%, #d9733a); overflow: hidden; }
.tr-fly.go-in, .tr-fly.top { opacity: 1; }
.tr-fly.top { background: none; }
.tr-fly.go-out { opacity: 0; transition: opacity .45s .1s; }
.fly-w { position: absolute; left: 0; top: 62%; width: 130vw; height: 60px; transform: rotate(-18deg); transform-origin: 0 50%; }
.fly-jet { position: absolute; left: 0; top: 0; width: clamp(90px, 10vw, 150px); height: auto; fill: #f4ffd8; transform: translate3d(-20vw, 0, 0); filter: drop-shadow(0 0 10px rgba(212, 255, 92, .6)); }
.fly-trail { position: absolute; left: 0; top: 28px; height: 3px; width: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .8));
  transform: scaleX(0); transform-origin: 0 50%; border-radius: 3px; }
.tr-fly.go-in .fly-jet, .tr-fly.top .fly-jet { transition: transform .75s cubic-bezier(.4, 0, .3, 1); transform: translate3d(118vw, 0, 0); }
.tr-fly.go-in .fly-trail, .tr-fly.top .fly-trail { transition: transform .75s cubic-bezier(.4, 0, .3, 1); transform: scaleX(.92); }

/* ---------- свуши ---------- */
.sw { position: absolute; left: 0; width: 100%; height: 220px; pointer-events: none; overflow: visible; z-index: 0; opacity: 1; transform: none; }
.sw path { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s cubic-bezier(.3, .6, .2, 1); vector-effect: non-scaling-stroke; }
.sw .sw2 { stroke: rgba(212, 255, 92, .35); stroke-width: 1; transition-delay: .25s; }
.sw.in path { stroke-dashoffset: 0; }
.sw-ph { top: 90px; }
.ph { position: relative; }
.ph > :not(.sw) { position: relative; z-index: 1; }
.sw-m1 { bottom: -40px; }
.sw-ach { bottom: 10%; z-index: 2; }

/* ---------- главная: арсенал и сенсоры ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-right: calc(var(--gut) + 110px); }
.duo-c { position: relative; display: grid; gap: 14px; align-content: start; padding: 28px; min-height: 360px; overflow: hidden; transition: transform .5s var(--ease); }
.duo-c:hover { transform: translateY(-6px); }
.duo-w { background-color: var(--bp); color: var(--bp-ink); background-image: linear-gradient(rgba(27, 42, 74, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(27, 42, 74, .1) 1px, transparent 1px); background-size: 40px 40px; }
.duo-w::before { content: ''; position: absolute; inset: 8px; border: 1.5px solid var(--bp-ink); pointer-events: none; }
.duo-s { background: radial-gradient(circle at 70% 40%, rgba(212, 255, 92, .08), transparent 60%), #050b07; border: 1px solid rgba(212, 255, 92, .35); }
.duo-k { font: 500 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pencil); }
.duo-s .duo-k { color: var(--hud); }
.duo-d { width: 90%; height: auto; margin: 6px 0; }
.duo-n { font: 700 clamp(26px, 3vw, 44px)/1 var(--f-disp); text-transform: uppercase; letter-spacing: -.02em; }
.duo-w .duo-n { font-family: var(--f-bp-h); letter-spacing: 0; }
.duo-p { margin: 0; max-width: 44ch; }
.duo-w .duo-p { color: #2c3a58; } .duo-s .duo-p { color: var(--dim); }
.mini-ppi { width: 46%; max-width: 200px; justify-self: end; margin-top: -10px; }
.mini-ppi circle, .mini-ppi path { fill: none; stroke: rgba(212, 255, 92, .35); stroke-width: 1; }
.mini-ppi .ppi-sw { transform-origin: 100px 100px; animation: spin 4s linear infinite; }
.mini-ppi .ppi-sw path { fill: rgba(212, 255, 92, .22); stroke: none; }
.mini-ppi .ppi-b { fill: var(--hud); stroke: none; animation: ping 4s linear infinite; }
.mini-ppi .b2 { animation-delay: 2.4s; }
@keyframes ping { 0%, 6% { opacity: 1; } 60%, 100% { opacity: .1; } }

/* звуковой барьер */
.mach1 { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; padding: 56px calc(var(--gut) + 110px) 90px var(--gut); }
.m1-p img { width: 100%; max-height: 92vh; object-fit: cover; }
.m1-t p:not(.big) { color: rgba(238, 242, 246, .84); max-width: 46ch; font-size: 17px; }

/* ---------- список самолётов ---------- */
.ac-card { color: inherit; }
.ac-card .ac-v { position: relative; }
.ac-card .ac-v img { transition: transform 1s var(--ease); }
.ac-card:hover .ac-v img { transform: scale(1.04); }
.ac-open { position: absolute; right: 12px; bottom: 12px; font: 600 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; background: var(--hud); color: #0b0d07; padding: 9px 11px; transform: translateY(6px); opacity: 0; transition: opacity .25s, transform .25s; }
.ac-card:hover .ac-open, .ac-card:focus-visible .ac-open { opacity: 1; transform: none; }
.ac-card:hover .ac-n { color: var(--hud); }
.ac-f { margin: 0; font: italic 500 20px/1.3 var(--f-it); color: #fff; }
.ac-alt small { display: block; margin-top: 4px; }
.ac-alt .rec { color: #0b0d07; background: var(--hud); padding: 3px 4px; font-weight: 600; }
@media (hover: none) { .ac-open { opacity: 1; transform: none; } }

/* ---------- страница самолёта: hero ---------- */
.crumb { font: 500 11.5px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin: 0 0 18px; }
.crumb a { color: var(--hud); }
.ach { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 110px calc(var(--gut) + 110px) 48px var(--gut); overflow: hidden; }
.ach-img { position: absolute; inset: 0; z-index: -1; }
.ach-img img { width: 100%; height: 100%; object-fit: cover; }
.ach-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 8, 12, .5) 0%, rgba(6, 8, 12, .1) 35%, rgba(6, 8, 12, .85) 88%, rgba(6, 8, 12, .96)); }
.ach-hud { position: absolute; inset: 86px calc(var(--gut) + 96px) 40px var(--gut); pointer-events: none; }
.ach-hud .br { inset: 0; opacity: .7; }
.ret { position: absolute; left: 50%; top: 42%; width: 120px; margin-left: -60px; fill: none; stroke: var(--hud); stroke-width: 1.2; opacity: .7; animation: ret 5s ease-in-out infinite; }
@keyframes ret { 50% { transform: translate(18px, -10px); } }
.ach-t { position: relative; z-index: 3; }
.ach-n { font: 800 clamp(64px, 13vw, 220px)/.82 var(--f-disp); letter-spacing: -.05em; text-transform: uppercase; margin: 16px 0 8px; }
.ach-r { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 30px 0 0; border-top: 1px solid rgba(212, 255, 92, .4); }
.ach-r div { padding: 12px 12px 0 0; }
.ach-r dt { font: 500 10px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.ach-r dd { margin: 0; font: 600 clamp(13px, 1.3vw, 17px)/1.2 var(--f-mono); color: #f4ffd8; }

/* ---------- АРХИВ (история создания) ---------- */
.arc { padding: 50px calc(var(--gut) + 110px) 30px var(--gut); }
.folder { position: relative; transform: rotate(-.5deg); max-width: 1240px; }
.folder-tab { display: inline-block; background: #c9a96a; color: #3a2a12; font: 500 12px/1 var(--f-arc-h); letter-spacing: .16em; text-transform: uppercase; padding: 10px 22px 8px; clip-path: polygon(0 100%, 10px 0, calc(100% - 10px) 0, 100% 100%); }
.folder-in { position: relative; background: var(--paper); color: var(--pink); padding: clamp(22px, 4vw, 54px); font: 400 17px/1.65 var(--f-arc);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 12px 12px 0 -2px #c9a96a; }
.folder-in::after { content: ''; position: absolute; inset: 0; background: url(../assets/img/noise.png); opacity: .5; pointer-events: none; }
.arc-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; position: relative; }
.cover-no { font: 400 13px/1 var(--f-type); letter-spacing: .1em; color: var(--pink-2); margin: 0; margin-right: auto; }
.stamp { display: inline-block; font: 700 14px/1 var(--f-arc-h); letter-spacing: .16em; text-transform: uppercase; color: var(--red); border: 3px solid currentColor; padding: 6px 10px 5px; transform: rotate(-6deg); opacity: .86; white-space: nowrap; box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px currentColor; }
.st-old { color: var(--blue); opacity: .5; position: relative; }
.st-old::after { content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: 3px; background: var(--red); transform: rotate(-8deg); }
.st-new { font-size: clamp(18px, 2.2vw, 26px); transform: rotate(-9deg); }
.folder.in .st-new { animation: thump .5s var(--ease) .3s both; }
@keyframes thump { from { opacity: 0; transform: rotate(-12deg) scale(1.9); } to { opacity: .86; transform: rotate(-9deg) scale(1); } }
.arc-h { font: 700 clamp(40px, 6vw, 88px)/.9 var(--f-arc-h); text-transform: uppercase; margin: 26px 0 0; color: var(--red); }
.arc-h .arc-nick { display: block; font: italic 400 clamp(17px, 1.6vw, 22px)/1.3 var(--f-arc); text-transform: none; color: var(--pink); margin-top: 10px; }
.folder .form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 22px; margin: 24px 0; }
.fld { padding: 7px 0 6px; border-bottom: 1px dashed var(--pline); min-width: 0; }
.fld dt { font: 400 10.5px/1.2 var(--f-type); letter-spacing: .14em; text-transform: uppercase; color: var(--pink-2); }
.fld dd { margin: 3px 0 0; font: 400 15px/1.35 var(--f-type); }
.fld dd a { border-bottom: 1px solid var(--pline); } .fld dd a:hover { color: var(--red); }
.arc-b { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px; align-items: start; position: relative; z-index: 1; }
.arc-t { margin: 0 0 16px; }
.memo-hint { font: italic 400 13px/1.3 var(--f-arc); color: var(--pink-2); margin: 10px 0 0; }
.arc-des { font: 400 13px/1.4 var(--f-type); margin: 18px 0 0; text-transform: uppercase; letter-spacing: .06em; position: relative; z-index: 1; }
.arc-des a { color: var(--red); border-bottom: 1px solid currentColor; }
.print { position: relative; margin: 0; background: var(--paper-hi); padding: 10px 10px 34px; transform: rotate(var(--r, 0deg)); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7); }
.print img { width: 100%; filter: grayscale(.85) sepia(.18) contrast(1.05); transition: filter .5s; }
.print:hover img { filter: none; }
.print figcaption { position: absolute; left: 12px; right: 12px; bottom: 9px; font: 400 11.5px/1.2 var(--f-type); color: var(--pink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip { position: absolute; z-index: 3; top: -16px; left: 22px; width: 16px; height: 46px; border: 2.5px solid #9a9a96; border-radius: 8px; transform: rotate(4deg); }
.clip::after { content: ''; position: absolute; left: 2px; right: 2px; top: 8px; bottom: 4px; border: 2.5px solid #9a9a96; border-top: 0; border-radius: 0 0 6px 6px; }
.folder mark.k { color: transparent; background: var(--bar); padding: 0 .12em; box-shadow: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color .3s, color .3s; cursor: help; }
.folder mark.k:hover, .folder mark.k.open { background: transparent; color: var(--red); box-shadow: inset 0 -2px 0 rgba(179, 38, 30, .5); }

/* ---------- ЧЕРТЁЖНЫЙ СТОЛ ---------- */
.bp { padding: 40px calc(var(--gut) + 110px) 30px var(--gut); scroll-margin-top: 80px; }
.bp-in { position: relative; max-width: 1300px; color: var(--bp-ink); font: 400 16px/1.6 'Golos Text', sans-serif; padding: clamp(24px, 4vw, 56px) clamp(20px, 4vw, 56px) clamp(24px, 4vw, 48px) clamp(30px, 5vw, 70px);
  background-color: var(--bp); background-image: linear-gradient(rgba(27, 42, 74, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(27, 42, 74, .1) 1px, transparent 1px),
  linear-gradient(rgba(27, 42, 74, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(27, 42, 74, .05) 1px, transparent 1px);
  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8); }
.bp-in::before { content: ''; position: absolute; inset: 10px 10px 10px 24px; border: 2px solid var(--bp-ink); pointer-events: none; }
.bp-k { font: 500 12px/1.3 var(--f-bp-m); letter-spacing: .12em; text-transform: uppercase; color: var(--bp-ink2); margin: 0 0 24px; position: relative; }
.bp-hd { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.bp-hd .bp-k { margin: 0; }
.bp .filt { margin: 0; }
.bp .filt button { color: var(--bp-ink); border-color: var(--bp-ink); font-family: var(--f-bp-h); font-weight: 600; }
.bp .filt button[aria-pressed="true"] { background: var(--bp-ink); color: var(--bp); }
.bp-g { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 46px; align-items: start; }
.bp-h { font: 700 clamp(22px, 2.4vw, 32px)/1 var(--f-bp-h); text-transform: uppercase; margin: 10px 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--bp-ink); }
.bp-t p { margin: 0 0 14px; }
.bp mark.k { color: inherit; font-weight: 600; box-shadow: none; text-decoration: underline wavy var(--pencil); text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-skip-ink: none; }
.pen { display: inline-block; font: 600 clamp(22px, 2vw, 28px)/1.05 var(--f-pen); color: var(--pencil); transform: rotate(-2deg); margin-top: 6px; }
.ball { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--bp-ink); background: var(--bp); color: var(--bp-ink); font: 700 12px/1 var(--f-bp-h); flex: none; }
.kv { width: 100%; border-collapse: collapse; border: 1.5px solid var(--bp-ink); background: rgba(243, 241, 234, .9); margin-bottom: 14px; }
.kv th { font: 500 11px/1.2 var(--f-bp-m); letter-spacing: .08em; text-transform: uppercase; text-align: left; color: var(--bp-ink2); padding: 9px 12px; width: 44%; border-bottom: 1px solid var(--bp-line); border-right: 1px solid var(--bp-ink); }
.kv td { font: 500 14.5px/1.3 var(--f-bp-m); padding: 9px 12px; border-bottom: 1px solid var(--bp-line); }
.dw { position: relative; margin: 0; padding: 0 54px 54px 0; }
.dw-i { width: 100%; height: auto; }
.dm { position: absolute; font: 500 12.5px/1 var(--f-bp-m); color: var(--pencil); display: grid; place-items: center; }
.dm i { position: absolute; background: var(--pencil); transition: transform 1.1s var(--ease) .2s; }
.dm i::before, .dm i::after { content: ''; position: absolute; border: 5px solid transparent; }
.dm-l { left: 0; right: 54px; bottom: 14px; height: 24px; }
.dm-l i { left: 0; right: 0; top: 50%; height: 1px; transform: scaleX(0); }
.dm-l i::before { left: -1px; top: -5px; border-right: 10px solid var(--pencil); border-left: 0; }
.dm-l i::after { right: -1px; top: -5px; border-left: 10px solid var(--pencil); border-right: 0; }
.dm-l > span { position: relative; background: var(--bp); padding: 0 8px; }
.dm-s { top: 0; bottom: 54px; right: 14px; width: 24px; }
.dm-s i { top: 0; bottom: 0; left: 50%; width: 1px; transform: scaleY(0); }
.dm-s i::before { top: -1px; left: -5px; border-bottom: 10px solid var(--pencil); border-top: 0; }
.dm-s i::after { bottom: -1px; left: -5px; border-top: 10px solid var(--pencil); border-bottom: 0; }
.dm-s > span { position: relative; background: var(--bp); padding: 8px 0; writing-mode: vertical-rl; transform: rotate(180deg); }
.dm-l::before, .dm-l::after { content: ''; position: absolute; top: -40px; bottom: 6px; width: 1px; background: var(--bp-line); }
.dm-l::before { left: 0; } .dm-l::after { right: 0; }
.dm-s::before, .dm-s::after { content: ''; position: absolute; left: -40px; right: 6px; height: 1px; background: var(--bp-line); }
.dm-s::before { top: 0; } .dm-s::after { bottom: 0; }
.rv.in .dm i, .in .dm i { transform: none; }
.dw figcaption, .cut figcaption { font: 400 11px/1.3 var(--f-bp-m); letter-spacing: .08em; text-transform: uppercase; color: var(--bp-ink2); margin-top: 8px; }
.dw figcaption { position: absolute; left: 0; bottom: -10px; }
.dw-w { padding-right: 0; margin: 10px 0 40px; }
.dw-w .dm-l { right: 0; }
.pin { position: relative; margin: 0; background: #fff; padding: 8px; border: 1px solid var(--bp-line); transform: rotate(var(--r, 0deg)); box-shadow: 0 12px 26px -16px rgba(27, 42, 74, .55); }
.pin img { width: 100%; }
.pin figcaption { font: 400 11.5px/1.3 var(--f-bp-m); color: var(--bp-ink2); padding: 8px 2px 0; }
.scotch { position: absolute; z-index: 2; top: -12px; left: 50%; width: 90px; height: 24px; margin-left: -45px; background: rgba(226, 210, 160, .62); transform: rotate(-3deg); }
.pin .ball { position: absolute; z-index: 2; right: -14px; top: -14px; }
.cuts { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 40px; padding-top: 24px; border-top: 1px dashed var(--bp-line); position: relative; }
.cut { margin: 0; }
.cut img { width: 100%; height: auto; }
.pins { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px; margin-top: 40px; position: relative; }
.tbl-w { overflow-x: auto; border: 2px solid var(--bp-ink); background: rgba(243, 241, 234, .92); position: relative; }
.ttx { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ttx th, .ttx td { padding: 9px 12px; border-bottom: 1px solid var(--bp-line); border-right: 1px solid var(--bp-line); text-align: left; vertical-align: top; }
.ttx thead th { font: 600 12px/1.2 var(--f-bp-h); text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--bp-ink); background: rgba(27, 42, 74, .05); }
.ttx tbody th { font-weight: 500; width: 38%; }
.ttx td:nth-child(2) { font: 500 14px/1.35 var(--f-bp-m); min-width: 11ch; }
@media (max-width: 560px) {  /* на телефоне строка ТТХ — карточка: параметр, значение, примечание */
  .ttx thead { display: none; }
  .ttx tr { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--bp-line); padding: 8px 0; }
  .ttx tbody th, .ttx td { width: auto; border: 0; padding: 2px 12px; }
  .ttx tbody th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--bp-ink2); }
  .ttx td:last-child:not(:nth-child(2)) { font-size: 12.5px; }
}
.ttx td:last-child { color: var(--bp-ink2); font-size: 13.5px; }
.ttx th:last-child, .ttx td:last-child { border-right: 0; }
.dev-l { font: 500 13px/1.4 var(--f-bp-m); text-transform: uppercase; letter-spacing: .06em; margin: 18px 0 0; }
.dev-l a { color: var(--pencil); border-bottom: 1px solid currentColor; }
.ph-w { padding-bottom: 20px; }
.h1-w { font-size: clamp(44px, 9vw, 150px); }
/* индекс вооружения */
.wcs { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0; border-top: 1px solid var(--bp-ink); border-left: 1px solid var(--bp-ink); }
.wc { display: grid; gap: 10px; align-content: start; padding: 22px 18px; border-right: 1px solid var(--bp-ink); border-bottom: 1px solid var(--bp-ink); background: rgba(243, 241, 234, .7); transition: background .25s; }
.wc:hover { background: #fff; }
.wc-d { display: grid; place-items: center; height: 130px; }
.wc-d img { max-height: 130px; width: auto; max-width: 100%; object-fit: contain; }
.wc-d .wph { width: 100%; height: 130px; max-height: none; object-fit: contain; }
.bp-w .bp-g { grid-template-columns: 1fr; gap: 30px; max-width: 980px; }
.bp-w .bp-t { columns: 2 320px; column-gap: 40px; }
.wc-k { display: flex; gap: 10px; align-items: center; font: 500 11px/1.2 var(--f-bp-m); letter-spacing: .08em; text-transform: uppercase; color: var(--bp-ink2); }
.wc-n { font: 700 24px/1 var(--f-bp-h); text-transform: uppercase; }
.wc:hover .wc-n { color: var(--pencil); }
.wc-t { font-size: 14px; color: #2c3a58; }
.mx { border-collapse: collapse; width: 100%; font: 500 13px/1.2 var(--f-bp-m); }
.mx th, .mx td { border: 1px solid var(--bp-line); padding: 8px; text-align: center; }
.mx tbody th { text-align: left; white-space: nowrap; font-family: var(--f-bp-h); font-size: 14px; }
.mx-a { height: 120px; vertical-align: bottom; }
.mx-a span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--f-bp-h); font-size: 13px; white-space: nowrap; }
.mx td { color: var(--pencil); font-size: 16px; }
.mx tbody tr:hover { background: rgba(207, 63, 39, .06); }
.mx a:hover { color: var(--pencil); }
.bp .pen + .tbl-w { margin-top: 16px; }
.guns { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0; border-top: 1px solid var(--bp-ink); border-left: 1px solid var(--bp-ink); }
.gun, .dev { padding: 20px; border-right: 1px solid var(--bp-ink); border-bottom: 1px solid var(--bp-ink); background: rgba(243, 241, 234, .75); scroll-margin-top: 100px; }
.gun-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 8px; }
.guns > *, .bp-g > *, .wcs > *, .arc-b > * { min-width: 0; }
.gun-h b { font: 700 21px/1.1 var(--f-bp-h); text-transform: uppercase; }
.gun p:not(.gun-h):not(.gun-c), .dev p:not(.gun-h):not(.gun-c) { margin: 0 0 12px; font-size: 14.5px; color: #2c3a58; }
.gun-c { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.dev-y { font: 500 13px/1 var(--f-bp-m); color: var(--pencil); display: block; margin-bottom: 6px; }
.bp .chip { color: var(--bp-ink); border-color: var(--bp-ink); background: var(--bp); font-family: var(--f-bp-h); font-weight: 600; }
.bp .chip:hover { background: var(--bp-ink); color: var(--bp); }
.bp .side { background: var(--bp); }
.bp .side-su { color: var(--pencil); } .bp .side-us { color: var(--blue); }

/* ---------- вооружение / системы / бой / галерея на странице самолёта ---------- */
.arms { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-right: 110px; }
.arm { position: relative; display: grid; gap: 8px; align-content: start; padding: 18px; min-height: 120px; color: var(--bp-ink); background-color: var(--bp);
  background-image: linear-gradient(rgba(27, 42, 74, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(27, 42, 74, .08) 1px, transparent 1px); background-size: 20px 20px; transition: transform .3s var(--ease); }
a.arm:hover { transform: translateY(-4px); }
.arm-d { display: grid; place-items: center; height: 64px; }
.arm-d img { max-height: 64px; width: auto; max-width: 100%; object-fit: contain; }
.arm-n { font: 700 19px/1.1 var(--f-bp-h); text-transform: uppercase; }
.arm-k { font: 500 11px/1.3 var(--f-bp-m); letter-spacing: .06em; text-transform: uppercase; color: var(--bp-ink2); }
.arm-go { position: absolute; right: 14px; top: 12px; color: var(--pencil); font: 700 18px/1 var(--f-bp-h); }
.arm-t { background: transparent; color: var(--ink); border: 1px dashed var(--faint); background-image: none; }
.arm-t .arm-n { font: 500 15px/1.35 var(--f-body); text-transform: none; }
.sys { border-top: 1px solid var(--faint); margin-right: 110px; }
.sy { display: grid; grid-template-columns: 90px minmax(0, 1fr) 30px; gap: 18px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--faint); transition: padding .3s var(--ease); }
.sy:hover { padding-left: 10px; }
.sy-k { font: 600 12px/1 var(--f-mono); letter-spacing: .1em; color: #0b0d07; background: var(--hud); padding: 6px 8px; justify-self: start; }
.sy-n { font: 500 clamp(16px, 1.6vw, 20px)/1.35 var(--f-body); }
.sy-go { color: var(--hud); font-family: var(--f-mono); }
.cmb { list-style: none; padding: 0; margin: 0 110px 0 0; position: relative; }
.cmb::before { content: ''; position: absolute; left: 118px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(var(--hud), rgba(212, 255, 92, .1)); }
.cmb li { position: relative; display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 38px; padding: 12px 0; font-size: 17px; color: rgba(238, 242, 246, .86); }
.cmb li::before { content: ''; position: absolute; left: 114px; top: 21px; width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid var(--hud); background: var(--bg); }
.cmb time { font: 600 14px/1.6 var(--f-mono); color: var(--hud); text-align: right; }
.gal { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 14px; margin-right: 110px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--hud) transparent; }
/* галерея: снимки целиком, общая высота, ширина по пропорциям */
.g-i { flex: 0 0 auto; width: fit-content; max-width: 86vw; margin: 0; scroll-snap-align: start; }
.g-i img { height: min(380px, 58vw); width: auto; max-width: 86vw; object-fit: contain; }
.g-i figcaption { width: 0; min-width: 100%; }
.g-i figcaption { font: 400 12px/1.4 var(--f-mono); color: var(--dim); margin-top: 8px; letter-spacing: .04em; }
.pn { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: end; padding: 70px calc(var(--gut) + 110px) 90px var(--gut); border-top: 1px solid var(--faint); margin-top: 40px; }
.pn-a { display: grid; gap: 8px; font: 700 clamp(28px, 4vw, 60px)/1 var(--f-disp); text-transform: uppercase; letter-spacing: -.03em; transition: color .2s; }
.pn-a small { font: 500 12px/1 var(--f-mono); letter-spacing: .14em; color: var(--hud); }
.pn-a:hover { color: var(--hud); }
.pn-n { text-align: right; }
.pn-m { font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--faint); padding: 12px 14px; }
.pn-m:hover { border-color: var(--hud); color: var(--hud); }
.cars { display: flex; flex-wrap: wrap; gap: 16px; margin-right: 110px; }
.car { width: 200px; display: grid; gap: 8px; }
.car img { aspect-ratio: 3/2; object-fit: cover; transition: transform .6s var(--ease); }
.car:hover img { transform: scale(1.05); }
.car span { font: 700 18px/1 var(--f-disp); text-transform: uppercase; }
.car:hover span { color: var(--hud); }
.climb .cmb, .sec .cmb { max-width: 980px; }

/* ---------- РАДАР И СИСТЕМЫ ---------- */
.sx { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; padding: 50px calc(var(--gut) + 110px) 40px var(--gut); scroll-margin-top: 80px; }
.sx-wide { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.sx > * { min-width: 0; }
.sx-t .h2 { font-size: clamp(24px, 3.6vw, 52px); margin-bottom: 20px; overflow-wrap: anywhere; hyphens: auto; }
.reb i { min-width: 0; }
.sx-t p { color: rgba(238, 242, 246, .84); margin: 0 0 14px; max-width: 54ch; }
.sx-a { min-width: 0; }
.anim *, .anim *::before, .anim *::after { animation-play-state: paused !important; }
.anim.play *, .anim.play *::before, .anim.play *::after { animation-play-state: running !important; }
.diag { margin: 0; background: #fff; padding: 10px; }
.diag img { width: 100%; }
/* импульс */
.rop { border: 1px solid rgba(212, 255, 92, .35); background: rgba(3, 8, 6, .75); padding: 18px; }
.rop-s { width: 100%; height: auto; display: block; overflow: visible; }
.rop-s path, .rop-s circle { fill: none; stroke: var(--hud); stroke-width: 1.6; }
.rop-g { stroke-opacity: .6; }
.rop-tg path { fill: #f4ffd8; stroke: none; }
.rop-p { stroke: #f4ffd8 !important; stroke-width: 3 !important; }
.rop-e { stroke: #ff9a6a !important; stroke-width: 3 !important; }
.scope { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-top: 12px; }
.scope svg { width: 100%; height: 90px; border: 1px solid rgba(212, 255, 92, .4); background: #020604; }
.sc-grid { stroke: rgba(212, 255, 92, .12); stroke-width: 1; fill: none; }
.sc-tr { fill: none; stroke: var(--hud); stroke-width: 1.6; filter: drop-shadow(0 0 3px rgba(212, 255, 92, .8)); }
.sc-r { display: grid; gap: 6px; font: 500 13px/1.3 var(--f-mono); color: var(--dim); white-space: nowrap; }
.sc-r b { color: #f4ffd8; }
.rng { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; font: 500 12px/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.rng input { accent-color: var(--hud); flex: 1; min-width: 140px; }
.rng output { color: var(--hud); font-weight: 600; font-size: 14px; }
/* ИКО */
.ppi-w { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); gap: 18px; align-items: center; }
.ppi { width: 100%; height: auto; border-radius: 50%; background: #020604; box-shadow: 0 0 0 1px rgba(212, 255, 92, .4), 0 0 60px rgba(212, 255, 92, .08); }
.ppi .rg { fill: none; stroke: rgba(212, 255, 92, .22); stroke-width: .6; }
.ppi .sweep { transform-origin: 100px 100px; animation: spin 4s linear infinite; }
.ppi .sw-l { stroke: var(--hud); stroke-width: 1; }
.ppi .pb { fill: var(--hud); animation: ping 4s linear infinite; filter: drop-shadow(0 0 2px var(--hud)); }
.ppi-ph { display: grid; gap: 12px; }
.ppi-ph img { aspect-ratio: 4/3; object-fit: cover; }
/* радиогоризонт */
.hzc { display: grid; gap: 20px; }
.formula { font: italic 400 clamp(18px, 2.1vw, 28px)/1.4 var(--f-it); color: #fff; padding: 20px 22px; border: 1px solid var(--faint); background: rgba(5, 8, 12, .6); overflow-x: auto; white-space: nowrap; }
.formula i { font-style: italic; } .formula sub { font-size: .6em; }
.sq { display: inline-flex; align-items: flex-start; }
.sq .ov { border-top: 1.5px solid currentColor; padding: 0 4px; margin-left: 1px; }
.legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 18px; margin: 0; font-size: 14px; }
.legend div { display: flex; gap: 10px; } .legend dt { font: 600 14px/1.4 var(--f-mono); color: var(--hud); min-width: 26px; } .legend dd { margin: 0; color: var(--dim); }
.calc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 12px; align-items: end; padding: 16px; border: 1px solid rgba(212, 255, 92, .35); background: rgba(3, 8, 6, .7); }
.calc label { display: grid; gap: 6px; font: 500 12px/1 var(--f-mono); color: var(--dim); }
.calc input { width: 100%; font: 600 15px/1 var(--f-mono); color: #f4ffd8; background: #020604; border: 1px solid rgba(212, 255, 92, .4); padding: 9px 10px; }
.calc output { font: 500 15px/1.2 var(--f-mono); color: var(--dim); }
.calc output b { font-size: 22px; color: var(--hud); }
/* доплер */
.dop { position: relative; height: 240px; border: 1px solid var(--faint); background: rgba(5, 8, 12, .6); overflow: hidden; }
.dop i { position: absolute; left: 30%; top: 50%; width: 30px; height: 30px; margin: -15px; border-radius: 50%; border: 1.5px solid var(--hud); animation: dop 2.5s linear infinite; }
.dop i:nth-child(2) { animation-delay: .5s; } .dop i:nth-child(3) { animation-delay: 1s; } .dop i:nth-child(4) { animation-delay: 1.5s; } .dop i:nth-child(5) { animation-delay: 2s; }
@keyframes dop { from { transform: translateX(0) scale(.2); opacity: 1; } to { transform: translateX(110px) scale(9); opacity: 0; } }
.dop-t { position: absolute; left: 30%; top: 50%; width: 46px; height: 14px; margin: -7px 0 0 -10px; background: #f4ffd8; clip-path: polygon(100% 50%, 30% 0, 0 30%, 0 70%, 30% 100%); animation: dopm 2.5s linear infinite; }
@keyframes dopm { 50% { transform: translateX(110px); } }
/* ФАР */
.esa { border: 1px solid rgba(212, 255, 92, .35); background: rgba(3, 8, 6, .75); padding: 14px; }
.esa svg { width: 100%; height: auto; display: block; }
.esa rect { fill: var(--hud); }
.esa .wv { fill: none; stroke: rgba(212, 255, 92, .55); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: wave 2.4s linear infinite; animation-delay: calc(var(--i) * var(--k) * 0.22s); }
.esa .w2 { animation-delay: calc(var(--i) * var(--k) * 0.22s + 1.2s); }
@keyframes wave { from { transform: scale(.02); opacity: 1; } to { transform: scale(1); opacity: 0; } }
.esa .beam { stroke: #ff9a6a; stroke-width: 2; stroke-dasharray: 6 6; fill: none; transform-origin: 300px 290px; transform: rotate(calc(var(--k) * 30deg)); transition: transform .6s var(--ease); }
.esa-b { display: flex; gap: 8px; margin-top: 10px; }
.esa-b button { font: 600 12px/1 var(--f-mono); padding: 9px 12px; border: 1px solid var(--faint); color: var(--dim); }
.esa-b button[aria-pressed="true"] { border-color: var(--hud); color: var(--hud); }
/* ЭПР */
.rcs { display: grid; gap: 14px; }
.rcs-bar { height: 14px; background: rgba(255, 255, 255, .08); border: 1px solid var(--faint); }
.rcs-bar i { display: block; height: 100%; width: 50%; background: linear-gradient(90deg, var(--hud), #f4ffd8); transform-origin: 0 50%; transition: width .2s; }
.rcs-o { margin: 0; font: 500 14px/1.4 var(--f-mono); color: var(--dim); }
.rcs-o b { font-size: 26px; color: var(--hud); }
.rcs-o small { display: block; font-size: 11px; }
.rcs-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font: 500 13px/1.3 var(--f-mono); }
.rcs-l li { cursor: pointer; color: var(--dim); padding: 6px 10px; border: 1px solid var(--faint); }
.rcs-l li:hover { color: var(--hud); border-color: var(--hud); }
.folder-memo { margin: 10px calc(110px) 30px 0; max-width: 1000px; transform: rotate(-.8deg); }
@media (max-width: 900px) { .folder-memo { margin-right: 0; } }
.memo { background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(34, 64, 143, .12) 31px 32px); }
.memo-h { display: flex; justify-content: space-between; gap: 20px; font: 400 12px/1 var(--f-type); letter-spacing: .12em; text-transform: uppercase; border-bottom: 2px solid var(--pink); padding-bottom: 12px; margin: 0 0 16px; position: relative; }
.memo-t { font: 400 15px/2 var(--f-type); margin: 0; position: relative; z-index: 1; }
.memo .st-new { position: absolute; right: 20px; bottom: -14px; background: var(--paper); z-index: 2; }
/* СПО */
.spo svg { width: min(420px, 100%); display: block; margin: 0 auto; background: radial-gradient(circle, rgba(212, 255, 92, .06), transparent 70%); }
.spo .rg { fill: none; stroke: rgba(212, 255, 92, .3); }
.spo .sec { fill: rgba(255, 90, 60, 0); stroke: rgba(212, 255, 92, .15); animation: thr 4s steps(1) infinite; }
.spo .s1 { animation-delay: 1s; } .spo .s2 { animation-delay: 2s; } .spo .s3 { animation-delay: 3s; }
@keyframes thr { 0% { fill: rgba(255, 90, 60, .32); } 25% { fill: rgba(255, 90, 60, 0); } }
.spo .jet { fill: #f4ffd8; }
.spo text { font: 700 18px var(--f-mono); fill: #ff9a6a; animation: blink 1.2s infinite; }
.spo .sy2 { animation-delay: .4s; } .spo .sy3 { animation-delay: .8s; fill: var(--hud); }
/* ОЛС */
.ols-v { position: relative; aspect-ratio: 16/9; overflow: hidden; background: linear-gradient(180deg, #0d0717, #1a0c2a 60%, #2d1630); border: 1px solid var(--faint); }
.ols-blob { position: absolute; left: 0; top: 40%; width: 90px; height: 50px; margin-top: -25px; border-radius: 50%; background: radial-gradient(closest-side, #fff, #ffdc4a 30%, #ff5a1f 60%, rgba(120, 0, 80, 0)); animation: olsm 6s ease-in-out infinite alternate; }
@keyframes olsm { from { transform: translate(5%, 30px); } to { transform: translate(calc(min(46vw, 600px) - 120px), -20px); } }
.ols-scan { position: absolute; left: 0; right: 0; height: 2px; top: 0; background: rgba(212, 255, 92, .7); box-shadow: 0 0 12px var(--hud); animation: olss 2.2s linear infinite; }
@keyframes olss { to { transform: translateY(min(26vw, 340px)); } }
.ols-box { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px; border: 1.5px solid var(--hud); animation: ret 6s ease-in-out infinite alternate; }
.ols-c { font: 500 12px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin: 10px 0 0; }
/* НСЦ */
.hmd { position: relative; max-width: 460px; overflow: hidden; cursor: crosshair; }
.hmd img { width: 100%; aspect-ratio: 4/5; object-fit: cover; filter: saturate(.7) brightness(.8); }
.hmd-r { position: absolute; left: 0; top: 0; width: 90px; height: 90px; margin: -45px 0 0 -45px; fill: none; stroke: var(--hud); stroke-width: 1.6; filter: drop-shadow(0 0 4px rgba(212, 255, 92, .8)); transform: translate3d(230px, 260px, 0); will-change: transform; pointer-events: none; }
.hmd-t { position: absolute; left: 12px; bottom: 12px; right: 12px; font: 500 11px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--hud); background: rgba(3, 8, 6, .75); padding: 8px 10px; }
/* РЭБ */
.reb { display: flex; align-items: flex-end; gap: 4px; height: 200px; padding: 14px; border: 1px solid var(--faint); background: rgba(5, 8, 12, .6); }
.reb i { flex: 1; height: 100%; background: linear-gradient(0deg, var(--hud), rgba(255, 154, 106, .9)); transform-origin: 50% 100%; animation: noise var(--s) ease-in-out var(--d) infinite alternate; }
@keyframes noise { from { transform: scaleY(.08); } to { transform: scaleY(1); } }
/* ЭДСУ */
.fbw { display: flex; align-items: center; gap: 0; font: 600 14px/1 var(--f-mono); color: var(--hud); }
.fbw span { border: 1px solid var(--hud); padding: 16px 14px; background: rgba(3, 8, 6, .7); }
.fbw i { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--hud) 0 8px, transparent 8px 14px); background-size: 28px 2px; animation: flow .7s linear infinite; }
@keyframes flow { to { background-position: 28px 0; } }

/* ---------- адаптив ---------- */
@media (max-width: 900px) {
  .duo, .arms, .sys, .cmb, .gal, .cars { margin-right: 0; padding-right: 0; }
  .duo { grid-template-columns: 1fr; padding-right: var(--gut); }
  .mach1, .sx, .sx-wide { grid-template-columns: 1fr; padding-right: var(--gut); gap: 28px; }
  .ach { padding-right: var(--gut); }
  .ach-hud { right: var(--gut); }
  .ach-r { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .arc, .bp, .pn { padding-right: var(--gut); }
  .arc-b, .bp-g { grid-template-columns: 1fr; gap: 26px; }
  .cuts { grid-template-columns: 1fr; }
  .cmb::before { left: 78px; } .cmb li { grid-template-columns: 62px minmax(0, 1fr); gap: 34px; font-size: 16px; } .cmb li::before { left: 74px; }
  .pn { grid-template-columns: 1fr 1fr; }
  .pn-m { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .calc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calc output { grid-column: 1 / -1; }
  .ppi-w { grid-template-columns: 1fr; }
  .ppi-ph { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .ach-n { font-size: clamp(54px, 18vw, 90px); }
  .ach-r { grid-template-columns: 1fr 1fr; }
  .ach-hud { display: none; }
  .bp-in { padding-left: 26px; padding-right: 16px; }
  .bp-in::before { inset: 6px 6px 6px 14px; }
  .dw { padding: 0 34px 40px 0; } .dm-l { right: 34px; bottom: 8px; } .dm-s { bottom: 40px; right: 4px; } .dm { font-size: 11px; }
  .dw-w .dm-l { right: 0; }
  .wcs, .guns { grid-template-columns: 1fr; }
  .sy { grid-template-columns: 70px minmax(0, 1fr) 20px; gap: 12px; }
  .pn-a { font-size: 24px; }
  .folder-in { padding: 22px 18px; }
  .st-new { font-size: 17px; }
  .scope { grid-template-columns: 1fr; }
  .fly-w { top: 70%; }
}

.arm-ph { height: 92px; margin: -18px -18px 4px; overflow: hidden; }
.arm-ph img { width: 100%; height: 92px; max-height: none; object-fit: cover; }
.gun-p { width: calc(100% + 40px); max-width: none; height: 210px; margin: -20px -20px 14px; object-fit: contain; background: #fff; border-bottom: 1px solid var(--bp-line); }
.gun-x { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin: -4px 0 12px; }
.gun-x img { width: 100%; height: 72px; object-fit: cover; cursor: zoom-in; border: 1px solid var(--bp-line); }
.mx .mx-sep th { text-align: left; font: 600 11px/1 var(--f-bp-m); letter-spacing: .14em; text-transform: uppercase; color: var(--bp-ink2); padding: 16px 8px 8px; background: transparent; }

/* многолучевость */
.mp { border: 1px solid rgba(212, 255, 92, .35); background: rgba(3, 8, 6, .75); padding: 14px; }
.mp svg { width: 100%; height: auto; display: block; overflow: visible; }
.mp-ion { fill: rgba(120, 184, 255, .12); } .mp-gnd { fill: rgba(212, 255, 92, .1); }
.mp-l { font: 500 12px var(--f-mono); fill: var(--dim); letter-spacing: .1em; text-transform: uppercase; }
.mp-r { fill: none; stroke: #ff9a6a; stroke-width: 1.8; stroke-dasharray: 8 6; animation: flow2 1.2s linear infinite; }
.mp-r2 { stroke-opacity: .75; }
.mp-g { fill: none; stroke: rgba(255, 154, 106, .45); stroke-width: 1.2; stroke-dasharray: 3 5; }
@keyframes flow2 { to { stroke-dashoffset: -28; } }
.mp-ant path { fill: none; stroke: var(--hud); stroke-width: 2; }
.mp-t { fill: #ff6a55; } .mp-gh { fill: rgba(255, 106, 85, .35); stroke: #ff6a55; stroke-dasharray: 3 3; animation: blink 1.6s infinite; }
.mp-k { font: 600 13px var(--f-mono); fill: #f4ffd8; } .mp-kg { fill: #ff9a6a; }
.mp-sc { fill: #020604; stroke: rgba(212, 255, 92, .4); }
.mp-tr { fill: none; stroke: var(--hud); stroke-width: 1.6; filter: drop-shadow(0 0 3px rgba(212, 255, 92, .8)); }
.mp-c { font: 500 12px/1.4 var(--f-mono); color: var(--dim); margin: 10px 0 0; }

.tr.inst, .tr.inst * { transition: none !important; }

/* открытие файлом: страница скрыта, пока шторка не встанет на место (страховка — 1,5 с) */
html.trp #main, html.trp .ft { visibility: hidden; animation: trp 0s 1.5s forwards; }
@keyframes trp { to { visibility: visible; } }

.ppi-ph img:last-child { grid-column: 1 / -1; aspect-ratio: auto; }  /* E-3 целиком, с носом */
.esa-ph { margin: 16px 0 0; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; align-items: center; }
.esa-ph img { aspect-ratio: 1; object-fit: cover; }
.esa-ph figcaption { font: 500 12px/1.4 var(--f-mono); color: var(--dim); letter-spacing: .04em; }

/* ================= конфликты ================= */
.cfs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-right: 110px; }
.cf { display: grid; gap: 10px; align-content: start; padding-bottom: 22px; border-bottom: 1px solid var(--faint); }
.cf-p { display: block; overflow: hidden; }
.cf-p img { width: 100%; aspect-ratio: 16/10; object-fit: cover; filter: saturate(.75); transition: transform 1s var(--ease), filter .5s; }
.cf:hover .cf-p img { transform: scale(1.04); filter: none; }
.cf-y { font: 600 13px/1 var(--f-mono); color: var(--hud); letter-spacing: .1em; margin-top: 6px; }
.cf-n { font: 700 clamp(24px, 2.8vw, 40px)/1 var(--f-disp); text-transform: uppercase; letter-spacing: -.02em; }
.cf-k { font: italic 500 18px/1.3 var(--f-it); color: var(--dim); }
.cf-t { color: rgba(238, 242, 246, .82); max-width: 56ch; }
.cf-go { font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--hud); margin-top: 6px; }
.cf-note { font: 400 13px/1.5 var(--f-mono); color: var(--dim); max-width: 70ch; margin: 0; }
.cf-h1 { font-size: clamp(26px, 7.5vw, 130px); }
.cf-hist { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: 48px; align-items: start; margin-right: 110px; }
.cf-tx p { color: rgba(238, 242, 246, .86); font-size: 17.5px; max-width: 64ch; margin: 0 0 18px; }
.cf-map { max-width: 520px; justify-self: end; }
.cf-airs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-right: 110px; }
.cf-air { border-top: 2px solid var(--hud); padding-top: 14px; }
.cf-air-h { font: 700 22px/1 var(--f-disp); text-transform: uppercase; margin: 0 0 12px; }
.cf-air p:last-child { color: rgba(238, 242, 246, .84); margin: 0; }
.cf-on { font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 44px 0 16px; }
.cf-w { margin-top: 18px; }
/* запись боевого применения со ссылкой на справку */
.cmb li.cmb-l { display: block; padding: 0; }
.cmb-l a { display: grid; grid-template-columns: inherit; grid-template-columns: 100px minmax(0, 1fr) auto; gap: 38px; padding: 12px 0; align-items: baseline; transition: color .2s; }
.cmb-l a:hover { color: var(--hud); }
.cmb-go { font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--hud); border: 1px solid rgba(212, 255, 92, .4); padding: 6px 8px; white-space: nowrap; }
/* досье: рапорты об ударах */
.raps { display: grid; gap: 0; margin-top: 30px; position: relative; z-index: 1; }
.rap { padding: 22px 0 26px; border-top: 2px solid var(--pink); }
.rap + .rap { border-top: 1px dashed var(--pline); }
.rap-h { display: flex; justify-content: space-between; gap: 16px; font: 400 12px/1 var(--f-type); letter-spacing: .14em; text-transform: uppercase; color: var(--pink-2); }
.rap-d { color: var(--red); }
.rap-t { font: 700 clamp(22px, 2.4vw, 32px)/1 var(--f-arc-h); text-transform: uppercase; color: var(--red); margin: 12px 0 4px; }
.rap .form { margin: 10px 0 14px; }
.rap-ph .rap-b { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 34px; align-items: start; }
.rap .print { margin-top: 18px; }
/* досье: сводка потерь */
.ls-w { overflow-x: auto; margin: 28px 0 0; position: relative; z-index: 1; }
.ls { width: 100%; border-collapse: collapse; font: 400 15px/1.4 var(--f-type); }
.ls th, .ls td { text-align: left; vertical-align: top; padding: 10px 12px 9px 0; border-bottom: 1px dashed var(--pline); }
.ls thead th { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--pink-2); border-bottom: 2px solid var(--pink); font-weight: 400; }
.ls tbody th { font-weight: 400; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; white-space: nowrap; }
.ls-v { font: 700 clamp(18px, 2vw, 24px)/1.15 var(--f-arc-h); color: var(--red); white-space: nowrap; }
.ls-n { font: italic 400 14.5px/1.4 var(--f-arc); color: var(--pink-2); }
.ls-ph { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 34px; margin: 34px 0 6px; position: relative; z-index: 1; }
.st-warn { position: absolute; right: clamp(16px, 4vw, 50px); bottom: clamp(18px, 3vw, 40px); color: var(--red); transform: rotate(8deg); font-size: 13px; z-index: 2; }
@media (max-width: 900px) {
  .cfs, .cf-hist, .cf-airs { grid-template-columns: 1fr; margin-right: 0; }
  .cf-map { justify-self: start; }
  .rap-ph .rap-b { grid-template-columns: 1fr; }
  .cmb-l a { grid-template-columns: 62px minmax(0, 1fr); gap: 34px; }
  .cmb-l .cmb-go { grid-column: 2; justify-self: start; }
  .st-warn { position: static; display: inline-block; margin-top: 18px; }
}
@media (max-width: 560px) {
  .ls thead { display: none; }
  .ls tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px dashed var(--pline); }
  .ls th, .ls td { border: 0; padding: 0; }
  .ls-v { grid-column: 2; grid-row: 1 / 3; text-align: right; }
  .ls-n { grid-column: 1 / -1; }
  .ls-ph { grid-template-columns: 1fr; }
}

/* досье: несколько снимков к рапорту */
.rap-stack { display: grid; gap: 0; }
.rap-stack .print { width: 92%; }
.rap-stack .print + .print { margin-top: 18px; justify-self: end; }
.rap-stack .print:nth-child(2) { z-index: 2; }
.rap-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 26px 22px; margin: 22px 0 4px; position: relative; z-index: 1; }
.rap-strip .print { margin-top: 0; }
.rap-strip .print:nth-child(even) { translate: 0 12px; }
.rap-strip .print { --r: 0deg; }
.rap-strip .print:nth-child(3n+1) { rotate: -1deg; } .rap-strip .print:nth-child(3n+2) { rotate: .8deg; } .rap-strip .print:nth-child(3n) { rotate: -.5deg; }
.rap-strip .print img { aspect-ratio: 4/3; object-fit: cover; }
.rap-strip .print, .ls-ph .print, .rap-stack .print { padding-bottom: 10px; }
.rap-strip .print figcaption, .ls-ph .print figcaption, .rap-stack .print figcaption { position: static; white-space: normal; overflow: visible; padding: 8px 2px 0; line-height: 1.3; }
.ls-ph { grid-template-columns: repeat(auto-fit, minmax(190px, 260px)); align-items: start; }
.ls-ph .print img { aspect-ratio: 4/3; object-fit: cover; object-position: 50% 25%; }
@media (max-width: 560px) {
  .rap-strip { grid-template-columns: 1fr 1fr; gap: 18px 14px; }
  .rap-strip .print { padding: 6px 6px 26px; }
  .rap-strip .print figcaption { font-size: 10px; }
  .rap-stack .print + .print { margin-left: 8%; }
  .ls-ph { grid-template-columns: 1fr 1fr; gap: 18px; }
}

/* плитки техники сторон */
.tl-sides { display: grid; gap: 40px; margin: 48px 110px 0 0; }
.tl-h { font: 700 22px/1 var(--f-disp); text-transform: uppercase; margin: 0 0 16px; padding-left: 12px; border-left: 3px solid var(--hud); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.tile { position: relative; display: grid; align-content: start; gap: 6px; padding: 0 0 12px; background: rgba(5, 8, 12, .45); border: 1px solid var(--faint); transition: border-color .2s; }
.tile img { width: 100%; aspect-ratio: 4/3; object-fit: cover; filter: saturate(.8); transition: filter .4s; }
.tile:hover { border-color: rgba(212, 255, 92, .5); } .tile:hover img { filter: none; }
.tl-k { font: 500 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--hud); padding: 6px 10px 0; }
.tile-sam .tl-k { color: #ff8a6a; } .tile-aew .tl-k, .tile-uav .tl-k, .tile-heli .tl-k { color: #8fd0ff; }
.tl-n { font: 700 15px/1.15 var(--f-disp); text-transform: uppercase; padding: 0 10px; }
.tl-go { position: absolute; right: 10px; bottom: 10px; color: var(--hud); font: 500 13px/1 var(--f-mono); }
a.tile .tl-n { padding-right: 26px; }
@media (max-width: 900px) { .tl-sides { margin-right: 0; } }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr 1fr; gap: 10px; } .tl-n { font-size: 13px; } }

/* хронология на узких экранах: дата над текстом, шкала слева — длинные даты («26–27.02.1991») не налезают на линию */
@media (max-width: 560px) {
  .cmb { margin-right: 0; }
  .cmb::before { left: 4px; }
  .cmb li, .cmb-l a { display: block; padding: 10px 0 10px 26px; }
  .cmb li.cmb-l { padding: 0; }
  .cmb li::before { left: 0; top: 16px; }
  .cmb time { display: block; text-align: left; font-size: 13px; margin-bottom: 2px; }
  .cmb-l .cmb-go { display: inline-block; margin-top: 8px; }
}

/* вертикальные экраны (телефоны, узкие окна): фото первого экрана — во всю ширину сверху, без кадрирования в узкую полосу */
@media (max-aspect-ratio: 4/5) {
  .ach { justify-content: flex-start; min-height: 0; padding-top: calc(min(66svh, 100vw * 1.05) - 40px); padding-bottom: 36px; }
  .ach-img { bottom: auto; height: min(66svh, calc(100vw * 1.05)); }
  .ach-img { -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent); }
  .ach-img::after { background: linear-gradient(180deg, rgba(6, 8, 12, .45) 0%, rgba(6, 8, 12, 0) 26%, rgba(6, 8, 12, 0) 55%, rgba(6, 8, 12, .55) 100%); }
  .ach-hud { bottom: auto; height: calc(min(66svh, 100vw * 1.05) - 100px); }
}

/* грифы: частично рассекречено (современные машины) и совершенно секретно (опытная) */
.st-part { font-size: clamp(14px, 1.7vw, 21px); }
.st-top { font-size: clamp(18px, 2.3vw, 28px); transform: rotate(-7deg); border-width: 4px; }
.folder.in .st-top { animation: thump .5s var(--ease) .3s both; }

/* «назад» к тому же месту ленты */
.back { position: fixed; left: var(--gut); bottom: 18px; z-index: 45; display: inline-flex; gap: 8px; align-items: center; max-width: calc(100vw - 2 * var(--gut) - 120px);
  font: 600 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--hud); background: rgba(5, 8, 4, .82);
  border: 1px solid rgba(212, 255, 92, .55); padding: 11px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color .2s, background .2s; }
.back:hover { border-color: var(--hud); background: rgba(20, 28, 8, .92); }
.back[hidden] { display: none; }
.back span[lang] { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .back { bottom: max(14px, env(safe-area-inset-bottom)); padding: 10px 12px; font-size: 11px; max-width: calc(100vw - 2 * var(--gut)); } }

/* особые досье конфликта: своя хронология в папке */
.sp-ph { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 34px; align-items: start; }
.sp-tl { list-style: none; margin: 26px 0 0; padding: 18px 0 0; border-top: 2px solid var(--pink); position: relative; z-index: 1; display: grid; gap: 8px; }
.sp-tl li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 18px; font: 400 15px/1.45 var(--f-arc); }
.sp-tl time { font: 400 12.5px/1.6 var(--f-type); letter-spacing: .08em; color: var(--red); }
@media (max-width: 900px) { .sp-ph { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .sp-tl li { grid-template-columns: 1fr; gap: 2px; } }

.sp-tlw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 240px); gap: 40px; align-items: start; position: relative; z-index: 1; }
.sp-tlw .print { margin-top: 30px; padding-bottom: 10px; }
.sp-tlw .print figcaption { position: static; white-space: normal; overflow: visible; padding: 8px 2px 0; line-height: 1.3; }
@media (max-width: 560px) { .sp-tlw { grid-template-columns: 1fr; } .sp-tlw .print { max-width: 240px; } }

/* снимки в досье — целиком, без обрезки голов и самолётов: пропорции исходника, высота у каждого своя */
.rap-strip, .ls-ph { align-items: start; }
.rap-strip .print img, .ls-ph .print img, .sp-tlw .print img, .rap-stack .print img { aspect-ratio: auto; height: auto; object-fit: contain; }
.rap-strip .print img, .ls-ph .print img { max-height: 340px; width: 100%; background: #f3efe4; }
.ls-ph { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* 2026-11-06: несколько карт в справке, подзаголовки периодов, разделы хронологии, штамп «Не окончательно» */
.cf-maps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 22px; align-items: start; }
.cf-maps .cf-map:first-child { grid-column: 1 / -1; }
.cf-maps .cf-map { width: 100%; max-width: none; justify-self: stretch; }
.cf-hh { font: 700 clamp(15px, 1.4vw, 18px)/1.2 var(--f-mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--hud); margin: 30px 0 14px; padding-top: 14px; border-top: 1px dashed rgba(212, 255, 92, .35); max-width: 64ch; }
.cf-tx > .cf-hh:first-of-type { margin-top: 6px; }
.cmb li.cmb-sec { display: block; padding: 28px 0 8px; font: 700 13px/1.3 var(--f-mono, monospace); letter-spacing: .16em; text-transform: uppercase; color: var(--hud); }
.cmb li.cmb-sec::before { display: none; }
.cmb li.cmb-sec:first-child { padding-top: 4px; }
.st-warn.st-inl { position: static; display: inline-block; transform: rotate(-4deg); margin: 0 0 18px; }
.arc-top .st-warn.st-inl { margin: 0; }
/* плитки: картинка не шире ячейки (маленькие снимки без превью раздували плитку) */
.tile { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.tile img { min-width: 0; max-width: 100%; height: auto; }
@media (max-width: 900px) { .cf-maps { max-width: 620px; } }
.cf-maps .cf-map:only-child { max-width: 520px; justify-self: end; }
@media (max-width: 900px) { .cf-maps .cf-map:only-child { justify-self: start; } }

/* 2026-11-06: источники — блок в конце страницы и страница sources.html */
.src { position: relative; z-index: 2; padding: 56px clamp(16px, 5vw, 64px) 40px; margin-right: 110px; }
.src-in { max-width: 1100px; border-top: 1px dashed rgba(212, 255, 92, .35); padding-top: 22px; font-size: 14px; line-height: 1.5; color: rgba(238, 242, 246, .72); }
.src-h { font: 600 12px/1.3 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--hud); margin: 0 0 14px; }
.src-page .src-h { font-size: 14px; margin-top: 40px; }
.src-page .src-h:first-child { margin-top: 0; }
.src-k { font: 500 11px/1.3 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(238, 242, 246, .5); margin: 14px 0 6px; }
.src-l { list-style: none; margin: 0; padding: 0; }
.src-l li { padding: 4px 0; border-bottom: 1px solid rgba(238, 242, 246, .06); overflow-wrap: anywhere; }
.src-l a, .src-all a, .ft-src { color: var(--hud); text-decoration: underline; text-decoration-color: rgba(212, 255, 92, .35); text-underline-offset: 3px; }
.src-ph li { font-size: 13px; }
.src-na { color: rgba(238, 242, 246, .45); font-style: italic; }
.src-n { font-size: 13px; color: rgba(238, 242, 246, .5); margin: 10px 0 0; max-width: 80ch; }
.src-d { margin-top: 16px; }
.src-d summary { cursor: pointer; font: 500 12px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--hud); padding: 6px 0; }
.src-d[open] summary { margin-bottom: 8px; }
.src-all { margin: 18px 0 0; font: 500 12px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.src-pages { list-style: none; margin: 0; padding: 0; columns: 2 420px; column-gap: 40px; }
.src-g { break-inside: avoid; padding: 0 0 16px; }
.src-p { display: inline-block; font: 600 13px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(238, 242, 246, .9); margin-bottom: 4px; }
.ft-src { white-space: nowrap; }
@media (max-width: 900px) { .src { margin-right: 0; } }

/* контакт владельца */
.src-contact { margin-top: 22px; font: 500 14px/1.5 var(--f-mono); letter-spacing: .04em; color: rgba(238, 242, 246, .8); }
.src-contact a, .ft-c a { color: var(--hud); text-decoration: underline; text-decoration-color: rgba(212, 255, 92, .35); text-underline-offset: 3px; }
.ft-c { display: block; margin-top: 6px; }