/* --- 1. ПАЛИТРА И БАЗА --- */
:root {
    background-color: #ECECEC; 
    --brown-bg: #4A3B32;       /* Кофейный */
    --beige-paper: #F5EADD;    /* Бумага */
    --grey-text: #333333;
    --black-text: #000000;
    --lime-accent: #CFA755;    /* Золото */
}

body {
    margin: 0; padding: 0;
    background-color: var(--background-color);
    color: var(--grey-text);
    font-family: 'Cormorant Infant', serif;
    font-size: 22px; 
    font-weight: 600;
    line-height: 1.5;
}

/* ГЛОБАЛЬНАЯ СТРОГОСТЬ: Убираем скругления везде */
* { border-radius: 0 !important; }

/* --- 2. ШАПКА --- */
header {
    background-color: var(--brown-bg);
    color: var(--beige-paper);
    padding-top: 10px; padding-bottom: 0;
    text-align: center;
    position: relative;
    border-bottom: 1px solid var(--lime-accent);
}

.header-content {
    max-width: 100%; 
    height: 140px; 
    display: flex; 
    align-items: center; 
    justify-content: center; /* Центрируем содержимое строго по центру */
    position: relative;
}

/* Логотип (Абсолютное позиционирование - не влияет на центр) */
.logo-link { 
    position: absolute; 
    left: 45px; 
    top: 50%; 
    transform: translateY(-50%); 
    z-index: 10;
}
.logo { max-height: 110px; width: auto; display: block; }

/* БЛОК НАЗВАНИЯ */
.title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 0; /* УБРАЛИ ОТСТУП. Теперь строго по центру */
}

/* Верхняя строка */
.title-top {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300; 
    font-size: 26px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--beige-paper);
    line-height: 1;
}

/* Золотая полоса */
.title-line {
    width: 100%; 
    height: 1px;
    background-color: var(--lime-accent);
    margin: 5px 0;
}

