/* ===================================
GLOBAL
=================================== */
* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html {
    scroll-behavior:smooth;
}
body {
    background:var(--bg);
    color:var(--black);
    font-family:var(--font-main);
    overflow-x:hidden;
}
a {
    text-decoration:none;
    color: #f7f5f0;
}
.container {
    width:min(var(--container), 90%);
    margin:auto;
}
section {
    position:relative;
    padding:140px 0;
}
/* ===================================
LOADER
=================================== */
.loader {
    position:fixed;
    inset:0;
    background:#111;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
}
.loader__text {
    color:white;
    font-family:var(--font-title);
    font-size:50px;
    letter-spacing:2px;
}
/* ===================================
CURSOR
=================================== */
.cursor {
    position:fixed;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--gold);
    pointer-events:none;
    z-index:9999;
    mix-blend-mode:difference;
    transform:translate(-50%,-50%);
}
/* ===================================
HEADER
=================================== */
.header{
position:fixed;
top:0;
left:0;
width:100%;
z-index:100;
padding:25px 0;
background:rgba(15,15,15,.25);
backdrop-filter:blur(14px);
border-bottom:1px solid rgba(255,255,255,.08);
transition:.5s;
}
.header__inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.header .button{
background:var(--gold);
color:#111;
padding:15px 30px;
}
.header .button:hover{
background:#d8bd91;
}
.logo{
font-family:var(--font-title);
font-size:36px;
font-weight:600;
color:#fff;
letter-spacing:.5px;
}
.logo span{
color:var(--gold);
}
.nav {
    display:flex;
    gap:45px;
}
.nav a {
    font-size:14px;
    position:relative;
}
.nav a::after {
    content:"";
    position:absolute;
    bottom:-8px;
    left:0;
    width:0;
    height:1px;
    background:var(--gold);
    transition:var(--transition);
}
.nav a:hover::after {
    width:100%;
}
/* ===================================
BUTTON
=================================== */
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:18px 38px;
    background:var(--black);
    color:white;
    border-radius:100px;
    font-size:14px;
    transition:var(--transition);
}
.button:hover {
    transform:translateY(-5px);
}
.button--light {
    background:white;
    color:black;
}
/* ===================================
HERO
=================================== */
.hero {
    height:100vh;
    min-height:800px;
    display:flex;
    align-items:center;
    overflow:hidden;
}
.hero__image{
position:absolute;
inset:-14% 0;
background:
url("../assets/images/hero.jpg")
center/cover no-repeat;
transform:translate3d(0,0,0) scale(1.04);
transform-origin:center;
backface-visibility:hidden;
pointer-events:none;
will-change:transform;
filter:
sepia(.18)
contrast(1.05)
brightness(.85);
}
.hero__overlay{
position:absolute;
inset:0;
background:
linear-gradient(
90deg,
rgba(0,0,0,.82),
rgba(0,0,0,.35)
);
z-index:1;
}
.hero::after{
content:"";
position:absolute;
inset:0;
background-image:url("../assets/images/noise.png");
opacity:.08;
pointer-events:none;
z-index:2;
}
.hero__container{
z-index:3;
}
.hero__container {
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
}
.subtitle {
    font-size:12px;
    letter-spacing:5px;
    color:var(--gold);
    margin-bottom:30px;
}
.hero h1 {
    color:white;
    font-family:var(--font-title);
    font-size:100px;
    line-height:.9;
    max-width:850px;
}
.hero h1 span {
    display:block;
    color:var(--gold-light);
    font-style:italic;
}
.hero__description {
    margin-top:40px;
    color:#ddd;
    font-size:20px;
    line-height:1.8;
    max-width:560px;
}
.hero__buttons {
    display:flex;
    gap:20px;
    margin-top:50px;
}
.hero__card {
    background:white;
    padding:45px;
    border-radius:40px;
    width:260px;
}
.hero__number {
    font-family:var(--font-title);
    font-size:90px;
    color:var(--gold);
}
.hero__scroll {
    position:absolute;
    bottom:40px;
    left:50%;
    transform:translateX(-50%);
    color:white;
    font-size:12px;
    letter-spacing:5px;
}
/* ===================================
INTRO
=================================== */
.intro {
    text-align:center;
}
.intro h2 {
    font-family:var(--font-title);
    font-size:80px;
    line-height:1;
    max-width:900px;
    margin:0 auto 40px;
}
.intro p:last-child {
    font-size:20px;
    color:var(--text);
    line-height:2;
    max-width:800px;
    margin:auto;
}
/* ===================================
ABOUT
=================================== */
.about__grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px;
    align-items:center;
}
.photo-placeholder {
    height:700px;
    border-radius:50px;
    background:
    linear-gradient(
    135deg,
    #ddd,
    #aaa
    );
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-title);
    font-size:70px;
    color:white;
}
.about h2,
.research h2,
.process h2 {
    font-family:var(--font-title);
    font-size:75px;
    line-height:1;
    margin-bottom:30px;
}
.about p {
    font-size:18px;
    line-height:1.9;
    color:var(--text);
}
.stats {
    display:flex;
    gap:50px;
    margin-top:50px;
}
.stats strong {
    display:block;
    font-family:var(--font-title);
    font-size:60px;
    color:var(--gold);
}
.stats span {
    color:#777;
}
/* ===================================
RESEARCH CARDS
=================================== */
.research {
    background:#111;
    color:white;
}
.research h2 {
    color:white;
}
.cards {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:70px;
}
.card {
    padding:45px;
    min-height:320px;
    border-radius:35px;
    background:
    rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    transition:var(--transition);
}
.card:hover {
    transform:translateY(-15px);
    border-color:var(--gold);
    background:
    rgba(255,255,255,.08);
}
.card h3 {
    font-family:var(--font-title);
    font-size:40px;
    margin-bottom:25px;
}
.card p {
    color:#ccc;
    font-size:17px;
    line-height:1.8;
}
/* ===================================
PROCESS / TIMELINE
=================================== */
.process {
    overflow:hidden;
}
.timeline {
    position:relative;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
    margin-top:80px;
}
.timeline::before {
    content:"";
    position:absolute;
    top:40px;
    left:0;
    right:0;
    height:2px;
    background:
    linear-gradient(
    90deg,
    var(--gold),
    transparent
    );
}
.timeline__item {
    position:relative;
    padding-top:90px;
}
.timeline__item span {
    position:absolute;
    top:0;
    left:0;
    width:80px;
    height:80px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:white;
    border:2px solid var(--gold);
    color:var(--gold);
    font-family:var(--font-title);
    font-size:30px;
}
.timeline__item h3 {
    font-family:var(--font-title);
    font-size:42px;
    margin-bottom:20px;
}
.timeline__item p {
    color:var(--text);
    line-height:1.8;
}
/* ===================================
CONTACTS
=================================== */
.contacts {
    background:#111;
    color:white;
}
.contacts__box {
    text-align:center;
    padding:100px 40px;
    border-radius:50px;
    background:
    linear-gradient(
    135deg,
    #191919,
    #080808
    );
}
.contacts h2 {
    font-family:var(--font-title);
    font-size:85px;
    line-height:1;
    margin-bottom:50px;
}
/* ===================================
FOOTER
=================================== */
.footer {
    background:#080808;
    color:white;
    padding:40px 0;
    font-size:14px;
}
/* ===================================
IMAGE EFFECTS
=================================== */
.photo-placeholder,
.hero__image {
    will-change:transform;
}
.card,
.hero__card,
.timeline__item {
    will-change:transform;
}
/* ===================================
SELECTION
=================================== */
::selection {
    background:var(--gold);
    color:white;
}
/* ===================================
HIDE MOBILE MENU
=================================== */
.menu {
    display:none;
}
.photo-frame{
position:relative;
overflow:hidden;
border-radius:40px;
height:700px;
}
.photo-frame img{
width:100%;
height:100%;
object-fit:cover;
filter:sepia(.15);
transition:1.5s;
}
.photo-frame:hover img{
transform:scale(1.08);
}
.about__content h2{
font-family:var(--font-title);
font-size:80px;
line-height:.95;
margin-bottom:35px;
}
.about__content p{
margin-bottom:25px;
}
.stats div{
position:relative;
}
.stats div:not(:last-child)::after{
content:"";
position:absolute;
right:-25px;
top:10px;
height:60px;
width:1px;
background:#ddd;
}
.reveal-image{
overflow:hidden;
}
.journey{
background:#111;
color:white;
overflow:hidden;
}
.journey h2{
font-family:var(--font-title);
font-size:80px;
line-height:1;
max-width:900px;
margin-bottom:80px;
}
.journey__track{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:24px;
width:100%;
}
.journey__item{
width:100%;
min-height:420px;
padding:34px;
border-radius:40px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.12);
transition:var(--transition);
}
.journey__item:hover{
transform:translateY(-15px);
border-color:var(--gold);
}
.journey__number{
font-family:var(--font-title);
font-size:80px;
color:var(--gold);
margin-bottom:40px;
}
.journey__item h3{
font-family:var(--font-title);
font-size:34px;
margin-bottom:20px;
}
.journey__item p{
color:#bbb;
line-height:1.8;
font-size:17px;
}
.archive{
background:#f7f5f0;
}
.archive h2{
font-family:var(--font-title);
font-size:80px;
line-height:1;
max-width:900px;
margin-bottom:80px;
}
.archive__grid{
display:grid;
grid-template-columns:2fr 1fr;
grid-template-rows:350px 350px;
gap:30px;
}
.archive__card{
position:relative;
overflow:hidden;
border-radius:35px;
background:#111;
}
.archive__card--big{
grid-row:span 2;
}
.archive__card img{
width:100%;
height:100%;
object-fit:cover;
transition:1.2s;
filter:sepia(.25);
}
.archive__card:hover img{
transform:scale(1.08);
}
.archive__card::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
0deg,
rgba(0,0,0,.8),
transparent
);
}
.archive__info{
position:absolute;
bottom:35px;
left:35px;
z-index:2;
color:white;
}
.archive__info span{
color:var(--gold);
letter-spacing:3px;
font-size:13px;
}
.archive__info h3{
font-family:var(--font-title);
font-size:38px;
margin-top:10px;
}
.archive__info p{
color:#ddd;
margin-top:10px;
}
.book{
background:#111;
color:white;
overflow:hidden;
}
.book__grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:100px;
align-items:center;
}
.book__visual{
display:flex;
justify-content:center;
perspective:1200px;
}
.book__cover{
width:360px;
height:520px;
background:
linear-gradient(
135deg,
#3a2618,
#8d6335
);
border-radius:10px 30px 30px 10px;
box-shadow:
40px 40px 80px rgba(0,0,0,.5);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
transform:
rotateY(-25deg);
position:relative;
}
.book__cover::before{
content:"";
position:absolute;
left:20px;
top:0;
bottom:0;
width:4px;
background:#d6b278;
}
.book__title{
font-family:var(--font-title);
font-size:55px;
text-align:center;
line-height:1;
color:#f1dfbc;
}
.book__year{
margin-top:40px;
letter-spacing:5px;
color:#d8bd91;
}
.book__content h2{
font-family:var(--font-title);
font-size:80px;
line-height:1;
margin-bottom:35px;
}
.book__content p{
font-size:18px;
line-height:1.9;
color:#ccc;
}
.book__list{
margin:45px 0;
display:flex;
flex-direction:column;
gap:20px;
}
.book__list div{
display:flex;
align-items:center;
gap:20px;
font-size:18px;
}
.book__list span{
color:var(--gold);
font-family:var(--font-title);
font-size:35px;
}
.reviews{
background:#f7f5f0;
}
.reviews h2{
font-family:var(--font-title);
font-size:80px;
line-height:1;
max-width:800px;
margin-bottom:80px;
}
.reviews__grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}
.review{
background:white;
padding:45px;
border-radius:35px;
box-shadow:var(--shadow);
position:relative;
transition:var(--transition);
}
.review:hover{
transform:translateY(-12px);
}
.review__mark{
font-family:var(--font-title);
font-size:90px;
line-height:.7;
color:var(--gold);
}
.review p{
font-size:17px;
line-height:1.9;
color:#555;
margin:30px 0;
}
.review span{
color:var(--gold);
font-weight:600;
}
.contacts{
background:#0b0b0b;
color:white;
}
.contacts__grid{
display:grid;
grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
align-items:center;
gap:90px;
}
.contacts__content{
max-width:900px;
}
.contacts__content h2{
font-family:var(--font-title);
font-size:80px;
line-height:.95;
margin-bottom:35px;
}
.contacts__content>p:not(.subtitle){
font-size:18px;
line-height:1.9;
color:#bbb;
max-width:650px;
}
.contacts__links{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:18px;
text-align:center;
}
.contacts__links a{
font-family:var(--font-title);
font-size:42px;
line-height:1.05;
transition:var(--transition);
}
.contacts__links a:hover{
color:var(--gold);
transform:translateX(8px);
}
body:before{
content:"";
position:fixed;
inset:0;
background:url("../assets/images/noise.png");
opacity:.035;
pointer-events:none;
z-index:999;
}
.family-tree{
background:#111;
color:white;
overflow:hidden;
isolation:isolate;
}
.family-tree::before{
content:"";
position:absolute;
width:700px;
height:700px;
right:-240px;
top:10%;
border-radius:50%;
background:radial-gradient(circle,rgba(184,148,94,.14),transparent 68%);
filter:blur(10px);
z-index:-1;
pointer-events:none;
}
.family-tree h2{
font-family:var(--font-title);
font-size:80px;
line-height:1;
max-width:900px;
margin-bottom:18px;
}
.tree__lead{
max-width:520px;
color:#ccc;
font-size:18px;
line-height:1.9;
}
.tree{
position:relative;
width:min(880px,100%);
margin:25px auto 0;
}
.tree::before{
content:"";
position:absolute;
inset:8% 6% 5%;
background:radial-gradient(circle at 48% 42%,rgba(255,255,255,.035),transparent 62%);
pointer-events:none;
}
.tree__diagram{
display:block;
width:100%;
height:auto;
overflow:visible;
}
.tree__branch{
fill:none;
stroke:rgba(216,189,145,.72);
stroke-width:1.5;
stroke-linecap:round;
stroke-linejoin:round;
vector-effect:non-scaling-stroke;
}
.tree__person{
color:#d8bd91;
transform-box:fill-box;
transform-origin:center;
cursor:default;
}
.tree__person circle:first-child{
fill:#111;
stroke:currentColor;
stroke-width:1.5;
vector-effect:non-scaling-stroke;
transition:fill .45s ease,filter .45s ease;
}
.tree__person--filled circle:first-child,
.tree__person--you circle:first-child{
fill:var(--gold);
}
.tree__person text{
fill:#ded8ce;
font-family:var(--font-title);
font-size:17px;
text-anchor:middle;
letter-spacing:.15px;
}
.tree__person text tspan+ tspan{
fill:#9d927f;
font-family:var(--font-main);
font-size:10px;
letter-spacing:1.8px;
}
.tree__person--you text{
fill:#fff;
font-family:var(--font-main);
font-size:11px;
font-weight:600;
letter-spacing:2px;
}
.tree__pulse{
fill:none;
stroke:var(--gold);
stroke-width:1;
transform-origin:center;
pointer-events:none;
}
@media(hover:hover){
.tree__person:hover circle:first-child{
fill:var(--gold-light);
filter:drop-shadow(0 0 14px rgba(216,189,145,.45));
}
}
.migration{
background:#f7f5f0;
overflow:hidden;
}
.migration h2{
font-family:var(--font-title);
font-size:80px;
line-height:1;
max-width:900px;
margin-bottom:80px;
}
.migration__map{
height:600px;
position:relative;
background:
url("../assets/images/map.jpg")
center/cover;
border-radius:50px;
overflow:hidden;
}
.map__point{
position:absolute;
display:flex;
flex-direction:column;
align-items:center;
font-family:var(--font-title);
font-size:28px;
}
.map__point span{
width:22px;
height:22px;
background:var(--gold);
border-radius:50%;
box-shadow:0 0 30px var(--gold);
}
.point-one{
left:20%;
top:25%;
}
.point-two{
left:48%;
top:40%;
}
.point-three{
right:18%;
bottom:25%;
}
.map__route{
position:absolute;
height:2px;
background:var(--gold);
transform-origin:left center;
}
.route-one{
width:35%;
left:25%;
top:35%;
transform:rotate(18deg);
}
.route-two{
width:30%;
left:55%;
top:48%;
transform:rotate(15deg);
}
.migration__text{
margin-top:50px;
font-size:22px;
line-height:1.8;
max-width:700px;
}
img{
opacity:0;
transition:opacity 1s ease;
}
img.loaded{
opacity:1;
}