/*
Theme Name: 46km — Ранний веб
Theme URI: https://46km.ru/
Author: Dmitrii Filatov
Description: Самостоятельная тема сайта 46km.ru в эстетике раннего веба: окно с заголовком, строкой меню и строкой состояния, содержимое таблицами, лента фотографий мозаикой. Родительской темы нет — весь код сайта в репозитории проекта.
Version: 1.3.2
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fcsr-web95
Tags: one-column, custom-logo, custom-menu, block-styles
*/

/* ============================================================
   ТОКЕНЫ

   Тема намеренно одноцветная по замыслу: ранний веб не знал
   тёмной темы, и переключать её здесь нечего. Поэтому все цвета
   заданы явно и не зависят от настроек системы — страница
   выглядит одинаково на любом устройстве.
   ============================================================ */
:root{
  /* Высота, отводимая одному снимку. Меньше экрана намеренно:
     видно край следующего, и сразу понятно, что коллекция продолжается. */
  --fcsr-shot:72vh;

  /* Рабочий стол и корпус окна */
  --desk:#0E7C74;
  --desk-2:#0A6059;
  --face:#C9C9C9;
  --face-2:#DCDCDC;
  --face-3:#B2B2B2;
  --hi:#FFFFFF;
  --sh:#8A8A8A;
  --dk:#0F0F14;
  --title-a:#001C7D;
  --title-b:#1B7BD0;

  /* Содержимое */
  --paper:#FFFFFF;
  --ink:#15151C;
  --ink-2:#4A4A55;
  --ink-3:#6B6B76;
  --rule:#B9B9C0;
  --link:#0018C8;
  --link-hover:#0026FF;
  --visited:#5A1A8B;
  --warn:#A31515;

  /* Шрифты. PT Sans Caption рисовали под мелкий интерфейсный кегль —
     ровно ниша Tahoma; кириллица у всего семейства родная. */
  --f-ui:"PT Sans Caption",Tahoma,Verdana,sans-serif;
  --f-body:"PT Sans",Verdana,Geneva,sans-serif;
  --f-head:"PT Serif",Georgia,"Times New Roman",serif;

  /* Ритм */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--desk);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
}

/* Выпуклая и вдавленная рамка — основной приём эпохи.
   Вынесены в классы, чтобы не повторять четыре цвета руками. */
.is-out{border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi)}
.is-in{border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh)}

/* Спрятать от глаз, оставив для чтения с экрана. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.skip{position:absolute;left:-9999px;top:0;background:var(--paper);color:var(--ink);padding:var(--s3);z-index:10}
.skip:focus{left:var(--s3);top:var(--s3)}

:focus-visible{outline:2px solid var(--title-b);outline-offset:2px}

/* ============================================================
   ОКНО
   ============================================================ */
.desk{padding:var(--s5) var(--s4);min-height:100vh}

.win{
  max-width:1100px;margin:0 auto;
  background:var(--face);padding:3px;
  border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
}

.win__bar{
  background:linear-gradient(90deg,var(--title-a),var(--title-b));
  color:#fff;display:flex;align-items:center;gap:var(--s2);
  padding:5px 5px 5px 9px;
  font-family:var(--f-ui);font-weight:700;font-size:14px;
}
.win__title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win__boxes{display:flex;gap:2px}
.win__box{
  width:20px;height:18px;background:var(--face);color:var(--ink);
  border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  font-family:var(--f-ui);font-size:11px;line-height:14px;text-align:center;
}

/* Строка меню — настоящая навигация сайта, поэтому она интерактивна:
   у пунктов есть наведение и текущий раздел. Пока в ней стояли
   бутафорские «Файл / Правка / Вид», всё было наоборот — вид нажимаемого
   элемента без действия раздражает сильнее, чем его отсутствие.

   Подсветка наведения — инверсия в цвет заголовка окна: так вели себя
   меню той эпохи, и этот приём узнаётся сам, без пояснений. */
