:root {
    --bg: #eee9df;
    --paper: #f6f2e9;
    --dark: #171713;
    --dark-soft: #24231e;
    --text: #1f1e1a;
    --muted: #726d63;
    --line: rgba(31, 30, 26, .16);
    --light-line: rgba(255,255,255,.19);

    --max: 1320px;
    --side: clamp(22px, 5vw, 76px);

    --serif:
        Georgia,
        "Times New Roman",
        serif;

    --sans:
        Arial,
        Helvetica,
        sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

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

a {
    color: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

.page {
    width: 100%;
    overflow: hidden;
}


/* ============================================================
   IMAGES
============================================================ */

.image-frame,
.hero-picture,
.final-picture,
.coin-wrap {
    position: relative;
    overflow: hidden;
}

img.image-missing {
    visibility: hidden;
}

.image-frame:has(img.image-missing),
.coin-wrap:has(img.image-missing),
.hero-picture:has(img.image-missing),
.final-picture:has(img.image-missing) {
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(173,137,89,.24),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #d8d0c1,
            #ece6da
        );
}


/* ============================================================
   HEADER
============================================================ */

.header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;

    transition:
        background .35s ease,
        color .35s ease,
        backdrop-filter .35s ease;
}

.header.scrolled {
    background: rgba(238,233,223,.90);
    color: var(--text);

    backdrop-filter: blur(18px);

    border-bottom:
        1px solid rgba(31,30,26,.08);
}

.header-inner {
    height: 94px;

    max-width:
        calc(var(--max) + var(--side) * 2);

    padding:
        0 var(--side);

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        34px;
}

.brand {
    display: flex;

    flex-direction:
        column;

    text-decoration:
        none;

    line-height:
        .88;

    letter-spacing:
        .18em;

    font-weight:
        700;
}

.brand-main {
    font-size: 19px;
}

.brand-sub {
    margin-top: 7px;
    font-size: 10px;
}

.desktop-nav {
    display: flex;

    align-items:
        center;

    gap:
        36px;

    margin-left:
        auto;
}

.desktop-nav a {
    position: relative;

    font-size:
        14px;

    text-decoration:
        none;
}

.desktop-nav a::after {
    content: "";

    position:
        absolute;

    left:
        0;

    right:
        100%;

    bottom:
        -7px;

    height:
        1px;

    background:
        currentColor;

    transition:
        right .25s ease;
}

.desktop-nav a:hover::after {
    right: 0;
}

.header-buy {
    border:
        1px solid currentColor;

    border-radius:
        100px;

    padding:
        11px 21px;

    text-decoration:
        none;

    font-size:
        14px;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.header-buy:hover {
    background: var(--dark);
    color: white;
    transform: translateY(-1px);
}

.menu-button {
    display: none;

    width:
        42px;

    height:
        42px;

    margin:
        0;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    position:
        relative;
}

.menu-button span {
    position: absolute;

    width:
        22px;

    height:
        1px;

    background:
        currentColor;

    left:
        10px;

    transition:
        transform .25s ease,
        top .25s ease;
}

.menu-button span:first-child {
    top: 17px;
}

.menu-button span:last-child {
    top: 24px;
}

.menu-button.active span:first-child {
    top: 21px;
    transform: rotate(45deg);
}

.menu-button.active span:last-child {
    top: 21px;
    transform: rotate(-45deg);
}


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

.mobile-menu {
    display: none;

    position:
        fixed;

    z-index:
        90;

    inset:
        0;

    background:
        var(--paper);

    padding:
        120px var(--side) 40px;

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}

.mobile-menu.open {
    opacity: 1;
    visibility: visible;
}

.mobile-menu nav {
    display: flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        20px;
}

.mobile-menu nav > a {
    font-family:
        var(--serif);

    font-size:
        clamp(32px, 10vw, 50px);

    line-height:
        1;

    text-decoration:
        none;
}

.mobile-menu .mobile-buy {
    margin-top:
        26px;

    font-family:
        var(--sans);

    font-size:
        16px;

    padding:
        16px 26px;

    border-radius:
        100px;

    background:
        var(--dark);

    color:
        white;
}


/* ============================================================
   TYPOGRAPHY
============================================================ */

.section-kicker,
.overline {
    margin:
        0 0 22px;

    font-size:
        11px;

    letter-spacing:
        .24em;

    font-weight:
        700;
}

.section-kicker.light {
    color:
        rgba(255,255,255,.66);
}

.section-title {
    margin:
        0;

    font-family:
        var(--serif);

    font-weight:
        400;

    font-size:
        clamp(46px, 5.25vw, 82px);

    line-height:
        .98;

    letter-spacing:
        -.035em;
}

.section-title.center {
    text-align: center;
}


/* ============================================================
   HERO
============================================================ */

.hero {
    position: relative;

    min-height:
        100svh;

    color:
        white;

    display:
        flex;

    align-items:
        flex-end;

    overflow:
        hidden;

    background:
        #24211b;
}

.hero-picture {
    position:
        absolute;

    inset:
        0;
}

.hero-image {
    height:
        100%;

    object-fit:
        cover;

    transform:
        scale(1.03);

    transition:
        transform 1.4s ease;
}

body.loaded .hero-image {
    transform: scale(1);
}

.hero-overlay {
    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            90deg,
            rgba(12,12,10,.72) 0%,
            rgba(12,12,10,.38) 40%,
            rgba(12,12,10,.05) 72%
        ),

        linear-gradient(
            0deg,
            rgba(10,10,8,.66) 0%,
            transparent 46%
        );
}

