@import url("fonts/fonts.css");

/* ==========================================================================
   Mil.Press FLOT — design system
   Recreated from claude_design/flot.com. Tokens follow the handoff README.
   Breakpoints are container queries on .fl-frame, not viewport media queries,
   so the layout responds to its column rather than the window.
   ========================================================================== */

:root {
  /* Navy */
  --fl-navy-900: #0b1f3a;
  --fl-navy-700: #1c3a63;
  --fl-navy-600: #153055;
  --fl-navy-border: #2b4870;
  --fl-nav-divider: #1c3557;
  --fl-navy-soft: #b7c8d8;
  --fl-navy-mid: #5f7385;
  --fl-navy-link: #b9c7d2;

  /* Surfaces */
  --fl-page-bg: #eef3f8;
  --fl-surface: #ffffff;
  --fl-img: #dce6f0;

  /* Rules & borders */
  --fl-rule-strong: #0b1f3a;
  --fl-rule: #d6e0ea;
  --fl-rule-soft: #e2eaf2;
  --fl-rule-soft-2: #e6edf4;
  --fl-border: #c3d2e0;
  --fl-border-strong: #b4c5d6;

  /* Accents */
  --fl-red: #a4231b;
  --fl-red-bright: #c8342a;
  --fl-gold: #e2b04a;

  /* Text */
  --fl-ink: #0e1a24;
  --fl-body: #22303c;
  --fl-body-muted: #4c5560;
  --fl-meta: #7b838d;
  --fl-meta-2: #8b929b;

  /* Type stacks */
  --fl-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --fl-sans: "Golos Text", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Metrics */
  --fl-max: 1180px;
  --fl-pad: 28px;
}

/* --------------------------------------------------------------- base ---- */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fl-page-bg);
}

