html {scroll-behavior: smooth;}

/*Шрифты*/
@font-face {
    font-family: 'SpaceGrotesk[wght]';
    src: url('fonts/SpaceGrotesk[wght].woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TitilliumWeb-Regular';
    src: url('fonts/TitilliumWeb-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*Переменные */
:root {
    --bg-body: #FFFAFA;
    --text-main: #333333;
    --text-accent: #d97706;
    --post-card: #EBE7DF;
}

/*1.Основные*/
body {
    margin: 0;
    padding: 20px;
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Добавьте это, чтобы body занимал всю ширину */
    width: 100%;
    box-sizing: border-box; /* Чтобы padding не раздувал ширину */

    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: 'TitilliumWeb-Regular', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.main-header {
    width: 100%;
    max-width: 600px;
    margin: 30px 0;
    text-align: center;
    display: flex; flex-direction: column;
}

.site-title {
    font-family: 'SpaceGrotesk[wght]', sans-serif;
    font-size: 3.5rem;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.85;
    margin: 0 0 10px 0;
}

.site-title span {color: var(--text-accent)}
.site-title a {text-decoration: none; color: inherit;}
.site-title a:hover {color: inherit; text-decoration: none;}

.tag-cloud {width: 100%; max-width: 600px; margin: 10px 0; text-align: center;}
.tag-row-one {
    font-family: 'SpaceGrotesk[wght]', sans-serif;
    font-size: 1.2rem;
    text-transform: lowercase;
}

.tag-row-one a {text-decoration: none; color: inherit;}
.tag-row-one a:hover {color: var(--text-accent); text-decoration: none;}

.header-controls {
    position: fixed; /* Привязка к окну браузера */
    top: 25px;
    right: 25px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    z-index: 9999;
}

/* Стили для иконки Telegram */
.social-links svg {
    width: 24px;
    height: 24px;
    fill: var(--text-main);
    transition: fill 0.2s ease;
}

.social-links a:hover svg {
    fill: var(--text-accent);
}

/* Стили для переключателя языков */
.lang-switch {
    font-family: 'SpaceGrotesk[wght]', sans-serif;
    font-size: 0.85rem;
    font-weight: bold;
}

.lang-link {
    text-decoration: none;
    color: var(--text-main);
    opacity: 0.5;
    transition: opacity 0.2s;
}

.lang-link:hover, .lang-link.active {
    opacity: 1;
    color: var(--text-accent);
}

.lang-divider {
    margin: 0 2px;
    color: var(--post-card);
}

/* Адаптивность: на мобилках, чтобы не перекрывало заголовок */
@media (max-width: 768px) {
    .header-controls {
        position: static; /* Возвращаем в общий поток */
        flex-direction: row; /* Выстраиваем в ряд */
        justify-content: center;
        margin-bottom: 20px;
        width: 100%;
    }
}

.main-text {
font-family: 'TitilliumWeb-Regular', sans-serif;
width: 100%;
max-width: 600px;
height: auto;
margin-bottom: 30px;
margin-top: 25px;
line-height: 1.8;
}

.main-text a {text-decoration: none; color: #92400e;}
.main-text a:hover {color: var(--text-accent); text-decoration: none;}

.tag-row-two {
font-family: 'SpaceGrotesk[wght]', sans-serif;
font-size: 1.1rem;
font-weight: 500;
text-transform: lowercase;
text-align: left;
}

.tag-row-two a {text-decoration: none; color: inherit;}
.tag-row-two a:hover {color: var(--text-accent); text-decoration: none;}

/* ЛЕНТА И КАРТОЧКИ */
.stream-container {width: 100%; max-width: 600px;}
.stream-header {margin-top: 60px; margin-bottom: 5px;}
.updated-badge {width: 60px; opacity: 0.8;}

/* Базовая карточка */
.post-card {
    display: flex;
    position: relative;
    margin-bottom: 25px;
    min-height: 90px;
    transition: transform 0.3s ease;
}

/* Подложка */
.post-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--post-card);
    z-index: -1;
    transition: box-shadow 0.3s ease;
}

.post-card:hover {
    transform: translateY(-4px);
}

/* Контент внутри карточки */
.post-content {
    padding: 10px 17px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.stream-footer {
    width: 100%;
    max-width: 600px;
    margin-top: 20px;
    padding: 20px 0;
    text-align: left; /* Или center, если хочешь симметрии */
}

.view-all-link {
    font-family: 'SpaceGrotesk[wght]', sans-serif;
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--text-main);
    opacity: 0.5;
    transition: opacity 0.2s;
}

.view-all-link:hover {
    opacity: 1;
    color: var(--text-accent);
}

/* МЕТА-ДАННЫЕ И ТЕКСТ */
.post-meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
    margin-top: 5px;
    line-height: 1;
    font-family: 'SpaceGrotesk[wght]', sans-serif;
    font-size: 0.65rem;
    font-weight: bold;
}

.post-date {
    color: var(--text-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.post-tags {
    display: flex;
    gap: 8px;
}

.tag {
    text-decoration: none;
    color: var(--text-main);
    opacity: 0.6;
    text-transform: uppercase;
    transition: opacity 0.2s, color 0.2s;
}

.tag:hover {
    opacity: 1;
    color: var(--text-accent);
}

.tag::before {
    content: "#";
    color: var(--text-accent);
    margin-right: 1px;
}

.post-text {
    font-size: 0.95rem;
    line-height: 1.4;
    margin: 0;
}

/*Футер*/
footer {width: 100%; max-width: 600px;}
.main-nav {
margin-top: 60px;
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
font-family: 'SpaceGrotesk[wght]', sans-serif;
font-size: 1rem;
font-weight: 500;
}

.main-nav a {text-decoration: none; color: inherit;}
.main-nav a:hover {color: var(--text-accent); text-decoration: none;}

/* СТИЛИ ДЛЯ ГАЛЕРЕИ FERNPAD (Новое)
   ========================================= */

.project-screenshots {
    width: 100%;
    max-width: 600px; /* Выравниваем по ширине текстового блока */
    display: grid;
    /* Сетка: два столбца одинаковой ширины. На мобильных встанут друг под друга */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px; /* Отступ между картинками */
    margin: 30px 0; /* Отступы сверху и снизу от блока */
}

.screenshot-item {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Чтобы картинка не вылезала за пределы */
    background-color: #fff; /* Фон карточки, если картинка не на весь размер */
    border: 1px solid var(--post-card); /* Тонкая рамка в цвет твоих постов */
    border-radius: 4px; /* Легкое закругление */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Эффект при наведении на всю карточку */
.screenshot-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.screenshot-item a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Обновляем, чтобы стили применялись и к видео */
.screenshot-item img,
.screenshot-item video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
    display: block;
}

/* Если хотите, чтобы при клике видео не "проваливалось",
   можно убрать cursor: zoom-in, так как видео обычно не открывают как картинку */
.screenshot-item video {
    cursor: default;
}

/* Стили для FAQ */
.faq-item {
    margin-bottom: 15px;
    border-bottom: 1px solid var(--post-card); /* Тонкая линия разделения */
    padding-bottom: 10px;
    cursor: pointer;
}

.faq-item summary {
    font-family: 'SpaceGrotesk[wght]', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    list-style: none; /* Убираем стандартную стрелку */
    padding: 5px 0;
    color: var(--text-main);
    transition: color 0.2s ease;
}

.faq-item summary:hover {
    color: var(--text-accent);
}

/* Кастомный маркер-плюсик */
.faq-item summary::before {
    content: "+";
    color: var(--text-accent);
    margin-right: 12px;
    display: inline-block;
    width: 15px;
    transition: transform 0.3s ease;
}

/* Поворачиваем плюсик, превращая его в крестик при открытии */
.faq-item[open] summary::before {
    transform: rotate(45deg);
}

.faq-answer {
    padding: 10px 0 10px 27px;
    line-height: 1.6;
    font-size: 0.95rem;
    color: #555; /* Чуть мягче основного текста */
}

/* Убираем стандартную стрелку в Safari/Chrome */
.faq-item summary::-webkit-details-marker {
    display: none;
}