:root{--bg:#33091a;--fg:#f6e9d3;--accent:#d9b07a;--on-accent:#33091a;--card:rgba(217,176,122,.07);--head:'Cormorant SC','Cormorant Garamond',Georgia,serif;--fxanim:fxFold;--fxdur:.7s;--step:38ms;--cover-bg:radial-gradient(ellipse at 50% 100%,#8a1f4a66,transparent 60%),linear-gradient(#1e050f66,#1e050fcc 60%,#1e050ff5)}
body{font-family:'EB Garamond',Georgia,serif;font-size:19px;background:radial-gradient(circle at 50% 0,#5a1230 0,transparent 55%),var(--bg) fixed}
/* cover: foto bernuansa anggur naik pelan, teks dalam bingkai ganda */
.cover,.cover.clear{background-image:none}
.cover::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--cover-img,none) center 30%/cover no-repeat;filter:sepia(.5) hue-rotate(-18deg) saturate(1.25);animation:riseSlow 24s ease-in-out infinite alternate}
.cover::after{content:"";position:fixed;inset:0;z-index:-1;background:var(--cover-bg)}
@keyframes riseSlow{from{transform:scale(1.1) translateY(3%)}to{transform:scale(1.1) translateY(-3%)}}
.cover .inner{padding:34px 18px;border:1px solid #d9b07a99;outline:1px solid #d9b07a40;outline-offset:7px;background:#1e050f66;max-width:min(100%,460px)}
.cover .inner::before{content:"🍇";display:block;font-size:2.2rem;line-height:1;animation:fade 2.2s both}
.cover h1{letter-spacing:.06em}
.sec h2{font-size:1.7rem;letter-spacing:.14em}
.sec h2::after{content:"◆ ◆ ◆";display:block;font-size:.55rem;letter-spacing:.5em;margin-top:10px}
.card{border:1px solid rgba(217,176,122,.55);border-radius:4px;box-shadow:inset 0 0 0 4px rgba(51,9,26,.9),inset 0 0 0 5px rgba(217,176,122,.3)}
.btn{background:linear-gradient(135deg,#ecc99a,#b98c56);letter-spacing:.06em}.btn.alt{background:transparent}
/* foto: sepia, bingkai emas ganda; warna asli saat disentuh/di-hover */
.pf,.story img,.gal img{border-radius:3px;border:2px solid var(--accent);padding:6px;outline:1px solid #d9b07a66;outline-offset:6px;filter:sepia(.55) contrast(1.05);box-shadow:none}
.pf{aspect-ratio:3/4;width:min(60vw,220px)}
.story img{aspect-ratio:4/3;max-height:none}
@media (hover:hover){.pf:hover,.story img:hover,.gal img:hover{filter:none}}
.gal{grid-template-columns:repeat(2,1fr);gap:16px 14px}
.gal img,.gal img:last-child:nth-child(even){grid-column:auto;grid-row:auto;aspect-ratio:4/5;max-height:none}
.gal img:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:16/10;max-height:none}

/* ===== Animasi khas: lembaran membuka seperti halaman buku, sepia memudar ke warna ===== */
:root{--pva:snPage;--pvd:1.4s;--pve:cubic-bezier(.25,.8,.25,1);--cva:snFold;--cvd:1s;--fxmove:snFlip}
@keyframes snPage{0%{opacity:0;transform:perspective(900px) rotateY(-75deg) translateX(-30px);transform-origin:0 50%;filter:sepia(1) brightness(.7)}60%{opacity:1;filter:sepia(.6)}100%{opacity:1;transform:none;filter:none}}
@keyframes snFold{from{opacity:0;transform:perspective(700px) rotateX(-55deg);transform-origin:50% 0}to{opacity:1;transform:none}}
.js .gal img.gi.in,.js .gal img.gi:first-child.in{animation:snPage 1.3s var(--d,0s) cubic-bezier(.25,.8,.25,1) backwards}
.js .gal img.gi:nth-child(even).in{animation-name:snPageR}
@keyframes snPageR{0%{opacity:0;transform:perspective(900px) rotateY(75deg) translateX(30px);transform-origin:100% 50%;filter:sepia(1) brightness(.7)}60%{opacity:1;filter:sepia(.6)}100%{opacity:1;transform:none;filter:none}}
@keyframes snFlip{0%{opacity:0;transform:translate(0,0) rotateY(0)}10%{opacity:.85}50%{transform:translate(30px,55vh) rotateY(180deg) rotate(20deg)}100%{opacity:0;transform:translate(-10px,115vh) rotateY(360deg) rotate(-10deg)}}
@keyframes snShimmer{0%,100%{opacity:1}50%{opacity:.78}}
.nm{animation:snShimmer 4.5s ease-in-out infinite}
.sec h2::after{content:"";display:block;width:70px;height:1px;margin:10px auto 0;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:snLine 3s ease-in-out infinite}
@keyframes snLine{0%,100%{transform:scaleX(.3)}50%{transform:scaleX(1)}}