/* =========================================================
   ОСНОВНИ НАСТРОЙКИ
   ========================================================= */

:root {
    --background-main: #f7f5f0;
    --background-soft: #efebe3;
    --background-card: rgba(255, 255, 255, 0.74);

    --text-main: #272727;
    --text-body: #393939;
    --text-soft: #74623f;

    --gold: #a88950;
    --gold-dark: #866b38;
    --gold-light: rgba(168, 137, 80, 0.35);

    --border: rgba(145, 117, 67, 0.22);

    --serif: "Cormorant Garamond", Georgia, serif;
    --sans: "Montserrat", Arial, sans-serif;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;

    width: 100%;

    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100vh;

    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 12% 8%,
            rgba(168, 137, 80, 0.08),
            transparent 27%
        ),
        radial-gradient(
            circle at 88% 24%,
            rgba(168, 137, 80, 0.055),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #faf9f6 0%,
            var(--background-main) 48%,
            #f3f0e9 100%
        );

    color: var(--text-main);

    font-family: var(--sans);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/* =========================================================
   PAGE
   ========================================================= */

.page {
    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    padding:
        clamp(55px, 7vw, 105px)
        clamp(22px, 6vw, 95px)
        35px;
}


/* =========================================================
   GENERAL SECTIONS
   ========================================================= */

.section {
    width: 100%;

    margin:
        0 auto
        clamp(75px, 9vw, 125px);
}

.section-inner {
    width: 100%;
    max-width: 1120px;

    margin: 0 auto;
}


/* =========================================================
   HEADINGS
   ========================================================= */

.section-title {
    margin: 0;

    text-align: center;

    font-family: var(--serif);
    font-size: clamp(40px, 5vw, 68px);
    font-weight: 600;

    line-height: 1.04;
    letter-spacing: 0.005em;

    color: var(--text-main);
}

.section-subtitle {
    max-width: 930px;

    margin:
        18px auto 0;

    text-align: center;

    font-family: var(--serif);
    font-size: clamp(23px, 2.4vw, 34px);
    font-weight: 500;

    line-height: 1.28;

    color: var(--text-soft);
}


/* =========================================================
   DECORATIVE DIVIDER
   ========================================================= */

.divider {
    display: flex;
    align-items: center;

    width: min(100%, 640px);

    margin:
        30px auto
        clamp(40px, 5vw, 58px);

    color: var(--gold);

    font-size: 17px;
}

.divider::before,
.divider::after {
    content: "";

    flex: 1;

    height: 1px;
}

.divider::before {
    background:
        linear-gradient(
            to right,
            transparent,
            var(--gold-light)
        );
}

.divider::after {
    background:
        linear-gradient(
            to left,
            transparent,
            var(--gold-light)
        );
}

.divider span {
    padding: 0 18px;
}


/* =========================================================
   TEXT
   ========================================================= */

.text-block {
    width: 100%;
    max-width: 1020px;

    margin: 0 auto;
}

.text-block p {
    margin:
        0 0 27px;

    color: var(--text-body);

    font-family: var(--sans);
    font-size: clamp(15px, 1.17vw, 18px);

    font-weight: 400;

    line-height: 1.92;

    text-align: left;
}

.text-block p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   METHODOLOGY INTRO
   ========================================================= */

.methodology-intro {
    width: 100%;
    max-width: 1080px;

    margin: 0 auto;
}

.experience {
    margin:
        0 0 32px;

    text-align: center;

    font-family: var(--serif);
    font-size: clamp(27px, 2.5vw, 37px);
    font-weight: 600;

    line-height: 1.2;

    color: var(--gold-dark);
}


/* =========================================================
   STAGE CARDS
   ========================================================= */

.stage {
    position: relative;

    width: 100%;
    max-width: 1150px;

    margin:
        0 auto
        clamp(60px, 7vw, 90px);

    padding:
        clamp(45px, 5vw, 68px)
        clamp(25px, 6vw, 82px)
        clamp(45px, 5vw, 68px);

    background: var(--background-card);

    border:
        1px solid var(--border);

    border-radius: 3px;

    box-shadow:
        0 22px 60px rgba(43, 37, 27, 0.065),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.stage::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 92px;
    height: 2px;

    transform: translateX(-50%);

    background: var(--gold);
}

.stage-number {
    margin:
        0 0 9px;

    text-align: center;

    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;

    line-height: 1.4;

    letter-spacing: 0.22em;
    text-transform: uppercase;

    color: var(--gold-dark);
}

.stage-title {
    margin: 0;

    text-align: center;

    font-family: var(--serif);
    font-size: clamp(32px, 4vw, 50px);
    font-weight: 600;

    line-height: 1.08;

    color: var(--text-main);
}

.stage-subtitle {
    width: 100%;
    max-width: 850px;

    margin:
        15px auto 0;

    text-align: center;

    font-family: var(--serif);
    font-size: clamp(21px, 2vw, 29px);
    font-weight: 500;

    line-height: 1.35;

    color: var(--text-soft);
}

