/* miris-project.net - Corporate gradient portfolio */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
    --ivory:#FBF8F3;
    --white:#FFFFFF;
    --blush:#E8C4B8;
    --lavender:#C8B8D8;
    --sage:#B8C8B0;
    --peach:#F0D8C8;
    --charcoal:#2A2A2A;
    --warm-gray:#7A7570;
    --rose:#9A7A70;
    --whisper:#E8E0D8;
}

html{font-size:16px;scroll-behavior:smooth}

body{
    background:var(--ivory);
    color:var(--charcoal);
    font-family:'Source Serif 4','Georgia',serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.05vw,1.08rem);
    line-height:1.9;
    overflow-x:hidden;
}

/* Nav */
.nav-bar{
    position:fixed;top:0;left:0;right:0;
    z-index:100;
    display:flex;align-items:center;justify-content:space-between;
    padding:1rem 2rem;
    transition:background 0.4s,backdrop-filter 0.4s;
}

.nav-bar.scrolled{
    background:rgba(255,255,255,0.85);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

.nav-logo{
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
    font-size:1.2rem;
    letter-spacing:0.08em;
    color:var(--charcoal);
}

.nav-menu{
    font-family:'Inter',sans-serif;
    font-weight:500;
    font-size:0.85rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--charcoal);
    cursor:pointer;
}

/* Sections */
.section{
    position:relative;
    padding:0 24px;
}

/* Gradient meshes */
.gradient-mesh{
    position:absolute;inset:0;
    pointer-events:none;
    z-index:0;
}

.mesh-hero{
    background:
        radial-gradient(ellipse at 20% 30%,rgba(232,196,184,0.25) 0%,transparent 60%),
        radial-gradient(ellipse at 75% 50%,rgba(200,184,216,0.2) 0%,transparent 50%),
        radial-gradient(ellipse at 45% 80%,rgba(184,200,176,0.18) 0%,transparent 55%);
}

.mesh-brief{
    background:
        radial-gradient(ellipse at 80% 20%,rgba(232,196,184,0.15) 0%,transparent 50%),
        radial-gradient(ellipse at 30% 70%,rgba(200,184,216,0.12) 0%,transparent 45%);
}

.mesh-forecast{
    background:
        radial-gradient(ellipse at 30% 40%,rgba(232,196,184,0.3) 0%,transparent 50%),
        radial-gradient(ellipse at 70% 30%,rgba(200,184,216,0.25) 0%,transparent 45%),
        radial-gradient(ellipse at 50% 80%,rgba(184,200,176,0.2) 0%,transparent 50%),
        radial-gradient(ellipse at 20% 70%,rgba(240,216,200,0.15) 0%,transparent 40%);
}

/* Letterhead */
.section-letterhead{
    min-height:100vh;
    display:flex;align-items:center;justify-content:center;
}

.letterhead-content{
    text-align:center;
    position:relative;z-index:2;
    opacity:0;
    transition:opacity 1.5s ease-out;
}

.letterhead-content.revealed{opacity:1}

.logotype{
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
    font-size:clamp(3rem,6vw,5.5rem);
    letter-spacing:0.08em;
    color:var(--charcoal);
    line-height:1.1;
}

.subtitle{
    font-family:'Cormorant Garamond',serif;
    font-weight:400;
    font-size:clamp(1rem,1.5vw,1.3rem);
    letter-spacing:0.12em;
    color:var(--warm-gray);
    margin-top:0.5rem;
}

/* Brief */
.section-brief{
    padding-top:clamp(80px,12vh,120px);
    padding-bottom:clamp(80px,12vh,120px);
}

.brief-grid{
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:24px;
    max-width:1000px;
    margin:0 auto;
    position:relative;z-index:2;
    opacity:0;
    transition:opacity 0.8s ease-out;
}

.brief-grid.revealed{opacity:1}

.overline-col{grid-column:1/4}
.body-col{grid-column:4/9}

