/*
Theme Name: J&N Wedding Invitation
Theme URI: https://example.com/
Author: J&N
Description: Template undangan pernikahan one-page untuk WordPress.
Version: 1.0
*/
:root{
  --cream:#f7f1e5;
  --gold:#c6a15b;
  --green:#18352f;
  --white:#fff;
  --text:#31423d;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,sans-serif;color:var(--text);background:var(--cream);line-height:1.7}
a{text-decoration:none;color:inherit}
.container{width:min(1100px,92%);margin:auto}
.section{padding:80px 0}
.center{text-align:center}
.eyebrow{letter-spacing:4px;text-transform:uppercase;color:var(--gold);font-size:12px}
h1,h2,h3{font-family:Georgia,serif;font-weight:400;color:var(--green);line-height:1.15}
h1{font-size:clamp(46px,8vw,86px);margin:12px 0}
h2{font-size:clamp(34px,5vw,54px);margin:10px 0 30px}
.btn{display:inline-block;background:var(--gold);color:#fff;padding:13px 26px;border-radius:999px;font-size:14px;letter-spacing:1px}
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;background:
linear-gradient(rgba(24,53,47,.35),rgba(24,53,47,.55)),
url('assets/hero.jpg') center/cover no-repeat}
.hero h1,.hero .eyebrow,.hero p{color:#fff}
.hero-card{padding:30px}
.photo-placeholder{width:100%;aspect-ratio:4/3;background:#e7decd center/cover no-repeat;border-radius:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff8ed;border:1px solid rgba(198,161,91,.25);padding:28px;border-radius:18px;text-align:center}
.timeline{max-width:720px;margin:auto}
.event{background:#fff8ed;padding:28px;border-radius:18px;margin:18px 0;border-left:4px solid var(--gold)}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:16px}
.story{max-width:760px;margin:auto;text-align:center}
.footer{background:var(--green);color:#fff;padding:70px 0;text-align:center}
.footer h2{color:#fff}
.music{position:fixed;right:18px;bottom:18px;z-index:10;width:48px;height:48px;border-radius:50%;border:0;background:var(--gold);color:#fff;cursor:pointer}
@media(max-width:700px){
 .section{padding:60px 0}
 .grid-2,.grid-3{grid-template-columns:1fr}
 .hero{min-height:92vh}
}