/* ==========================================================
   MILLER RINGS
   DOCUMENTATION SYSTEM
========================================================== */


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

.documentation-hero{

    padding: 96px 24px 72px;

    text-align: center;

    background:
        radial-gradient(
            900px 420px at 50% -120px,
            rgba(255,255,255,0.12),
            transparent 65%
        ),
        url("/static/img/catalog.png")
        center / cover no-repeat;

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

}

.documentation-hero h1{

    font-size:
        clamp(36px,5vw,56px);

    margin-bottom:20px;

    letter-spacing:.04em;

}

.documentation-lead{

    max-width:760px;

    margin:0 auto;

    font-size:18px;

    line-height:1.7;

    color:var(--text-soft);

}

.documentation-actions{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-top:42px;

    flex-wrap:wrap;

}



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

.documentation-section{

    padding:96px 24px;

    background:var(--bg-paper);

}

.documentation-section-muted{

    padding:96px 24px;

    background:var(--bg-muted);

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

}

.documentation-container{

    max-width:1440px;

    margin:auto;

}

.documentation-narrow{

    max-width:860px;

    margin:auto;

}



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

.documentation-head{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:40px;

    margin-bottom:56px;

}

.documentation-head-left{

    max-width:760px;

}

.documentation-meta{

    margin-bottom:18px;

    font-size:11px;

    letter-spacing:.32em;

    text-transform:uppercase;

    color:rgba(0,0,0,.46);

}

.documentation-head h2{

    margin:0;

    font-size:
        clamp(40px,4vw,70px);

    line-height:.95;

    font-weight:500;

    letter-spacing:-.04em;

}

.documentation-head p{

    margin-top:22px;

    font-size:18px;

    line-height:1.8;

    color:var(--text-soft);

}

/* ==========================================================
   DOCUMENT GRID
========================================================== */

.documentation-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(340px,1fr));

    gap:36px;

}



/* ==========================================================
   DOCUMENT CARD
========================================================== */

.document-card{

    position:relative;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    height:100%;

    border-radius:28px;

    background:#fff;

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

    box-shadow:
        0 14px 42px rgba(0,0,0,.08);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.document-card:hover{

    transform:translateY(-6px);

    box-shadow:
        0 24px 60px rgba(0,0,0,.14);

}



/* ==========================================================
   LINK
========================================================== */

.document-card-link{

    display:flex;

    flex-direction:column;

    height:100%;

    color:inherit;

    text-decoration:none;

}



/* ==========================================================
   IMAGE
========================================================== */

.document-card-image{

    position:relative;

    overflow:hidden;

    aspect-ratio:4 / 5;

    background:#ece6dc;

}



.document-card-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.04),

            rgba(0,0,0,.04)

        );

}



.document-card-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

    transition:

        transform .8s ease,

        filter .4s ease;

}



.document-card:hover
.document-card-image img{

    transform:scale(1.04);

}



/* ==========================================================
   EMPTY
========================================================== */

.document-card-empty{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:rgba(0,0,0,.28);

    font-size:22px;

    letter-spacing:.08em;

}



/* ==========================================================
   BODY
========================================================== */

.document-card-body{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:34px;

}



/* ==========================================================
   TYPE
========================================================== */

.document-card-type{

    margin-bottom:16px;

    font-size:11px;

    letter-spacing:.24em;

    text-transform:uppercase;

    color:#8c6a3c;

}



/* ==========================================================
   TITLE
========================================================== */

.document-card-title{

    margin:0 0 18px;

    font-size:30px;

    line-height:1.08;

    font-weight:500;

    color:#111;

}



/* ==========================================================
   DESCRIPTION
========================================================== */

.document-card-description{

    margin:0;

    font-size:15px;

    line-height:1.8;

    color:rgba(0,0,0,.66);

}



/* ==========================================================
   META
========================================================== */

.document-card-meta{

    display:flex;

    flex-direction:column;

    gap:8px;

    margin-top:24px;

    padding-top:22px;

    border-top:
        1px solid rgba(0,0,0,.06);

}



.document-card-meta div{

    display:flex;

    justify-content:space-between;

    gap:16px;

}



