/* ==========================================================================
   brusnik.com — CGA/DOS theme
   Палитра — 16-цветная CGA: синий фон, циановые рамки, жёлтый акцент.
   ========================================================================== */

@font-face {
    font-family: 'Press Start 2P';
    src: url('../fonts/PressStart2P-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --blue:     #0000AA;  /* CGA blue        — фон                    */
    --cyan:     #00AAAA;  /* CGA cyan        — рамки, второстепенное  */
    --cyan-hi:  #57FFFF;  /* CGA bright cyan — основной текст         */
    --yellow:   #FFE600;  /* акцент, курсор, активный пункт           */
    --white:    #FFFFFF;
    --shadow:   rgba(0, 0, 0, .35);

    --frame:    15px;     /* «рамка монитора»                         */
    --gap:      clamp(1.5rem, 5vw, 3.5rem);
    --measure:  62rem;    /* максимальная ширина контента             */
}

/* --- сброс -------------------------------------------------------------- */

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

body,
h1, h2, h3,
p, ul, li,
figure {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

img {
    display: block;
    max-width: 100%;
}

/* --- база --------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    padding: calc(var(--frame) + var(--gap)) var(--gap);
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: clamp(8px, 1.15vw, 13px);
    line-height: 2;
    color: var(--cyan-hi);
    background-color: var(--blue);
    text-transform: uppercase;
    -webkit-font-smoothing: none;
    font-smooth: never;
}

/* Рамка монитора. Фиксированная, чтобы не уезжала при прокрутке. */
.bezel {
    position: fixed;
    inset: 0;
    z-index: 10;
    border: var(--frame) solid var(--cyan);
    pointer-events: none;
}

/* Развёртка ЭЛТ. Едва заметная — только фактура, не эффект. */
.bezel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, .18) 0,
        rgba(0, 0, 0, .18) 1px,
        transparent 1px,
        transparent 3px
    );
    opacity: .5;
}

.page {
    max-width: var(--measure);
    margin: 0 auto;
}

a {
    color: var(--cyan-hi);
    text-decoration: none;
}

a:focus-visible,
.card__link:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 4px;
}

/* --- переключатель языка ------------------------------------------------ */

.lang {
    display: flex;
    gap: 1.5em;
    justify-content: flex-end;
    margin-bottom: var(--gap);
    font-size: .85em;
}

.lang a {
    color: var(--cyan);
}

.lang a:hover {
    color: var(--cyan-hi);
}

.lang [aria-current='true'] {
    color: var(--yellow);
}

.lang [aria-current='true']::before {
    content: '[';
}

.lang [aria-current='true']::after {
    content: ']';
}

/* --- шапка -------------------------------------------------------------- */

.hero {
    margin-bottom: calc(var(--gap) * 1.6);
    text-align: center;
}

.hero__logo {
    font-size: clamp(1rem, 4.4vw, 2.1rem);
    line-height: 1.4;
    color: var(--white);
    font-weight: 400;
}

.hero__logo span {
    color: var(--yellow);
}

/* Мигающий курсор — как в DOS-консоли. */
.hero__logo span {
    animation: blink 1.06s step-end infinite;
}

@keyframes blink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.hero__tagline {
    margin-top: 2.5em;
    line-height: 2.2;
}

.hero__tagline em {
    display: block;
    font-style: normal;
    color: var(--cyan);
}

/* --- заголовок секции --------------------------------------------------- */

.section {
    margin-bottom: calc(var(--gap) * 1.6);
}

.section__title {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-bottom: calc(var(--gap) * .9);
    font-size: 1em;
    font-weight: 400;
    color: var(--yellow);
}

/* Линейка вправо от заголовка — как разделитель в Turbo Vision. */
.section__title::after {
    content: '';
    flex: 1;
    height: 3px;
    background-color: var(--cyan);
}

/* --- карточки продуктов ------------------------------------------------- */

.cards {
    display: grid;
    gap: calc(var(--gap) * .9);
}

.card {
    position: relative;
    border: 3px solid var(--cyan);
    box-shadow: 8px 8px 0 var(--shadow);
    background-color: var(--blue);
}

/* Заголовок карточки инвертирован — циан-фон, синий текст. */
.card__head {
    padding: 1em 1.2em;
    font-size: 1.05em;
    font-weight: 400;
    color: var(--blue);
    background-color: var(--cyan-hi);
}

/* Скриншот во всю ширину карточки, под шапкой. */
.card__shot {
    width: 100%;
    height: auto;
    border-bottom: 3px solid var(--cyan);
}

.card__body {
    padding: 1.6em 1.2em;
}

.card__desc {
    line-height: 2.1;
}

.card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .6em 1.2em;
    margin-top: 1.6em;
    font-size: .8em;
    color: var(--cyan);
}

.card__link {
    display: inline-block;
    margin-top: 2em;
    padding: 1.1em 2em;
    color: var(--cyan-hi);
    border: 3px solid var(--cyan);
    transition: background-color .12s, color .12s;
}

.card__link:hover {
    color: var(--blue);
    background-color: var(--cyan-hi);
    border-color: var(--cyan-hi);
}

/* --- контакты ----------------------------------------------------------- */

.contact__mail {
    display: inline-block;
    padding: 1.1em 2em;
    color: var(--blue);
    background-color: var(--yellow);
    border: 3px solid var(--yellow);
    box-shadow: 6px 6px 0 var(--shadow);
    transition: background-color .12s, color .12s;
}

.contact__mail:hover {
    color: var(--yellow);
    background-color: transparent;
}

/* --- подвал с шифром ---------------------------------------------------- */

.cipher {
    margin-top: calc(var(--gap) * 1.4);
    font-size: .8em;
    line-height: 2.2;
    color: var(--cyan);
    text-align: center;
    word-break: break-all;
}

.cipher p + p {
    margin-top: .5em;
    letter-spacing: .2em;
}

/* --- адаптив ------------------------------------------------------------ */

@media (min-width: 48rem) {
    .cards {
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    }
}

@media (max-width: 30rem) {
    :root {
        --frame: 8px;
    }
}

/* --- уважение к настройкам пользователя --------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .hero__logo span,
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .hero__logo span {
        opacity: 1;
    }
}

/* Развёртка мешает тем, кто просил убрать лишнее движение и контраст. */
@media (prefers-contrast: more) {
    .bezel::after {
        display: none;
    }
}

/* --- печать ------------------------------------------------------------- */

@media print {
    .bezel,
    .lang {
        display: none;
    }

    body {
        color: #000;
        background: #fff;
    }
}