.hero-content {
    position:
        relative;

    z-index:
        2;

    width:
        min(
            100% - var(--side) * 2,
            var(--max)
        );

    margin:
        0 auto;

    padding:
        180px 0 92px;
}

.hero h1 {
    margin:
        0;

    max-width:
        960px;

    font-family:
        var(--serif);

    font-size:
        clamp(66px, 8vw, 126px);

    font-weight:
        400;

    line-height:
        .88;

    letter-spacing:
        -.05em;
}

.hero-lead {
    max-width:
        510px;

    margin:
        35px 0 0;

    font-size:
        clamp(17px, 1.5vw, 22px);

    line-height:
        1.45;

    color:
        rgba(255,255,255,.78);
}

.discover {
    margin-top:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        25px;

    text-decoration:
        none;

    font-size:
        13px;

    letter-spacing:
        .05em;
}

.discover-arrow {
    display:
        grid;

    place-items:
        center;

    width:
        40px;

    height:
        40px;

    border:
        1px solid rgba(255,255,255,.42);

    border-radius:
        50%;

    transition:
        transform .25s ease;
}

.discover:hover .discover-arrow {
    transform:
        translateY(5px);
}

.hero-scroll {
    position:
        absolute;

    z-index:
        2;

    right:
        var(--side);

    bottom:
        88px;

    writing-mode:
        vertical-rl;

    text-transform:
        uppercase;

    letter-spacing:
        .25em;

    font-size:
        9px;

    color:
        rgba(255,255,255,.48);
}


/* ============================================================
   STORY
============================================================ */

.story-section {
    position: relative;

    padding:
        clamp(105px, 11vw, 165px)
        var(--side);

    background:
        var(--bg);
}

.story-number {
    position:
        absolute;

    top:
        56px;

    left:
        var(--side);

    font-size:
        10px;

    letter-spacing:
        .2em;

    color:
        var(--muted);
}

.story-container {
    max-width:
        var(--max);

    margin:
        0 auto;
}

.story-large {
    max-width:
        1050px;

    font-family:
        var(--serif);

    font-size:
        clamp(46px, 6.35vw, 96px);

    line-height:
        .98;

    letter-spacing:
        -.04em;
}

.story-large p {
    margin:
        0 0 20px;
}

.story-muted {
    color:
        #918a7e;
}

.story-small {
    max-width:
        540px;

    margin:
        62px 0 0 auto;

    font-size:
        clamp(17px, 1.4vw, 21px);

    color:
        #504c44;
}

.story-small p {
    margin:
        0 0 24px;
}


/* ============================================================
   IDEA
============================================================ */

.idea-section {
    background:
        var(--dark);

    color:
        white;

    padding:
        clamp(100px, 11vw, 165px)
        var(--side);
}

.idea-container {
    max-width:
        var(--max);

    margin:
        0 auto;
}

.idea-title {
    max-width:
        1080px;

    margin:
        0;

    font-family:
        var(--serif);

    font-size:
        clamp(56px, 6.8vw, 104px);

    font-weight:
        400;

    line-height:
        .93;

    letter-spacing:
        -.045em;
}

.idea-text {
    max-width:
        680px;

    margin:
        52px 0 0 auto;

    font-size:
        clamp(19px, 1.8vw, 25px);

    color:
        rgba(255,255,255,.67);
}