.document-card-label{

    color:rgba(0,0,0,.45);

    font-size:13px;

}



.document-card-value{

    color:#111;

    text-align:right;

    font-size:13px;

}



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

.document-card-footer{

    margin-top:auto;

    padding-top:28px;

}



.document-card-more{

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:#8c6a3c;

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:.18em;

    padding-bottom:4px;

    border-bottom:
        1px solid rgba(140,106,60,.28);

    transition:

        color .25s,

        border-color .25s,

        gap .25s;

}



.document-card:hover
.document-card-more{

    color:#5f4522;

    border-color:#5f4522;

    gap:16px;

}

/* ==========================================================
   DOCUMENT SHOWCASE
========================================================== */

.documentation-showcase{

    padding:140px 0;

    overflow:hidden;

}



.documentation-showcase + .documentation-showcase{

    border-top:1px solid rgba(0,0,0,.05);

}



.documentation-showcase-head{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:40px;

    margin-bottom:56px;

}



.documentation-showcase-info{

    max-width:760px;

}



.documentation-showcase-meta{

    margin-bottom:18px;

    font-size:11px;

    letter-spacing:.32em;

    text-transform:uppercase;

    color:rgba(0,0,0,.46);

}



.documentation-showcase-title{

    margin:0;

    font-size:clamp(42px,5vw,74px);

    line-height:.94;

    letter-spacing:-.04em;

    font-weight:500;

}



.documentation-showcase-text{

    margin-top:22px;

    font-size:18px;

    line-height:1.85;

    color:var(--text-soft);

    max-width:720px;

}

/* ==========================================================
   DOCUMENT DETAIL
========================================================== */

.documentation-detail{

    padding:120px 0;

}



.documentation-detail-grid{

    display:grid;

    grid-template-columns:

        minmax(0,720px)

        420px;

    gap:72px;

    align-items:start;

}

/* ==========================================================
   DOCUMENT VIEWER
========================================================== */

.documentation-viewer{

    position:relative;

}



.documentation-sheet{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    background:#fff;

    border:1px solid rgba(0,0,0,.06);

    box-shadow:

        0 28px 80px rgba(0,0,0,.08);

}



.documentation-sheet img{

    width:100%;

    display:block;

}

.documentation-sheet::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.18),

            transparent 18%

        );

    pointer-events:none;

}



.documentation-sheet::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle,

            rgba(0,0,0,.02),

            transparent 80%

        );

    pointer-events:none;

}

/* ==========================================================
   SIDEBAR
========================================================== */

.documentation-sidebar{

    position:sticky;

    top:120px;

}
/* ==========================================================
   INFO CARD
========================================================== */

.documentation-info{

    padding:42px;

    border-radius:30px;

    background:#fff;

    border:1px solid rgba(0,0,0,.06);

    box-shadow:

        0 20px 60px rgba(0,0,0,.06);

}

.documentation-info h1{

    margin:0 0 28px;

    font-size:44px;

    line-height:1.04;

    font-weight:500;

}

.documentation-meta{

    display:grid;

    gap:18px;

}



.documentation-meta-row{

    display:flex;

    justify-content:space-between;

    gap:18px;

    padding-bottom:14px;

    border-bottom:

        1px solid rgba(0,0,0,.06);

}



.documentation-meta-label{

    color:rgba(0,0,0,.45);

    font-size:14px;

}



.documentation-meta-value{

    color:#111;

    font-size:14px;

    text-align:right;

}

.documentation-description{

    margin-top:38px;

}



.documentation-description h2{

    margin-bottom:18px;

    font-size:28px;

}



.documentation-description p{

    line-height:1.9;

    color:var(--text-soft);

}

.documentation-buttons{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin-top:42px;

}



.documentation-buttons .button{

    width:100%;

}

.documentation-download{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    text-decoration:none;

}

/* ==========================================================
   RELATED
========================================================== */

.documentation-related{

    margin-top:120px;

}



.documentation-related h2{

    margin-bottom:42px;

    font-size:42px;

}

