/* Эскиз: assets/sketch-reference.png — 682×1024 px.
 * Если клик «рядом» с кнопкой на рисунке — подстройте переменные ниже (в процентах от блока постера). */

:root {
    --paper: #f5f2e8;
    --grid: rgba(83, 103, 176, 0.26);
    --red-line: rgba(197, 83, 88, 0.58);

    /* Область клика поверх нарисованной кнопки */
    --cta-bottom: 22%;
    --cta-width: 62%;
    --cta-height: 7.5%;
    --cta-max-width: 380px;
}

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

body {
    min-height: 100vh;
    padding: 12px 10px 28px;
    background-color: var(--paper);
    background-image:
        linear-gradient(90deg, transparent 0, transparent calc(100% - 48px), var(--red-line) calc(100% - 48px), var(--red-line) calc(100% - 45px), transparent calc(100% - 45px)),
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 100% 100%, 100% 34px, 34px 100%;
}

.page {
    max-width: 740px;
    margin: 0 auto;
}

/* Ровно пропорции вашего PNG — без растягивания по высоте экрана */
.poster-wrap {
    position: relative;
    width: min(682px, 100%);
    margin: 0 auto;
    aspect-ratio: 682 / 1024;
    border-radius: 6px;
    box-shadow: 0 8px 28px rgba(23, 39, 90, 0.14);
    background: #fff;
}

.poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 6px;
}

/* Невидимый хитбокс: видите только рисунок */
.cta-hit {
    position: absolute;
    left: 50%;
    bottom: var(--cta-bottom);
    transform: translateX(-50%);
    width: min(var(--cta-width), var(--cta-max-width));
    height: var(--cta-height);
    border-radius: 999px;
    opacity: 0;
    cursor: pointer;
}

.cta-hit:focus-visible {
    opacity: 1;
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 3px #20307c;
}

@media (max-width: 420px) {
    body {
        padding: 8px 6px 20px;
        background-image:
            linear-gradient(90deg, transparent 0, transparent calc(100% - 32px), var(--red-line) calc(100% - 32px), var(--red-line) calc(100% - 29px), transparent calc(100% - 29px)),
            linear-gradient(var(--grid) 1px, transparent 1px),
            linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    }

    :root {
        --cta-bottom: 21%;
        --cta-width: 68%;
        --cta-height: 8%;
        --cta-max-width: none;
    }
}