.idea-text strong {
    font-weight:
        400;

    color:
        white;
}


/* ============================================================
   RITUAL
============================================================ */

.ritual-section {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.04fr)
        minmax(0, .96fr);

    min-height:
        820px;

    background:
        var(--paper);
}

.visual-column {
    min-height:
        820px;

    padding:
        44px;
}

.ritual-frame {
    position:
        sticky;

    top:
        112px;

    height:
        calc(100vh - 165px);

    min-height:
        570px;

    max-height:
        800px;

    background:
        #ddd4c6;
}

.ritual-frame img {
    height:
        100%;

    object-fit:
        cover;
}

.ritual-content {
    padding:
        clamp(100px, 9vw, 145px)
        clamp(40px, 7vw, 110px);
}

.ritual-steps {
    margin-top:
        64px;

    border-top:
        1px solid var(--line);
}

.ritual-step {
    display:
        grid;

    grid-template-columns:
        62px 1fr;

    gap:
        25px;

    padding:
        31px 0;

    border-bottom:
        1px solid var(--line);
}

.step-number {
    font-size:
        10px;

    letter-spacing:
        .15em;

    color:
        var(--muted);
}

.ritual-step h3 {
    margin:
        0 0 9px;

    font-family:
        var(--serif);

    font-size:
        clamp(26px, 2.3vw, 36px);

    font-weight:
        400;
}

.ritual-step p {
    max-width:
        390px;

    margin:
        0;

    color:
        var(--muted);
}


/* ============================================================
   ONE WISH
============================================================ */

.one-wish-section {
    position:
        relative;

    overflow:
        hidden;

    background:
        #25221c;

    color:
        white;

    padding:
        clamp(105px, 11vw, 170px)
        var(--side);
}

.one-wish-section::before {
    content:
        "";

    position:
        absolute;

    width:
        560px;

    height:
        560px;

    left:
        -220px;

    bottom:
        -330px;

    border-radius:
        50%;

    background:
        rgba(173,116,61,.12);

    filter:
        blur(90px);
}

.one-wish-inner {
    position:
        relative;

    z-index:
        1;

    max-width:
        var(--max);

    margin:
        0 auto;
}

.one-wish-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(320px, .8fr);

    gap:
        clamp(60px, 9vw, 150px);

    align-items:
        end;
}

.one-wish-title {
    margin:
        0;

    max-width:
        800px;

    font-family:
        var(--serif);

    font-size:
        clamp(68px, 8.5vw, 132px);

    font-weight:
        400;

    line-height:
        .88;

    letter-spacing:
        -.055em;
}

.one-wish-copy {
    color:
        rgba(255,255,255,.65);

    font-size:
        clamp(17px, 1.4vw, 20px);
}

.one-wish-copy p {
    margin:
        0 0 24px;
}

.one-wish-copy .one-wish-lead {
    color:
        white;

    font-family:
        var(--serif);

    font-size:
        clamp(26px, 2.4vw, 38px);

    line-height:
        1.1;
}

.one-wish-line {
    margin-top:
        clamp(70px, 8vw, 115px);

    padding-top:
        28px;

    border-top:
        1px solid var(--light-line);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    font-family:
        var(--serif);

    font-size:
        clamp(17px, 1.8vw, 25px);
}