.win__menu{
  display:flex;gap:0;padding:3px;
  border-bottom:1px solid var(--sh);
  font-family:var(--f-ui);font-size:14px;
}
.win__menu-item{
  padding:5px 13px;color:var(--ink);text-decoration:none;white-space:nowrap;
}
.win__menu-item:visited{color:var(--ink)}
.win__menu-item:hover,.win__menu-item:focus-visible{
  background:var(--title-a);color:#fff;
}
.win__menu-item.is-current{font-weight:700;background:var(--face-3)}
.win__menu-item.is-current:hover{background:var(--title-a);color:#fff}

.win__inner{
  background:var(--paper);
  border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
  padding:var(--s5) var(--s5) var(--s6);
  margin:3px 0;
}

.win__status{display:flex;gap:3px;padding:2px;font-family:var(--f-ui);font-size:12px}
.win__cell{
  flex:1;background:var(--face);color:var(--ink-2);
  border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
  padding:4px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ============================================================
   ШАПКА И РАЗДЕЛЫ
   ============================================================ */
.brand{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;padding-bottom:var(--s4);margin-bottom:var(--s5);border-bottom:1px solid var(--rule)}
.brand__logo{display:block;flex:0 0 auto;background:var(--dk);padding:6px;line-height:0}
.brand__img{display:block;width:140px;height:auto}
.brand__text{min-width:200px;flex:1}
.brand__name{margin:0 0 2px;font-family:var(--f-head);font-size:clamp(21px,3.4vw,28px);line-height:1.2;text-wrap:balance}
.brand__name a{color:var(--ink);text-decoration:none}
.brand__name a:hover{text-decoration:underline}
.brand__desc{margin:0;font-family:var(--f-ui);font-size:13px;color:var(--ink-3)}

/* ============================================================
   ТЕКСТ
   ============================================================ */
.main{display:block}

.doc__title{
  font-family:var(--f-head);font-size:clamp(24px,4vw,32px);line-height:1.25;
  margin:0 0 var(--s3);padding-bottom:var(--s2);border-bottom:2px solid var(--ink);
  text-wrap:balance;
}
.doc__meta{margin:0 0 var(--s4);font-family:var(--f-ui);font-size:13px;color:var(--ink-3)}

/* Ширина строки: примерно 68 знаков — дальше глаз теряет начало
   следующей строки. Ограничение на самом тексте, а не на окне,
   чтобы лента и таблицы могли быть шире. */
.doc__body{max-width:68ch}
.doc__body>*{margin:0 0 var(--s4)}
.doc__body>*:last-child{margin-bottom:0}

.doc__body h2,.doc__body h3,.doc__body h4{
  font-family:var(--f-head);line-height:1.3;margin:var(--s6) 0 var(--s3);text-wrap:balance;
}
.doc__body h2{font-size:24px;border-bottom:1px solid var(--rule);padding-bottom:var(--s1)}
.doc__body h3{font-size:20px}
.doc__body h4{font-size:18px}
.doc__body p{margin:0 0 var(--s4)}
.doc__body ul,.doc__body ol{margin:0 0 var(--s4);padding-left:var(--s5)}
.doc__body li{margin-bottom:var(--s2)}
.doc__body li::marker{color:var(--ink-3)}
.doc__body strong{font-weight:700}
.doc__body blockquote{
  margin:0 0 var(--s4);padding:var(--s3) var(--s4);
  background:#F2F2F5;border-left:4px solid var(--sh);
}
.doc__body blockquote p:last-child{margin-bottom:0}
.doc__body img{max-width:100%;height:auto}
.doc__body hr{border:0;border-top:1px solid var(--rule);margin:var(--s5) 0}
.doc__body code,.doc__body kbd{font-family:"Courier New",monospace;font-size:.95em;background:#F0F0F3;padding:1px 4px}
.doc__body pre{overflow-x:auto;background:#F0F0F3;padding:var(--s3);border:1px solid var(--rule)}

.doc__body table{border-collapse:collapse;width:100%;font-size:15px}
.doc__body th,.doc__body td{border:1px solid var(--sh);padding:var(--s2) var(--s3);text-align:left;vertical-align:top;color:var(--ink)}
.doc__body th{background:var(--face);font-family:var(--f-ui);font-weight:700}
.doc__body tr:nth-child(even) td{background:#F5F5F7}

a{color:var(--link)}
a:visited{color:var(--visited)}
a:hover{color:var(--link-hover)}

/* ============================================================
   СПИСКИ ЗАПИСЕЙ, ПОИСК, ОШИБКА
   ============================================================ */
.list{display:grid;gap:var(--s5);max-width:68ch}
.list__item{padding-bottom:var(--s5);border-bottom:1px solid var(--rule)}
.list__item:last-child{border-bottom:0;padding-bottom:0}
.list__title{font-family:var(--f-head);font-size:21px;margin:0 0 var(--s1);line-height:1.3}
.list__meta{margin:0 0 var(--s2);font-family:var(--f-ui);font-size:13px;color:var(--ink-3)}
.list__body>*{margin:0 0 var(--s3)}
.list__body>*:last-child{margin-bottom:0}
/* Лента новостей шире обычной колонки текста: в ней встречаются альбомы,
   а карточка альбома в 68 знаков ширины выглядит зажатой. */
.list{max-width:76ch}

.btn{
  font-family:var(--f-ui);font-size:15px;color:var(--ink);
  background:var(--face);border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  padding:8px 18px;cursor:pointer;
}
.btn:hover{background:var(--face-2)}
.btn:active{border-color:var(--dk) var(--hi) var(--hi) var(--dk)}

.find{
  display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;
  margin-top:var(--s6);padding:var(--s3);
  background:var(--face);border:2px solid;border-color:var(--hi) var(--sh) var(--sh) var(--hi);
}
.find__label{font-family:var(--f-ui);font-size:14px}
/* 16px — минимум, при котором мобильный Safari не приближает страницу
   при установке курсора в поле. */
.find__input{
  flex:1;min-width:160px;font-family:var(--f-body);font-size:16px;color:var(--ink);
  background:var(--paper);border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
  padding:7px 9px;
}

.alert{
  display:flex;gap:var(--s3);align-items:flex-start;
  background:var(--face);border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  padding:var(--s4);margin-bottom:var(--s5);max-width:68ch;
}
.alert__icon{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background:var(--warn);color:#fff;font-family:var(--f-ui);font-weight:700;
  display:grid;place-items:center;
}
.alert__title{margin:0 0 var(--s1);font-family:var(--f-ui);font-weight:700;font-size:16px}
.alert__text{margin:0;font-size:15px;color:var(--ink-2)}

.pager,.fcsr-pagination{margin-top:var(--s5);font-family:var(--f-ui);font-size:14px}
.pager .nav-links,.fcsr-pagination{display:flex;flex-wrap:wrap;gap:var(--s1)}
.pager .page-numbers,.fcsr-pagination .page-numbers{
  background:var(--face);color:var(--ink);text-decoration:none;
  border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  padding:6px 13px;min-width:38px;text-align:center;
}
.pager .page-numbers:hover,.fcsr-pagination .page-numbers:hover{background:var(--face-2)}
.pager .page-numbers.current,.fcsr-pagination .page-numbers.current{
  border-color:var(--dk) var(--hi) var(--hi) var(--dk);background:var(--face-3);font-weight:700;
}
.pager .page-numbers.dots,.fcsr-pagination .page-numbers.dots{border:0;background:none;min-width:0;padding:6px 4px}


/* ============================================================
   ЛЕНТА ФОТОГРАФИЙ
   ============================================================ */
.fcsr-archive__header{margin-bottom:var(--s5)}
.fcsr-archive__title{
  font-family:var(--f-head);font-size:clamp(24px,4vw,32px);line-height:1.25;
  margin:0 0 var(--s3);padding-bottom:var(--s2);border-bottom:2px solid var(--ink);
}
.fcsr-archive__count{margin:var(--s3) 0 0;font-family:var(--f-ui);font-size:13px;color:var(--ink-3)}

.fcsr-search{
  display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;
  padding:var(--s3);
  background:var(--face);border:2px solid;border-color:var(--hi) var(--sh) var(--sh) var(--hi);
}
.fcsr-search__label{font-family:var(--f-ui);font-size:14px}
.fcsr-search__input{
  flex:1;min-width:170px;font-family:var(--f-body);font-size:16px;color:var(--ink);
  background:var(--paper);border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
  padding:7px 9px;
}
.fcsr-search__submit{
  font-family:var(--f-ui);font-size:15px;color:var(--ink);
  background:var(--face);border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  padding:8px 18px;cursor:pointer;
}
.fcsr-search__submit:active{border-color:var(--dk) var(--hi) var(--hi) var(--dk)}
.fcsr-search__reset{font-family:var(--f-ui);font-size:14px}

/* Сетка. Без скрипта — обычная CSS-сетка: ряды выравниваются по самой
   высокой карточке, между рядами остаются провалы, но лента читается
   и порядок верный. Скрипт добавляет is-masonry, мельчит строки
   и раздаёт каждой карточке нужное их число.

   Колонки (columns) здесь не годятся, хотя мозаику дают сами: в них
   лента читается сверху вниз по первому столбцу, а не по рядам,
   и хронология «новые сверху» рассыпается. */
.fcsr-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:var(--s3);align-items:start;margin-top:var(--s5);
}
.fcsr-grid.is-masonry{grid-auto-rows:8px}
.fcsr-card{
  background:var(--face);
  border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  padding:5px;
}
/* Пропорции приходят в inline-стиле из метаданных вложения, поэтому
   место под картинку зарезервировано до её загрузки и мозаика не прыгает. */
.fcsr-card__image{display:block;overflow:hidden;line-height:0;border:1px solid var(--sh)}
.fcsr-card__image img{display:block;width:100%;height:auto}
.fcsr-card__body{padding:var(--s2) 3px 3px}
.fcsr-card__text{margin:0 0 3px;font-size:14px;line-height:1.5;color:var(--ink-2)}
/* Город с годом и матч со счётом — строки одного веса. Матч опознаёт
   снимок лучше всего, но главным на карточке остаётся сама фотография,
   а не подпись под ней. */
.fcsr-card__place,.fcsr-card__match{margin:0;font-family:var(--f-ui);font-size:12px;font-weight:400;color:var(--ink-3)}
.fcsr-card__place+.fcsr-card__match{margin-top:2px}

.fcsr-empty{
  margin-top:var(--s5);padding:var(--s4);max-width:68ch;
  background:var(--face);border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
}
.fcsr-empty p{margin:0 0 var(--s2)}
.fcsr-empty p:last-child{margin:0}

/* ============================================================
   СТРАНИЦА СНИМКА
   ============================================================ */
/* Тот же блок, что у карточки в ленте: серое тело, снимок в тонкой
   рамке, подписи под ним на сером. */
.fcsr-photo__frame{
  background:var(--face);padding:5px;
  border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
}
.fcsr-photo__image{line-height:0}
.fcsr-photo__image img{display:block;width:100%;height:auto;border:1px solid var(--sh)}
.fcsr-photo__body{padding:var(--s3) 3px 3px}
.fcsr-photo__text{margin:0 0 var(--s2);max-width:68ch}
/* Заголовком остаётся матч — иначе у страницы не было бы заголовка
   вовсе, — но выглядит он как строка города и года. */
.fcsr-photo__place,.fcsr-photo__title{margin:0;font-family:var(--f-ui);font-size:13px;font-weight:400;color:var(--ink-3)}
.fcsr-photo__place+.fcsr-photo__title{margin-top:3px}
.fcsr-photo__nav{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-top:var(--s5);font-family:var(--f-ui);font-size:14px}
.fcsr-photo__prev,.fcsr-photo__next,.fcsr-photo__back{
  background:var(--face);color:var(--ink);text-decoration:none;
  border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  padding:7px 15px;
}
.fcsr-photo__prev:hover,.fcsr-photo__next:hover,.fcsr-photo__back:hover{background:var(--face-2)}
.fcsr-photo__back{margin-left:auto}

/* ============================================================
   ПРОСМОТР СНИМКА В ОКНЕ
   Тоже окно — иначе всплывающий просмотрщик выпадал бы из мира темы.
   ============================================================ */
.fcsr-lightbox-open{overflow:hidden}

/* Это правило обязательно. Скрипт прячет окно атрибутом hidden, а любой
   авторский display перебивает браузерное [hidden]{display:none}. Без него
   окно не закрывается ни крестиком, ни щелчком по фону — при том, что
   открывается нормально и ошибок в консоли нет. */
.fcsr-lightbox[hidden]{display:none}

/* --fcsr-chrome — сколько высоты занимает не сам снимок: отступы окна,
   рамка и подпись. Отсюда считается потолок высоты снимка. */
.fcsr-lightbox{--fcsr-chrome:64px;
  position:fixed;inset:0;z-index:100;display:grid;place-items:start center;
  padding:var(--s4);overflow-y:auto;overscroll-behavior:contain}
/* Затемнение привязано к экрану, а не к содержимому окна. Раньше оно было
   растянуто внутри окна: пока окно помещалось в экран, разницы не было,
   а как только снимки пошли вниз и появилась прокрутка — затемнение
   уезжало вместе с ними, и низ экрана оставался светлым.
   Панель администратора оно не закрывает: у неё свой слой выше нашего,
   и это к лучшему — панель остаётся рабочей. */
.fcsr-lightbox__backdrop{position:fixed;inset:0;background:rgba(4,30,28,.78)}
.fcsr-lightbox__inner{
  position:relative;max-width:min(1000px,100%);
  display:flex;align-items:flex-start;gap:var(--s2);
}
.fcsr-lightbox__figure{
  margin:0;background:var(--face);padding:5px;
  border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  display:flex;flex-direction:column;min-width:0;
}
/* Снимок должен помещаться на экран целиком. Потолок высоты считается
   от доступной высоты, а не от всей: отступы окна, рамка и панель
   администратора съедают ощутимую часть, и без их учёта снимок вылезал
   за нижний край. */
.fcsr-lightbox__image{display:block;max-width:100%;
  max-height:min(var(--fcsr-shot), calc(100vh - var(--fcsr-chrome)));
  height:auto;width:auto;margin:0 auto;border:1px solid var(--sh);background:var(--face)}
.fcsr-lightbox__caption{background:var(--face);padding:var(--s3);margin-top:5px;overflow-y:auto}
.fcsr-lightbox__text{margin:0 0 var(--s1);font-size:15px;line-height:1.55;color:var(--ink-2)}
.fcsr-lightbox__place,.fcsr-lightbox__title{margin:0;font-family:var(--f-ui);font-size:12px;font-weight:400;color:var(--ink-3)}
.fcsr-lightbox__place+.fcsr-lightbox__title{margin-top:2px}
.fcsr-lightbox__title:empty,.fcsr-lightbox__text:empty,.fcsr-lightbox__place:empty{display:none}

/* Отказ показываем словами, а не молчанием: щелчок по стрелке, после
   которого ничего не произошло, читается как поломка. */
.fcsr-lightbox__error{
  margin:var(--s2) 0 0;font-family:var(--f-ui);font-size:13px;color:var(--warn);
}
.fcsr-lightbox__error[hidden]{display:none}

/* Пока едет соседний снимок, стрелки не должны выглядеть нажимаемыми. */
.fcsr-lightbox.is-busy .fcsr-lightbox__nav{opacity:.45;pointer-events:none}
.fcsr-lightbox__close{
  position:fixed;top:calc(var(--s4) - 2px);right:calc(var(--s4) - 2px);z-index:3;
  width:28px;height:24px;font-family:var(--f-ui);font-size:14px;line-height:20px;cursor:pointer;
  background:var(--face);color:var(--ink);
  border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
}
/* Стрелки закреплены у краёв экрана: в высокой коллекции они иначе
   уехали бы вверх вместе с содержимым, и листать пришлось бы,
   прокрутившись обратно к началу. */
.fcsr-lightbox__nav{
  position:fixed;top:50%;transform:translateY(-50%);z-index:3;
  width:40px;height:56px;cursor:pointer;
  font-family:var(--f-ui);font-size:20px;
  background:var(--face);color:var(--ink);
  border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
}
.fcsr-lightbox__nav:active{border-color:var(--dk) var(--hi) var(--hi) var(--dk)}
/* Стрелки прячутся только когда снимок один: листать нечего. На краях
   ленты они остаются рабочими — перелистывание идёт по кругу. */
.fcsr-lightbox__nav[hidden]{display:none}

/* ============================================================
   ТЕЛЕФОН
   Кегль текста не уменьшаем: мелкий шрифт на телефоне — это
   не «компактно», это нечитаемо. Ужимаем поля и обвязку.
   ============================================================ */
@media (max-width:640px){
  .desk{padding:0;min-height:0}
  .win{border-width:0;padding:0;max-width:none}
  .win__inner{padding:var(--s4) var(--s4) var(--s5);border-left:0;border-right:0;margin:0}
  .win__bar{font-size:13px}
  /* Палец — не курсор: пункту нужна высота, за которую реально попасть. */
  .win__menu{overflow-x:auto;scrollbar-width:none}
  .win__menu::-webkit-scrollbar{display:none}
  .win__menu-item{padding:11px 16px;font-size:15px}

  .brand__img{width:104px}

  .fcsr-grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:var(--s2)}
  .fcsr-search{flex-direction:column;align-items:stretch}
  .fcsr-search__submit{width:100%}

  /* Окно во весь экран, но высоту содержимому не навязываем: снимков
     в коллекции несколько, и растянутая на экран рамка обрезала бы их. */
  .fcsr-lightbox{padding:0;--fcsr-shot:62vh;--fcsr-chrome:40px}
  .fcsr-lightbox__inner{flex-direction:column;gap:0;width:100%}
  .fcsr-lightbox__figure{width:100%;border-width:0}

  /* Стрелки закреплены у нижнего края экрана: до верхних углов на телефоне
     не дотянуться одной рукой, а листать нужно часто. */
  .fcsr-lightbox__nav{position:fixed;top:auto;bottom:var(--s4);transform:none;
    width:56px;height:44px;z-index:3}
  .fcsr-lightbox__nav--prev{left:var(--s4)}
  .fcsr-lightbox__nav--next{right:var(--s4)}
  .fcsr-lightbox__close{top:var(--s2);right:var(--s2);width:34px;height:30px}

  .fcsr-photo__back{margin-left:0;width:100%;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* Счётчик снимков на обложке коллекции. Без него коллекция из двадцати
   фотографий неотличима от одиночной. */
.fcsr-card__count{position:absolute;right:8px;bottom:8px;padding:2px 8px;
  background:rgba(15,15,20,.78);color:#fff;font-size:12px;line-height:1.6}
.fcsr-card__image{position:relative;display:block}

/* Снимки коллекции идут столбцом, друг под другом. */
.fcsr-photo__stack{display:flex;flex-direction:column;gap:var(--s4)}
/* Снимок вписывается в экран по обеим сторонам и не растягивается сверх
   своего размера. Было width:100% без потолка высоты: высокие снимки
   занимали два экрана, а мелкие раздувались до ширины колонки и мылили. */
.fcsr-photo__stack .fcsr-photo__image img{display:block;
  width:auto;height:auto;max-width:100%;max-height:var(--fcsr-shot);margin:0 auto}

/* Всплывающее окно коллекции: подписи сверху, снимки столбцом под ними. */
/* Своей прокрутки у столбца нет: снимки идут вниз, а прокручивается всё
   окно целиком. Внутренняя прокрутка прятала второй снимок — со стороны
   было не понять, что коллекция продолжается. */
.fcsr-lightbox__stack{display:flex;flex-direction:column;gap:var(--s3)}
/* Правило снимка задано выше, отдельного здесь быть не должно: прежнее
   отменяло потолок высоты (max-height:none) и растягивало снимок
   на всю ширину. Оно писалось, когда столбца ещё не было. */
.fcsr-lightbox__caption{margin-bottom:var(--s3)}

.fcsr-lightbox__nav--prev{left:var(--s2)}
.fcsr-lightbox__nav--next{right:var(--s2)}

/* Панель администратора перекрывала верх окна: она нарисована поверх всего,
   а окно занимало экран целиком. Сдвигаем окно и закреплённые кнопки ниже
   неё — с небольшим просветом, чтобы они не липли к её краю.
   Высота панели у WordPress фиксированная: 32 пикселя на широком экране
   и 46 на узком, поэтому значения заданы числами, а не вычисляются. */
.admin-bar .fcsr-lightbox{top:calc(32px + var(--s2));--fcsr-chrome:104px}
.admin-bar .fcsr-lightbox__close{top:calc(32px + var(--s2) + var(--s4) - 2px)}

@media screen and (max-width:782px){
  .admin-bar .fcsr-lightbox{top:calc(46px + var(--s2));--fcsr-chrome:118px}
  .admin-bar .fcsr-lightbox__close{top:calc(46px + var(--s2) + var(--s4) - 2px)}
}

/* Вставленная коллекция. Сетка та же, что у ленты, — отсюда мозаика
   и просмотр в окне без своего JavaScript. Но одна карточка в ленте
   узкая, а в тексте ей нужна ширина колонки. */
.fcsr-grid--embed{grid-template-columns:1fr;margin:var(--s5) 0;max-width:520px}
.fcsr-grid--embed .fcsr-card{margin:0}

/* Заметка о недоступной коллекции. Видит только редактор. */
.fcsr-embed-notice{margin:var(--s4) 0;padding:var(--s3);
  border-left:4px solid var(--sh);background:#F2F2F5;
  font-family:var(--f-ui);font-size:13px;color:var(--ink-2)}
.fcsr-embed-notice span{display:block;margin-top:2px;font-size:12px;opacity:.75}