*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--stone:#E0D8CC;--earth:#3A3028;--moss:#687860;--sand:#B0A890;--rock:#7A7870;--shadow:rgba(58,48,40,0.06)}
body{background:var(--stone);color:var(--earth);font-family:'Cormorant Garamond',serif;font-weight:400;font-size:1rem;line-height:2;overflow-x:hidden}

.zone{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 clamp(1rem,8vw,10rem);position:relative}
.dawn{min-height:100vh}
.noon{min-height:180vh}
.dusk{min-height:80vh}
.night{min-height:100vh}

.silence-top{height:40vh}
.silence-bottom{height:30vh}
.spacer{height:16vh}

.title{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(2.5rem,6vw,5rem);font-style:italic;color:var(--earth);text-align:center;letter-spacing:0.02em}
.imperfect-circle{display:block;margin:3rem auto 0}
.circle-path{stroke-dasharray:460 40;animation:drawCircle 6s ease-out forwards}
.faded{opacity:0.1;margin:0 auto}

.content-block{max-width:min(460px,80vw);margin:0 auto;text-align:left}
.content-block p{font-size:clamp(1rem,1.2vw,1.125rem);line-height:2;color:var(--earth)}
.content-block em{font-style:italic;font-weight:500}
.watermark{font-family:'Noto Serif JP',serif;font-size:clamp(3rem,8vw,6rem);color:var(--rock);opacity:0.04;text-align:center;position:absolute;left:50%;transform:translateX(-50%);pointer-events:none}

.leaf{position:absolute;pointer-events:none}
.leaf-1{right:10%;bottom:30%}
.leaf-2{left:8%;top:20%}

.card{opacity:0;transform:translateY(16px);transition:opacity 1s cubic-bezier(0.68,-0.55,0.265,1.55),transform 1s cubic-bezier(0.68,-0.55,0.265,1.55)}
.card.visible{opacity:1;transform:translateY(0)}

@keyframes drawCircle{from{stroke-dashoffset:500}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){*{animation-duration:0.01ms!important;transition-duration:0.01ms!important}}