*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#1A1410;font-family:'EB Garamond',serif;font-weight:400;font-size:16px;line-height:1.8;color:#3A2A1A;overflow-x:hidden}
.deco-border{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;pointer-events:none}
.spread{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:60px 40px;position:relative;overflow:hidden}
.hero-spread{background:#1A1410;text-align:center;flex-direction:column}
.spread-cream{background:#F4ECD8}
.spread-dark{background:#1A1410}
.rising-sun{position:absolute;top:50%;left:50%;width:min(100vw,800px);height:min(100vh,800px);transform:translate(-50%,-50%)}
.sun-circle{stroke-dasharray:504;stroke-dashoffset:504;opacity:0}
.sun-rays line{stroke-dasharray:500;stroke-dashoffset:500;opacity:0}
.hero-spread.visible .sun-circle{animation:drawCircle 0.6s ease-out forwards}
.hero-spread.visible .sun-rays line{animation:drawRay 0.8s ease-out forwards}
.hero-spread.visible .sun-rays line:nth-child(1){animation-delay:0.4s}
.hero-spread.visible .sun-rays line:nth-child(2){animation-delay:0.42s}
.hero-spread.visible .sun-rays line:nth-child(3){animation-delay:0.44s}
.hero-spread.visible .sun-rays line:nth-child(4){animation-delay:0.46s}
.hero-spread.visible .sun-rays line:nth-child(5){animation-delay:0.48s}
.hero-spread.visible .sun-rays line:nth-child(6){animation-delay:0.5s}
.hero-spread.visible .sun-rays line:nth-child(7){animation-delay:0.52s}
.hero-spread.visible .sun-rays line:nth-child(8){animation-delay:0.54s}
.hero-spread.visible .sun-rays line:nth-child(9){animation-delay:0.56s}
.hero-spread.visible .sun-rays line:nth-child(10){animation-delay:0.58s}
.hero-spread.visible .sun-rays line:nth-child(11){animation-delay:0.6s}
.hero-spread.visible .sun-rays line:nth-child(12){animation-delay:0.62s}
.hero-spread.visible .sun-rays line:nth-child(13){animation-delay:0.64s}
.hero-spread.visible .sun-rays line:nth-child(14){animation-delay:0.66s}
.hero-spread.visible .sun-rays line:nth-child(15){animation-delay:0.68s}
.hero-spread.visible .sun-rays line:nth-child(16){animation-delay:0.7s}
@keyframes drawCircle{to{stroke-dashoffset:0;opacity:1}}
@keyframes drawRay{to{stroke-dashoffset:0;opacity:0.4}}
.hero-text{position:relative;z-index:2;opacity:0;transform:translateY(10px);transition:all 0.6s ease}
.hero-spread.visible .hero-text{opacity:1;transform:translateY(0);transition-delay:1.2s}
h1{font-family:'Poiret One',cursive;font-weight:400;font-size:38px;letter-spacing:0.03em;color:#D4A850;margin-bottom:12px}
.hero-sub{max-width:480px;margin:0 auto;color:#B89040;font-size:16px}
.label{font-family:'Poiret One',cursive;font-weight:400;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:#8A6A40;display:block;margin-bottom:12px}
.spread-content{max-width:900px;width:100%;display:flex;align-items:center;gap:60px}
.spread-left{flex-direction:row}
.spread-right{flex-direction:row-reverse}
.spread-visual{flex:0 0 200px;display:flex;align-items:center;justify-content:center}
.deco-pattern{width:200px;height:200px}
.spread-text{flex:1}
.spread-center{text-align:center;max-width:600px;margin:0 auto}
.spread-cream h2{font-family:'Poiret One',cursive;font-weight:400;font-size:32px;letter-spacing:0.03em;color:#2A3A6A;margin-bottom:16px}
.spread-cream .label{color:#8A6A40}
.spread-cream p{color:#3A2A1A}
.spread-dark h2{font-family:'Poiret One',cursive;font-weight:400;font-size:32px;letter-spacing:0.03em;color:#D4A850;margin-bottom:16px}
.spread-dark .label{color:#B89040}
.spread-dark p{color:#F4ECD8;opacity:0.85}
h2{font-family:'Poiret One',cursive;font-weight:400;font-size:32px;letter-spacing:0.03em;margin-bottom:16px}
.spread-content{opacity:0;transform:translateY(24px);transition:all 0.5s ease}
.spread-content.visible{opacity:1;transform:translateY(0)}
.spread-dark .spread-text{position:relative}
.spread-dark .spread-text::before{content:'';position:absolute;top:0;left:-20px;width:3px;height:100%;background:linear-gradient(to bottom,#D4A850,transparent);opacity:0.4}
.spread-cream .spread-text{position:relative}
.spread-cream .spread-text::before{content:'';position:absolute;top:0;left:-20px;width:3px;height:100%;background:linear-gradient(to bottom,#2A3A6A,transparent);opacity:0.3}
@media(max-width:768px){h1{font-size:28px}h2{font-size:24px}.spread-content{flex-direction:column !important;gap:30px}.spread-visual{flex:0 0 auto}.spread{padding:40px 20px}}