.stage-divider {
    display: flex;
    align-items: center;
    justify-content: center;

    margin:
        28px auto 40px;

    color: var(--gold);
}

.stage-divider::before,
.stage-divider::after {
    content: "";

    width: clamp(40px, 8vw, 105px);
    height: 1px;

    background: var(--gold-light);
}

.stage-divider span {
    padding: 0 14px;

    font-size: 14px;
}


/* =========================================================
   RESULTS
   ========================================================= */

.results {
    margin-top: clamp(100px, 12vw, 160px);
}

.results-intro {
    width: 100%;
    max-width: 1060px;

    margin: 0 auto;
}


/* =========================================================
   BUTTON
   ========================================================= */

.archive-button-wrapper {
    display: flex;
    justify-content: center;

    width: 100%;

    margin-top: 48px;
}

.archive-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 56px;

    padding:
        0 36px;

    border:
        1px solid var(--gold-dark);

    border-radius: 2px;

    background:
        linear-gradient(
            135deg,
            #987b45,
            #846735
        );

    color: #ffffff;

    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;

    letter-spacing: 0.075em;

    text-decoration: none;

    box-shadow:
        0 8px 22px rgba(87, 68, 33, 0.12);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.archive-button:hover {
    transform: translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #876a36,
            #705528
        );

    box-shadow:
        0 13px 28px rgba(87, 68, 33, 0.18);
}

.archive-button:focus-visible {
    outline:
        2px solid var(--gold);

    outline-offset: 5px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer {
    width: 100%;

    margin-top:
        clamp(90px, 12vw, 145px);

    padding:
        38px 15px 24px;

    border-top:
        1px solid rgba(142, 116, 70, 0.30);

    text-align: center;
}

.footer-links {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;
}

.footer-links a {
    display: inline-block;

    padding:
        0 18px;

    color: #665638;

    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;

    line-height: 1.5;

    text-decoration: none;

    transition:
        color 0.2s ease;
}

.footer-links a:hover {
    color: var(--gold-dark);
}

.footer-links a + a {
    border-left:
        1px solid rgba(120, 100, 65, 0.30);
}

.copyright {
    margin-top: 21px;

    color: #777;

    font-family: var(--sans);
    font-size: 11px;

    line-height: 1.5;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .page {
        padding:
            55px
            5vw
            28px;
    }

    .section {
        margin-bottom: 80px;
    }

    .stage {
        padding:
            48px
            5vw
            48px;
    }

    .text-block p {
        line-height: 1.82;
    }

    .results {
        margin-top: 85px;
    }

    .footer {
        margin-top: 85px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .page {
        padding:
            38px
            19px
            20px;
    }

    .section {
        margin-bottom: 68px;
    }

    .section-title {
        font-size: 37px;
        line-height: 1.07;
    }

    .section-subtitle {
        margin-top: 14px;

        font-size: 22px;
        line-height: 1.34;
    }

    .divider {
        margin:
            22px auto
            34px;
    }

    .divider span {
        padding: 0 12px;
    }

    .text-block p {
        margin-bottom: 22px;

        font-size: 15px;
        line-height: 1.78;
    }

    .experience {
        margin-bottom: 27px;

        font-size: 25px;
        line-height: 1.25;
    }

    .stage {
        margin-bottom: 52px;

        padding:
            43px
            22px
            38px;
    }

    .stage-number {
        font-size: 10px;
        letter-spacing: 0.18em;
    }

    .stage-title {
        font-size: 31px;
        line-height: 1.08;
    }

    .stage-subtitle {
        margin-top: 13px;

        font-size: 20px;
        line-height: 1.33;
    }

    .stage-divider {
        margin:
            23px auto
            32px;
    }

    .stage-divider::before,
    .stage-divider::after {
        width: 45px;
    }

    .results {
        margin-top: 70px;
    }

    .archive-button-wrapper {
        margin-top: 35px;
    }

    .archive-button {
        width: 100%;
        max-width: 330px;

        min-height: 54px;

        padding:
            0 20px;

        font-size: 12px;
        letter-spacing: 0.055em;

        text-align: center;
    }

    .footer {
        margin-top: 70px;

        padding:
            30px
            10px
            20px;
    }

    .footer-links {
        flex-direction: column;
    }

    .footer-links a {
        width: 175px;

        padding:
            8px 0;

        font-size: 12px;
    }

    .footer-links a + a {
        border-top:
            1px solid rgba(120, 100, 65, 0.25);

        border-left: none;
    }

    .copyright {
        margin-top: 20px;

        font-size: 11px;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .page {
        padding-left: 15px;
        padding-right: 15px;
    }

    .section-title {
        font-size: 33px;
    }

    .section-subtitle {
        font-size: 20px;
    }

    .stage {
        padding-left: 18px;
        padding-right: 18px;
    }

    .stage-title {
        font-size: 28px;
    }

    .stage-subtitle {
        font-size: 19px;
    }

    .text-block p {
        font-size: 14px;
    }
}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition: none !important;
    }
}