*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#F5F0E8;--clay:#3D3229;--body:#6B5D4F;--gold:#B8860B;--straw:#D4C4A8;--bronze:#8B7355;--shard:#EDE6D8}
body{background:var(--bg);background-image:radial-gradient(circle,var(--clay) 0.5px,transparent 0.5px);background-size:24px 24px;color:var(--body);font-family:'Source Sans 3',sans-serif;font-weight:300;font-size:16px;line-height:2.0;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.gold-leaf{position:fixed;width:3px;height:5px;background:var(--gold);opacity:0.4;z-index:0;animation:leafFloat 8s ease-in-out infinite}
@keyframes leafFloat{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-3px) rotate(var(--r,0deg))}}
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:1}
.crackle-circle{width:320px;height:320px}
.main-ring{stroke-dasharray:1000;stroke-dashoffset:0}
.hero-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:24px;color:var(--clay);letter-spacing:0.08em;text-transform:lowercase;margin-top:24px}
.scroll-hint{width:1px;height:20px;background:var(--straw);margin-top:40px;animation:hintPulse 2s ease-in-out infinite}
@keyframes hintPulse{0%,100%{opacity:0.3}50%{opacity:0.8}}
.content{max-width:680px;margin:0 auto;padding:0 32px;position:relative;z-index:1}
.fragment{margin-bottom:200px}
.fragment:last-child{margin-bottom:120px}
.kintsugi-break{width:100px;height:10px;display:block;margin-bottom:32px}
h2{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:32px;color:var(--clay);letter-spacing:0.08em;text-transform:lowercase;margin-bottom:16px}
.prophecy{font-family:'Cormorant Garamond',serif;font-weight:600;font-style:italic;font-size:18px;color:var(--gold);margin-bottom:16px;line-height:1.6}
.card-reveal{opacity:0;transform:translateY(20px);transition:opacity 0.8s ease,transform 0.8s ease}
.card-reveal.in-view{opacity:1;transform:translateY(0)}
.shards-section{position:relative;z-index:1;max-width:680px;margin:0 auto 200px;padding:0 32px}
.shards-scroll{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px 0;-webkit-overflow-scrolling:touch}
.shards-scroll::-webkit-scrollbar{display:none}
.shard{flex:0 0 140px;height:120px;background:var(--shard);border:1px solid var(--straw);display:flex;align-items:center;justify-content:center;scroll-snap-align:start}
.shard span{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:16px;color:var(--clay);letter-spacing:0.06em;text-transform:lowercase}
.shard-1{clip-path:polygon(8% 0%,95% 5%,100% 88%,5% 100%)}
.shard-2{clip-path:polygon(0% 8%,90% 0%,98% 95%,10% 100%)}
.shard-3{clip-path:polygon(5% 5%,100% 0%,92% 100%,0% 90%)}
.shard-4{clip-path:polygon(0% 0%,95% 10%,100% 100%,8% 92%)}
.shard-5{clip-path:polygon(10% 0%,100% 5%,95% 95%,0% 100%)}
.footer{position:relative;z-index:1;text-align:center;padding:80px 32px;max-width:680px;margin:0 auto}
.footer-name{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:24px;color:var(--clay);letter-spacing:0.08em;text-transform:lowercase;margin-bottom:8px}
.footer p{font-size:14px;color:var(--body)}
@media(max-width:600px){.crackle-circle{width:240px;height:240px}.fragment{margin-bottom:120px}}