.one-wish-line i {
    flex:
        1;

    height:
        1px;

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


/* ============================================================
   MEMORY
============================================================ */

.memory-section {
    padding:
        clamp(105px, 12vw, 180px)
        var(--side);

    background:
        #d9d1c3;
}

.memory-inner {
    max-width:
        1050px;

    margin:
        0 auto;

    text-align:
        center;
}

.memory-small {
    margin:
        0 auto 42px;

    max-width:
        430px;

    color:
        #696359;
}

.memory-title {
    margin:
        0;

    font-family:
        var(--serif);

    font-size:
        clamp(68px, 9.5vw, 145px);

    font-weight:
        400;

    line-height:
        .9;

    letter-spacing:
        -.06em;
}

.memory-copy {
    max-width:
        650px;

    margin:
        42px auto 0;

    font-size:
        clamp(18px, 1.6vw, 22px);
}

.memory-final {
    font-weight:
        600;
}


/* ============================================================
   SIGNS
============================================================ */

.signs-section {
    padding:
        clamp(105px, 11vw, 170px)
        var(--side);

    background:
        var(--paper);
}

.signs-heading {
    max-width:
        920px;

    margin:
        0 auto 76px;

    text-align:
        center;
}

.signs-intro {
    max-width:
        570px;

    margin:
        30px auto 0;

    color:
        var(--muted);

    font-size:
        18px;
}

.signs-grid {
    max-width:
        var(--max);

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        clamp(24px, 3vw, 44px);
}

.sign-card:nth-child(2) {
    transition-delay:
        .08s;
}

.sign-card:nth-child(3) {
    transition-delay:
        .16s;
}

.coin-wrap {
    aspect-ratio:
        1;

    display:
        grid;

    place-items:
        center;

    background:
        #e8e1d4;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease;
}

.coin-image {
    width:
        92%;

    height:
        92%;

    object-fit:
        contain;

    transition:
        transform .55s cubic-bezier(.2,.8,.2,1);
}

.sign-card:hover .coin-wrap {
    transform:
        translateY(-8px);

    box-shadow:
        0 28px 80px rgba(39,34,27,.11);
}

.sign-card:hover .coin-image {
    transform:
        scale(1.025);
}

.sign-info {
    position:
        relative;

    padding:
        25px 0 0 42px;
}

.sign-index {
    position:
        absolute;

    left:
        0;

    top:
        36px;

    color:
        var(--muted);

    font-size:
        10px;

    letter-spacing:
        .1em;
}

.sign-info h3 {
    margin:
        0;

    font-family:
        var(--serif);

    font-size:
        clamp(40px, 3.8vw, 60px);

    font-weight:
        400;

    line-height:
        1;
}

.sign-info p {
    max-width:
        320px;

    min-height:
        78px;

    margin:
        16px 0 0;

    color:
        var(--muted);
}

.sign-buy {
    margin-top:
        24px;

    width:
        100%;

    min-height:
        54px;

    padding:
        0 16px 0 19px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    border:
        1px solid rgba(31,30,26,.2);

    border-radius:
        100px;

    text-decoration:
        none;

    font-size:
        13px;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.sign-buy b {
    display:
        grid;

    place-items:
        center;

    width:
        32px;

    height:
        32px;

    flex:
        0 0 auto;

    border:
        1px solid currentColor;

    border-radius:
        50%;

    font-weight:
        400;
}

.sign-buy:hover {
    background:
        var(--dark);

    color:
        white;

    transform:
        translateY(-2px);
}

.sign-quote {
    margin:
        clamp(95px, 10vw, 145px)
        auto 0;

    max-width:
        920px;

    text-align:
        center;

    font-family:
        var(--serif);

    font-size:
        clamp(34px, 4.2vw, 64px);

    line-height:
        1.05;
}

.sign-quote p,
.sign-quote strong {
    display:
        block;

    margin:
        0;
}

.sign-quote p {
    color:
        #969084;
}

.sign-quote strong {
    font-weight:
        400;
}


/* ============================================================
   MATERIAL
============================================================ */

.material-section {
    display:
        grid;

    grid-template-columns:
        .82fr 1.18fr;

    min-height:
        720px;

    background:
        var(--bg);
}

.material-content {
    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        clamp(70px, 7vw, 115px)
        clamp(35px, 7vw, 105px);
}

.material-copy {
    max-width:
        470px;

    margin:
        30px 0 0;

    font-size:
        18px;

    color:
        var(--muted);
}

.material-frame {
    min-height:
        720px;

    background:
        #cfc5b4;
}

.material-frame img {
    height:
        100%;

    object-fit:
        cover;
}


/* ============================================================
   EVERYDAY
============================================================ */

.everyday-section {
    display:
        grid;

    grid-template-columns:
        1.15fr .85fr;

    min-height:
        680px;

    background:
        var(--paper);
}

.everyday-image {
    min-height:
        680px;
}

.everyday-image img {
    height:
        100%;

    object-fit:
        cover;
}

.everyday-content {
    padding:
        clamp(75px, 8vw, 125px)
        clamp(35px, 7vw, 105px);

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;
}

.everyday-content > p:not(.section-kicker) {
    max-width:
        450px;

    margin:
        30px 0 0;

    color:
        var(--muted);

    font-size:
        18px;
}


/* ============================================================
   ENDING / FIRE
============================================================ */

.ending-section {
    position:
        relative;

    overflow:
        hidden;

    background:
        #110f0c;

    color:
        white;

    min-height:
        780px;

    padding:
        clamp(110px, 12vw, 185px)
        var(--side);
}

.ending-glow {
    position:
        absolute;

    width:
        min(62vw, 900px);

    height:
        min(62vw, 900px);

    left:
        50%;

    bottom:
        -70%;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(209,105,39,.32) 0%,
            rgba(169,75,25,.16) 30%,
            rgba(90,43,19,.06) 48%,
            transparent 70%
        );

    filter:
        blur(25px);

    pointer-events:
        none;
}

.ending-inner {
    position:
        relative;

    z-index:
        1;

    max-width:
        1100px;

    margin:
        0 auto;

    text-align:
        center;
}

.ending-title {
    max-width:
        950px;

    margin:
        0 auto;

    font-family:
        var(--serif);

    font-size:
        clamp(68px, 8vw, 124px);

    line-height:
        .9;

    letter-spacing:
        -.055em;

    font-weight:
        400;
}

.ending-copy {
    margin:
        65px auto 0;

    max-width:
        590px;

    color:
        rgba(255,255,255,.62);

    font-size:
        clamp(17px, 1.5vw, 21px);
}

.ending-copy p {
    margin:
        0 0 13px;
}

.ending-action {
    max-width:
        760px;

    margin:
        clamp(70px, 8vw, 110px)
        auto 0;

    padding:
        42px 0;

    border-top:
        1px solid var(--light-line);

    border-bottom:
        1px solid var(--light-line);

    font-family:
        var(--serif);
}

.ending-action span {
    display:
        block;

    color:
        rgba(255,255,255,.60);

    font-size:
        clamp(24px, 3vw, 42px);
}

.ending-action strong {
    display:
        block;

    margin-top:
        8px;

    font-weight:
        400;

    font-size:
        clamp(60px, 8vw, 122px);

    line-height:
        .9;
}

.ending-meaning {
    max-width:
        720px;

    margin:
        54px auto 0;

    font-family:
        var(--serif);

    font-size:
        clamp(24px, 2.8vw, 40px);

    line-height:
        1.12;
}

.ending-meaning p {
    margin:
        0;
}

.ending-meaning p:first-child {
    color:
        rgba(255,255,255,.46);
}

.ending-safety {
    max-width:
        560px;

    margin:
        58px auto 0;

    font-size:
        11px;

    line-height:
        1.6;

    color:
        rgba(255,255,255,.35);
}


/* ============================================================
   GIFT
============================================================ */

.gift-section {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    min-height:
        760px;

    background:
        var(--dark);

    color:
        white;
}

.gift-text {
    padding:
        clamp(85px, 8vw, 130px)
        clamp(35px, 7vw, 105px);

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;
}

.gift-title {
    max-width:
        650px;

    margin:
        0;

    font-family:
        var(--serif);

    font-size:
        clamp(50px, 5.3vw, 82px);

    font-weight:
        400;

    line-height:
        .96;

    letter-spacing:
        -.04em;
}

.gift-lines {
    margin:
        48px 0 0;
}

.gift-lines p {
    margin:
        0;

    padding:
        15px 0;

    border-bottom:
        1px solid var(--light-line);

    font-family:
        var(--serif);

    font-size:
        clamp(24px, 2.3vw, 34px);
}

.gift-final {
    max-width:
        440px;

    margin:
        42px 0 0;

    color:
        rgba(255,255,255,.61);
}

.gift-image {
    min-height:
        760px;
}

.gift-image img {
    height:
        100%;

    object-fit:
        cover;
}


/* ============================================================
   FINAL
============================================================ */

.final-section {
    position:
        relative;

    min-height:
        94svh;

    display:
        grid;

    place-items:
        center;

    color:
        white;

    text-align:
        center;

    overflow:
        hidden;

    background:
        #191815;
}

.final-picture {
    position:
        absolute;

    inset:
        0;
}

.final-image {
    height:
        100%;

    object-fit:
        cover;
}

.final-overlay {
    position:
        absolute;

    inset:
        0;

    background:
        rgba(13,13,11,.56);
}

.final-content {
    position:
        relative;

    z-index:
        2;

    width:
        min(100% - 40px, 1000px);

    padding:
        130px 0;
}

.final-title {
    margin:
        0;

    font-family:
        var(--serif);

    font-size:
        clamp(58px, 7.3vw, 110px);

    line-height:
        .92;

    font-weight:
        400;

    letter-spacing:
        -.05em;
}

.final-signs {
    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        18px;

    margin:
        44px 0;
}

.final-signs span {
    font-family:
        var(--serif);

    font-size:
        20px;
}

.final-signs i {
    width:
        4px;

    height:
        4px;

    background:
        rgba(255,255,255,.52);

    border-radius:
        50%;
}

.ozon-button {
    margin:
        15px auto 0;

    width:
        min(100%, 430px);

    min-height:
        74px;

    padding:
        0 27px;

    border-radius:
        100px;

    display:
        grid;

    grid-template-columns:
        1fr auto auto;

    align-items:
        center;

    gap:
        12px;

    background:
        white;

    color:
        var(--dark);

    text-decoration:
        none;

    text-align:
        left;

    transition:
        transform .25s ease,
        background .25s ease;
}

.ozon-button:hover {
    transform:
        translateY(-4px);

    background:
        #f0ece4;
}

.ozon-button span {
    font-size:
        15px;

    font-weight:
        700;
}

.ozon-button small {
    color:
        var(--muted);

    font-size:
        12px;
}

.ozon-button b {
    display:
        grid;

    place-items:
        center;

    width:
        38px;

    height:
        38px;

    border:
        1px solid rgba(31,30,26,.18);

    border-radius:
        50%;

    font-weight:
        400;
}

.final-note {
    margin:
        19px auto 0;

    font-size:
        11px;

    color:
        rgba(255,255,255,.53);
}


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

.footer {
    padding:
        62px var(--side) 32px;

    background:
        var(--paper);
}

.footer-top,
.footer-bottom {
    max-width:
        var(--max);

    margin:
        0 auto;
}

.footer-top {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        40px;

    padding-bottom:
        55px;
}

.footer-brand {
    font-size:
        1.4em;
}

.footer-top p {
    max-width:
        260px;

    margin:
        0;

    font-family:
        var(--serif);

    font-size:
        24px;

    line-height:
        1.15;

    text-align:
        right;
}

.footer-bottom {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

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

    padding-top:
        23px;

    font-size:
        12px;

    color:
        var(--muted);
}

.footer-bottom a {
    text-decoration:
        none;
}


/* ============================================================
   REVEAL
============================================================ */

.reveal {
    opacity:
        0;

    transform:
        translateY(22px);

    transition:
        opacity .72s cubic-bezier(.2,.8,.2,1),
        transform .72s cubic-bezier(.2,.8,.2,1);
}

.reveal.visible {
    opacity:
        1;

    transform:
        translateY(0);
}

.reveal-delay-1 {
    transition-delay:
        .10s;
}

.reveal-delay-2 {
    transition-delay:
        .20s;
}

.reveal-delay-3 {
    transition-delay:
        .30s;
}


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

@media (max-width: 1020px) {

    .desktop-nav {
        display: none;
    }

    .menu-button {
        display: block;
    }

    .mobile-menu {
        display: block;
    }

    .ritual-section {
        grid-template-columns: 1fr;
    }

    .visual-column {
        min-height: auto;
        padding: 30px;
    }

    .ritual-frame {
        position: relative;
        top: auto;
        height: 70vw;
        min-height: 520px;
    }

    .one-wish-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .one-wish-copy {
        max-width: 620px;
        margin-left: auto;
    }

    .signs-grid {
        grid-template-columns: 1fr;
        max-width: 620px;
        gap: 75px;
    }

    .sign-info p {
        min-height: auto;
    }

    .material-section,
    .everyday-section,
    .gift-section {
        grid-template-columns: 1fr;
    }

    .material-frame,
    .everyday-image,
    .gift-image {
        min-height: 70vw;
    }

    .everyday-image {
        order: 2;
    }

    .gift-image {
        min-height: 700px;
    }
}


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

@media (max-width: 700px) {

    :root {
        --side: 22px;
    }

    .header-inner {
        height: 72px;
    }

    .header-buy {
        display: none;
    }

    .brand-main {
        font-size: 16px;
    }

    .brand-sub {
        font-size: 8px;
    }

    .hero {
        min-height: 100svh;
    }

    .hero-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(12,12,10,.80) 0%,
                rgba(12,12,10,.18) 64%
            );
    }

    .hero-content {
        padding:
            130px 0 64px;
    }

    .hero h1 {
        font-size:
            clamp(54px, 16vw, 76px);

        line-height:
            .91;
    }

    .hero-lead {
        max-width:
            330px;

        font-size:
            17px;
    }

    .hero-scroll {
        display: none;
    }

    .story-section {
        padding-top:
            115px;

        padding-bottom:
            105px;
    }

    .story-number {
        top: 46px;
    }

    .story-large {
        font-size:
            clamp(45px, 13vw, 62px);
    }

    .story-small {
        margin-top:
            55px;

        font-size:
            17px;
    }

    .idea-section {
        padding-top:
            95px;

        padding-bottom:
            100px;
    }

    .idea-title {
        font-size:
            clamp(50px, 14vw, 68px);
    }

    .idea-text {
        margin-top:
            45px;

        font-size:
            19px;
    }

    .visual-column {
        padding: 0;
    }

    .ritual-frame {
        height:
            125vw;

        min-height:
            0;
    }

    .ritual-content {
        padding:
            80px var(--side) 95px;
    }

    .ritual-steps {
        margin-top:
            55px;
    }

    .ritual-step {
        grid-template-columns:
            42px 1fr;

        gap:
            12px;
    }

    .one-wish-section {
        padding-top:
            100px;

        padding-bottom:
            100px;
    }

    .one-wish-title {
        font-size:
            clamp(66px, 20vw, 92px);
    }

    .one-wish-grid {
        gap:
            45px;
    }

    .one-wish-copy {
        font-size:
            17px;
    }

    .one-wish-line {
        margin-top:
            60px;

        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            13px;
    }

    .one-wish-line i {
        width:
            28px;

        flex:
            none;
    }

    .memory-section {
        padding-top:
            105px;

        padding-bottom:
            110px;
    }

    .memory-small {
        margin-bottom:
            35px;
    }

    .memory-title {
        font-size:
            clamp(70px, 20vw, 98px);
    }

    .memory-copy {
        margin-top:
            36px;

        font-size:
            18px;
    }

    .signs-section {
        padding-top:
            100px;

        padding-bottom:
            110px;
    }

    .signs-heading {
        margin-bottom:
            60px;
    }

    .signs-grid {
        gap:
            68px;
    }

    .coin-image {
        width:
            94%;

        height:
            94%;
    }

    .sign-info {
        padding-left:
            35px;
    }

    .sign-info h3 {
        font-size:
            50px;
    }

    .sign-buy {
        margin-top:
            22px;
    }

    .sign-quote {
        margin-top:
            90px;

        font-size:
            40px;
    }

    .material-content,
    .everyday-content,
    .gift-text {
        padding:
            82px var(--side);
    }

    .material-frame,
    .everyday-image {
        min-height:
            120vw;
    }

    .ending-section {
        min-height:
            auto;

        padding-top:
            105px;

        padding-bottom:
            110px;
    }

    .ending-title {
        font-size:
            clamp(65px, 19vw, 90px);
    }

    .ending-copy {
        margin-top:
            48px;
    }

    .ending-action {
        margin-top:
            65px;

        padding:
            35px 0;
    }

    .ending-action strong {
        font-size:
            clamp(66px, 22vw, 100px);
    }

    .ending-meaning {
        margin-top:
            44px;

        font-size:
            27px;
    }

    .ending-safety {
        margin-top:
            45px;
    }

    .gift-image {
        min-height:
            125vw;
    }

    .gift-title {
        font-size:
            53px;
    }

    .final-section {
        min-height:
            100svh;
    }

    .final-content {
        padding:
            110px 0 65px;
    }

    .final-title {
        font-size:
            clamp(54px, 15vw, 73px);
    }

    .final-signs {
        gap:
            10px;

        margin:
            35px 0;
    }

    .final-signs span {
        font-size:
            16px;
    }

    .final-signs i {
        width:
            3px;

        height:
            3px;
    }

    .ozon-button {
        min-height:
            70px;

        padding:
            0 18px;

        grid-template-columns:
            1fr auto;
    }

    .ozon-button small {
        display: none;
    }

    .footer {
        padding-top:
            55px;
    }

    .footer-top {
        flex-direction:
            column;

        align-items:
            flex-start;

        padding-bottom:
            50px;
    }

    .footer-top p {
        text-align:
            left;

        margin-top:
            30px;
    }
}


