/* Единая таблица стилей сайта.
   Раньше это были шесть почти одинаковых файлов, по одному на страницу.

   Блок «Карточки» ниже перенесён из исходного style.css дословно —
   в нём не изменено ни одного свойства. */

/* ---------- Шрифт ----------
   Fira Code был указан в стилях с самого начала, но никогда не загружался:
   ни @font-face, ни ссылки на шрифт в проекте не было. Браузер молча
   подставлял системный моноширинный (DejaVu Sans Mono). У латиницы он ещё
   похож на программистский шрифт, а кириллица в нём выглядит обычным
   гротеском — из-за этого заголовки карточек и потеряли характер.

   Теперь шрифт лежит в app/static/fonts (SIL OFL 1.1, см. CREDITS.md рядом).
   Разложен на подмножества: браузер тянет кириллицу и латиницу по отдельности,
   только то, что реально встретилось на странице.
   font-display: swap — текст виден сразу, не дожидаясь загрузки. */

@font-face {
    font-family: "Fira Code";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/fira-code-cyrillic-400-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Fira Code";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/fira-code-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Fira Code";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/fira-code-cyrillic-700-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Fira Code";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/fira-code-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Roboto — для страниц «О нас» и «Контакты». Он тоже был указан
   в стилях, но не загружался: там подставлялся системный гротеск. */

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/roboto-cyrillic-400-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/roboto-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/roboto-cyrillic-700-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/roboto-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Caveat — рукописный, для заголовков карточек на главной. */

@font-face {
    font-family: "Caveat";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/caveat-cyrillic-700-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Caveat";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/caveat-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Страницы с карточками. Пока такая одна — главная. */
body,
body * {
    font-family: "Fira Code", monospace;
}

body.page-cards {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* ---------- Шапка и бургер-меню ---------- */

.header {
    font-style: oblique;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    /* Полностью прозрачная: фон страницы виден насквозь. */
    background-color: transparent;
    color: #293955;
    padding: 20px 0;
    text-align: center;
    z-index: 10;
}

.header__title {
    font-size: 2em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.burger-menu {
    position: absolute;
    top: 20px;
    left: 10px;
    z-index: 10;
}

.burger-icon {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Это <button>, а не <div>: меню открывается и с клавиатуры. */
    padding: 0;
    border: 0;
    background: transparent;
}

.burger-icon span {
    width: 50px;
    height: 7px;
    background-color: black;
    transition: all 0.3s ease;
}

/* Скрываем меню по умолчанию */
.menu {
    display: none;
    position: absolute;
    top: 50px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 20px;
    border-radius: 10px;
}

.menu.active {
    display: block;
}

.menu ul {
    list-style: none;
    padding: 0;
}

.menu ul li {
    margin: 15px 0;
}

.menu ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 25px;
    white-space: nowrap;
}

.menu ul li a[aria-current="page"] {
    font-weight: 700;
    text-decoration: underline;
}

:focus-visible {
    outline: 3px solid #293955;
    outline-offset: 2px;
}

/* ---------- Фон страниц с карточками ---------- */

.wrapper {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background: linear-gradient(
            to bottom right,
            rgba(183, 168, 200, 0.77),
            rgba(196, 209, 8, 0.616),
            rgb(255, 255, 255),
            rgba(75, 209, 8, 0.62),
            rgba(255, 132, 0, 0.692)
    );
    background-attachment: fixed;
    background-clip: border-box;
    background-blend-mode: multiply;
    transition: background-color 0.5s;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* ---------- Фон главной: слайдшоу ----------
   Картинки книжные (1024x1280), экран — альбомный. Кадрируем по ширине
   (background-size: cover): композиция у всех горизонтальная — стол на фоне
   панорамного окна, — поэтому обрезаются потолок и пол, а смысловой центр
   остаётся.

   Слой фиксированный и лежит под всем содержимым, включая шапку и подвал:
   они полупрозрачные и теперь просвечивают фотографию. Под слоем — светлая
   нейтральная подложка: её видно, пока грузится первый кадр, и она же
   остаётся, если папка с фонами окажется пустой. */

body.page-home {
    background: linear-gradient(160deg, #eef1f6, #dfe4ee 55%, #cfd6e4);
}

.page-home .wrapper {
    /* Радужный градиент здесь больше не нужен — под карточками фотография. */
    background: none;
}

.bg-slideshow {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.bg-slide {
    position: absolute;
    inset: 0;
    background-position: center 45%;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transition: opacity 1.6s ease-in-out;
}

.bg-slide.is-visible {
    opacity: 1;
}

/* Нейтральная светлая вуаль поверх фотографий. Она сглаживает разницу между
   семью очень разными кадрами и держит читаемость: карточки собраны на
   backdrop-filter без собственного фона, то есть показывают картинку
   насквозь, и на тёмных кадрах тёмный текст пропадал. */
.bg-slideshow::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            to bottom,
            rgba(240, 242, 247, 0.66),
            rgba(240, 242, 247, 0.48) 45%,
            rgba(240, 242, 247, 0.70)
    );
}

/* ---------- Карточки ----------
   Свойства перенесены из исходного style.css дословно: стеклянная карточка
   280x400 с backdrop-filter. Второй вариант карточки был у страниц разделов;
   вместе с ними он удалён, найти его можно в истории git. */

.img {
    height: 200px;
    width: auto;
    position: relative;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

.img:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 0px;
    top: 0;
    left: 0;
    z-index: 11;
    transition: .4s;
    background-color: rgba(0, 0, 0, 0.15);
}

/* Печать в левом нижнем углу фотографии — вместо прежней красной плашки.
   Рисунок (зубчатый край, кольца и лента) лежит в card-stamp.svg, надпись
   идёт текстом из --card-label: так она остаётся настоящим текстом,
   а не частью картинки, и одного файла хватает на все карточки.

   Белого в рисунке нет: середина, фон колец и лента прозрачны, сквозь них
   видно фотографию. Кольца вырезаны там, где проходит лента, — иначе линии
   шли бы прямо через надпись.

   Размер привязан к фотографии: её ширина — min(46.5vw, 300px), печать
   занимает примерно шестую часть от неё. Кегль надписи — доля от размера
   печати, поэтому лента заполняется одинаково на любом экране. */
.img:after {
    --stamp: min(8.5vw, 52px);

    content: var(--card-label, none);
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 11;

    width: var(--stamp);
    height: var(--stamp);
    display: flex;
    align-items: center;
    justify-content: center;

    background: url("../img/card-stamp.svg") center / 100% 100% no-repeat;
    color: #cf2b2b;
    font-size: calc(var(--stamp) * 0.145);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;

    /* Тонкая тёмная обводка. Печать прозрачная и лежит прямо на фотографии,
       а красный на светлом или тёплом кадре теряется: на деревянном столе
       контраст падал примерно до 1,3:1. Обводка ничего не заливает —
       только очерчивает линии и буквы. */
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9))
    drop-shadow(0 0 2px rgba(0, 0, 0, 0.55));
}

.img img {
    height: 200px;
    width: auto;
}

/* Рамка поверх фотографии: двойная линия с осыпающимися углами, квадратики
   во внутренних углах и точечная россыпь. Нарисована в SVG и лежит файлом,
   а не в data-адресе: 8 КБ в тексте стилей утяжелили бы каждый их запрос.

   Пропорции фотографий у карточек всегда 3:2, как и viewBox рамки, поэтому
   растягивание на 100% её не искажает.

   z-index не задан намеренно: рамка лежит над фотографией, но под метками
   «New» и «Проект» и под тёмной шторкой — их порядок решает разметка. */
.img__frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: url("../img/card-frame.svg") center / 100% 100% no-repeat;
}

.content {
    padding: 20px;
    width: 100%;
}

.content h1 {
    color: #333;
    line-height: 80px;
}

.content span {
    display: inline-block;
    text-align: Left;
    width: 100%;
    line-height: 30px;
    font-family: "Fira Code", monospace;
}

.content a {
    text-align: center;
    display: inline-block;
    right: 10px;
    bottom: 10px;
    position: absolute;
    text-decoration: none;
    color: red;
}

/* Главная: стеклянная карточка из style.css */

.page-home .card {
    position: relative;
    width: 280px;
    height: 400px;
    box-shadow: 30px 30px 50px rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    margin: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    transform-style: preserve-3d;
    transform: perspective(800px)
}

/* Рукописный заголовок в шапке. text-transform и наклон сняты: прописными
   рукописный шрифт читается как набор букв, а не как почерк. */
.page-home .header__title,
.page-stub .header__title {
    font-family: "Caveat", cursive;
    font-weight: 700;
    font-size: 3.1em;
    font-style: normal;
    text-transform: none;
    line-height: 1.1;
    margin-bottom: 4px;
}

/* Рукописный заголовок карточки. Caveat компактнее моноширинного, поэтому
   кегль поднят, а line-height задан отдельно — прежние 80px оставляли пустоту. */
.page-home .content h1 {
    font-family: "Caveat", cursive;
    font-size: 2.9em;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 10px;
}

.page-home .content span {
    font-size: 120%;
    font-weight: bolder;
    font-style: italic;
}

.page-home .content a {
    font-size: 140%;
}

/* Состояния наведения объявлены последними: у них та же специфичность,
   что у правил выше, и в исходных файлах они тоже шли после них. */

.card:hover {
    /* Вместо чистого чёрного — тёмная фактурная подложка.
       Слоями сверху вниз: два приглушённых цветных пятна (бирюза сайта
       и мягкий индиго), тонкая диагональная штриховка и мелкое зерно.
       Зерно — SVG-шум в data-URI: картинку грузить не нужно, вес около
       250 байт. Цвета намеренно тусклые и малоконтрастные, чтобы фон
       оставался фоном и не спорил с текстом. */
    background-color: #1a2030;
    background-image:
    radial-gradient(130% 90% at 12% 0%, rgba(23, 184, 166, 0.17), transparent 62%),
    radial-gradient(120% 85% at 88% 100%, rgba(126, 108, 196, 0.15), transparent 60%),
    repeating-linear-gradient(135deg,
    rgba(255, 255, 255, 0.022) 0 2px,
    rgba(255, 255, 255, 0) 2px 7px),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.9%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22140%22%20height%3D%22140%22%20filter%3D%22url%28%23n%29%22%20opacity%3D%220.055%22%2F%3E%3C%2Fsvg%3E");
    background-size: auto, auto, auto, 140px 140px;
    color: #eef1f6;
}

/* Заголовок карточки задан цветом #333 — на тёмной подложке он пропадал
   (контраст около 1,7:1). На светлой карточке цвет прежний, меняется
   только поверх тёмной. */
.card:hover .content h1 {
    color: #f2f5fa;
}

/* Чистый красный на подложке светлее чёрного давал 3:1 при норме 4,5.
   Осветляем — только поверх тёмной карточки. */
.card:hover .content a {
    color: #ff8878;
}

.card:hover .img:before {
    /* 100%, а не жёсткие 200px: на узком экране высота фотографии меньше. */
    height: 100%;
}

.content a:hover {
    font-size: 200%;
}

/* ---------- Страницы в разработке ----------
   Разделы ещё не наполнены. Пока они показывают заглушку: спокойный
   нейтральный фон вместо фотографий главной, чтобы отличать готовое
   от незаконченного с первого взгляда. */

body.page-stub {
    background: linear-gradient(160deg, #eef1f6, #dfe4ee 55%, #cfd6e4) fixed;
}

.stub {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 64px 20px;
    text-align: center;
}

.stub__badge {
    margin: 0;
    padding: 6px 18px;
    border: 1px solid rgba(23, 184, 166, 0.55);
    border-radius: 999px;
    color: #0f7f73;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.stub__text {
    margin: 0;
    max-width: 30ch;
    font-family: "Caveat", cursive;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    color: #1d2333;
}

.stub__note {
    margin: 0;
    max-width: 46ch;
    color: #4a5268;
    line-height: 1.6;
}

.stub__back {
    display: inline-block;
    margin-top: 8px;
    padding: 10px 22px;
    border: 1px solid rgba(23, 184, 166, 0.55);
    border-radius: 999px;
    color: #0f7f73;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.stub__back:hover,
.stub__back:focus-visible {
    background-color: rgba(23, 184, 166, 0.85);
    color: #fff;
}

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

.footer_main {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    text-align: center;
    z-index: 10;
}

.footer_main {
    background-color: transparent;
}

.page-cards .footer_main,
.page-stub .footer_main {
    color: #0e0e0e;
}

/* ---------- Линия с ИТ-значком ----------
   Отчёркивает текст шапки снизу, а текст подвала — сверху.
   Ширина — три карточки (3 x 280px), на узких экранах ужимается.
   Значок 3x3 мм, как и просили: миллиметры CSS понимает напрямую. */

.chrome-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: min(840px, calc(100% - 32px));
    margin-inline: auto;
    /* Бирюзовый читается и поверх фотографий, и на светлых страницах,
       поэтому цвет один на весь сайт. Линию и значок красит currentColor. */
    color: rgba(23, 184, 166, 0.85);
}

.header .chrome-rule {
    margin-top: 12px;
}

.footer_main .chrome-rule {
    margin-bottom: 12px;
}

.chrome-rule__line {
    flex: 1;
    /* 1px терялся на фоне: цвет был верный, но полоса в один пиксель
       почти не читается. 2px — всё ещё тонко, но видно. */
    height: 2px;
    border-radius: 1px;
    background-color: currentColor;
}

.chrome-rule__mark {
    flex: none;
    width: 3mm;
    height: 3mm;
}


/* ---------- Навигация на широких экранах ----------
   Бургер оставлен только для телефонов: на десктопе он прячет ссылки
   за лишний клик. Здесь меню разворачивается в горизонтальный ряд
   под заголовком и видно всегда. */

@media (min-width: 901px) {
    /* Шапка стала на строку выше, и при фиксированном позиционировании она
       закрывала верх карточек (и текст на других страницах). Поэтому на
       десктопе шапка и подвал занимают собственное место в потоке, а
       содержимое растягивается между ними. Шапка при этом всё так же
       остаётся на виду при прокрутке — за счёт position: sticky. */
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    .header {
        position: sticky;
    }

    .footer_main {
        position: static;
    }

    /* flex-grow, но без сжатия: контейнер тянется до низа экрана,
       а на длинных страницах вырастает под содержимое, и подвал уходит
       за него, а не поверх (раньше он закрывал нижнюю карточку). */
    .wrapper {
        flex: 1 0 auto;
        min-height: auto;
    }

    .stub {
        flex: 1 0 auto;
    }

    .burger-icon {
        display: none;
    }

    .burger-menu {
        position: static;
        margin-top: 14px;
    }

    .menu {
        display: block;
        position: static;
        padding: 0;
        background-color: transparent;
        border-radius: 0;
    }

    .menu ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 28px;
    }

    .menu ul li {
        margin: 0;
    }

    .menu ul li a {
        display: inline-block;
        padding: 6px 2px;
        /* Темнее прежнего #293955: поверх тёмных фонов главной тот давал
           3,5:1 при норме 4,5:1 для текста такого размера. Прозрачность
           шапки при этом не меняется — фотография сквозь неё видна. */
        color: #0d1220;
        font-size: 19px;
        font-style: normal;
        border-bottom: 2px solid transparent;
        transition: border-color 0.2s ease, color 0.2s ease;
    }

    .menu ul li a:hover,
    .menu ul li a:focus-visible {
        border-bottom-color: currentColor;
    }

    /* Текущая страница: подчёркнута и не кликается как «другая». */
    .menu ul li a[aria-current="page"] {
        color: #12182a;
        font-weight: 700;
        border-bottom-color: currentColor;
    }
}

/* ---------- Узкие экраны ----------
   Шапка и подвал встают в поток, меню сворачивается в бургер, размеры
   карточки привязываются к ширине экрана. Композиция при этом не меняется:
   она такая же, как на ПК, на любом экране. */

@media (max-width: 900px) {
    body.page-cards {
        display: block;
    }

    .header {
        position: sticky;
    }

    .header__title {
        font-size: 1.3em;
        padding-inline: 70px;
    }

    /* Рукописный заголовок главной задан отдельным правилом с большей
       специфичностью, поэтому уменьшать его на телефоне тоже надо отдельно:
       на 3.1em он разъезжался на три строки. */
    .page-home .header__title,
    .page-stub .header__title {
        font-size: 1.9em;
    }

    .footer_main {
        position: static;
    }

    /* Боковое поле равно выносу фотографии за край карточки (половина её
       ширины). Иначе соседние карточки налезают друг на друга: на ПК от
       этого спасали поля по 110px. Заодно на узком экране в ряд встаёт
       ровно одна карточка. */
    body.page-cards .card {
        margin: 40px calc(min(31vw, 200px) * 0.75);
    }

    /* Карточка везде та же, что на ПК: стеклянная, фото слева с выносом за
       край, текст справа. Меняются только размеры — они заданы долей ширины
       экрана с потолком, равным десктопным значениям. На планшете и в
       альбомной ориентации выходит ровно как на ПК, на телефоне
       пропорционально уменьшается, композиция сохраняется.

       Ширина композиции = карточка (50vw) + фотография (31vw x 1.5 = 46.5vw),
       итого 96.5vw — почти вся ширина экрана. Боковое поле карточки равно
       выносу фотографии, иначе соседние карточки налезают друг на друга. */
    .page-home .card {
        width: min(50vw, 280px);
        height: min(71vw, 400px);
    }

    .img,
    .img img {
        height: min(31vw, 200px);
    }

    .content {
        padding: clamp(10px, 3.4vw, 20px);
    }

    /* Кегли тоже привязаны к ширине: на узкой карточке десктопные размеры
       не помещаются в колонку текста. Верхняя граница — десктопное значение. */
    .page-home .content h1 {
        font-size: clamp(1.5rem, 7.4vw, 2.9em);
    }

    .page-home .content span {
        font-size: clamp(0.78rem, 3.3vw, 120%);
        line-height: 1.45;
    }

    .page-home .content a {
        font-size: clamp(0.85rem, 3.6vw, 140%);
        right: clamp(6px, 2.2vw, 10px);
        bottom: clamp(6px, 2.2vw, 10px);
    }

    /* Печать прижата ближе к краю: на уменьшенной фотографии
       отступ в 8px съедал заметную долю. */
    .img:after {
        left: clamp(4px, 1.6vw, 8px);
        bottom: clamp(4px, 1.6vw, 8px);
    }
}


@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }
}