/* pomnim-skorbim.ru — mobile first. Keeps the legacy look: the cloud-sky header
   and section bands in the original blues (#5d81bd, #75a2ee, #a0bdf1), the
   candle. Breakpoints: 640 px (two columns), 960 px (home in three). */

:root {
	--sky-dark: #3a5c96;
	--sky: #5d81bd;
	--sky-mid: #75a2ee;
	--sky-light: #a0bdf1;
	--sky-pale: #eef3fc;
	--text: #1f2733;
	--muted: #586274;
	--link: #1f4f9a;
	--link-hover: #0d3270;
	--line: #d5deec;
	--accent: #b5462d;
	--serif: Georgia, "Times New Roman", serif;
	--sans: system-ui, -apple-system, "Segoe UI", Roboto, Verdana, Arial, sans-serif;
	--gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: #fff;
	color: var(--text);
	font: 1rem/1.55 var(--sans);
	overflow-wrap: break-word;
}

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

a { color: var(--link); }
a:hover, a:focus-visible { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--sky-mid); outline-offset: 2px; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: normal; line-height: 1.25; }
h1 { font-size: 1.75rem; margin: 0.5rem 0 1rem; color: var(--sky-dark); }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.15rem; }

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute; left: var(--gutter); top: -40px;
	background: #fff; padding: 0.4rem 0.8rem; z-index: 10;
}
.skip-link:focus { top: 8px; }

.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

