/* ================== БАЗОВЫЕ ПЕРЕМЕННЫЕ ================== */
:root {
--bg: #f5efe6;
--bg-alt: #efe6d9;
--text: #2f2b27;
--accent: #5b4c3a;
--line: #d8cbb9;
--record-alt: #f9f4ed;
--record-alt2: #f2eadf;
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
--transition: .25s ease;
--focus: #c27b2f;
}

/* Сброс / базовое */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.5;
font-size: 16px;
}
img { max-width: 100%; height: auto; display:block; }
a { color: #644629; text-decoration:none; }
a:hover, a:focus { text-decoration:underline; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--focus); outline-offset:2px; }
button { font-family: inherit; }

h1,h2,h3 { font-weight:600; line-height:1.2; margin:1.2em 0 .5em; }
h1 { font-size:2rem; margin-top:0; }
h2 { font-size:1.4rem; }
p { margin:0 0 1em; }

/* ================== ШАПКА / HERO ================== */
.site-header {
position: relative;
background: #3a342f;
color:#fff;
overflow:hidden;
}
.hero {
position: relative;
min-height:240px;
background:
linear-gradient(rgba(0,0,0,.40), rgba(0,0,0,.40)),
#3a342f url('header-bg.jpg') center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding: 40px 15px 50px;
}
.hero-overlay {
background: rgba(0,0,0,0.35);
padding: 25px 30px;
border-radius:6px;
max-width:860px;
}
.site-title {
margin:0 0 .35em;
font-size:2.2rem;
letter-spacing:.5px;
color:#fff;
}
.site-subtitle {
margin:0;
font-size:0.95rem;
color:#f2e8dd;
letter-spacing:.3px;
}

/* ================== LAYOUT ================== */
.layout {
display: flex;
align-items: stretch;
width:100%;
max-width:1400px;
margin:0 auto;
padding:0;
position:relative;
}
.side-nav {
width:250px;
background: var(--bg-alt);
border-right:1px solid var(--line);
padding:16px 18px 40px;
font-size:0.9rem;
}
.side-nav .nav-list {
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:4px;
}
.side-nav a {
display:block;
padding:6px 10px;
border-radius:4px;
color: var(--accent);
transition: background var(--transition), color var(--transition);
font-weight:500;
}
.side-nav a:hover {
background:#e0d6c9;
text-decoration:none;
}
.side-nav a.active {
background:#cdbca6;
color:#2e2419;
font-weight:600;
}

.content {
flex:1;
padding:35px 40px 60px;
min-width:0;
}

/* ================== ТАБЛИЦА ================== */
.records-table {
width:100%;
border-collapse:collapse;
background:#f7f1e7;
border:1px solid var(--line);
font-size:0.9rem;
margin:1.2em 0 1em;
}
.records-table caption {
caption-side: top;
text-align:left;
font-weight:600;
font-size:0.85rem;
padding:8px 8px 4px;
color:var(--accent);
}
.records-table th,
.records-table td {
padding:6px 8px;
border:1px solid #d8cbb9;
vertical-align:top;
}
.records-table thead th {
background:#e3d7c7;
font-size:0.7rem;
letter-spacing:.5px;
text-transform:uppercase;
font-weight:600;
}
.records-table tbody tr:nth-child(odd) { background: var(--record-alt); }
.records-table tbody tr:nth-child(even) { background: var(--record-alt2); }
.records-table td:nth-child(1) {
text-align:right;
font-family: var(--mono);
font-size:0.7rem;
width:36px;
white-space:nowrap;
opacity:.75;
}
.records-table td:nth-child(3),
.records-table td:nth-child(4) {
font-family: var(--mono);
font-size:0.7rem;
white-space:nowrap;
}

.record-legend {
font-size:0.75rem;
color:#5d5145;
background:#efe6da;
border:1px solid var(--line);
padding:8px 10px;
border-radius:4px;
}

/* ================== БУРГЕР-МЕНЮ ================== */
.menu-toggle {
position:absolute;
top:12px;
left:12px;
z-index:1200;
background:#2f2b27;
color:#fff;
border:0;
padding:10px 12px;
cursor:pointer;
border-radius:4px;
display:none;
font-size:0.8rem;
line-height:1;
font-weight:600;
}
.menu-toggle .bars {
display:inline-block;
width:18px;
height:12px;
position:relative;
margin-right:6px;
}
.menu-toggle .bars span {
position:absolute;
left:0;
width:100%;
height:2px;
background:#fff;
transition:.25s;
}
.menu-toggle .bars span:nth-child(1){ top:0; }
.menu-toggle .bars span:nth-child(2){ top:5px; }
.menu-toggle .bars span:nth-child(3){ top:10px; }
.menu-toggle[aria-expanded="true"] .bars span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] .bars span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

