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

body{
    font-family:Georgia,'Songti SC','YuMincho','Hiragino Mincho ProN','Nanum Myeongjo','Source Han Serif',serif;
    background:#F4F0E4;
    color:#3a3632;
    line-height:1.8;
    -webkit-font-smoothing:antialiased;
}

/* lang nav */
.lang-nav{
    text-align:center;
    padding:1.2rem 1.5rem 0;
    font-size:0.74rem;
    color:#b0aa9e;
}
.lang-nav a{color:#9a948a}
.lang-nav .current{color:#3a3632;border-bottom:none;cursor:default}
.lang-nav span{margin:0 0.4em;color:#ddd8cc}

/* hero */
.hero{
    text-align:center;
    padding:clamp(1.5rem,7vh,5rem) 1.5rem clamp(2rem,6vh,4rem);
}
.avatar{
    width:140px;
    height:140px;
    border-radius:50%;
}
h1{
    font-weight:normal;
    font-size:2.7rem;
    letter-spacing:normal;
    margin:0.6rem 0 0.5rem;
    transform:scaleY(1.3);
    color:#6E839A;
}
.tagline{
    color:#9a948a;
    font-size:0.9rem;
}
.sakura{
    display:inline-block;
    vertical-align:middle;
    margin-left:0.3em;
    position:relative;
    top:-1px;
}

/* poem */
.poem{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:0 1.5rem clamp(1.5rem,3vh,2.5rem);
}
.poem-inner{
    display:inline-block;
    text-align:left;
}
.poem p{
    font-size:0.95rem;
    color:#5a564e;
    margin-bottom:1.8rem;
    line-height:2.2;
}
.poem p:last-child{
    color:#3a3632;
    margin-bottom:0;
}

/* release link */
.release-link{
    text-align:center;
    margin:clamp(1.5rem,3vh,2.5rem) auto 0;
    font-size:0.88rem;
}
.release-link a{
    display:inline-block;
    padding:0.6rem 1.8rem;
    color:#5a564e;
    background:#ece8db;
    border:1px solid #ddd8cc;
    letter-spacing:0.05em;
    transition:background 0.3s ease,border-color 0.3s ease;
}
.release-link a:hover{
    background:#e4dfd4;
    border-color:#ccc7ba;
    border-bottom-color:#ccc7ba;
}

/* divider */
.divider{
    width:48px;
    height:1px;
    background:#ddd8cc;
    margin:clamp(2rem,5vh,4rem) auto;
}

/* features */
.features{
    max-width:520px;
    margin:0 auto;
    padding:0 1.5rem;
    text-align:left;
}
.features ul{list-style:none}
.features li{
    font-size:0.88rem;
    color:#5a564e;
    padding:0.6rem 0;
    border-bottom:1px solid #e4dfd4;
}
.features li:last-child{border-bottom:none}
.features li b{
    font-weight:bold;
    color:#3a3632;
    margin-right:0.5em;
    font-size:0.92rem;
}

/* footer */
footer{
    max-width:520px;
    margin:clamp(2rem,5vh,4rem) auto clamp(2rem,4vh,3rem);
    padding:2rem 1.5rem;
    border-top:1px solid #e4dfd4;
    text-align:left;
    font-size:0.8rem;
    color:#9a948a;
    line-height:2;
}
footer h2{
    font-weight:normal;
    font-size:0.8rem;
    color:#9a948a;
    margin:0;
}
footer ul{list-style:none;margin:0.5rem 0 1rem}
footer .note{font-size:0.76rem;color:#b0aa9e}

/* links */
a{
    color:inherit;
    text-decoration:none;
    border-bottom:1px solid transparent;
    transition:border-color 0.3s ease;
}
a:hover,a:focus-visible{
    border-bottom-color:currentColor;
}

/* reveal */
.reveal{
    opacity:0;
    translate:0 14px;
    transition:opacity 0.75s ease-out,translate 0.75s ease-out;
}
.reveal.visible{
    opacity:1;
    translate:0 0;
}
.hero .reveal:nth-child(2){transition-delay:.12s}
.hero .reveal:nth-child(3){transition-delay:.24s}
.poem-inner .reveal:nth-child(2){transition-delay:.1s}
.poem-inner .reveal:nth-child(3){transition-delay:.2s}
.features li.reveal:nth-child(2){transition-delay:.06s}
.features li.reveal:nth-child(3){transition-delay:.12s}
.features li.reveal:nth-child(4){transition-delay:.18s}
.features li.reveal:nth-child(5){transition-delay:.24s}
.features li.reveal:nth-child(6){transition-delay:.30s}

@media(prefers-reduced-motion:reduce){
    .reveal{opacity:1;translate:none;transition:none}
}

@media(max-width:600px){
    .avatar{width:110px;height:110px}
    h1{font-size:2rem}
    .poem p{font-size:0.9rem}
}