/* Header: the legacy sky, the name as text. */
.site-header {
	background: var(--sky) url(/img/sky.jpg) center / cover no-repeat;
	color: #fff;
}
.site-header__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 14px var(--gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
}
.site-header__brand {
	color: #fff;
	text-decoration: none;
	text-shadow: 0 1px 3px rgba(20, 40, 80, 0.55);
}
.site-header__name {
	display: block;
	font: italic 2rem/1.1 Arial, Helvetica, sans-serif;
	letter-spacing: 0.02em;
}
.site-header__tagline { display: block; font-size: 0.95rem; }
.site-header__brand:hover, .site-header__brand:focus-visible { color: #fff; }

.quick-search { display: flex; gap: 6px; width: 100%; max-width: 360px; }
.quick-search input { flex: 1; min-width: 0; }

/* Navigation */
.site-nav {
	background: var(--sky-pale);
	border-bottom: 1px solid var(--line);
}
.site-nav__list {
	max-width: 1180px;
	margin: 0 auto;
	padding: 6px var(--gutter);
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
}
.site-nav a {
	display: inline-block;
	padding: 6px 10px;
	border-radius: 4px;
	text-decoration: none;
	min-height: 32px;
}
.site-nav a:hover { background: #fff; }
.site-nav a[aria-current="page"] { background: #fff; font-weight: 600; color: var(--sky-dark); }
.site-nav__add a { background: var(--sky); color: #fff; }
.site-nav__add a:hover, .site-nav__add a:focus-visible, .site-nav__add a[aria-current="page"] { background: var(--sky-dark); color: #fff; }
.site-nav__account { margin-left: auto; }

/* Content */
.content {
	max-width: 900px;
	margin: 0 auto;
	padding: 12px var(--gutter) 40px;
}
.content--wide { max-width: 1180px; }

.breadcrumbs ol {
	list-style: none;
	margin: 0 0 4px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	font-size: 0.875rem;
	color: var(--muted);
}
.breadcrumbs li + li::before { content: "›"; margin: 0 6px; }

/* Section heading in the legacy cloud band. */
.band {
	margin: 1.75rem 0 0.75rem;
	padding: 6px 10px;
	font: 1.15rem/1.3 var(--sans);
	color: #fff;
	background: linear-gradient(rgba(58, 92, 150, 0.82), rgba(58, 92, 150, 0.82)), var(--sky) url(/img/band.jpg) center / cover;
	border-radius: 3px;
}

.button, button, input[type="submit"] {
	display: inline-block;
	padding: 8px 16px;
	min-height: 40px;
	border: 1px solid var(--sky-dark);
	border-radius: 4px;
	background: var(--sky-dark);
	color: #fff;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
}
.button:hover, button:hover, .button:focus-visible, button:focus-visible { background: #2b4a7e; color: #fff; }
button.secondary { background: #fff; color: var(--sky-dark); }

input, select, textarea {
	font: inherit;
	color: var(--text);
	padding: 7px 9px;
	min-height: 40px;
	border: 1px solid #9aa9c2;
	border-radius: 4px;
	background: #fff;
	max-width: 100%;
}
textarea { width: 100%; min-height: 8rem; line-height: 1.5; }
input[type="checkbox"], input[type="radio"] { min-height: 0; width: 1.1rem; height: 1.1rem; vertical-align: -2px; }

.more { margin-top: 0.5rem; }

/* Lists of people */
.person-list, .anniversaries { list-style: none; margin: 0; padding: 0; }
.person-list li, .anniversaries li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.person-list__years, .person-list__place, .anniversaries__when { color: var(--muted); font-size: 0.9rem; }
/* «1950–2020» never splits after its dash: it stays beside the name or moves down whole. */
.person-list__years { white-space: nowrap; }
.anniversaries__when { display: block; }
.person-list__place { display: block; }

.columns { list-style: none; padding: 0; margin: 0; columns: 1; column-gap: 24px; }
.columns li { padding: 4px 0; break-inside: avoid; }

/* Home */
.home { display: grid; gap: 8px 32px; }
.home__actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }

.banner { text-align: center; margin: 2rem 0 0; }
.banner__label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 4px; }
.banner img { display: block; margin: 0 auto; max-width: 768px; width: 100%; }

/* Search */
.search-form { display: grid; gap: 12px; }
.field { display: grid; gap: 4px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .field legend { font-weight: 600; padding: 0; }
.field input:not([type="checkbox"]), .field select, .field textarea { width: 100%; }
.field--date { grid-template-columns: 4.5rem 1fr 5.5rem; gap: 6px; align-items: center; }
.field--date legend { grid-column: 1 / -1; margin-bottom: 4px; }
.form-actions { margin: 0.5rem 0 0; }
.hint { color: var(--muted); font-size: 0.875rem; margin: 0; }

.results h2 { margin-top: 1.5rem; }

/* Pagination */
.pagination { display: flex; flex-wrap: wrap; gap: 6px; margin: 1.25rem 0; align-items: center; }
.pagination a, .pagination span {
	display: inline-block;
	min-width: 40px;
	min-height: 40px;
	padding: 8px 10px;
	text-align: center;
	border: 1px solid var(--line);
	border-radius: 4px;
	text-decoration: none;
}
.pagination__current { background: var(--sky-dark); border-color: var(--sky-dark); color: #fff; }
.pagination__off { color: #9aa3b2; }
.pagination__gap { border: 0; }

/* Memorial page */
.memorial__head { display: grid; gap: 16px; align-items: start; }
/* Grid items would otherwise grow to fit their longest word («Хованское(центральное)»). */
.memorial__head > * { min-width: 0; }
.memorial__photo img { display: block; width: 240px; max-width: 100%; border: 1px solid var(--line); border-radius: 3px; }
.memorial__facts h1 { margin-top: 0; }
.memorial__facts dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.memorial__facts dt { color: var(--muted); }
.memorial__facts dd { margin: 0; }
.candle-note { display: flex; align-items: center; gap: 10px; color: var(--muted); margin: 1rem 0 0; }
.candle-note img, .candles__burning img { width: 11px; height: 78px; flex: none; }
.memorial__inscription {
	margin: 1.5rem 0;
	padding: 12px 18px;
	border-left: 4px solid var(--sky-light);
	background: var(--sky-pale);
	font: italic 1.1rem/1.6 var(--serif);
}
.memorial__inscription p { margin: 0.4rem 0; }
.memorial__obituary, .memorial__text { margin: 1.25rem 0; }
.memorial__actions { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }

.candles__burning { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px 24px; }
.candles__burning li { display: flex; align-items: center; gap: 8px; }

.tribute { border-bottom: 1px solid var(--line); padding: 12px 0; }
.tribute__meta { margin: 0 0 4px; color: var(--muted); font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.tribute__author { color: #4a4a85; font-weight: 600; }
.tribute__candle { width: 6px; height: 40px; }
.tribute__text p { margin: 0.35rem 0; }

/* Cemetery descriptions (stored HTML) */
.cemetery-notes .photopreview { display: inline-block; width: 150px; margin: 0 10px 12px 0; vertical-align: top; font-size: 0.8rem; }
.cemetery-notes .photopreview img { display: block; border: 1px solid var(--line); }
.cemetery-notes .clear { clear: both; }

.photo-view { margin: 0; }
.photo-view img { display: block; border: 1px solid var(--line); }
.photo-view figcaption { margin-top: 8px; }

/* Epitaph examples */
.epitaphs { list-style: none; padding: 0; margin: 0; columns: 1; column-gap: 32px; }
.epitaphs li { break-inside: avoid; padding: 10px 0; font-family: var(--serif); font-style: italic; }
.poet h3 { margin-bottom: 0.25rem; }
.poet h4 { margin: 0.5rem 0 0.25rem; font-size: 1rem; color: var(--muted); }
.verse { font-family: var(--serif); font-style: italic; }

/* Forms on the site */
.form { display: grid; gap: 14px; max-width: 640px; }
.form .error { color: var(--accent); font-weight: 600; margin: 0; }
.notice { padding: 10px 14px; border-radius: 4px; background: var(--sky-pale); border: 1px solid var(--line); }
.notice--error { background: #fdf0ec; border-color: #e8b9ab; }
.notice--ok { background: #eef8ee; border-color: #b6d8b6; }
.check { display: flex; gap: 8px; align-items: flex-start; font-weight: normal; }
.check input { margin-top: 4px; }
/* Honeypot field: not for people. */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.rules { padding-left: 1.4rem; }

/* Footer: the legacy sky strip. */
.site-footer {
	margin-top: 2rem;
	color: #fff;
	background: linear-gradient(rgba(58, 92, 150, 0.6), rgba(58, 92, 150, 0.6)), var(--sky-dark) url(/img/sky-footer.jpg) center / cover no-repeat;
}
.site-footer__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 16px var(--gutter);
	font-size: 0.9rem;
	text-shadow: 0 1px 2px rgba(20, 40, 80, 0.6);
}
.site-footer a { color: #fff; }
.site-footer p { margin: 0.3rem 0; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.site-footer__links a { display: inline-block; padding: 4px 0; }

@media (min-width: 640px) {
	h1 { font-size: 2rem; }
	.site-header__name { font-size: 2.4rem; }
	.quick-search { width: auto; }
	.search-form { grid-template-columns: 1fr 1fr; }
	.search-form .form-actions { grid-column: 1 / -1; }
	.memorial__head { grid-template-columns: auto 1fr; }
	.columns { columns: 2; }
	.epitaphs { columns: 2; }
	.cemetery-notes .photopreview { width: 160px; }
}

@media (min-width: 960px) {
	.home { grid-template-columns: 1fr 2fr 1fr; }
	.home__main { grid-column: 2; grid-row: 1; }
	.home__side:first-of-type { grid-column: 1; grid-row: 1; }
	.home .search-form { grid-template-columns: 1fr; }
	.columns { columns: 3; }
}

/* Admin panel */
.admin-nav ul { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.admin-nav a { display: inline-block; padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; min-height: 32px; }
.admin-nav a[aria-current="page"] { background: var(--sky-dark); border-color: var(--sky-dark); color: #fff; }
.patrol { border: 1px solid var(--line); border-left: 4px solid var(--sky-light); border-radius: 4px; padding: 10px 14px; margin: 0 0 12px; }
.patrol--flagged { border-left-color: var(--accent); }
.patrol__meta { margin: 0 0 6px; font-size: 0.9rem; color: var(--muted); }
.patrol__body p { margin: 0.3rem 0; }
.patrol__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.flags { color: var(--accent); font-weight: 600; }
.inline-form { display: inline; margin: 0; }
.form--inline { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; max-width: none; margin: 1rem 0; }
.form--inline .hint { flex-basis: 100%; }
input.short { width: 7rem; }
.diff { border-collapse: collapse; width: 100%; font-size: 0.9rem; margin: 6px 0; }
.diff th { text-align: left; vertical-align: top; width: 9rem; padding: 4px 8px 4px 0; color: var(--muted); font-weight: normal; }
.diff td { vertical-align: top; padding: 4px 8px; white-space: pre-wrap; }
.diff__old { background: #fdf0ec; }
.diff__new { background: #eef8ee; }
.admin-table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.admin-table th, .admin-table td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.admin-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; }
.admin-facts dt { color: var(--muted); }
.admin-facts dd { margin: 0; }
.revision h3 { font: 600 0.95rem/1.4 var(--sans); margin: 1.25rem 0 0.25rem; }
.edit-link { word-break: break-all; font-family: ui-monospace, Consolas, monospace; background: var(--sky-pale); padding: 8px 10px; border-radius: 4px; }