/* «Бог поруч» — фірмова палітра Radio M (як у radiom-event). Перший екран — ніч
   (так починаються ці історії), решта — світлий бузковий папір у тон до неї. */
:root {
    --pink:      #fe338c;
    --pink-dark: #e91e76;
    --pink-soft: #fff0f5;
    --ink:       #14141a;
    --muted:     #6b6b78;
    --line:      #e6e1ee;
    --paper:     #f7f5fa;
    --night:     #1c1631;
    --night-ink: #f3eef8;
    --card:      #ffffff;
    --err:       #d8134f;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 500 17px/1.65 "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

main { padding: 0 16px; }

/* ---------- шапка й підвал ---------- */

.top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 16px; max-width: 760px; margin: 0 auto;
}
.top__logo img { height: 28px; display: block; }
.top__link { color: var(--muted); font-weight: 700; font-size: .92rem; text-decoration: none; }
.top__link:hover { color: var(--pink-dark); }
.top__nav { display: flex; align-items: center; gap: 20px; }
.top__back {
    padding: 8px 18px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card);
    transition: border-color .15s, color .15s;
}
.top__back:hover { border-color: var(--pink); }
.top--night { width: 100%; max-width: 1080px; padding: 28px 24px; }
.top__link--pill {
    padding: 9px 20px; border: 1.5px solid rgba(243, 238, 248, .35); border-radius: 999px;
    transition: border-color .15s, background .15s;
}
.top--night .top__link--pill:hover { border-color: var(--pink); background: rgba(254, 51, 140, .15); }
.top--night .top__link { color: rgba(243, 238, 248, .7); }
.top--night .top__link:hover { color: #fff; }

a:focus-visible, .btn:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

.foot {
    /* Лінія — на всю ширину вікна, вміст — по сітці шапки (1080px). */
    margin-top: 64px; padding: 28px max(16px, calc((100% - 1080px) / 2 + 24px)) 40px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem;
}
.foot img { height: 20px; opacity: .6; }

/* ---------- перший екран ---------- */

.hero { max-width: 680px; margin: 0 auto; padding: 32px 0 8px; }

.hero__kicker {
    margin: 0 0 12px; color: var(--pink-dark);
    font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}

.hero__title {
    margin: 0 0 28px;
    font-size: clamp(2.6rem, 9vw, 4.5rem); line-height: 1; font-weight: 800;
    letter-spacing: -.02em; text-transform: uppercase;
}

.hero__lead p { margin: 0 0 16px; }
.hero__lines {
    padding-left: 18px; border-left: 3px solid var(--pink);
    font-size: 1.15rem; font-weight: 600; line-height: 1.7;
}
.hero__cta { font-weight: 700; }

.hero__down {
    display: inline-block; margin-top: 12px;
    color: var(--pink-dark); font-weight: 700; text-decoration: none;
}
.hero__down:hover { text-decoration: underline; }

.hero--done { padding-top: 64px; text-align: left; }
.hero--done .btn { margin-top: 16px; }

/* ---------- анкета ---------- */

.card {
    max-width: 680px; margin: 40px auto 0; padding: 32px;
    background: var(--card); border: 1px solid var(--line); border-radius: 20px;
    box-shadow: 0 12px 40px rgba(60, 30, 20, .06);
    scroll-margin-top: 16px;
}
.card__title { margin: 0 0 6px; font-size: 1.6rem; font-weight: 800; }
.card__sub { margin: 0 0 28px; color: var(--muted); }

.form { display: grid; gap: 22px; }

.field { display: grid; gap: 8px; }
.field__label { font-weight: 700; font-size: .95rem; }

.field input,
.field textarea {
    width: 100%; padding: 14px 16px;
    font: inherit; color: inherit;
    background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
    transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 220px; resize: vertical; line-height: 1.6; }
.field input:focus,
.field textarea:focus {
    outline: none; border-color: var(--pink);
    box-shadow: 0 0 0 4px var(--pink-soft);
}
.field ::placeholder { color: #a5a0a8; }

.is-invalid { border-color: var(--err) !important; }
.field__error { color: var(--err); font-size: .88rem; font-weight: 600; }

.check {
    display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
    padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 12px;
    font-weight: 600; line-height: 1.45;
}
.check.is-invalid { border-color: var(--err); }
.check input {
    flex: none; width: 22px; height: 22px; margin: 1px 0 0;
    accent-color: var(--pink);
}

/* Поле-пастка для ботів: прибране з очей і з фокусу. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn {
    display: inline-block; justify-self: start;
    padding: 16px 30px; border: 0; border-radius: 999px;
    background: var(--pink); color: #fff;
    font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
    transition: background .15s, transform .1s;
}
.btn:hover { background: var(--pink-dark); }
.btn:active { transform: translateY(1px); }

@media (max-width: 560px) {
    body { font-size: 16px; }
    .card { padding: 22px 18px; border-radius: 16px; }
    .btn { justify-self: stretch; text-align: center; }
}

/* ---------- опубліковані історії ---------- */

.stories { max-width: 680px; margin: 24px auto 0; display: grid; gap: 18px; }
.stories__empty { color: var(--muted); }

.story-card {
    padding: 26px 28px;
    background: var(--card); border: 1px solid var(--line); border-radius: 18px;
}
.story-card__title { margin: 0 0 4px; font-size: 1.25rem; font-weight: 800; line-height: 1.3; }
.story-card__title a { color: inherit; text-decoration: none; }
.story-card__title a:hover { color: var(--pink-dark); }
.story-card__text { margin: 12px 0 10px; }
.story-card__more { color: var(--pink-dark); font-weight: 700; text-decoration: none; }
.story-card__more:hover { text-decoration: underline; }

.story-meta { margin: 0; color: var(--muted); font-size: .88rem; font-weight: 600; }

.story { max-width: 680px; margin: 0 auto; padding: 24px 0 8px; }
.story__back { color: var(--muted); font-size: .9rem; font-weight: 600; text-decoration: none; }
.story__back:hover { color: var(--pink-dark); }
.story__title {
    margin: 18px 0 10px;
    font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: 1.15; font-weight: 800; letter-spacing: -.01em;
}
.story__body { margin-top: 28px; font-size: 1.05rem; line-height: 1.75; }
.story__body p { margin: 0 0 18px; }
.story__source { margin-top: 32px; color: var(--muted); font-size: .85rem; }
.story__source a { color: inherit; }

.card--cta .card__sub { margin-bottom: 20px; }

.pager { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px; font-weight: 700; }
.pager a { color: var(--pink-dark); text-decoration: none; }
.pager__pos { color: var(--muted); font-size: .9rem; }

/* ---------- головна: нічний перший екран ---------- */

/* Фото: зоряна ніч угорі, світанок над горизонтом унизу — той самий шлях,
   що й у кожній історії. «The sunrise with starry sky», Vian, CC BY-SA 4.0,
   https://commons.wikimedia.org/wiki/File:The_sunrise_with_starry_sky.jpg
   Ліворуч кадр притемнено: там текст. */
.night {
    position: relative; overflow: hidden;
    min-height: min(100svh, 900px);
    display: flex; flex-direction: column;
    background:
        linear-gradient(90deg, rgba(28, 22, 49, .9) 0%, rgba(28, 22, 49, .62) 45%, rgba(28, 22, 49, .12) 100%),
        linear-gradient(180deg, rgba(28, 22, 49, .4), rgba(28, 22, 49, 0) 35%),
        url("../images/hero-dawn.jpg") 50% 62% / cover no-repeat,
        var(--night);
    color: var(--night-ink);
}

.night__credit {
    position: absolute; right: 16px; bottom: 10px;
    font-size: .7rem; color: rgba(243, 238, 248, .55);
}
.night__credit a { color: inherit; }

.night__inner {
    flex: 1; width: 100%; max-width: 1080px; margin: 0 auto;
    padding: 6vh 24px 72px;
    display: flex; flex-direction: column; justify-content: center;
}

.night__kicker { margin: 0 0 18px; color: rgba(243, 238, 248, .6); font-weight: 600; }

.night__title {
    margin: 0 0 clamp(28px, 6vh, 56px);
    font-size: clamp(3.4rem, 13vw, 9.5rem); line-height: .9; font-weight: 800;
    letter-spacing: -.035em; text-transform: uppercase;
}

.night__lines { margin: 0; display: grid; gap: .35em; font-size: clamp(1.25rem, 3.4vw, 2.25rem); line-height: 1.25; }
.night__line { display: block; color: rgba(243, 238, 248, .5); font-weight: 600; }
.night__line b { color: #fff; font-weight: 800; }

.night__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(32px, 7vh, 64px); }
.night__secondary { color: var(--night-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(243, 238, 248, .4); }
.night__secondary:hover { text-decoration-color: var(--pink); }

/* Один момент руху: рядки проступають по черзі, як світло в темряві. */
@media (prefers-reduced-motion: no-preference) {
    .night__line { animation: dawn 1.1s ease-out both; }
    .night__line:nth-child(2) { animation-delay: .5s; }
    .night__line:nth-child(3) { animation-delay: 1s; }
    @keyframes dawn { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }
}

/* ---------- головна: про проєкт ---------- */

.about, .paths, .latest { max-width: 680px; margin: 0 auto; }
.about { padding-top: 72px; font-size: 1.1rem; }
.about p { margin: 0 0 16px; }
.about__lead { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }

.paths { padding-top: 48px; }
.paths__title, .latest__title { margin: 0 0 18px; font-size: 1.3rem; font-weight: 800; }
.paths__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.paths__list li { padding: 14px 0 14px 22px; border-bottom: 1px solid var(--line); position: relative; }
.paths__list li::before {
    content: ""; position: absolute; left: 2px; top: 1.45em;
    width: 8px; height: 8px; border-radius: 50%; background: var(--pink);
}

.latest { max-width: 1080px; padding-top: 72px; }
.latest__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; }
.latest__title { margin: 0; font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.15; letter-spacing: -.015em; }
.latest__all { color: var(--pink-dark); font-weight: 700; }

.latest__grid { display: grid; gap: 16px; }
.latest__item {
    display: flex; flex-direction: column; gap: 10px; padding: 24px;
    background: var(--card); border: 1px solid var(--line); border-radius: 18px;
    color: inherit; text-decoration: none;
    transition: border-color .15s;
}
.latest__item:hover { border-color: var(--pink); }
.latest__item:hover .latest__name { color: var(--pink-dark); }
.latest__name { font-weight: 800; font-size: 1.08rem; line-height: 1.3; }
.latest__text { flex: 1; color: var(--muted); font-size: .95rem; }

/* Головна історія — нічна, як перший екран: з неї починається читання. */
.latest__item--lead { background: var(--night); border-color: var(--night); color: var(--night-ink); padding: 32px; }
.latest__item--lead .latest__name { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.2; letter-spacing: -.01em; }
.latest__item--lead .latest__text { color: rgba(243, 238, 248, .75); font-size: 1.05rem; line-height: 1.7; }
.latest__item--lead .story-meta { color: rgba(243, 238, 248, .55); }
.latest__item--lead:hover .latest__name { color: #fff; }

.btn--ghost { display: table; margin: 24px auto 0; justify-self: center; background: transparent; color: var(--pink-dark); box-shadow: inset 0 0 0 2px var(--pink); }
.btn--ghost:hover { background: var(--pink); color: #fff; }

@media (min-width: 900px) {
    .latest__grid { grid-template-columns: repeat(3, 1fr); }
    .latest__item--lead { grid-column: span 2; grid-row: span 2; }
}

/* На широкому екрані анкета ділиться: ліворуч підказка, праворуч поля. */
@media (min-width: 900px) {
    .card#form {
        max-width: 1000px; margin-top: 72px; padding: 44px;
        display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; align-items: start;
    }
    .card__side { position: sticky; top: 24px; }
}

@media (max-width: 700px) {
    .night {
        background:
            linear-gradient(180deg, rgba(28, 22, 49, .75), rgba(28, 22, 49, .55) 60%, rgba(28, 22, 49, .35)),
            url("../images/hero-dawn.jpg") 52% 60% / cover no-repeat,
            var(--night);
    }
}

@media (max-width: 560px) {
    .night__inner, .top--night { padding-inline: 16px; }
    .about { padding-top: 48px; }
}