/* iisugi.com -- post-luxury quietude masonry */
/* Palette: #F5F0EB (parchment), #EDE6DE (shell), #2E2A26 (charcoal umber), #7A7267 (stone), #B8A99A (tarnished gold), #A8887A (aged rose), #C4B5A6 (silk thread), #D9CFC5 (warm mist) */

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

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

body{
    background:#F5F0EB;
    color:#7A7267;
    font-family:'DM Sans',sans-serif;
    font-weight:300;
    font-size:clamp(0.9rem,1.2vw,1.1rem);
    line-height:1.75;
    letter-spacing:0.03em;
    overflow-x:hidden;
}

/* Navigation line */
.nav-line{
    position:fixed;
    left:24px;
    top:50%;
    transform:translateY(-50%);
    z-index:100;
}

.nav-track{
    display:flex;
    flex-direction:column;
    gap:2rem;
    position:relative;
}

.nav-track::before{
    content:'';
    position:absolute;
    left:3px;
    top:0;
    bottom:0;
    width:1px;
    background:#C4B5A6;
    opacity:0.4;
}

.nav-node{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#C4B5A6;
    cursor:pointer;
    position:relative;
    transition:background 0.3s ease;
}

.nav-node:hover{
    background:#A8887A;
}

.nav-node.active{
    background:#A8887A;
}

.nav-label{
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    font-family:'Libre Baskerville',serif;
    font-style:italic;
    font-size:0.68rem;
    color:#B8A99A;
    white-space:nowrap;
    opacity:0;
    transition:opacity 0.3s ease;
    pointer-events:none;
}

.nav-node:hover .nav-label{
    opacity:1;
}

/* Hero */
.hero{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
}

.magnolia-bg{
    position:absolute;
    width:80%;
    max-width:600px;
    opacity:0.04;
    z-index:0;
}

.magnolia-branch,.magnolia-petal{
    stroke-dasharray:600;
    stroke-dashoffset:600;
    animation:drawMagnolia 4s ease forwards 1.5s;
}

@keyframes drawMagnolia{
    to{stroke-dashoffset:0}
}

.hero-title{
    font-family:'Libre Baskerville',serif;
    font-weight:400;
    font-size:clamp(2.5rem,6vw,5rem);
    color:#2E2A26;
    letter-spacing:0.15em;
    opacity:0;
    animation:fadeIn 2s ease forwards 1.2s;
    position:relative;
    z-index:1;
}

.hero-whisper{
    font-family:'DM Sans',sans-serif;
    font-weight:300;
    font-size:0.68rem;
    letter-spacing:0.08em;
    color:#B8A99A;
    margin-top:1rem;
    opacity:0;
    animation:fadeIn 1.5s ease forwards 3.5s;
}

@keyframes fadeIn{
    to{opacity:0.7}
}

/* Masonry */
.collection{
    padding:clamp(3rem,6vw,6rem) clamp(3rem,8vw,8rem);
}

.masonry{
    display:grid;
    grid-template-columns:1fr 1.6fr 1.2fr;
    gap:clamp(1.5rem,2vw,2rem);
    max-width:960px;
    margin:0 auto;
}

/* Tiles */
.tile{
    padding:clamp(1.5rem,3vw,2.5rem);
    opacity:0;
    transform:translateY(8px);
    transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1),transform 0.9s cubic-bezier(0.16,1,0.3,1);
}

.tile.revealed{
    opacity:1;
    transform:translateY(0);
}

.tile-text{
    background:#EDE6DE;
}

.tile-wide{
    grid-column:span 2;
}

.tile-body{
    font-family:'Libre Baskerville',serif;
    font-weight:400;
    font-size:clamp(1rem,1.6vw,1.3rem);
    color:#2E2A26;
    line-height:1.55;
    letter-spacing:0.02em;
}

.tile-word{
    display:flex;
    align-items:center;
    justify-content:center;
    background:#F5F0EB;
}

.single-word{
    font-family:'DM Sans',sans-serif;
    font-weight:300;
    font-size:clamp(1rem,2vw,1.6rem);
    text-transform:uppercase;
    letter-spacing:0.4em;
    color:#7A7267;
}

.tile-void{
    background:#D9CFC5;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:120px;
}

.void-numeral{
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
    font-style:italic;
    font-size:clamp(4rem,10vw,8rem);
    color:#C4B5A6;
    opacity:0.08;
}

/* Hover tremor */
.tile:hover{
    animation:tremor 0.3s ease;
}

@keyframes tremor{
    0%{transform:translateX(0)}
    25%{transform:translateX(-2px) rotate(-0.5deg)}
    50%{transform:translateX(1.5px) rotate(0.3deg)}
    75%{transform:translateX(-1px) rotate(-0.2deg)}
    100%{transform:translateX(0)}
}

/* Void section */
.void-section{
    min-height:60vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
}

.void-numeral-large{
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
    font-style:italic;
    font-size:clamp(6rem,16vw,14rem);
    color:#C4B5A6;
    opacity:0.06;
}

.void-floral{
    position:absolute;
    width:clamp(120px,20vw,200px);
    opacity:0.04;
}

/* Seal */
.seal{
    min-height:50vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:4rem 2rem;
}

.seal-domain{
    font-family:'Libre Baskerville',serif;
    font-weight:400;
    font-size:clamp(1.8rem,4vw,3rem);
    color:#2E2A26;
    letter-spacing:0.1em;
    opacity:0.7;
}

.seal-whisper{
    font-family:'DM Sans',sans-serif;
    font-weight:300;
    font-size:0.75rem;
    letter-spacing:0.1em;
    color:#B8A99A;
    margin-top:0.75rem;
    text-transform:uppercase;
}

/* Responsive */
@media(max-width:768px){
    .masonry{
        grid-template-columns:1fr;
    }
    .tile-wide{
        grid-column:span 1;
    }
    .nav-line{
        display:none;
    }
    .collection{
        padding:2rem 1.5rem;
    }
}

@media(prefers-reduced-motion:reduce){
    .tile{opacity:1;transform:none;transition:none}
    .tile:hover{animation:none}
    .hero-title,.hero-whisper{opacity:0.7;animation:none}
    .magnolia-branch,.magnolia-petal{stroke-dashoffset:0;animation:none}
}