/* hwagryul.com -- isometric hearth-craft */
/* Palette: #FF6B4A, #F5A623, #E8475F, #1A0F0A, #2C1B12, #FFF5E6, #D4C4B0, #B87333, #FFAD85, #0D0704 */

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

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

body{
    background:#1A0F0A;
    color:#D4C4B0;
    font-family:'DM Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.2vw,1.1rem);
    line-height:1.7;
    letter-spacing:0.015em;
    overflow-x:hidden;
}

/* Workshop sections */
.workshop-section{
    min-height:80svh;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:clamp(2rem,4vw,4rem);
    padding:clamp(3rem,6vw,6rem) clamp(2rem,4vw,4rem);
    position:relative;
}

.section-hero,.section-close{
    min-height:100svh;
}

/* Isometric platforms */
.iso-platform{
    background:#2C1B12;
    padding:clamp(2rem,4vw,3rem);
    max-width:550px;
    width:100%;
    position:relative;
    clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.iso-platform.revealed{
    opacity:1;
    transform:translateY(0);
}

.platform-hero{
    max-width:700px;
    text-align:center;
    clip-path:none;
    background:transparent;
}

.platform-wide{
    max-width:800px;
    clip-path:polygon(5% 0,100% 0,95% 100%,0 100%);
}

.platform-left{
    align-self:flex-start;
}

.platform-right{
    align-self:flex-end;
}

/* Hero */
.hero-title{
    font-family:'Zilla Slab',serif;
    font-weight:700;
    font-size:clamp(2rem,5vw,5rem);
    letter-spacing:0.04em;
    line-height:1.15;
    color:#FFF5E6;
}

.dot{
    color:#FF6B4A;
}

.hero-annotation{
    font-family:'Caveat',cursive;
    font-size:clamp(1rem,2vw,1.6rem);
    color:#B87333;
    margin-top:1rem;
}

/* Section headings */
.section-heading{
    font-family:'Zilla Slab',serif;
    font-weight:700;
    font-size:clamp(1.4rem,3vw,2.8rem);
    letter-spacing:0.04em;
    line-height:1.15;
    color:#FFF5E6;
    margin-bottom:1rem;
}

.body-text{
    margin-bottom:1rem;
    max-width:50ch;
}

.annotation{
    font-family:'Caveat',cursive;
    font-size:clamp(1rem,1.5vw,1.3rem);
    color:#B87333;
    margin-top:1rem;
}

.meta-stamp{
    font-family:'IBM Plex Mono',monospace;
    font-weight:400;
    font-size:0.75rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:#FF6B4A;
    opacity:0.7;
    margin-top:1.5rem;
}

/* Glitch wipe */
.glitch-wipe{
    height:8px;
    background:repeating-linear-gradient(
        0deg,
        transparent,transparent 2px,
        rgba(255,107,74,0.15) 2px,
        rgba(255,107,74,0.15) 4px
    );
    margin:0;
    position:relative;
}

.glitch-wipe::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent,rgba(245,166,35,0.1),transparent);
}

/* Close section */
.close-text{
    font-family:'Zilla Slab',serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:#FFF5E6;
    letter-spacing:0.04em;
    margin-bottom:1rem;
}

/* Responsive */
@media(max-width:768px){
    .iso-platform{
        clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);
    }
    .platform-left,.platform-right{
        align-self:center;
    }
}

@media(prefers-reduced-motion:reduce){
    .iso-platform{opacity:1;transform:none;transition:none}
}