/* ============================================================
   VIEWPORT HEIGHT SAFETY
============================================================ */

@media (min-width: 701px) {

    .hero {
        min-height:
            min(100svh, 1080px);
    }

    .ritual-frame {
        height:
            min(
                calc(100vh - 165px),
                800px
            );
    }

    .final-section {
        min-height:
            min(94svh, 1000px);
    }
}


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

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

    .reveal {
        opacity:
            1;

        transform:
            none;
    }
}


/* ============================================================
   STORY BACKGROUND — legend-bg.webp
============================================================ */

.story-section {
    background:
        linear-gradient(
            rgba(238,233,223,.82),
            rgba(238,233,223,.82)
        ),
        url('/images/legend-bg.webp')
        center center / cover
        no-repeat;
}


/* ============================================================
   ONE WISH BACKGROUND — one-wish-bg.webp
============================================================ */

.one-wish-section {
    background:
        linear-gradient(
            90deg,
            rgba(20,18,15,.92) 0%,
            rgba(20,18,15,.82) 48%,
            rgba(20,18,15,.40) 100%
        ),
        url('/images/one-wish-bg.webp')
        center center / cover
        no-repeat;
}


/* ============================================================
   MEMORY BACKGROUND — memory-bg.webp
============================================================ */

.memory-section {
    background:
        linear-gradient(
            rgba(217,209,195,.78),
            rgba(217,209,195,.78)
        ),
        url('/images/memory-bg.webp')
        center center / cover
        no-repeat;
}