.documentation-related-grid{

    display:grid;

    grid-template-columns:

        repeat(3,1fr);

    gap:34px;

}

.documentation-related-grid{

    display:grid;

    grid-template-columns:

        repeat(3,1fr);

    gap:34px;

}

/* ==========================================================
   LUXURY EFFECTS
========================================================== */

.document-card{

    isolation:isolate;

}



.document-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.28),

            transparent 28%

        );

    opacity:0;

    transition:opacity .35s ease;

    pointer-events:none;

}



.document-card:hover::before{

    opacity:1;

}



/* gold edge */

.document-card::after{

    content:"";

    position:absolute;

    inset:0;

    border:1px solid transparent;

    border-radius:inherit;

    transition:border-color .3s ease;

    pointer-events:none;

}



.document-card:hover::after{

    border-color:rgba(185,139,68,.26);

}



/*
*/


/* ==========================================================
   DOCUMENT CAROUSEL
========================================================== */

.document-carousel{

    display:flex;

    gap:18px;

    overflow-x:auto;
    overflow-y:hidden;

    padding:4px 0 18px;

    scroll-snap-type:x proximity;
    scroll-behavior:smooth;

    -webkit-overflow-scrolling:touch;
}

.document-carousel>*{

    flex:0 0 auto;

    scroll-snap-align:start;
}

.document-carousel::-webkit-scrollbar{

    height:5px;
}

.document-carousel::-webkit-scrollbar-track{

    background:#efe9e2;
}

.document-carousel::-webkit-scrollbar-thumb{

    background:#b48a4a;
}


/* ==========================================================
   CARD
========================================================== */

.document-card{

    width:210px;

    flex:0 0 210px;

    display:flex;

    flex-direction:column;
}


/* ==========================================================
   PREVIEW
========================================================== */

.document-card-image{

    display:block;

    color:inherit;

    text-decoration:none;
}

.document-card-paper{

    position:relative;

    overflow:hidden;

    aspect-ratio:210 / 297;

    background:#fff;

    border-radius:12px;

    border:1px solid rgba(0,0,0,.06);

    padding:10px;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.document-card-paper::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.35),
            rgba(255,255,255,0)
        );

    pointer-events:none;
}

.document-card-paper img{

    width:100%;
    height:100%;

    object-fit:contain;

    display:block;
}

.document-card:hover .document-card-paper{

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 42px rgba(0,0,0,.10);
}


/* ==========================================================
   BODY
========================================================== */

.document-card-body{

    padding:14px 2px 0;

    display:flex;

    flex-direction:column;

    gap:6px;
}


/* ==========================================================
   TYPE
========================================================== */

.document-card-type{

    font-size:10px;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:#b48a4a;

    font-weight:600;
}


/* ==========================================================
   TITLE
========================================================== */

.document-card h3{

    margin:0;

    font-size:18px;

    line-height:1.35;

    font-weight:500;

    color:#111;
}


/* ==========================================================
   META
========================================================== */

.document-card-org,
.document-card-date,
.document-card-number{

    font-size:12px;

    color:#888;
}


/* ==========================================================
   DESCRIPTION
========================================================== */

.document-card-description{

    margin:2px 0 0;

    font-size:13px;

    line-height:1.55;

    color:#666;
}


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

.document-card-footer{

    margin-top:8px;

    padding-top:8px;
}

.document-link{

    display:inline-flex;

    align-items:center;

    gap:6px;

    color:#8f6734;

    font-size:11px;

    font-weight:600;

    letter-spacing:.18em;

    text-transform:uppercase;

    text-decoration:none;
}

.document-link span{

    transition:transform .25s;
}

.document-card:hover .document-link span{

    transform:translateX(4px);
}


/* ==========================================================
   GRID
========================================================== */

.document-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fill,minmax(220px,1fr));

    gap:32px 24px;
}


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

@media (max-width:768px){

    .document-card{

        width:180px;

        flex-basis:180px;
    }

    .document-grid{

        grid-template-columns:1fr;
    }

}

/* ==========================================================
   DOCUMENTS
========================================================== */