/* Нижняя строка */
.title-bottom {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400; 
    font-size: 52px;
    text-transform: uppercase;
    color: var(--beige-paper);
    line-height: 1;
    letter-spacing: 1px;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

/* Слоган */
.title-slogan {
    font-family: 'Marck Script; 
    font-size: 22px;
    color: var(--beige-paper); 
    margin-top: 5px;
    align-self: flex-end; /* Прижат к правому краю слов "МАШИНА ВРЕМЕНИ" */
    transform: translateX(440px); /* Слегка выпирает вправо для динамики */
    opacity: 0,9;
}

@media (max-width: 1000px) {
    .header-content { height: auto; padding: 20px 0; flex-direction: column; }
    .logo-link { position: static; transform: none; margin-bottom: 15px; }
    .title-bottom { font-size: 40px; }
    .title-slogan { align-self: center; transform: none; }
}

/* --- 3. МЕНЮ --- */
.subtitle {
    background-color: var(--lime-accent); padding: 10px 0; margin-top: 15px; border: none; width: 100%;
}
.menu-container {
    max-width: 1200px; margin: 0 auto;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 20px; flex-wrap: wrap; gap: 15px;
}
.menu-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.menu-links a {
    background-color: var(--brown-bg); color: var(--beige-paper); text-decoration: none;
    padding: 4px 15px; height: 34px; line-height: 34px;
    font-family: 'Oswald', sans-serif; font-size: 18px; font-weight: 500; 
    text-transform: uppercase; letter-spacing: 1px;
    border: 2px solid transparent; transition: 0.3s;
}
.menu-links a:hover { background-color: #3e312a; border-color: var(--beige-paper); }

.menu-search { display: flex; gap: 5px; align-items: center; }
.menu-search input {
    background: var(--beige-paper); border: 1px solid var(--brown-bg);
    padding: 0 10px; height: 38px;
    font-family: 'Cormorant Infant', serif; font-weight: 600; font-size: 20px; width: 200px;
}
.menu-search button {
    background: var(--brown-bg); color: var(--beige-paper); border: none;
    cursor: pointer; font-family: 'Oswald', sans-serif; text-transform: uppercase;
    height: 38px; padding: 0 15px; transition: 0.3s; font-size: 18px;
}
.menu-search button:hover { background-color: #3e312a; }

/* --- 4. КНОПКИ --- */
.btn {
    display: inline-block;
    background-color: var(--brown-bg); 
    color: var(--beige-paper);
    padding: 12px 30px; 
    font-size: 18px;
    border: 2px solid var(--brown-bg); 
    cursor: pointer;
    font-family: 'Oswald', sans-serif; 
    text-transform: uppercase; letter-spacing: 1px;
    text-decoration: none; 
    transition: 0.3s;
}
.btn:hover { 
    transform: scale(1.05); 
    background-color: var(--beige-paper); 
    color: var(--brown-bg); 
}

/* --- 5. КОНТЕНТ --- */
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }

h2, h3 {
    font-family: 'Oswald', sans-serif; color: var(--black-text);
    font-weight: 500; text-transform: uppercase;
}
h2 { font-size: 48px; text-align: center; margin-bottom: 20px; }

.section-title-left {
    font-family: 'Oswald', sans-serif; font-size: 48px; text-align: left; 
    margin-bottom: 20px; margin-top: 32px;
}
.history-title {
    font-family: 'Oswald', sans-serif; font-size: 48px; text-align: center; 
    margin-bottom: 5px; margin-top: 0;
}
.history-subtitle {
    font-family: 'Cormorant Infant', serif; font-size: 28px; font-weight: 600;
    text-align: center; margin-top: 0; margin-bottom: 30px; color: var(--brown-bg);
}

/* Архивная карточка */
/* Архивная карточка (Текстовые блоки) */
.paper-box {
    background-color: var(--beige-paper); 
    border: 1px solid #DBC9B6;
    padding: 30px;
    margin-bottom: 40px; 
    
    color: var(--black-text);
    
    /* НОВЫЙ ШРИФТ */
    font-family: 'PT Serif', serif; 
    font-size: 21px; /* Чуть увеличили и сделали плотнее */
    line-height: 1.6; /* Увеличили интервал для удобного чтения */
    
    box-shadow: 0 10px 25px rgba(74, 59, 50, 0.15); 
}

/* Также применим этот шрифт к полям ввода внутри этих блоков (например, редактирование текста) */
.paper-box textarea, .paper-box input {
    font-family: 'PT Serif', serif;
    font-size: 21px;
}

/* --- 6. КАТАЛОГ И КАРТОЧКИ --- */
.catalog-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px; 
    margin-bottom: 40px;
}

.catalog-item { 
    background-color: var(--beige-paper); 
    position: relative; 
    height: 505px; 
    padding: 20px; 
    box-sizing: border-box;
    
    /* СКОШЕННЫЙ УГОЛ */
    clip-path: polygon(
        0 0, 
        calc(100% - 30px) 0, 
        100% 30px, 
        100% 100%, 
        0 100%
    );
    
    /* Убираем внешний border, чтобы не было глюков */
    border: none; 
    
    /* 1. ПАСПАРТУ (Внутренняя рамка) */
    /* inset 0 0 0 1px - рисует линию толщиной 1px ВНУТРИ карточки. 
       Она идеально повторяет срез угла. */
    box-shadow: inset 0 0 0 1px rgba(74, 59, 50, 0.3);
    
    /* 2. НАСЫЩЕННАЯ ТЕНЬ (Снаружи) */
    filter: drop-shadow(0 15px 15px rgba(40, 30, 20, 0.4));
    
    transition: 0.3s;
    text-align: left;
}

.catalog-item:hover { 
    transform: translateY(-5px);
    background-color: #fffaf5; 
    
    /* При наведении тень становится глубже и темнее */
    filter: drop-shadow(0 25px 25px rgba(40, 30, 20, 0.5));
}

/* ИЗОБРАЖЕНИЕ */
.catalog-item img { 
    width: 100%; 
    height: 240px; 
    object-fit: cover; 
    filter: sepia(0.15) contrast(1.1); 
    /* Тонкая рамка вокруг самого фото */
    border: 1px solid rgba(74, 59, 50, 0.2); 
    margin-bottom: 15px;
    display: block;
    background-color: #eee;
}

/* ЗАГОЛОВОК */
.catalog-item b {
    font-family: 'Oswald', sans-serif; 
    font-size: 20px; 
    font-weight: 500; 
    text-transform: uppercase; 
    display: block; 
    line-height: 1.2;
    color: var(--black-text);
    margin-bottom: 10px;
    
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ОПИСАНИЕ */
.catalog-item p {
    font-family: 'Cormorant Infant', serif; 
    font-size: 18px; 
    font-weight: 600;
    color: var(--grey-text); 
    margin: 0; 
    line-height: 1.35;
    
    /* Обрезка до 3 строк */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ИНВЕНТАРНЫЙ НОМЕР */
.inv-text {
    position: absolute;
    bottom: 75px; /* Привязан к кнопке (35px высота кнопки + 20px отступ + 20px гэп) */
    left: 20px;
    
    font-family: 'Oswald', sans-serif;
    font-size: 18px; /* Увеличенный шрифт */
    color: var(--lime-accent); 
    letter-spacing: 1px;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

/* КНОПКА "ИЗУЧИТЬ" */
.study-btn {
    position: absolute;
    bottom: 20px; 
    left: 20px;   
    
    background-color: transparent;
    color: var(--brown-bg);
    border: 1px solid var(--brown-bg); 
    padding: 8px 25px;
    
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    transition: 0.3s;
}

.study-btn:hover {
    background-color: var(--brown-bg);
    color: var(--beige-paper);
}

@media (max-width: 900px) {
    .catalog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .catalog-grid { grid-template-columns: 1fr; }
    .catalog-item { height: auto; padding-bottom: 90px; }
}
/* --- 7. РАЗНОЕ --- */
.full-width-banner-img { width: 100%; height: auto; display: block; border-bottom: 5px solid var(--brown-bg); margin: 0; }

.custom-divider {
    display: flex; align-items: center; justify-content: center;
    width: 100%; margin: 50px 0; height: 20px;
}
.custom-divider::before, .custom-divider::after {
    content: ""; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, var(--brown-bg));
    margin: 0 15px; opacity: 0.5;
}
.custom-divider::after { background: linear-gradient(90deg, var(--brown-bg), transparent); }
.custom-divider span {
    color: var(--brown-bg); font-size: 24px; position: relative; top: 3px; padding: 0 10px;
}

/* РУЛЕТКА */
.roulette-container {
    text-align: center;
    margin: 60px auto;
    max-width: 600px;
    padding: 40px;
    background: var(--beige-paper);
    border: 2px solid var(--brown-bg);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
#rouletteBtn {
    font-size: 28px;
    padding: 20px 50px;
    min-width: 350px;
    background: var(--brown-bg);
    color: var(--beige-paper);
    border: none;
    cursor: pointer;
    margin-top: 20px;
    display: inline-block;
}
#rouletteBtn:hover {
    transform: scale(1.02);
    box-shadow: 0 0 15px var(--lime-accent);
}
/* Стиль для активной кнопки (после выбора) */
.active-link {
    background-color: var(--lime-accent) !important;
    color: var(--black-text) !important;
    border: 2px solid var(--black-text) !important;
}


/* --- 8. ПОДВАЛ --- */
footer {
    background-color: var(--brown-bg); color: var(--beige-paper); height: 80px; padding: 0;
    font-family: 'Oswald', sans-serif; letter-spacing: 1px;
}
.footer-content { max-width: 1200px; margin: 0 auto; padding: 0 20px; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
.footer-text { text-align: center; font-size: 14px; line-height: 1.4; }
.staff-login-link, .policy-link {
    position: absolute; color: rgba(255,255,255,0.4); text-decoration: none; font-size: 13px;
    border: 1px solid rgba(255,255,255,0.2); padding: 5px 10px; transition: 0.3s;
}
.staff-login-link { left: 20px; }
.policy-link { right: 20px; }
.staff-login-link:hover, .policy-link:hover { color: white; border-color: white; }

/* ПОЛЯ ВВОДА */
input[type="text"], textarea, select {
    border: 1px solid #ccc; padding: 10px; width: 100%; box-sizing: border-box;
    font-family: 'Cormorant Infant', serif; font-size: 18px;
}
.transparent-input {
    background: transparent !important; border: none !important;
    border-bottom: 2px dashed var(--brown-bg) !important; padding: 10px;
}

/* КНОПКА ИНСТРУКЦИИ (Контрастная) */
.instruction-btn {
    position: absolute; /* Жестко крепим */
    left: 20px;         /* Слева */
    
    background-color: var(--beige-paper); /* Бежевый фон */
    color: var(--brown-bg);       /* Коричневый текст */
    border: 1px solid var(--beige-paper);
    
    padding: 6px 15px;
    font-size: 13px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.3s;
    
    /* Убедимся, что углы прямые */
    border-radius: 0 !important; 
}

.instruction-btn:hover {
    background-color: white; /* При наведении становится еще ярче */
    color: var(--brown-bg);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
/* --- АДАПТИВНАЯ СЕТКА КАТАЛОГА --- */

/* 1. Базовое состояние (Большие экраны) */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 колонки */
    gap: 20px; /* Отступ между карточками */
    width: 100%;
}

/* 2. Средние экраны (Ноутбуки, Планшеты) - меньше 1250px */
@media (max-width: 1250px) {
    .catalog-grid {
        grid-template-columns: repeat(3, 1fr); /* Перестраиваем в 3 колонки */
    }

    /* ТОЛЬКО НА ГЛАВНОЙ: Скрываем 4-й элемент, чтобы не висел одиноко */
    .home-latest .catalog-item:nth-child(4) {
        display: none;
    }
}

/* 3. Мобильные телефоны - меньше 850px */
@media (max-width: 850px) {
    .catalog-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки */
    }

    /* На телефонах возвращаем 4-й элемент, чтобы было 2 ряда по 2 */
    .home-latest .catalog-item:nth-child(4) {
        display: block;
    }
}

/* 4. Совсем узкие телефоны - меньше 500px */
@media (max-width: 500px) {
    .catalog-grid {
        grid-template-columns: 1fr; /* 1 колонка во всю ширину */
    }
}
.login-screen { background: var(--brown-bg); height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.login-form { background: var(--beige-paper); padding: 40px; display: flex; flex-direction: column; gap: 15px; width: 300px; }