.overline{
    font-family:'Inter',sans-serif;
    font-weight:400;
    font-size:0.8rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--sage);
}

.body-text{
    margin-bottom:1.5rem;
    color:var(--charcoal);
}

/* Divider */
.divider{
    max-width:1000px;
    margin:0 auto;
    height:1px;
    background:var(--whisper);
}

/* Overline center */
.overline-center{
    text-align:center;
    margin-bottom:clamp(48px,6vh,80px);
}

/* Portfolio */
.section-portfolio{
    padding-top:clamp(80px,12vh,120px);
    padding-bottom:clamp(40px,6vh,60px);
}

.project-entry{
    max-width:1000px;
    margin:0 auto clamp(80px,10vh,120px);
    opacity:0;
    transition:opacity 0.6s ease-out;
}

.project-entry.revealed{opacity:1}

.project-mesh{
    width:100%;
    min-height:300px;
    border-radius:8px;
    display:flex;align-items:flex-end;
    padding:40px;
    position:relative;
    overflow:hidden;
}

.mesh-p1{
    background:
        radial-gradient(ellipse at 25% 40%,rgba(232,196,184,0.5) 0%,transparent 55%),
        radial-gradient(ellipse at 70% 60%,rgba(200,184,216,0.4) 0%,transparent 50%),
        radial-gradient(ellipse at 50% 20%,rgba(184,200,176,0.3) 0%,transparent 45%),
        var(--ivory);
}

.mesh-p2{
    background:
        radial-gradient(ellipse at 60% 30%,rgba(200,184,216,0.5) 0%,transparent 55%),
        radial-gradient(ellipse at 20% 70%,rgba(240,216,200,0.4) 0%,transparent 50%),
        radial-gradient(ellipse at 80% 80%,rgba(184,200,176,0.3) 0%,transparent 45%),
        var(--ivory);
}

.mesh-p3{
    background:
        radial-gradient(ellipse at 40% 50%,rgba(184,200,176,0.5) 0%,transparent 55%),
        radial-gradient(ellipse at 80% 20%,rgba(232,196,184,0.35) 0%,transparent 50%),
        radial-gradient(ellipse at 15% 80%,rgba(200,184,216,0.3) 0%,transparent 45%),
        var(--ivory);
}

.project-title{
    font-family:'Cormorant Garamond',serif;
    font-weight:600;
    font-size:clamp(2rem,3.5vw,3.2rem);
    color:var(--charcoal);
    letter-spacing:0.04em;
    line-height:1.1;
    position:relative;z-index:2;
}

.project-desc{
    padding:clamp(24px,3vh,48px) 0;
}

.desc-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
}

/* Forecast */
.section-forecast{
    padding-top:clamp(80px,12vh,120px);
    padding-bottom:clamp(80px,12vh,160px);
}

.forecast-content{
    max-width:560px;
    margin:0 auto;
    text-align:center;
    position:relative;z-index:2;
    opacity:0;
    transition:opacity 2s ease-out;
}

.forecast-content.revealed{opacity:1}

.forecast-statement{
    font-family:'Cormorant Garamond',serif;
    font-weight:500;
    font-size:clamp(1.2rem,1.8vw,1.6rem);
    color:var(--charcoal);
    line-height:1.6;
    margin-bottom:2rem;
}

.forecast-body{
    text-align:left;
    margin-bottom:3rem;
}

.forecast-close{
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
    font-size:clamp(1.2rem,2vw,1.8rem);
    letter-spacing:0.04em;
    color:var(--warm-gray);
}

/* Responsive */
@media(max-width:768px){
    .brief-grid{grid-template-columns:1fr}
    .overline-col,.body-col{grid-column:1}
    .desc-grid{grid-template-columns:1fr;gap:1.5rem}
    .project-mesh{min-height:200px;padding:24px}
}

@media(prefers-reduced-motion:reduce){
    .letterhead-content,.brief-grid,.project-entry,.forecast-content{
        opacity:1;transition:none;
    }
}