/* miris.studio -- Bauhaus workshop with F-pattern and progressive disclosure */

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

:root{
    --bauhaus:#BF5B21;
    --amber:#D48A3E;
    --canvas:#F5F0E8;
    --graphite:#1C1A18;
    --steel:#5A7088;
    --clay:#8B7E72;
    --cream:#EDE6DA;
    --rust:#7A3210;
}

body{
    background:var(--canvas);
    color:var(--graphite);
    font-family:'IBM Plex Sans',sans-serif;
    font-weight:400;
    font-size:1rem;
    line-height:1.8;
    overflow-x:hidden;
}

/* 12-column grid */
.grid-12{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:1.5rem;
    max-width:1200px;
    margin:0 auto;
    padding:0 2rem;
}

/* Sections */
.section{
    min-height:80vh;
    padding:8vh 0;
    display:flex;
    align-items:center;
}

/* Section 1: Name */
.name-block{
    grid-column:1/9;
}

.name-title{
    font-family:'Josefin Sans',sans-serif;
    font-weight:700;
    font-size:clamp(3.5rem,9vw,9rem);
    letter-spacing:-0.02em;
    text-transform:uppercase;
    color:var(--graphite);
    line-height:1;
}

.name-dot{color:var(--bauhaus)}

.name-intro{
    margin-top:1.5rem;
    max-width:50ch;
    color:var(--clay);
}

.geo-stack{
    grid-column:9/13;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.5rem;
    padding-top:2rem;
}

.geo-stack svg{
    width:48px;
    height:48px;
    transition:transform 0.3s ease;
}

.geo-stack svg:hover{
    transform:rotate(45deg);
}

.geo-circle{animation:geo-spin 30s linear infinite}
.geo-square{animation:geo-spin 30s linear infinite reverse}
.geo-triangle{animation:geo-spin 45s linear infinite}

@keyframes geo-spin{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}

/* Section 2: Method */
.section-method{
    background:var(--cream);
}

.method-content{
    grid-column:1/8;
}

.method-divider{
    grid-column:8;
    width:1px;
    background:var(--clay);
    align-self:stretch;
    justify-self:center;
}

.method-geo{
    grid-column:9/13;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2rem;
    justify-content:center;
}

.geo-lg{width:80px;height:80px}

/* Disclosure heading */
.disclosure-heading{
    font-family:'Josefin Sans',sans-serif;
    font-weight:600;
    font-size:clamp(1.75rem,4vw,3rem);
    letter-spacing:0.01em;
    color:var(--bauhaus);
    margin-bottom:2rem;
    cursor:default;
}

.heading-expanded{display:none}
.disclosure-heading.disclosed .heading-collapsed{display:none}
.disclosure-heading.disclosed .heading-expanded{display:inline}

/* Disclosure body */
.disclosure-body{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.8s cubic-bezier(0.16,1,0.3,1);
}

.disclosure-heading.disclosed ~ .disclosure-body{
    max-height:1000px;
}

/* Method paragraphs */
.method-para{
    display:flex;
    gap:1rem;
    align-items:flex-start;
    margin-bottom:2rem;
    opacity:0;
    transform:translateY(8px);
    transition:opacity 0.4s ease,transform 0.4s ease;
}

.method-para.revealed{
    opacity:1;
    transform:translateY(0);
}

.para-marker{
    width:16px;
    height:16px;
    flex-shrink:0;
    margin-top:0.4rem;
}

.body-text{
    color:var(--graphite);
}

/* Section 3: Works */
.works-list{
    grid-column:1/13;
}

.work-item{
    padding:3rem 0;
}

.work-head{
    display:grid;
    grid-template-columns:1fr auto;
    gap:2rem;
    align-items:center;
    cursor:pointer;
}

.work-name{
    font-family:'Josefin Sans',sans-serif;
    font-weight:600;
    font-size:clamp(1.75rem,4vw,3rem);
    letter-spacing:0.01em;
    color:var(--graphite);
    grid-column:1/9;
    transition:color 0.3s ease;
}

.work-item:hover .work-name{
    color:var(--bauhaus);
}

.work-color-block{
    width:60px;
    height:60px;
    grid-column:10/13;
    transition:transform 0.3s ease;
}

.work-item:hover .work-color-block{
    transform:rotate(45deg);
}

.work-body{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.6s cubic-bezier(0.16,1,0.3,1);
    padding-left:0;
}

.work-item.disclosed .work-body{
    max-height:200px;
    padding-top:1rem;
}

.work-body .body-text{
    max-width:60ch;
    color:var(--clay);
}

.work-divider{
    height:1px;
    background:var(--clay);
    opacity:0.3;
}

/* Section 4: Connect */
.section-connect{
    background:var(--graphite);
    color:var(--canvas);
}

.connect-content{
    grid-column:5/12;
}

.connect-text{
    font-family:'IBM Plex Sans',sans-serif;
    font-size:1.0625rem;
    color:var(--canvas);
    margin-bottom:2rem;
    opacity:0;
    transform:translateY(8px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.connect-text.revealed{
    opacity:1;
    transform:translateY(0);
}

.connect-domain{
    font-family:'Josefin Sans',sans-serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--bauhaus);
    letter-spacing:0.01em;
    opacity:0;
    transition:opacity 0.6s ease 0.3s;
}

.connect-domain.revealed{
    opacity:1;
}

.connect-geo{
    grid-column:1/4;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.5rem;
    justify-content:center;
}

.connect-geo svg{
    width:60px;
    height:60px;
}

.geo-circle-outline{animation:geo-spin 30s linear infinite reverse}
.geo-square-outline{animation:geo-spin 35s linear infinite}
.geo-triangle-outline{animation:geo-spin 40s linear infinite reverse}

/* Responsive */
@media(max-width:768px){
    .grid-12{
        grid-template-columns:1fr;
    }
    .name-block,.method-content,.works-list,.connect-content{
        grid-column:1;
    }
    .geo-stack,.method-divider,.method-geo,.connect-geo{
        display:none;
    }
    .work-head{
        grid-template-columns:1fr auto;
    }
    .work-name{grid-column:1}
    .work-color-block{
        width:40px;
        height:40px;
        grid-column:auto;
    }
}

@media(prefers-reduced-motion:reduce){
    .geo-circle,.geo-square,.geo-triangle,
    .geo-circle-outline,.geo-square-outline,.geo-triangle-outline{
        animation:none !important;
    }
    .method-para,.connect-text,.connect-domain{
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }
    .disclosure-body,.work-body{
        max-height:none !important;
        transition:none !important;
    }
}