/* ============================================================
   ENDING BACKGROUND — ending-fire.webp
============================================================ */

.ending-section {
    background:
        linear-gradient(
            rgba(10,9,7,.48),
            rgba(10,9,7,.48)
        ),
        url('/images/ending-fire.webp')
        center center / cover
        no-repeat;
}


/* Старое декоративное свечение больше не нужно —
   теперь огонь есть в настоящем изображении. */

.ending-glow {
    display: none;
}


/* ============================================================
   BRAND LOGO
============================================================ */

.brand {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    display: block;

    background:
        url('/images/ico.png')
        center / contain
        no-repeat;
}

.brand .brand-main,
.brand .brand-sub {
    display: none;
}


.footer-brand {
    width: 72px;
    height: 72px;

    flex: 0 0 72px;
}


@media (max-width: 700px) {

    .brand {
        width: 46px;
        height: 46px;

        flex-basis: 46px;
    }

    .footer-brand {
        width: 62px;
        height: 62px;

        flex-basis: 62px;
    }

}


/* ============================================================
   BRAND LOGO — icon + original text
============================================================ */

.brand {
    width: auto;
    height: auto;
    flex: initial;

    display: flex;
    align-items: center;
    gap: 11px;

    background: none;
}

.brand::before {
    content: "";

    display: block;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;

    background:
        url('/images/ico.png')
        center / contain
        no-repeat;
}