body {
  font-family: var(--fl-sans);
  color: var(--fl-ink);
  -webkit-text-size-adjust: 100%;
  /* Sticky footer: the frame fills the viewport and pushes the footer down on
     pages too short to do it themselves. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* No overflow-x:hidden here, deliberately.
   It was added as a guard while the layout was being dragged sideways, but the
   real causes were found since — a nested legacy .wrapper container and an
   inline main{min-width:940px} — and both are fixed at source.
   Setting overflow-x:hidden on html AND body makes overflow-y compute to auto,
   which can move scrolling onto body and leave window.pageYOffset at 0. The
   Orion infinite-scroll plugin tests $(window).scrollTop(), so that silently
   disabled autoload on every list. */
html, body { max-width: 100%; }

a { color: #12314a; text-decoration: none; }
a:hover { color: var(--fl-red); }
::selection { background: #cfe4f7; }

img { max-width: 100%; height: auto; }

/* The container-query root. Everything sizing off cqw lives inside it. */
.fl-frame {
  container-type: inline-size;
  background: var(--fl-page-bg);
  color: var(--fl-ink);
  /* Fill the viewport so .fl-footer's margin-top:auto can pin to the bottom. */
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

/* Everything between header and footer takes the slack. */
.fl-frame > .fl-legacy-page,
.fl-frame > .fl-cols,
.fl-frame > .fl-sec-page { flex: 1 0 auto; }

.fl-wrap {
  max-width: var(--fl-max);
  margin: 0 auto;
  padding-left: var(--fl-pad);
  padding-right: var(--fl-pad);
}

/* Skip link — the old template had none. */
.fl-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #fff;
  color: var(--fl-navy-900);
  padding: 12px 18px;
  font: 600 14px var(--fl-sans);
}
.fl-skip:focus { left: 0; }

/* ------------------------------------------------------------- header ---- */

.fl-header {
  background: var(--fl-navy-900);
  color: #fff;
}

.fl-hdr {
  max-width: var(--fl-max);
  margin: 0 auto;
  padding: 18px var(--fl-pad);
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.fl-hdr-logo {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fl-wordmark {
  display: block;
  font: 700 clamp(46px, 6.6cqw, 84px)/1 var(--fl-serif);
  letter-spacing: .05em;
  color: #fff;
}
.fl-wordmark:hover { color: #fff; }

/* Search sits optically centred: a flex spacer follows it. */
.fl-hdr-search {
  flex: 0 0 300px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--fl-navy-600);
  border: 1px solid var(--fl-navy-border);
  border-radius: 4px;
  padding: 8px 11px;
  min-width: 0;
}
.fl-hdr-search svg { flex: 0 0 auto; }
.fl-hdr-search input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  font: 400 13px var(--fl-sans);
  color: #fff;
}
.fl-hdr-search input::placeholder { color: #7d8f9f; }
.fl-hdr-sp { flex: 1 1 0; }

.fl-nav { border-top: 1px solid var(--fl-nav-divider); }
.fl-nav-track {
  max-width: var(--fl-max);
  margin: 0 auto;
  padding: 0 var(--fl-pad) 5px;
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}
.fl-nav-track::-webkit-scrollbar { display: none; }
.fl-nav-track a {
  font: 500 13.5px var(--fl-sans);
  color: var(--fl-navy-link);
  padding: 13px 0;
  border-bottom: 2px solid transparent;
}
.fl-nav-track a:hover { color: #fff; }
.fl-nav-track a.is-active {
  font-weight: 600;
  color: #fff;
  border-bottom-color: #fff;
}

/* Mobile nav label swap: "Видеодневник инноваций" → "Видео". */
.fl-nav-short { display: none; }

/* --------------------------------------------------------- breadcrumbs ---- */

/* Vertical padding on the bar, horizontal on the inner box — mirroring
   .fl-nav / .fl-nav-track exactly, so the first crumb sits directly under the
   first nav item. Padding the outer bar instead shrinks the space the inner
   max-width centres within, which offset the crumbs 28px to the left. */
.fl-crumbs {
  background: var(--fl-navy-700);
  color: var(--fl-navy-soft);
  padding: 16px 0;
}
.fl-crumbs-in {
  max-width: var(--fl-max);
  margin: 0 auto;
  padding: 0 var(--fl-pad);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font: 400 12.5px var(--fl-sans);
  color: var(--fl-navy-soft);
}
.fl-crumbs-in a { color: var(--fl-navy-soft); }
.fl-crumbs-in a:hover { color: #fff; }

/* --------------------------------------------------------- page title ---- */

/* Set by the news component views via PAGE_H1. Legacy archive pages are not
   given one: their own markup carries the heading. */
.fl-page-title {
  margin: 0 0 22px;
  font: 600 clamp(24px, 3.2cqw, 36px)/1.15 var(--fl-serif);
  letter-spacing: -.01em;
  color: var(--fl-ink);
  text-wrap: pretty;
}

/* Marker class for component-rendered pages: it opts them out of
   "legacy prose" and intentionally carries no styling of its own. */
.fl-plain { }

/* ------------------------------------------------------- rubric strip ---- */

.fl-rubrics {
  background: var(--fl-surface);
  border-bottom: 1px solid var(--fl-rule);
}

/* The row's own box. The fade and chevron position against THIS, not the
   full-bleed bar — otherwise on a viewport wider than --fl-max the chevron
   pins to the screen edge, far from the last rubric it belongs to. */
.fl-rubrics-in {
  position: relative;
  max-width: var(--fl-max);
  margin: 0 auto;
}

.fl-rubrics-track {
  padding: 10px 28px 10px 28px;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.fl-rubrics-track::-webkit-scrollbar { display: none; }
.fl-rubrics-track a {
  font: 400 13px var(--fl-sans);
  color: var(--fl-body-muted);
  white-space: nowrap;
}
.fl-rubrics-track a:hover { color: var(--fl-red); }

/* Scroll affordance — only when the row genuinely overflows (set by JS). */
.fl-rubrics-fade,
.fl-rubrics-hint { display: none; }
.fl-rubrics.is-overflowing .fl-rubrics-track { padding-right: 82px; }
.fl-rubrics.is-overflowing .fl-rubrics-fade {
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 72px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #fff 62%);
  z-index: 2;
}
.fl-rubrics.is-overflowing .fl-rubrics-hint {
  display: flex;
  position: absolute;
  top: 0; right: 6px; bottom: 0;
  align-items: center;
  z-index: 3;
  /* It is a real control, not decoration: it scrolls the row. */
  pointer-events: auto;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

/* Once the row is scrolled to its end there is nothing further to reveal. */
.fl-rubrics.is-at-end .fl-rubrics-fade,
.fl-rubrics.is-at-end .fl-rubrics-hint { display: none; }
.fl-rubrics.is-at-end .fl-rubrics-track { padding-right: var(--fl-pad); }
.fl-rubrics-hint span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--fl-border);
  border-radius: 50%;
  background: #fff;
  font: 600 12px var(--fl-sans);
  color: var(--fl-ink);
}

/* ------------------------------------------------------------ layout ---- */

.fl-cols {
  max-width: var(--fl-max);
  margin: 0 auto;
  padding: 36px var(--fl-pad) 56px;
  display: flex;
  gap: 44px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.fl-cols--article { padding-top: 32px; }

.fl-main {
  flex: 8 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.fl-main--article { gap: 22px; }

.fl-rail {
  flex: 1 1 320px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* -------------------------------------------------------- shared bits ---- */

.fl-eyebrow {
  margin: 0;
  font: 600 12px var(--fl-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fl-ink);
}
.fl-eyebrow--red { color: var(--fl-red); }

.fl-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fl-kicker-dash {
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--fl-red);
}
.fl-kicker-text {
  font: 600 11px var(--fl-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fl-red);
}

.fl-sec {
  border-top: 2px solid var(--fl-rule-strong);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.fl-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-top: 2px solid var(--fl-ink);
  padding-top: 14px;
}
.fl-count { font: 400 12px var(--fl-sans); color: var(--fl-meta-2); }

.fl-media { background: var(--fl-img); display: block; }
.fl-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fl-media--16x9 { aspect-ratio: 16 / 9; }
.fl-media--16x10 { aspect-ratio: 16 / 10; }
.fl-media--3x2 { aspect-ratio: 3 / 2; }

.fl-btn {
  align-self: center;
  margin-top: 24px;
  background: transparent;
  border: 1px solid var(--fl-border-strong);
  padding: 12px 30px;
  font: 500 13.5px var(--fl-sans);
  color: var(--fl-ink);
  cursor: pointer;
  border-radius: 0;
}
.fl-btn:hover {
  background: var(--fl-navy-900);
  color: #fff;
  border-color: var(--fl-ink);
}
.fl-btn-row { display: flex; justify-content: center; padding: 32px 0 8px; }

/* ---------------------------------------------------------- home: lead ---- */

.fl-lead {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Full-bleed inside the padded column. */
.fl-lead-media {
  width: calc(100% + (var(--fl-pad) * 2));
  margin-inline: calc(var(--fl-pad) * -1);
}
.fl-lead h1 {
  margin: 0;
  font: 600 clamp(25px, 3.4cqw, 42px)/1.14 var(--fl-serif);
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.fl-lead h1 a { color: var(--fl-ink); }
.fl-lead h1 a:hover { color: var(--fl-red); }
.fl-standfirst {
  margin: 0;
  font: 400 clamp(15px, 1.4cqw, 17.5px)/1.6 var(--fl-sans);
  color: #3e4751;
  max-width: 62ch;
  text-wrap: pretty;
}
.fl-meta { font: 400 12.5px var(--fl-sans); color: var(--fl-meta); }

/* --------------------------------------------------------- home: cards ---- */

.fl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 24px;
}
.fl-card { display: flex; flex-direction: column; gap: 10px; }
.fl-card-t {
  font: 500 clamp(16px, 1.5cqw, 18.5px)/1.32 var(--fl-serif);
  color: var(--fl-ink);
  text-wrap: pretty;
}
.fl-card:hover .fl-card-t { color: var(--fl-red); }
.fl-card-d { font: 400 11.5px var(--fl-sans); color: var(--fl-meta-2); }

/* ---------------------------------------------------------- home: list ---- */

.fl-list { display: flex; flex-direction: column; gap: 0; }
.fl-row {
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--fl-rule-soft);
}
.fl-row-date {
  flex: 0 0 84px;
  font: 400 12px var(--fl-sans);
  color: #9aa1a9;
  padding-top: 2px;
}
.fl-row-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fl-row-t {
  font: 400 clamp(15px, 1.45cqw, 17.5px)/1.4 var(--fl-sans);
  color: #16222d;
  text-wrap: pretty;
}
.fl-row-t:hover { color: var(--fl-red); }

/* The red "Важное" flag. Backed by PROPERTIES.importance. */
.fl-flag {
  align-self: flex-start;
  font: 600 10px var(--fl-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fl-red);
}
.fl-flag--boxed {
  border: 1px solid #d9b7b4;
  padding: 3px 7px;
}

.fl-list-sec { display: flex; flex-direction: column; gap: 0; }

/* The one advertising placement kept in the redesign. */
.fl-adv { margin: 0 auto 32px; text-align: center; }

/* ------------------------------------------------------------- article ---- */

.fl-article {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.fl-rail-b {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.fl-art-crumbs {
  display: flex;
  gap: 8px;
  font: 400 12.5px var(--fl-sans);
  color: var(--fl-meta);
}
.fl-art-crumbs a { color: var(--fl-meta); }
.fl-art-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 400 12.5px var(--fl-sans);
  color: var(--fl-meta);
}
.fl-art-h1 {
  margin: 0;
  font: 600 clamp(26px, 3.6cqw, 44px)/1.12 var(--fl-serif);
  letter-spacing: -.01em;
  max-width: 24ch;
  text-wrap: pretty;
}
.fl-art-lead {
  margin: 0;
  font: 400 clamp(16px, 1.6cqw, 19.5px)/1.6 var(--fl-sans);
  color: #2c353f;
  max-width: 60ch;
  border-left: 3px solid var(--fl-red);
  padding-left: 18px;
  text-wrap: pretty;
}
.fl-art-body {
  font: 400 clamp(16px, 1.6cqw, 18.5px)/1.68 var(--fl-sans);
  color: var(--fl-body);
  max-width: 66ch;
}

.fl-digest {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 66ch;
}
.fl-digest h2 { margin: 14px 0 4px; }
.fl-digest-row {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--fl-rule);
}
.fl-digest-n {
  flex: 0 0 auto;
  font: 600 13px var(--fl-sans);
  color: var(--fl-red);
  padding-top: 2px;
}
.fl-digest-b {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.fl-digest-t {
  font: 500 clamp(16px, 1.6cqw, 19px)/1.34 var(--fl-serif);
  color: var(--fl-ink);
  text-wrap: pretty;
}
.fl-digest-d { font: 400 12px var(--fl-sans); color: var(--fl-meta-2); }

.fl-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 8px;
}
.fl-tag {
  font: 400 12.5px var(--fl-sans);
  color: #3e4751;
  background: var(--fl-rule-soft-2);
  padding: 7px 13px;
}
.fl-tag:hover { background: var(--fl-navy-900); color: #fff; }

/* "Новости по теме" stays directly below the article body on all widths. */
.fl-related {
  margin-top: 20px;
  background: var(--fl-surface);
  padding: 26px 26px 10px;
  border-top: 3px solid var(--fl-ink);
}
.fl-related h2 { margin: 0 0 4px; }
.fl-related-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--fl-rule-soft-2);
}
.fl-related-thumb { flex: 0 0 132px; }
.fl-related-b {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.fl-related-d { font: 400 12px var(--fl-sans); color: var(--fl-meta-2); }
.fl-related-t {
  font: 400 clamp(15px, 1.45cqw, 17px)/1.4 var(--fl-sans);
  color: #16222d;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- rail ---- */

.fl-rail-sec {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--fl-surface);
  padding: 22px 22px 8px;
  border-top: 3px solid var(--fl-red);
}
.fl-rail-sec h2 { margin: 0 0 4px; }
.fl-rail-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--fl-rule-soft-2);
  display: flex;
  gap: 12px;
  flex-direction: column;
}
.fl-rail-t {
  font: 500 16px/1.34 var(--fl-serif);
  color: var(--fl-ink);
  text-wrap: pretty;
}
.fl-rail-d { font: 400 11.5px var(--fl-sans); color: var(--fl-meta-2); }

.fl-subscribe {
  background: var(--fl-navy-900);
  color: #fff;
  padding: 24px;
}
.fl-subscribe-h {
  font: 600 12px var(--fl-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fl-gold);
  margin-bottom: 10px;
}
.fl-subscribe p {
  margin: 0 0 16px;
  font: 400 14.5px/1.5 var(--fl-sans);
  color: #c9d6e0;
}
.fl-subscribe form { display: flex; flex-direction: column; gap: 8px; }
.fl-subscribe input {
  background: var(--fl-navy-600);
  border: 1px solid var(--fl-navy-border);
  padding: 11px 13px;
  font: 400 13.5px var(--fl-sans);
  color: #fff;
  outline: none;
}
.fl-subscribe input::placeholder { color: #7d8f9f; }
.fl-subscribe button {
  border: 0;
  background: var(--fl-gold);
  color: var(--fl-ink);
  padding: 12px;
  font: 600 13.5px var(--fl-sans);
  cursor: pointer;
}
.fl-subscribe button:hover { background: #f0c163; }

/* ------------------------------------------------------- section index ---- */

.fl-sec-page { max-width: var(--fl-max); margin: 0 auto; padding: 0 0 56px; }
.fl-sec-intro {
  background: var(--fl-surface);
  border-bottom: 1px solid var(--fl-rule);
  padding: 34px var(--fl-pad) 26px;
}
.fl-sec-intro-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.fl-sec-intro h1 {
  margin: 0;
  font: 600 clamp(28px, 3.2cqw, 40px)/1.1 var(--fl-serif);
}
.fl-sec-intro p {
  margin: 12px 0 22px;
  font: 400 15.5px/1.6 var(--fl-sans);
  color: var(--fl-body-muted);
  max-width: 60ch;
}
.fl-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fl-chip {
  font: 400 13px var(--fl-sans);
  color: var(--fl-ink);
  border: 1px solid var(--fl-border);
  padding: 7px 14px;
  border-radius: 100px;
}
.fl-chip:hover {
  background: var(--fl-navy-900);
  color: #fff;
  border-color: var(--fl-ink);
}
.fl-chip.is-active {
  background: var(--fl-navy-900);
  color: #fff;
  border-color: var(--fl-navy-900);
}

.fl-sec-list {
  padding: 32px var(--fl-pad) 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.fl-sec-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 20px 0;
  border-bottom: 1px solid var(--fl-rule);
}
.fl-sec-thumb { flex: 0 0 160px; }
.fl-sec-b {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.fl-sec-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 12px var(--fl-sans);
  color: var(--fl-meta-2);
}
.fl-sec-t {
  font: 500 clamp(17px, 1.9cqw, 23px)/1.28 var(--fl-serif);
  color: var(--fl-ink);
  text-wrap: pretty;
}
.fl-sec-t:hover { color: var(--fl-red); }
.fl-sec-src { font: 400 12.5px var(--fl-sans); color: var(--fl-meta); }

/* --------------------------------------------------- legacy page shell ---- */

.fl-legacy-page { max-width: var(--fl-max); margin: 0 auto; padding: 0 0 56px; }
.fl-legacy-in { padding: 34px var(--fl-pad) 0; }

/* -------------------------------------------------------------- footer ---- */

.fl-footer {
  background: var(--fl-navy-900);
  color: var(--fl-navy-soft);
  padding: 40px var(--fl-pad);
  margin-top: auto;   /* pinned to the bottom on short pages */
}
.fl-foot-grid {
  max-width: var(--fl-max);
  margin: 0 auto;
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.fl-foot-brand {
  flex: 1 1 340px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fl-foot-mark {
  display: block;
  width: 100%;
  text-align: center;
  font: 700 40px/1 var(--fl-serif);
  letter-spacing: .05em;
  color: #fff;
}
.fl-foot-mark:hover { color: #fff; }
.fl-foot-copy {
  margin: 0;
  font: 400 12.5px/1.65 var(--fl-sans);
  text-align: justify;
}
/* Links in the copyright paragraph were inheriting the global #12314a, which
   is all but invisible on navy. */
.fl-foot-copy a,
.fl-footer a { color: var(--fl-navy-link); }
.fl-foot-copy a { text-decoration: underline; text-underline-offset: 2px; }
.fl-foot-copy a:hover,
.fl-footer a:hover { color: #fff; }
.fl-foot-cols { display: flex; gap: 44px; flex-wrap: wrap; }
.fl-foot-col { display: flex; flex-direction: column; gap: 9px; }
.fl-foot-h {
  font: 600 11px var(--fl-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fl-navy-mid);
}
.fl-foot-col a {
  font: 400 13.5px var(--fl-sans);
  color: var(--fl-navy-link);
}
.fl-foot-col a:hover { color: #fff; }
.fl-yt { display: flex; align-items: center; gap: 9px; }

/* Back-to-top: mobile only. */
.fl-totop {
  display: none;
  max-width: var(--fl-max);
  margin: 32px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--fl-nav-divider);
  justify-content: center;
}
.fl-totop button {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--fl-navy-border);
  color: var(--fl-navy-link);
  padding: 12px 22px;
  font: 500 13px var(--fl-sans);
  cursor: pointer;
}
.fl-totop button:hover { border-color: var(--fl-navy-link); color: #fff; }

/* ==========================================================================
   Compatibility layer: legacy news markup (.mainbar / .wrap / aside /
   .other-news / article.avg), rendered by news/news/*.php.

   These rules are ported from voennoe, which drives the *same* component
   markup responsively and without any of the problems seen here. The
   difference is not the markup, it is what each template ships:

     voennoe  no component CSS at all; the template stylesheet owns layout.
     navy     three desktop-only component stylesheets (style.css,
              only_list.css, only_important_week.css) plus an inline
              main { min-width: 940px }, and no media queries anywhere.

   Because navy's component CSS is still loaded here, every selector below is
   prefixed with .fl-frame purely to win on specificity — voennoe needs no
   such prefix. Otherwise the declarations mirror voennoe's.

   The desktop layout is a negative-margin float: .wrap reserves a 320px
   gutter and `main aside` is pulled into it with margin-left:-305px. Any
   override that unstacks the sidebar MUST reset that margin, or the aside
   lands 305px off the left edge.

   Remove this block once pages migrate to the flot_* templates.
   ========================================================================== */

/* Legacy .wrapper duplicates the container the new template already provides. */
.fl-frame .wrapper {
  max-width: none;
  width: auto;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Nothing legacy may exceed its column. */
.fl-frame img { max-width: 100%; height: auto; }

/* --- 480-767px: keep a narrow sidebar, as voennoe does ------------------- */
@media (min-width: 480px) and (max-width: 767px) {
  .fl-frame main .mainbar .wrap { padding-right: 170px; }
  .fl-frame main aside {
    width: 139px;
    margin-left: -160px;
    padding-left: 15px;
  }
  .fl-frame article.avg,
  .fl-frame article.small { padding: 0 0 8px; margin: 0 0 11px; }
  .fl-frame article.avg .img { margin-bottom: 8px; }
}

/* --- below 480px: stack completely --------------------------------------- */
@media (max-width: 479px) {
  .fl-frame main .mainbar { float: none; }
  .fl-frame main .mainbar .wrap { padding-right: 0; }
  .fl-frame main .mainbar .wrap .other-news { display: block; }

  .fl-frame .other-news.two-col li,
  .fl-frame .other-news.three-col li,
  .fl-frame .other-news.four-col li,
  .fl-frame [class*="two-col"] > li,
  .fl-frame [class*="three-col"] > li,
  .fl-frame [class*="four-col"] > li { width: 100%; }

  /* other_custom equalises pair heights inline via jQuery. */
  .fl-frame .other-news li article { height: auto !important; }

  /* margin-left MUST be reset: the desktop layout pulls the aside -305px. */
  .fl-frame main aside {
    float: none;
    left: 0;
    width: auto;
    margin-left: 0;
    margin-bottom: 0;
    border-left: none;
    padding-left: 0;
  }

  /* style.css caps article.small at max-width:220px, a size chosen for a
     four-col desktop cell (~235px), so the cap never shows there. Stacked at
     full width it does: article.small items render 220px wide next to
     full-width article.avg siblings, which is the residual shift.
     voennoe needs no equivalent - it ships no component CSS to override. */
  .fl-frame article.small { max-width: none; }

  .fl-frame article.avg .img img,
  .fl-frame article.small .img img { width: 100%; height: auto; }
  .fl-frame article.avg time,
  .fl-frame article.small time { font-size: 80%; }
}

/* ==========================================================================
   Mobile branch — container query on .fl-frame, mirrored in a media query
   so it still applies if the frame is ever rendered outside a container.
   ========================================================================== */

@container (max-width: 640px) {
  .fl-hdr-sp { display: none; }
  .fl-hdr-logo {
    flex: 1 0 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .fl-wordmark { font-size: 104px; width: 100%; text-align: center; }
  .fl-hdr-search { flex: 1 1 100%; justify-content: center; }

  .fl-nav-full { display: none; }
  .fl-nav-short { display: inline; }

  .fl-totop { display: flex; }

  .fl-rail { flex: 1 1 100%; }
  .fl-sec-thumb { flex: 1 1 100%; }
  .fl-related-thumb { flex: 1 1 100%; }
  .fl-rail-row { flex-direction: column; }
}

@media (max-width: 640px) {
  .fl-hdr-sp { display: none; }
  .fl-hdr-logo {
    flex: 1 0 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .fl-wordmark { font-size: 104px; width: 100%; text-align: center; }
  .fl-hdr-search { flex: 1 1 100%; justify-content: center; }

  .fl-nav-full { display: none; }
  .fl-nav-short { display: inline; }

  .fl-totop { display: flex; }

  .fl-rail { flex: 1 1 100%; }
  .fl-sec-thumb { flex: 1 1 100%; }
  .fl-related-thumb { flex: 1 1 100%; }
  .fl-rail-row { flex-direction: column; }
}

/* ==========================================================================
   Search results — components/bitrix/search.page/.default
   ========================================================================== */

/* ---- host table neutralisation ----
   search/index.php (a page file outside this template) wraps the component in
   <table cellpadding="5"> with the Yandex Direct block in the left cell. The
   table cannot be removed from PHP, so it is unpicked here: :has() finds the
   one table that actually contains this component, leaving every other legacy
   table on the site untouched — the same technique legacy-content.css already
   depends on. The row becomes the flex container and the cells its items, so
   the ad — source-ordered first — is re-ordered below the results instead of
   pushing the search field off a phone screen. Without :has() support the page
   simply keeps today's two-cell table. */
.fl-frame table:has(.fl-search),
.fl-frame table:has(.fl-search) > tbody { display: block; width: auto; border-collapse: collapse; }
.fl-frame table:has(.fl-search) > tbody > tr {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: auto;
}
.fl-frame table:has(.fl-search) td {
  display: block;
  width: auto;
  padding: 0;
  vertical-align: top;
  order: 2;              /* the retained Yandex Direct cell */
  text-align: center;    /* matches .fl-adv */
}
.fl-frame table:has(.fl-search) td:has(.fl-search) {
  order: 1;
  text-align: left;
}

/* ---- page ---- */
.fl-search { display: flex; flex-direction: column; }

/* ---- query form ----
   Tonal counterpart to .fl-hdr-search: the same control restated for a light
   background. Squared off — the header's 4px radius would clash with the
   .fl-btn submit sitting flush beside it. */
.fl-search-form {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 34px;
}
.fl-search-field {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--fl-surface);
  border: 1px solid var(--fl-border-strong);
  padding: 0 14px;
  color: var(--fl-navy-mid);   /* the magnifier inherits this */
}
.fl-search-field input,
.fl-search-field input[type="text"] {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  padding: 13px 0;
  font: 400 15px var(--fl-sans);
  color: var(--fl-ink);
}
.fl-search-field input::placeholder { color: var(--fl-meta); }
/* Chrome's search-field clear button is a stray rounded shape in a square UI. */
.fl-search-field input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.fl-search-scope { position: relative; flex: 0 1 200px; display: flex; }
.fl-search-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: var(--fl-surface);
  border: 1px solid var(--fl-border-strong);
  border-radius: 0;
  padding: 13px 38px 13px 14px;
  font: 400 14.5px var(--fl-sans);
  color: var(--fl-ink);
  cursor: pointer;
}
.fl-search-caret {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--fl-navy-mid);
}

/* .fl-btn is designed as a centred block CTA; inline in a control row it must
   drop its self-alignment and top margin. */
.fl-btn--inline { align-self: stretch; margin-top: 0; padding: 12px 26px; }

/* Focus stays in the house language: the 1px border doubles to navy rather
   than the control picking up a default browser outline. */
.fl-search-field:focus-within,
.fl-search-select:focus-visible {
  border-color: var(--fl-navy-900);
  box-shadow: inset 0 0 0 1px var(--fl-navy-900);
  outline: none;
}
.fl-btn:focus-visible,
.fl-pg a:focus-visible,
.fl-map a:focus-visible,
.fl-search-t:focus-visible {
  outline: 2px solid var(--fl-navy-700);
  outline-offset: 2px;
}

.fl-search-when {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font: 400 13px var(--fl-sans);
  color: var(--fl-body-muted);
}
.fl-search-when-l {
  font: 600 11px var(--fl-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fl-meta);
}
.fl-search-when input {
  border: 1px solid var(--fl-border);
  background: var(--fl-surface);
  padding: 9px 11px;
  font: 400 13.5px var(--fl-sans);
  color: var(--fl-ink);
}

/* ---- result furniture ---- */
.fl-search-head { margin-bottom: 10px; }

.fl-search-sort {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0 0 4px;
  font: 400 12.5px var(--fl-sans);
  color: var(--fl-meta);
}
.fl-search-sort a { color: var(--fl-body-muted); }
.fl-search-sort a:hover { color: var(--fl-red); }
.fl-search-sort .is-current { font-weight: 600; color: var(--fl-ink); }

/* The keyboard-layout hint and the empty state share one motif: the red left
   rule already carried by .fl-art-lead. */
.fl-search-note,
.fl-search-empty {
  margin: 0 0 26px;
  padding: 16px 20px;
  background: var(--fl-surface);
  border-left: 3px solid var(--fl-red);
  font: 400 15px/1.6 var(--fl-sans);
  color: var(--fl-body);
  max-width: 66ch;
}
.fl-search-empty { margin-top: 8px; }

/* ---- results list ---- */
.fl-search-list { display: flex; flex-direction: column; }
.fl-search-item {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 20px 0;
  border-bottom: 1px solid var(--fl-rule);
}
.fl-search-t {
  font: 500 clamp(17px, 1.9cqw, 22px)/1.28 var(--fl-serif);
  color: var(--fl-ink);
  text-wrap: pretty;
}
.fl-search-t:hover { color: var(--fl-red); }
.fl-search-d {
  margin: 0;
  font: 400 15px/1.6 var(--fl-sans);
  color: var(--fl-body);
  max-width: 72ch;
  text-wrap: pretty;
}
/* Bitrix wraps matched terms in <b> inside TITLE_FORMATED / BODY_FORMATED. In
   the snippet that highlight becomes the red accent; in the headline, which is
   already ink-on-light at 22px, an underline carries it without fighting the
   serif colour. */
.fl-search-d b { font-weight: 600; color: var(--fl-red); }
.fl-search-t b { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.fl-search-m {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  font: 400 12.5px var(--fl-sans);
  color: var(--fl-meta);
}
.fl-search-url {
  color: var(--fl-navy-mid);
  overflow-wrap: anywhere;   /* long escaped Cyrillic paths must not widen the page */
}
.fl-search-sep { color: var(--fl-border-strong); }

/* ---- syntax-error help ---- */
.fl-search-error {
  margin: 0 0 32px;
  padding: 18px 22px;
  background: var(--fl-surface);
  border-left: 3px solid var(--fl-red);
  font: 400 15px/1.6 var(--fl-sans);
  color: var(--fl-body);
  max-width: 72ch;
}
.fl-search-error p { margin: 0 0 8px; }
.fl-search-error p:last-child { margin-bottom: 0; }
.fl-search-error-h {
  font: 600 12px var(--fl-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fl-red);
}
.fl-search-help { max-width: 72ch; }
.fl-search-ops { margin: 18px 0 0; max-width: 72ch; }
.fl-search-ops dt {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 16px;
  font: 600 14.5px var(--fl-sans);
  color: var(--fl-ink);
}
.fl-search-ops dt span { font: 400 12.5px var(--fl-sans); color: var(--fl-meta); }
.fl-search-ops dd {
  margin: 4px 0 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--fl-rule);
  font: 400 14.5px/1.6 var(--fl-sans);
  color: var(--fl-body-muted);
}

/* ---- pagination ----
   .fl-btn's language, compacted: transparent cell, 1px --fl-border-strong,
   inverting to navy fill on hover. The current page is that inverted state,
   settled. */
.fl-pg {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 34px 0 8px;
}
.fl-pg a,
.fl-pg span {
  min-width: 42px;
  padding: 10px 13px;
  border: 1px solid var(--fl-border-strong);
  background: transparent;
  font: 500 13.5px var(--fl-sans);
  color: var(--fl-ink);
  text-align: center;
}
.fl-pg a:hover {
  background: var(--fl-navy-900);
  color: #fff;
  border-color: var(--fl-ink);
}
.fl-pg .is-current {
  background: var(--fl-navy-900);
  color: #fff;
  border-color: var(--fl-navy-900);
}
.fl-pg .is-disabled { color: var(--fl-meta-2); border-color: var(--fl-rule); }
.fl-pg .is-gap {
  min-width: 0;
  border: 0;
  padding: 10px 2px;
  color: var(--fl-meta-2);
}

/* ==========================================================================
   Sitemap — components/bitrix/main.map/.default
   ========================================================================== */

.fl-map { display: block; padding-bottom: 8px; }

/* Top-level entries as an auto-fitting grid: four columns at --fl-max, folding
   to one by ~330px without a media query of its own. align-items:start stops a
   short group stretching to a tall neighbour's height. */
.fl-map-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 38px 40px;
  align-items: start;
}
.fl-map-grid > li {
  min-width: 0;
  border-top: 2px solid var(--fl-navy-900);   /* the house section-head rule */
  padding-top: 14px;
}

/* Nested levels carry no bullets: subordination is the hairline spine plus the
   type-size and colour step. */
.fl-map-sub {
  list-style: none;
  margin: 10px 0 0;
  padding: 0 0 0 14px;
  border-left: 1px solid var(--fl-rule);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.fl-map-sub > li { min-width: 0; }

.fl-map-h {
  display: block;
  font: 500 clamp(18px, 1.9cqw, 21px)/1.28 var(--fl-serif);
  color: var(--fl-ink);
  text-wrap: pretty;
}
.fl-map-l1 {
  display: block;
  font: 500 15px/1.45 var(--fl-sans);
  color: var(--fl-body);
}
.fl-map-l2 {
  display: block;
  font: 400 14px/1.45 var(--fl-sans);
  color: var(--fl-body-muted);
}
.fl-map-l3 {
  display: block;
  font: 400 13.5px/1.45 var(--fl-sans);
  color: var(--fl-body-muted);
}
.fl-map a:hover { color: var(--fl-red); }

.fl-map-d {
  display: block;
  margin-top: 3px;
  font: 400 12.5px/1.5 var(--fl-sans);
  color: var(--fl-meta);
  text-wrap: pretty;
}

/* ==========================================================================
   Mobile branch for search + sitemap. Container query first (the frame is the
   sizing context), mirrored in a media query per the convention above.
   ========================================================================== */

@container (max-width: 640px) {
  .fl-search-form { gap: 8px; }
  .fl-search-field { flex: 1 1 100%; }
  .fl-search-scope { flex: 1 1 100%; }
  .fl-btn--inline { flex: 1 1 100%; }
  .fl-search-sort { gap: 14px; }
  .fl-pg { justify-content: flex-start; gap: 6px; }
  .fl-pg a, .fl-pg span { min-width: 38px; padding: 9px 10px; font-size: 13px; }

  .fl-map-grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 640px) {
  .fl-search-form { gap: 8px; }
  .fl-search-field { flex: 1 1 100%; }
  .fl-search-scope { flex: 1 1 100%; }
  .fl-btn--inline { flex: 1 1 100%; }
  .fl-search-sort { gap: 14px; }
  .fl-pg { justify-content: flex-start; gap: 6px; }
  .fl-pg a, .fl-pg span { min-width: 38px; padding: 9px 10px; font-size: 13px; }

  .fl-map-grid { grid-template-columns: 1fr; gap: 30px; }
}