.nav-backdrop {
position:fixed;
inset:0;
background:rgba(0,0,0,.45);
z-index:1000;
opacity:0;
pointer-events:none;
transition:.25s;
}
body.nav-open .nav-backdrop {
opacity:1;
pointer-events:auto;
}
body.nav-open { overscroll-behavior:none; }

/* ================== АДАПТИВ ================== */

/* Ширина до 1100px — немного уменьшаем отступы */
@media (max-width:1100px) {
.content { padding:30px 30px 50px; }
}

/* Бургер и выезжающее меню */
@media (max-width:900px) {
.menu-toggle { display:flex; align-items:center; }
.layout { position:relative; }
.side-nav {
position:fixed;
top:0; left:0;
height:100vh;
width:260px;
max-width:80%;
transform:translateX(-100%);
transition:transform .3s ease;
z-index:1100;
display:block;
overflow-y:auto;
padding:20px 18px 60px;
}
body.nav-open .side-nav { transform:translateX(0); }
.content { padding:25px 20px 50px; }
.hero { min-height:200px; padding:40px 15px; }
.hero-overlay { padding:22px 22px; }
.site-title { font-size:1.9rem; }
}

/* Таблица -> карточки */
@media (max-width:680px) {
.records-table { border:0; background:transparent; }
.records-table thead { display:none; }
.records-table caption { font-size:0.9rem; padding-left:0; }
.records-table tbody tr {
display:block;
background:#fff;
margin:0 0 10px;
border:1px solid var(--line);
border-radius:4px;
padding:6px 8px;
}
.records-table tbody tr:nth-child(odd),
.records-table tbody tr:nth-child(even) { background:#fff; }
.records-table td {
display:block;
border:0;
border-bottom:1px dashed #e0d5c3;
padding:4px 4px 8px;
font-size:0.8rem;
}
.records-table td:last-child { border-bottom:0; }
.records-table td::before {
content: attr(data-label);
display:block;
font-weight:600;
font-size:0.65rem;
text-transform:uppercase;
letter-spacing:.5px;
color:#5b4c3a;
margin-bottom:2px;
}
.records-table td[data-label="№"] {
font-family: var(--mono);
font-size:0.7rem;
opacity:.8;
text-align:left;
}
}

/* Очень узкие экраны */
@media (max-width:380px) {
.site-title { font-size:1.55rem; }
.site-subtitle { font-size:0.78rem; }
.record-legend { font-size:0.7rem; }
}

/* Печать — упрощаем */
@media print {
.menu-toggle,
.nav-backdrop,
.side-nav { display:none !important; }
.content { padding:0; }
.records-table { font-size:10pt; }
a { text-decoration:none; color:#000; }
}

/* ---------- FOOTER (базовая мобильная / узкая версия: flex) ---------- */
.site-footer {
background:#e9e0d4;
border-top:1px solid #d8cbb9;
padding:18px 16px;
font-size:0.8rem;
color:#3a3027;
}
.site-footer a { color:#644629; }
.site-footer a:hover { text-decoration:underline; }

.footer-inner {
max-width:1400px;
margin:0 auto;
display:flex;
flex-wrap:wrap;
gap:18px 40px;
align-items:flex-start;
justify-content:space-between;
}

.footer-col { min-width:180px; }

.footer-label {
font-weight:600;
letter-spacing:.5px;
text-transform:uppercase;
font-size:0.65rem;
color:#5b4c3a;
display:inline-block;
margin-bottom:2px;
}

/* Узкие экраны (как было) */
@media (max-width:740px) {
.footer-inner {
flex-direction:column;
align-items:center;
text-align:center;
}
.footer-col { min-width:unset; }
}

/* ---------- ВАРИАНТ 2: Desktop Grid с «пустой» колонкой под место side-nav ----------*/
@media (min-width:901px) {
.footer-inner {
display:grid;
grid-template-columns:250px repeat(3, minmax(220px,1fr));
column-gap:40px;
row-gap:18px;
padding:0 40px;
}
.footer-inner::before {
content:"";
grid-column:1;
/* Убрали grid-row */
}
/* Сбрасываем min-width, чтобы grid сам распределял */
.footer-col { min-width:0; }
}

/* (опционально) Если хотите равномерное заполнение только до нужного числа колонок,
можно ограничить ширину всей сетки ещё сильнее или задать max-width отдельным колонкам */

/* Конец footer */