.brand .brand-main,
.brand .brand-sub {
    display: block;
}


.footer-brand {
    width: auto;
    height: auto;
    flex: initial;
}


@media (max-width: 700px) {

    .brand {
        width: auto;
        height: auto;
        flex-basis: auto;

        gap: 8px;
    }

    .brand::before {
        width: 29px;
        height: 29px;
        flex-basis: 29px;
    }

    .footer-brand {
        width: auto;
        height: auto;
        flex-basis: auto;
    }

}


/* ============================================================
   BRAND — icon LEFT, text RIGHT
============================================================ */

.brand {
    width: auto;
    height: auto;
    flex: none;

    display: grid;

    grid-template-columns:
        34px auto;

    grid-template-rows:
        auto auto;

    column-gap:
        11px;

    row-gap:
        0;

    align-items:
        center;

    background:
        none;
}


.brand::before {
    content: "";

    display:
        block;

    width:
        34px;

    height:
        34px;

    grid-column:
        1;

    grid-row:
        1 / 3;

    align-self:
        center;

    background:
        url('/images/ico.png')
        center / contain
        no-repeat;
}


.brand .brand-main {
    display:
        block;

    grid-column:
        2;

    grid-row:
        1;

    align-self:
        end;
}


.brand .brand-sub {
    display:
        block;

    grid-column:
        2;

    grid-row:
        2;

    align-self:
        start;
}


.footer-brand {
    width:
        auto;

    height:
        auto;

    flex:
        none;
}


@media (max-width: 700px) {

    .brand {
        grid-template-columns:
            29px auto;

        column-gap:
            8px;
    }


    .brand::before {
        width:
            29px;

        height:
            29px;
    }


    .footer-brand {
        width:
            auto;

        height:
            auto;

        flex:
            none;
    }

}