/* gunsul.studio - Light-Academia Atelier */

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

:root{
    --warm-linen:#F5EDE0;
    --parchment-cream:#EDE3D0;
    --umber-graphite:#3D3229;
    --warm-sepia:#6B5D4F;
    --aged-brass:#A68B5B;
    --walnut-shadow:#5C4A35;
    --straw-whisper:#C4A97D;
    --charred-oak:#2A2118;
}

html{scroll-behavior:smooth}

body{
    background:var(--warm-linen);
    color:var(--umber-graphite);
    font-family:'DM Sans',sans-serif;
    font-weight:400;
    font-size:clamp(1rem,1.2vw,1.15rem);
    line-height:1.75;
    letter-spacing:0.005em;
    overflow-x:hidden;
}

/* Faint grid overlay */
body::before{
    content:'';
    position:fixed;inset:0;
    pointer-events:none;
    opacity:0.03;
    background:
        repeating-linear-gradient(90deg,var(--aged-brass) 0,var(--aged-brass) 1px,transparent 1px,transparent calc(100%/12));
    z-index:0;
}

/* Top bar */
.top-bar{
    position:fixed;
    top:0;left:0;right:0;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 clamp(24px,4vw,60px);
    border-bottom:1px solid rgba(196,169,125,0.3);
    z-index:100;
    background:rgba(245,237,224,0.9);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

.top-domain{
    font-family:'Space Grotesk',sans-serif;
    font-weight:300;
    font-size:0.8rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:rgba(140,122,94,0.6);
}

.top-index{
    font-family:'Space Grotesk',sans-serif;
    font-weight:300;
    font-size:0.8rem;
    color:rgba(140,122,94,0.6);
    cursor:pointer;
    transition:color 0.8s;
}

.top-index:hover{color:var(--aged-brass)}

/* Index overlay */
.index-overlay{
    position:fixed;
    inset:0;
    background:rgba(245,237,224,0.95);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    z-index:99;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:24px;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.8s cubic-bezier(0.25,0.1,0.25,1);
}

.index-overlay.open{
    opacity:1;
    pointer-events:auto;
}

.index-overlay a{
    font-family:'Space Grotesk',sans-serif;
    font-weight:300;
    font-size:clamp(1.2rem,2vw,1.8rem);
    color:var(--warm-sepia);
    text-decoration:none;
    letter-spacing:0.04em;
    transition:color 0.8s;
}

.index-overlay a:hover{color:var(--aged-brass)}

/* Sections */
.section{
    position:relative;
    z-index:1;
}

/* Section I: Threshold */
.section-threshold{
    min-height:100vh;
    display:flex;
    align-items:flex-end;
    padding:0 0 15vh clamp(40px,8vw,120px);
}

.threshold-content{
    max-width:70%;
}

.hero-title{
    font-family:'Space Grotesk',sans-serif;
    font-weight:300;
    font-size:clamp(3.5rem,9vw,10rem);
    line-height:1.1;
    letter-spacing:0.01em;
    color:var(--umber-graphite);
    opacity:0;
    transition:opacity 1.5s cubic-bezier(0.25,0.1,0.25,1);
    position:relative;
}

.hero-title.drawn{
    opacity:1;
}

.hero-title::after{
    content:'';
    position:absolute;
    left:0;bottom:-8px;
    width:0;height:1px;
    background:var(--aged-brass);
    transition:width 1.2s cubic-bezier(0.25,0.1,0.25,1) 1.5s;
}

.hero-title.drawn::after{
    width:100%;
}

.epigraph{
    font-family:'Instrument Serif',serif;
    font-size:clamp(0.9rem,1.1vw,1.1rem);
    color:var(--aged-brass);
    margin-top:24px;
    opacity:0;
    transition:opacity 2s cubic-bezier(0.25,0.1,0.25,1) 3.5s;
}

.hero-title.drawn~.epigraph{opacity:1}

/* Section II: Foundation */
.section-foundation{
    min-height:120vh;
    padding:20vh clamp(40px,6vw,80px);
}

.foundation-layout{
    display:flex;
    align-items:flex-start;
    gap:clamp(40px,6vw,80px);
}

.foundation-text{
    width:35%;
    max-width:30ch;
    padding-top:15vh;
    color:var(--warm-sepia);
}

.foundation-text p{margin-bottom:20px}

.foundation-image{
    width:55%;
    margin-left:auto;
}

.duotone-image{
    width:100%;
    padding-bottom:75%;
    background:var(--parchment-cream);
    position:relative;
    overflow:hidden;
}

.duotone-image::before{
    content:'';
    position:absolute;inset:0;
    background:
        linear-gradient(135deg,var(--walnut-shadow) 0%,var(--warm-sepia) 30%,var(--straw-whisper) 60%,var(--parchment-cream) 100%);
    opacity:0.7;
}

.duotone-image::after{
    content:'';
    position:absolute;inset:0;
    background:repeating-linear-gradient(45deg,transparent 0,transparent 3px,rgba(92,74,53,0.03) 3px,rgba(92,74,53,0.03) 4px);
}

/* Border-animate reveal */
.reveal-block{
    position:relative;
}

.reveal-block::before{
    content:'';
    position:absolute;
    inset:-8px;
    border:1px solid transparent;
    pointer-events:none;
    transition:none;
}

.reveal-block.revealed::before{
    animation:borderDraw 1.2s cubic-bezier(0.25,0.1,0.25,1) forwards;
}

@keyframes borderDraw{
    0%{
        border-color:transparent;
        clip-path:polygon(0 0,0 0,0 0,0 0);
    }
    25%{
        border-color:var(--aged-brass);
        clip-path:polygon(0 0,100% 0,100% 0,0 0);
    }
    50%{
        clip-path:polygon(0 0,100% 0,100% 100%,100% 100%);
    }
    75%{
        clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
    }
    100%{
        border-color:var(--aged-brass);
        clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
    }
}

/* Section III: Structure */
.section-structure{
    min-height:140vh;
    padding:20vh clamp(40px,6vw,80px);
}

.structure-heading-zone{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.section-heading{
    font-family:'Space Grotesk',sans-serif;
    font-weight:500;
    font-size:clamp(1.8rem,4vw,3.5rem);
    letter-spacing:0.1em;
    text-transform:uppercase;
    line-height:1.1;
    color:var(--umber-graphite);
    text-align:center;
}

.horizontal-line{
    width:0;
    height:1px;
    background:var(--aged-brass);
    margin-top:24px;
    transition:width 3s cubic-bezier(0.25,0.1,0.25,1);
}

.horizontal-line.drawn{
    width:100vw;
    margin-left:-50vw;
    margin-right:-50vw;
}

.structure-blocks{
    display:flex;
    justify-content:space-between;
    padding-top:20vh;
    gap:40px;
}

.structure-block{
    max-width:28ch;
}

.structure-block h3{
    font-family:'Space Grotesk',sans-serif;
    font-weight:500;
    font-size:1.1rem;
    letter-spacing:0.04em;
    color:var(--umber-graphite);
    margin-bottom:12px;
}

.structure-block p{
    color:var(--warm-sepia);
    font-size:0.95rem;
}

.block-left{align-self:flex-start}
.block-center{align-self:center}
.block-right{align-self:flex-end}

/* Section IV: Light */
.section-light{
    min-height:120vh;
    position:relative;
}

.light-image-bg{
    position:sticky;
    top:0;
    width:100%;
    height:100vh;
    background:
        linear-gradient(160deg,var(--walnut-shadow) 0%,var(--warm-sepia) 40%,var(--straw-whisper) 70%,var(--parchment-cream) 100%);
}

.light-overlay{
    position:relative;
    z-index:2;
    margin-top:-80vh;
    background:rgba(245,237,224,0.85);
    padding:15vh clamp(80px,15vw,240px);
}

.light-text{
    font-family:'Instrument Serif',serif;
    font-size:clamp(1.1rem,1.5vw,1.4rem);
    color:var(--warm-sepia);
    line-height:1.8;
    margin-bottom:32px;
}

/* Section V: Detail */
.section-detail{
    min-height:120vh;
    padding:20vh clamp(40px,6vw,80px);
}

.detail-grid{
    display:grid;
    grid-template-columns:1.2fr 0.8fr;
    grid-template-rows:1.3fr 0.7fr;
    gap:24px;
    margin-top:clamp(2rem,4vw,4rem);
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
}

.detail-cell{
    position:relative;
}

.detail-caption{
    font-family:'Instrument Serif',serif;
    font-size:clamp(0.8rem,1vw,0.9rem);
    color:var(--aged-brass);
    display:block;
    margin-top:8px;
}

.image-handle .duotone-image::before{
    background:linear-gradient(180deg,var(--straw-whisper),var(--walnut-shadow));
}

.image-joint .duotone-image::before{
    background:linear-gradient(90deg,var(--warm-sepia),var(--parchment-cream));
}

.image-shadow .duotone-image::before{
    background:linear-gradient(225deg,var(--parchment-cream),var(--walnut-shadow));
}

.image-stair .duotone-image::before{
    background:linear-gradient(45deg,var(--walnut-shadow),var(--straw-whisper));
}

/* Section VI: Silence */
.section-silence{
    min-height:120vh;
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding-bottom:60px;
}

.branch-drawing{
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:60vw;height:60vh;
    opacity:0;
    transition:opacity 5s cubic-bezier(0.25,0.1,0.25,1);
    pointer-events:none;
}

.branch-drawing.visible{opacity:0.06}

.branch-svg{width:100%;height:100%}

.silence-footer{
    text-align:center;
    padding:0 40px;
}

.footer-name{
    font-family:'Space Grotesk',sans-serif;
    font-weight:300;
    font-size:0.75rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:rgba(196,169,125,0.4);
    display:block;
    margin-bottom:8px;
}

.footer-contact{
    font-family:'DM Sans',sans-serif;
    font-size:0.8rem;
    color:var(--warm-sepia);
    opacity:0.5;
}

/* Responsive */
@media(max-width:768px){
    .foundation-layout{flex-direction:column-reverse}
    .foundation-text,.foundation-image{width:100%}
    .foundation-text{padding-top:40px;max-width:none}
    .structure-blocks{flex-direction:column;gap:40px}
    .structure-block{max-width:none}
    .light-overlay{padding:10vh 30px}
    .detail-grid{grid-template-columns:1fr;grid-template-rows:auto}
}