/* doublestandard.xyz - Muji Duality */

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

:root{
    --deep-forest:#1B3D2A;
    --living-green:#2D5F3A;
    --moss:#5A8A6A;
    --sage:#A3C4A8;
    --warm-linen:#F5F0E8;
    --cool-linen:#EDE8E0;
    --parchment-shadow:#D4CFC5;
    --deep-ink:#1A1A18;
    --faded-ink:#4A4A45;
}

body{
    background:var(--warm-linen);
    color:var(--deep-ink);
    font-family:'Chivo',sans-serif;
    font-weight:300;
    font-size:clamp(0.95rem,1.2vw,1.15rem);
    line-height:1.75;
    overflow-x:hidden;
}

/* Star-celestial background */
.star-field{
    position:fixed;
    inset:0;
    z-index:0;
    width:100%;
    height:100%;
    pointer-events:none;
}

/* Progress dots */
.progress-dots{
    position:fixed;
    right:20px;
    top:50%;
    transform:translateY(-50%);
    z-index:10;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.dot{
    width:6px;height:6px;
    border-radius:50%;
    background:var(--parchment-shadow);
    transition:background 0.6s ease;
}

.dot.active{background:var(--living-green)}

/* Sections */
.section{
    position:relative;
    z-index:1;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(40px,6vw,80px) clamp(5vw,5vw,5vw);
}

/* Section I: The Standard */
.section-standard{
    text-align:center;
}

.hero-domain{
    font-family:'Bungee Shade',sans-serif;
    font-size:clamp(2.5rem,7vw,6rem);
    color:var(--deep-forest);
    letter-spacing:0.02em;
    line-height:1.1;
    opacity:0;
    transition:opacity 2s ease;
}

.hero-domain.shown{opacity:1}

.hero-tagline{
    font-family:'Chivo',sans-serif;
    font-weight:300;
    font-size:clamp(0.85rem,1.1vw,1rem);
    color:var(--faded-ink);
    margin-top:2rem;
    opacity:0;
    transition:opacity 1.5s ease;
}

.hero-tagline.shown{opacity:0.6}

/* Section dividers */
.section-divider{
    text-align:center;
    padding:3rem 0;
}

.divider-text{
    font-family:'Chivo',sans-serif;
    font-weight:300;
    font-size:0.65rem;
    letter-spacing:0.12em;
    color:var(--faded-ink);
    opacity:0.4;
}

/* Dual grid */
.dual-grid{
    display:grid;
    grid-template-columns:1fr 2px 1fr;
    gap:0;
    width:100%;
    max-width:1100px;
    margin:0 auto;
}

.grid-col{
    display:flex;
    flex-direction:column;
    gap:1.5rem;
    padding:0 1.5rem;
}

.central-divider{
    display:flex;
    align-items:stretch;
    justify-content:center;
}

.divider-line{
    width:2px;
    background:var(--living-green);
    opacity:0.4;
    transform:scaleY(0);
    transform-origin:top;
    transition:transform 1.2s cubic-bezier(0.4,0,0.2,1);
}

.divider-line.drawn{transform:scaleY(1)}

/* Cards */
.card{
    aspect-ratio:4/3;
    border-radius:2px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border:1px solid transparent;
    transition:border-color 0.6s ease;
}

.card:hover{border-color:var(--living-green)}

.card-l{
    background:var(--warm-linen);
    padding:2rem 2.5rem;
}

.card-r{
    background:var(--cool-linen);
    padding:2.5rem 2rem;
}

.card-heading{
    font-family:'Libre Baskerville',serif;
    font-size:clamp(1.1rem,1.5vw,1.4rem);
    letter-spacing:0.01em;
    line-height:1.3;
    margin-bottom:0.75rem;
    color:var(--deep-forest);
}

.bold-heading{font-weight:700}
.regular-heading{font-weight:400}

.card-body{
    color:var(--deep-ink);
    font-size:clamp(0.9rem,1.1vw,1rem);
}

.card-label{
    font-size:0.75rem;
    color:var(--faded-ink);
    margin-top:0.75rem;
    letter-spacing:0.04em;
}

/* Generative art cards */
.card-gen{
    padding:1rem;
}

.gen-canvas{
    width:100%;
    flex:1;
    display:block;
}

/* Weight cards */
.card-weight{padding:2rem}

.weight-left{
    font-family:'Libre Baskerville',serif;
    font-weight:400;
    font-size:clamp(1rem,1.3vw,1.1rem);
    line-height:1.75;
    color:var(--deep-ink);
}

.weight-right{
    font-family:'Libre Baskerville',serif;
    font-weight:700;
    font-size:clamp(0.95rem,1.2vw,1.05rem);
    line-height:1.85;
    color:var(--deep-ink);
}

/* Section V: Return */
.return-content{
    width:100%;
    max-width:680px;
    text-align:center;
}

.card-final{
    width:100%;
    aspect-ratio:16/9;
    background:var(--warm-linen);
    padding:1rem;
    margin-bottom:3rem;
}

.return-domain{
    font-family:'Libre Baskerville',serif;
    font-weight:400;
    font-size:clamp(1.6rem,3vw,2.8rem);
    letter-spacing:0.01em;
    color:var(--deep-forest);
    margin-bottom:1rem;
}

.return-tagline{
    font-family:'Chivo',sans-serif;
    font-weight:300;
    font-size:clamp(0.85rem,1.1vw,1rem);
    color:var(--faded-ink);
    opacity:0.6;
}

/* Fade reveal */
.fade-reveal{
    opacity:0;
    transition:opacity 1.5s cubic-bezier(0.4,0,0.2,1);
}

.fade-reveal.shown{opacity:1}

/* Responsive */
@media(max-width:768px){
    .dual-grid{
        grid-template-columns:1fr;
        gap:1.5rem;
    }

    .central-divider{display:none}
    .progress-dots{display:none}

    .card{aspect-ratio:auto}
    .card-l,.card-r{padding:1.5rem}
}

@media(prefers-reduced-motion:reduce){
    .hero-domain,.hero-tagline{opacity:1;transition:none}
    .fade-reveal{opacity:1;transition:none}
    .divider-line{transform:scaleY(1);transition:none}
    .star-field{display:none}
}