:root{--bg:#fbf6ec;--fg:#4a3b27;--accent:#7a8a3d;--on-accent:#fff;--card:rgba(255,255,255,.72);--head:'Caveat','Brush Script MT',cursive;--fxanim:fxTilt;--fxdur:.85s;--step:120ms;--cover-bg:linear-gradient(#fbf6ecaa,#f3e8d0cc 55%,#e6d5b3f2)}
body{font-family:'Lora',Georgia,serif;background-color:var(--bg);background-image:radial-gradient(circle at 50% 30%,transparent 55%,#c9a96e30)}
/* cover: foto hangat bergeser pelan */
.cover,.cover.clear{background-image:none;color:#4a3b27}
.cover::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--cover-img,none) center 30%/cover no-repeat;filter:sepia(.4) saturate(1.1);animation:driftX 26s ease-in-out infinite alternate}
.cover::after{content:"";position:fixed;inset:0;z-index:-1;background:var(--cover-bg)}
@keyframes driftX{from{transform:scale(1.12) translateX(-2%)}to{transform:scale(1.12) translateX(2%)}}
.cover .inner::before{content:"🐑";display:block;font-size:2.4rem;line-height:1;animation:fade 2.2s both}
.cover h1{font-size:clamp(3rem,15vw,5.4rem);font-weight:700}
.sec h2{font-size:2.7rem;font-weight:700}.nm{font-size:2.4rem;font-weight:700}
.card{border-radius:6px;border:1px dashed var(--accent);box-shadow:0 8px 24px #4a3b2722}
.btn{border-radius:10px}
/* foto: polaroid */
.pf,.story img,.gal img{background:#fff;border:10px solid #fff;border-bottom-width:40px;border-radius:3px;box-shadow:0 8px 22px #4a3b2744;outline:0;padding:0}
.pf{width:min(62vw,230px);aspect-ratio:4/5;rotate:-3deg}
.person+.amp+.person .pf{rotate:3deg}
.story img{aspect-ratio:4/5;max-width:300px;max-height:none}
.story:nth-child(odd) img{rotate:-2deg}.story:nth-child(even) img{rotate:2deg}
.gal{grid-template-columns:repeat(2,1fr);gap:20px 14px}
.gal img,.gal img:first-child,.gal img:last-child:nth-child(even){grid-column:auto;grid-row:auto;aspect-ratio:4/5;max-height:none;border-radius:3px}
.gal img:nth-child(odd){rotate:-2.5deg}.gal img:nth-child(even){rotate:2.5deg}

/* ===== Animasi khas: polaroid dilempar & jatuh, tulisan tangan bergoyang, gandum melayang ===== */
:root{--pva:gbToss;--pvd:1.3s;--pve:cubic-bezier(.3,1.35,.5,1);--cva:gbCard;--cvd:.9s;--fxmove:gbSway}
@keyframes gbToss{0%{opacity:0;transform:translateY(-90px) rotate(-16deg) scale(1.2)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes gbCard{from{opacity:0;transform:translateY(28px) rotate(-2.5deg)}to{opacity:1;transform:none}}
.js .gal img.gi.in,.js .gal img.gi:first-child.in{animation:gbToss 1.1s var(--d,0s) cubic-bezier(.3,1.35,.5,1) backwards}
.js .gal img.gi:nth-child(even).in{animation-name:gbTossR}
@keyframes gbTossR{0%{opacity:0;transform:translateY(-90px) rotate(16deg) scale(1.2)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes gbSway{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(28px,30vh) rotate(90deg)}50%{transform:translate(-22px,60vh) rotate(180deg)}75%{transform:translate(24px,90vh) rotate(270deg)}100%{transform:translate(0,115vh) rotate(360deg)}}
@keyframes gbWobble{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
.cover h1{transform-origin:50% 80%;animation:gbWobble 5s ease-in-out infinite}