/*! PhotoSwipe 5.4.4 (c) Dmitry Semenov, MIT License: /js/photoswipe-LICENSE.txt */
/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */

.pswp {
  --pswp-bg: #000;
  --pswp-placeholder-bg: #222;
  

  --pswp-root-z-index: 100000;
  
  --pswp-preloader-color: rgba(79, 79, 79, 0.4);
  --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
  
  /* defined via js:
  --pswp-transition-duration: 333ms; */
  
  --pswp-icon-color: #fff;
  --pswp-icon-color-secondary: #4f4f4f;
  --pswp-icon-stroke-color: #4f4f4f;
  --pswp-icon-stroke-width: 2px;

  --pswp-error-text-color: var(--pswp-icon-color);
}


/*
	Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)
*/

.pswp {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: var(--pswp-root-z-index);
	display: none;
	touch-action: none;
	outline: 0;
	opacity: 0.003;
	contain: layout style size;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Prevents focus outline on the root element,
  (it may be focused initially) */
.pswp:focus {
  outline: 0;
}

.pswp * {
  box-sizing: border-box;
}

.pswp img {
  max-width: none;
}

.pswp--open {
	display: block;
}

.pswp,
.pswp__bg {
	transform: translateZ(0);
	will-change: opacity;
}

.pswp__bg {
  opacity: 0.005;
	background: var(--pswp-bg);
}

.pswp,
.pswp__scroll-wrap {
	overflow: hidden;
}

.pswp__scroll-wrap,
.pswp__bg,
.pswp__container,
.pswp__item,
.pswp__content,
.pswp__img,
.pswp__zoom-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.pswp__img,
.pswp__zoom-wrap {
	width: auto;
	height: auto;
}

.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
	cursor: zoom-in;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
	cursor: move;
	cursor: -webkit-grab;
	cursor: -moz-grab;
	cursor: grab;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

/* :active to override grabbing cursor */
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
.pswp__img {
	cursor: -webkit-zoom-out;
	cursor: -moz-zoom-out;
	cursor: zoom-out;
}


/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img,
.pswp__button,
.pswp__counter {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.pswp__item {
	/* z-index for fade transition */
	z-index: 1;
	overflow: hidden;
}

.pswp__hidden {
	display: none !important;
}

/* Allow to click through pswp__content element, but not its children */
.pswp__content {
  pointer-events: none;
}
.pswp__content > * {
  pointer-events: auto;
}


/*

  PhotoSwipe UI

*/

/*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/
.pswp__error-msg-container {
  display: grid;
}
.pswp__error-msg {
	margin: auto;
	font-size: 1em;
	line-height: 1;
	color: var(--pswp-error-text-color);
}

/*
class pswp__hide-on-close is applied to elements that
should hide (for example fade out) when PhotoSwipe is closed
and show (for example fade in) when PhotoSwipe is opened
 */
.pswp .pswp__hide-on-close {
	opacity: 0.005;
	will-change: opacity;
	transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1);
	z-index: 10; /* always overlap slide content */
	pointer-events: none; /* hidden elements should not be clickable */
}

/* class pswp--ui-visible is added when opening or closing transition starts */
.pswp--ui-visible .pswp__hide-on-close {
	opacity: 1;
	pointer-events: auto;
}

/* <button> styles, including css reset */
.pswp__button {
	position: relative;
	display: block;
	width: 50px;
	height: 60px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	cursor: pointer;
	background: none;
	border: 0;
	box-shadow: none;
	opacity: 0.85;
	-webkit-appearance: none;
	-webkit-touch-callout: none;
}

.pswp__button:hover,
.pswp__button:active,
.pswp__button:focus {
  transition: none;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  opacity: 1;
}

.pswp__button:disabled {
  opacity: 0.3;
  cursor: auto;
}

.pswp__icn {
  fill: var(--pswp-icon-color);
  color: var(--pswp-icon-color-secondary);
}

.pswp__icn {
  position: absolute;
  top: 14px;
  left: 9px;
  width: 32px;
  height: 32px;
  overflow: hidden;
  pointer-events: none;
}

.pswp__icn-shadow {
  stroke: var(--pswp-icon-stroke-color);
  stroke-width: var(--pswp-icon-stroke-width);
  fill: none;
}

.pswp__icn:focus {
	outline: 0;
}

/*
	div element that matches size of large image,
	large image loads on top of it,
	used when msrc is not provided
*/
div.pswp__img--placeholder,
.pswp__img--with-bg {
	background: var(--pswp-placeholder-bg);
}

.pswp__top-bar {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 60px;
	display: flex;
  flex-direction: row;
  justify-content: flex-end;
	z-index: 10;

	/* allow events to pass through top bar itself */
	pointer-events: none !important;
}
.pswp__top-bar > * {
  pointer-events: auto;
  /* this makes transition significantly more smooth,
     even though inner elements are not animated */
  will-change: opacity;
}


/*

  Close button

*/
.pswp__button--close {
  margin-right: 6px;
}


/*

  Arrow buttons

*/
.pswp__button--arrow {
  position: absolute;
  top: 0;
  width: 75px;
  height: 100px;
  top: 50%;
  margin-top: -50px;
}

.pswp__button--arrow:disabled {
  display: none;
  cursor: default;
}

.pswp__button--arrow .pswp__icn {
  top: 50%;
  margin-top: -30px;
  width: 60px;
  height: 60px;
  background: none;
  border-radius: 0;
}

.pswp--one-slide .pswp__button--arrow {
  display: none;
}

/* hide arrows on touch screens */
.pswp--touch .pswp__button--arrow {
  visibility: hidden;
}

/* show arrows only after mouse was used */
.pswp--has_mouse .pswp__button--arrow {
  visibility: visible;
}

.pswp__button--arrow--prev {
  right: auto;
  left: 0px;
}

.pswp__button--arrow--next {
  right: 0px;
}
.pswp__button--arrow--next .pswp__icn {
  left: auto;
  right: 14px;
  /* flip horizontally */
  transform: scale(-1, 1);
}

/*

  Zoom button

*/
.pswp__button--zoom {
  display: none;
}

.pswp--zoom-allowed .pswp__button--zoom {
  display: block;
}

/* "+" => "-" */
.pswp--zoomed-in .pswp__zoom-icn-bar-v {
  display: none;
}


/*

  Loading indicator

*/
.pswp__preloader {
  position: relative;
  overflow: hidden;
  width: 50px;
  height: 60px;
  margin-right: auto;
}

.pswp__preloader .pswp__icn {
  opacity: 0;
  transition: opacity 0.2s linear;
  animation: pswp-clockwise 600ms linear infinite;
}

.pswp__preloader--active .pswp__icn {
  opacity: 0.85;
}

@keyframes pswp-clockwise {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/*

  "1 of 10" counter

*/
.pswp__counter {
  height: 30px;
  margin-top: 15px;
  margin-inline-start: 20px;
  font-size: 14px;
  line-height: 30px;
  color: var(--pswp-icon-color);
  text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
  opacity: 0.85;
}

.pswp--one-slide .pswp__counter {
  display: none;
}

/* Тени прошлого — стиль сайта: «Дело».
 *
 * Тёмный стол, на нём бумага: папка дела, рапорт, карточки улик, снимки.
 * Тема одна, тёмная — светлое только то, что лежит на столе как предмет.
 * Шрифты — из игры: Noto Serif для текста, Noto Sans SemiCondensed для
 * меток и штампов; build.py урезает их до латиницы и кириллицы и подставляет
 * настоящие адреса вместо плейсхолдеров шрифтов в @font-face.
 */

@font-face {
  font-family: "Noto Serif";
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/NotoSerif-Regular.d2916e5703.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Serif";
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/NotoSerif-SemiBold.b63ae4f3d1.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans SemiCondensed";
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/NotoSans-SemiCondensedSemiBold.6ac1d3ab0a.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --desk: #15120e;
  --desk-light: #2a231a;
  --board: #241c14;
  --board-edge: #3a2c1d;
  --paper: #e4d9bf;
  --card: #f1ead6;
  --print: #efe7d4;
  --manila: #c8a96b;
  --ink: #23201b;
  --ink-soft: #5a5244;
  --ink-manila: #2f2a22;
  --red: #a3241c;
  --accent: #e8b23a;
  --text: #d8d0c0;
  --muted: #958b78;
  --line: #ffffff1f;
  --measure: 46rem;
  --wide: 66rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --label: 600 0.8rem/1.2 "Noto Sans SemiCondensed", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }

body {
  margin: 0;
  color: var(--text);
  background: radial-gradient(ellipse at 50% 0, var(--desk-light) 0, var(--desk) 40rem) no-repeat, var(--desk);
  font: 400 1.0625rem/1.65 "Noto Serif", Georgia, "Times New Roman", serif;
  overflow-wrap: break-word;
}

a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { color: #ffd76a; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* на бумаге золото не видно: ссылки и рамка фокуса — чернилами */
.folder a { color: var(--ink); }
.report a, .cards a, .note a { color: var(--red); }
.folder a:focus-visible, .report a:focus-visible, .cards a:focus-visible,
.prints a:focus-visible, .note a:focus-visible { outline-color: var(--ink); }

h1, h2 { font-weight: 600; line-height: 1.2; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: 0.3rem 0 2rem; color: var(--paper); }

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

.label { font: var(--label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0; }

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: var(--gutter); top: 0.5rem; background: var(--desk); padding: 0.25rem 0.5rem; z-index: 2; }

/* --- шапка ---------------------------------------------------------------- */

.top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  padding: 1rem var(--gutter);
  border-bottom: 1px dashed var(--line);
  font-size: 0.95rem;
}
.brand { color: var(--text); font-weight: 600; text-decoration: none; letter-spacing: 0.02em; margin-right: auto; }
.brand::before { content: "■ "; color: var(--red); }
.nav, .langs { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.nav a, .langs a { color: var(--muted); text-decoration: none; }
.nav a:hover, .langs a:hover { color: var(--accent); }
.nav a[aria-current], .langs a[aria-current] { color: var(--text); }
.langs a[aria-current] { text-decoration: underline; text-decoration-color: var(--accent); }

/* --- главная: папка дела -------------------------------------------------- */

.wrap { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

.folder { position: relative; max-width: 62rem; margin: clamp(2rem, 6vw, 4rem) auto 0; transform: rotate(-0.6deg); }
.folder-tab {
  display: inline-block;
  margin: 0 0 0 2rem;
  padding: 0.5rem 1.4rem 0.4rem;
  border-radius: 0.5rem 0.5rem 0 0;
  background: var(--manila);
  color: var(--ink);
}
.folder-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.25rem, 4vw, 2.5rem);
  padding: clamp(1.25rem, 4vw, 2.75rem);
  background: linear-gradient(135deg, #d2b477, var(--manila) 40%, #b8955a);
  color: var(--ink);
  box-shadow: 0 30px 60px #000a, inset 0 0 0 1px #0002;
}
.photo {
  position: relative;
  align-self: start;
  margin: 0;
  padding: 0.7rem;
  background: #f3ecdc;
  box-shadow: 0 8px 18px #0006;
  transform: rotate(2deg);
}
/* скрепка */
.photo::before {
  content: "";
  position: absolute;
  top: -1.1rem;
  left: 2.2rem;
  width: 1.1rem;
  height: 3rem;
  border: 3px solid #8b8b8b;
  border-bottom-color: transparent;
  border-radius: 0.6rem;
}
.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 75% 30%; filter: sepia(0.25) contrast(1.05); }
.photo figcaption { padding-top: 0.6rem; text-align: center; font-style: italic; font-size: 0.9rem; color: var(--ink-soft); }
.sheet .label { color: var(--ink-manila); }
.sheet h1 { font-size: clamp(2.3rem, 6vw, 3.6rem); line-height: 1; margin: 0.3rem 0 0.5rem; color: var(--ink); overflow-wrap: anywhere; }
.sheet .tagline { margin: 0 0 1.2rem; color: var(--ink-manila); font-size: 1.05rem; }
.fields { display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 1rem; margin: 0; padding-top: 1rem; border-top: 1px solid #0003; }
.fields dt { padding: 0.3rem 0; color: var(--ink-manila); }
.fields dd { margin: 0; padding: 0.3rem 0; border-bottom: 1px dotted #0004; font-size: 1rem; }
/* штамп — в своей строке над листом, а не на тексте: заголовок не сжимается */
.sheet { position: relative; padding-top: 2.6rem; }
.stamp {
  position: absolute;
  top: -0.3rem;
  right: 0.5rem;
  margin: 0;
  padding: 0.25rem 0.7rem;
  border: 3px solid var(--red);
  color: var(--red);
  font: var(--label);
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.85;
  transform: rotate(-12deg);
  mix-blend-mode: multiply;
}

.store { display: inline-block; margin-top: 1.4rem; }
.store img { display: block; width: 12rem; height: auto; }
.store-soon {
  display: inline-block;
  margin: 1.4rem 0 0;
  padding: 0.5rem 1rem;
  border: 2px dashed var(--ink);
  color: var(--ink);
  font: var(--label);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* рапорт: бумага в линейку */
.report {
  position: relative;
  max-width: var(--measure);
  margin: clamp(3rem, 8vw, 5rem) auto 0;
  padding: clamp(1.5rem, 5vw, 3rem);
  background: var(--paper) repeating-linear-gradient(#0000 0 1.72rem, #0000000d 1.72rem calc(1.72rem + 1px));
  color: var(--ink);
  box-shadow: 0 20px 40px #0008;
  transform: rotate(0.4deg);
}
.report .label { color: var(--red); }
.report h2 { margin: 0.4rem 0 1rem; font-size: 1.7rem; color: var(--ink); }
.report p { margin: 0 0 1rem; }
.report .sign { margin: 1.75rem 0 0; padding-top: 1rem; border-top: 1px solid #0002; text-align: right; color: var(--ink-soft); }
.report .sign p { margin: 0; font-style: italic; font-size: 1.1rem; color: var(--ink); }
.report .sign blockquote { margin: 0; }
.report .sign figcaption { margin-top: 0.25rem; font-size: 0.9rem; }

/* доска улик */
.board {
  margin-top: clamp(3rem, 8vw, 5rem);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  border-block: 6px solid var(--board-edge);
  background: var(--board) radial-gradient(#0003 1px, #0000 1.5px) 0 0 / 6px 6px;
}
.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 1.6rem 1.2rem;
}
.cards li {
  position: relative;
  padding: 1.3rem 1.1rem 1.1rem;
  background: var(--card) linear-gradient(#0000 2.1rem, #c9302c55 2.1rem calc(2.1rem + 1px), #0000 0);
  color: var(--ink);
  font-size: 0.97rem;
  line-height: 1.5;
  box-shadow: 0 6px 14px #0007;
}
.cards li:nth-child(3n+1) { transform: rotate(-1.2deg); }
.cards li:nth-child(3n+2) { transform: rotate(0.8deg); }
.cards li:nth-child(3n) { transform: rotate(-0.4deg); }
/* кнопка-булавка */
.cards li::before {
  content: "";
  position: absolute;
  top: -0.45rem;
  left: 50%;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e65a4f, #8e1d16);
  box-shadow: 0 2px 3px #0008;
}
.cards b {
  display: block;
  margin-bottom: 0.9rem;
  font: var(--label);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}

/* снимки */
.prints-section { padding-block: clamp(3rem, 8vw, 5rem); }
.prints { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.prints li { position: relative; z-index: 0; padding: 0.55rem; background: var(--print); box-shadow: 0 10px 20px #0008; }
.prints li:nth-child(odd) { transform: rotate(-1.5deg); }
.prints li:nth-child(even) { transform: rotate(1.2deg); }
.prints a { display: block; cursor: zoom-in; }
.prints img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: sepia(0.2); }
.prints span { display: block; padding: 0.45rem 0.15rem 0.1rem; font-size: 0.82rem; line-height: 1.35; font-style: italic; color: var(--ink-soft); }

/* полноэкранный просмотр снимков (PhotoSwipe, assets/js/gallery.js) */
.pswp { --pswp-bg: var(--desk); --pswp-icon-color: var(--paper); --pswp-icon-color-secondary: var(--desk); --pswp-placeholder-bg: var(--desk-light); }
.pswp__counter { font: var(--label); line-height: 30px; letter-spacing: 0.1em; color: var(--paper); }
.pswp__caption {
  position: absolute; inset: auto 0 0;
  padding: 1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom));
  text-align: center; font-style: italic; color: var(--paper);
  text-shadow: 0 1px 3px #000;
  background: linear-gradient(#0000, #000c 40%);
}
/* Подпись — сосед области жестов: ловя касания, она глушила бы свайп и тап
   внизу экрана. PhotoSwipe включает их классом pswp__hide-on-close (0,2,0). */
.pswp .pswp__caption { pointer-events: none; }
.pswp__caption:empty { display: none; }

/* записка */
.note {
  max-width: 34rem;
  margin: 0 auto clamp(3rem, 8vw, 5rem);
  padding: 1.6rem 1.8rem;
  background: #f6eb9f;
  color: #2a2616;
  text-align: center;
  box-shadow: 0 14px 30px #0009;
  transform: rotate(-1.5deg);
}
.note .closing { margin: 0; font-size: 1.35rem; font-style: italic; line-height: 1.4; }
.note .age { margin: 1rem 0 0; font-size: 0.9rem; color: #6b6440; }
.badge {
  display: inline-block;
  margin-right: 0.3rem;
  padding: 0 0.35rem;
  border: 2px solid var(--red);
  color: var(--red);
  font: var(--label);
  font-size: 0.8rem;
}
.note .store-soon, .note .store { margin-top: 1.1rem; }

/* --- правовые документы --------------------------------------------------- */

.doc { padding: 0 var(--gutter); }
.legal { max-width: var(--measure); margin: 0 auto; padding: 2rem 0 1rem; }
.legal + .legal { margin-top: 3rem; border-top: 1px dashed var(--line); }
.legal h1 { font-size: clamp(1.8rem, 5vw, 2.3rem); margin: 0 0 0.25rem; color: var(--paper); }
.legal h2 { font-size: 1.4rem; margin: 2.5rem 0 0.75rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--line); color: var(--accent); }
.updated { color: var(--muted); font-size: 0.95rem; margin: 0; }
.other-lang { font-size: 0.95rem; margin: 0.25rem 0 1.5rem; }
.short { padding: 0.25rem 1rem; border-left: 3px solid var(--red); background: #ffffff0a; }
.legal li { margin: 0.4rem 0; }

/* 404 */
.text { max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.text h1 { color: var(--paper); margin-top: 2.5rem; }

/* --- подвал ---------------------------------------------------------------- */

.foot {
  margin-top: 3rem;
  padding: 1.5rem var(--gutter) 2rem;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 0.88rem;
  text-align: center;
}
.foot p { margin: 0.25rem 0; }
.foot a { color: var(--text); }
.home + .foot { margin-top: 0; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .prints li { transition: transform 0.25s; }
  .prints li:hover { transform: rotate(0) scale(1.03); z-index: 1; }
}

@media (max-width: 48rem) {
  .folder { transform: none; }
  .folder-body { grid-template-columns: minmax(0, 1fr); }
  .sheet { padding-top: 0; }
  .stamp { position: static; display: inline-block; margin: 1.4rem 0 0 0.75rem; vertical-align: middle; font-size: 0.85rem; padding: 0.25rem 0.6rem; }
  .prints { grid-template-columns: 1fr 1fr; gap: 1rem; }
}
@media (max-width: 30rem) {
  .prints { grid-template-columns: 1fr; }
  .fields { grid-template-columns: 1fr; }
  .fields dt { padding-bottom: 0; }
}