.document-carousel{

    display:flex;

    gap:28px;

    overflow-x:auto;

    overflow-y:hidden;

    padding:10px 2px 22px;

    scroll-snap-type:x proximity;

    scrollbar-width:thin;
}

.document-carousel::-webkit-scrollbar{

    height:6px;
}

.document-carousel::-webkit-scrollbar-thumb{

    background:#c9b48a;

    border-radius:20px;
}


/* ==========================================================
   CARD
========================================================== */

.document-card{

    flex:0 0 280px;

    width:280px;

    scroll-snap-align:start;
}


/* ==========================================================
   DOCUMENT PREVIEW
========================================================== */

.document-card-preview{

    display:block;

    text-decoration:none;
}

.document-card-preview img{

    display:block;

    width:100%;

    aspect-ratio:210 / 297;

    object-fit:contain;

    object-position:center;

    background:#ffffff;

    border:1px solid #e6ddd0;

    border-radius:6px;

    padding:10px;

    box-shadow:

        0 20px 50px rgba(0,0,0,.08);

    transition:

        transform .35s ease,

        box-shadow .35s ease;
}

.document-card:hover
.document-card-preview img{

    transform:

        translateY(-6px)
        rotate(-0.4deg);

    box-shadow:

        0 30px 70px rgba(0,0,0,.12);
}


/* ==========================================================
   META
========================================================== */

.document-card-meta{

    margin-top:18px;
}

.document-card-type{

    font-size:11px;

    letter-spacing:.28em;

    text-transform:uppercase;

    color:#b58a47;

    margin-bottom:10px;
}

.document-card h3{

    margin:0;

    font-size:22px;

    line-height:1.25;

    font-weight:500;

    color:#111;
}

.document-card-org{

    margin-top:10px;

    color:#777;

    font-size:14px;
}

.document-card-date{

    margin-top:6px;

    color:#9a9a9a;

    font-size:13px;
}


/* ==========================================================
   LINK
========================================================== */

.document-card-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:18px;

    color:#9b7641;

    text-decoration:none;

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:.22em;

    transition:.25s;
}

.document-card-link:hover{

    color:#6f4f23;

    gap:14px;
}


/* ==========================================================
   GRID
========================================================== */

.document-grid{

    display:grid;

    grid-template-columns:

        repeat(auto-fill,minmax(280px,1fr));

    gap:46px 36px;

    margin-top:60px;
}


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

@media (max-width:768px){

    .document-card{

        width:240px;

        flex-basis:240px;
    }

    .document-card h3{

        font-size:18px;
    }

}

/* ===========================
   КАРУСЕЛЬ
=========================== */

.document-carousel{

    display:flex;

    gap:18px;              /* было 28-36 */

    overflow-x:auto;

    padding:8px 0 20px;
}


/* ===========================
   КАРТОЧКА
=========================== */

.document-card{

    flex:0 0 340px;

    width:340px;
}


/* ===========================
   ПРЕВЬЮ
=========================== */

.document-card-preview img{

    width:100%;

    aspect-ratio:1.42;

    object-fit:contain;

    padding:18px;

    border-radius:18px 18px 0 0;
}


/* ===========================
   НИЗ
=========================== */

.document-card-meta{

    padding:

        26px
        28px
        30px;
}


/* ===========================
   ТИП
=========================== */

.document-card-type{

    margin-bottom:14px;

    letter-spacing:.24em;
}


/* ===========================
   ЗАГОЛОВОК
=========================== */

.document-card h3{

    font-size:28px;

    line-height:1.22;

    margin-bottom:16px;

    min-height:68px;
}


/* ===========================
   ОРГАНИЗАЦИЯ
=========================== */

.document-card-org{

    margin-bottom:8px;
}


/* ===========================
   ДАТА
=========================== */

.document-card-date{

    margin-bottom:24px;
}


/* ===========================
   ССЫЛКА
=========================== */

.document-card-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:10px;

    padding-bottom:4px;

    border-bottom:

        1px solid
        rgba(181,138,71,.25);
}

.document-card-link:hover{

    gap:18px;
}

.document-card{

    flex:0 0 370px;

    width:370px;
}

.document-carousel{

    gap:16px;
}