/* ==========================================
   CLOUD PEPTIDES RESEARCH LIBRARY
   ========================================== */

:root{

--research-pink:#d48db9;
--research-light:#fff8fc;
--research-line:#f1d9e7;
--research-text:#555;
--research-shadow:0 18px 45px rgba(220,165,195,.12);

}

/* ---------- HERO ---------- */

.research-hero{

max-width:950px;

margin:35px auto 35px;

text-align:center;

}

.research-hero h1{

font-size:64px;
line-height:1.1;
margin-bottom:20px;

}

.research-hero p{

font-size:22px;

line-height:1.8;

color:#666;

max-width:760px;

margin:auto;

}

/* ---------- COLLECTION ---------- */

.collection{

background:white;

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

border-radius:24px;

padding:38px;

margin:16px auto;

box-shadow:0 10px 28px rgba(220,165,195,.10);

transition:.25s;

}

.collection:hover{

transform:translateY(-3px);

}

/* ---------- HEADER ---------- */

.collection-header{

display:flex;

align-items:center;

gap:28px;

margin-bottom:34px;

}

.collection-icon{

width:110px;

height:110px;

flex-shrink:0;

border-radius:50%;

background:var(--research-light);

display:flex;

justify-content:center;

align-items:center;

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

}

.collection-icon img{

width:72%;

}

.collection-title h2{

font-size:38px;

margin-bottom:8px;

}

.collection-title p{

color:#888;

font-size:17px;

}

/* ---------- BADGE ---------- */

.library-badge{

display:inline-block;

padding:8px 18px;

border-radius:999px;

background:#fdeef6;

color:var(--research-pink);

font-size:12px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

margin-bottom:14px;

}

/* ---------- SNAPSHOT ---------- */

.snapshot{

background:var(--research-light);

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

border-radius:24px;

padding:28px;

margin:35px 0;

}

.snapshot h3{

margin-bottom:18px;

color:var(--research-pink);

}

.snapshot-grid{

display:grid;

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

gap:18px;

}

.snapshot-item{

display:flex;

align-items:center;

gap:10px;

font-size:16px;

}

/* ---------- TAGS ---------- */

.compounds{

display:flex;

flex-wrap:wrap;

gap:12px;

margin-top:25px;

}

.compounds span{

padding:10px 18px;

background:#fdeef6;

border-radius:999px;

font-weight:600;

color:#b45d93;

}

/* ---------- QUICK FACTS ---------- */

.quickfacts{

display:grid;

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

gap:20px;

margin:40px 0;

}

.fact{

background:white;

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

border-radius:22px;

padding:24px;

text-align:center;

}

.fact h4{

font-size:13px;

letter-spacing:1px;

text-transform:uppercase;

color:#999;

margin-bottom:10px;

}

.fact strong{

font-size:22px;

}

/* ---------- PROGRESS ---------- */

.progress{

margin-top:40px;

}

.progress-row{

margin:20px 0;

}

.progress-row span{

display:block;

margin-bottom:8px;

}

.bar{

height:10px;

background:#eee;

border-radius:999px;

overflow:hidden;

}

.fill{

height:100%;

background:linear-gradient(90deg,#d48db9,#efb9d7);

}

/* ---------- BUTTON ---------- */

.collection .btn{

margin-top:40px;

}

/* ---------- EXTERNAL ---------- */

.external-links{

display:grid;

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

gap:20px;

margin-top:45px;

}

.external{

padding:28px;

border-radius:22px;

background:white;

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

text-align:center;

transition:.2s;

}

.external:hover{

transform:translateY(-4px);

box-shadow:var(--research-shadow);

}

.external h3{

margin-bottom:12px;

}

/* ---------- RELATED ---------- */

.related{

margin-top:50px;

display:flex;

flex-wrap:wrap;

gap:16px;

}

.related a{

padding:12px 22px;

background:#fff8fc;

border-radius:999px;

text-decoration:none;

color:var(--research-pink);

font-weight:600;

}

/* ---------- MOBILE ---------- */

@media(max-width:900px){

.collection-header{

flex-direction:column;

text-align:center;

}

.quickfacts{

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

}

.snapshot-grid{

grid-template-columns:1fr;

}

.external-links{

grid-template-columns:1fr;

}

}

/* ==========================================
   RESEARCH ARTICLE IMPROVEMENTS
   ========================================== */

/* Overall article width */

.article{

max-width:1150px;

margin:auto;

}

/* Breadcrumbs */

.breadcrumbs{

max-width:1150px;

margin:25px auto 10px;

font-size:13px;

color:#999;

}

.breadcrumbs a{

color:#999;

text-decoration:none;

transition:.2s;

}

.breadcrumbs a:hover{

color:var(--research-pink);

}

.breadcrumbs span{

margin:0 6px;

}

/* Better spacing */

.collection{

max-width:1150px;

}

/* Section titles */

.collection h2{

font-size:40px;

margin-bottom:20px;

line-height:1.2;

}

.collection h3{

font-size:24px;

margin-bottom:14px;

}

/* Paragraphs */

.collection p{

font-size:18px;

line-height:1.95;

color:#555;

margin-bottom:22px;

}

/* Research labels */

.section-label{

display:inline-block;

margin-bottom:10px;

font-size:12px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

color:var(--research-pink);

}

/* Snapshot */

.snapshot{

padding:34px;

}

.snapshot-item{

font-size:18px;

padding:8px 0;

}

/* Quick Facts */

.quickfacts{

margin:30px 0 50px;

}

.fact{

padding:34px 20px;

transition:.25s;

}

.fact:hover{

transform:translateY(-5px);

box-shadow:0 14px 35px rgba(215,165,190,.15);

}

.fact h4{

font-size:13px;

letter-spacing:1.4px;

}

.fact strong{

display:block;

margin-top:10px;

font-size:30px;

line-height:1.3;

}

/* Compound pills */

.compounds{

margin-top:30px;

margin-bottom:35px;

}

.compounds span{

font-size:15px;

padding:12px 22px;

}

/* FAQ */

.collection h3{

margin-top:34px;

}

/* External cards */

.external{

padding:36px;

height:100%;

display:flex;

flex-direction:column;

justify-content:space-between;

}

.external p{

font-size:16px;

margin:18px 0;

}

.external:hover{

border-color:#e5b3cf;

}

/* Related research */

.related{

margin-top:35px;

}

.related a{

transition:.25s;

}

.related a:hover{

background:var(--research-pink);

color:white;

}

/* Disclaimer */

.disclaimer-box{

background:#fff9fc;

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

border-radius:24px;

padding:35px;

}

/* Nice fade between sections */

.collection{

position:relative;

overflow:hidden;

}

.collection::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:2px;

background:linear-gradient(
90deg,
#e8b3cf,
#f9d7e8,
#e8b3cf
);

opacity:.45;

}

opacity:.6;

}

/* Mobile */

@media(max-width:900px){

.collection{

padding:28px;

}

.collection h2{

font-size:30px;

}

.collection p{

font-size:17px;

}

.fact strong{

font-size:24px;

}

}

.compound-tags{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:30px 0;
    min-height:170px;
    align-content:flex-start;
}

html{
    scroll-behavior:smooth;
}

.collection{
    scroll-margin-top:120px;
}

.snapshot .related{
    margin-top:20px;
}

.collection:target{

    border-color:#e5b3cf;

    box-shadow:0 14px 36px rgba(212,141,185,.18);

    transition:.3s;

}