:root{
  --bg:#faf7f2;
  --paper:#fffaf2;
  --text:#2b2a28;
  --muted:#6b6a66;
  --accent-2:#b89474;
  --border:#e9e2d7;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 'Inter', system-ui, sans-serif;
  position:relative;
}

/* Dekor PNG u kutevima */
body::before,
body::after{
  content:"";
  position:fixed;
  width: clamp(180px, 45vw, 800px);
  height: clamp(180px, 45vw, 800px);
  background-repeat:no-repeat;
  background-size:100% 100%;
  pointer-events:none;
  z-index:0;
  opacity: 0.9;
}
body::before{ top:0; left:0; background-image:url('assets/top_left.png'); }
body::after{ right:0; bottom:0; background-image:url('assets/bottom_right.png'); }

main{ position:relative; z-index:1 }

.container{ width:min(1100px, 92%); margin-inline:auto }
.container.narrow{ width:min(840px, 92%) }

h1,h2{ 
  font-family:'Playfair Display', Georgia, serif; 
  margin:0 0 .6rem 0; 
  line-height:1.15; 
  color:#1f1e1c 
}
h1{ font-size: clamp(2.2rem, 6vw, 4.2rem) }
h2{ font-size: clamp(1.6rem, 3.5vw, 2.4rem) }

p{ margin:.2rem 0 1rem 0 }
.muted{ color:var(--muted) }

/* Hero */
.hero-inner{ 
  width:min(980px, 92%); 
  margin-inline:auto; 
  padding: clamp(40px, 6vw, 80px) 0; 
  text-align:center 
}
.hero .overline{ 
  letter-spacing:.2em; 
  text-transform:uppercase; 
  color:var(--muted); 
  font-weight:600 
}
.hero .names{ 
  font-size: clamp(2.8rem, 8vw, 5rem); 
  font-weight:600 
}
.hero .names span{ color:var(--accent-2); font-weight:500 }
.hero .date{ font-weight:600; color:#433; margin-bottom:1rem }

.countdown{ 
  display:flex; 
  gap:14px; 
  justify-content:center; 
  margin:14px 0 28px 
}
.countdown div{ 
  background:var(--paper); 
  border:1px solid var(--border); 
  padding:12px 16px; 
  border-radius:12px; 
  box-shadow:var(--shadow); 
  min-width:76px 
}
.countdown span{ 
  display:block; 
  font-weight:700; 
  font-size:1.4rem 
}

/* Timeline */
.timeline{ 
  list-style:none; 
  padding:0; 
  margin:0 auto;              /* centriraj blok */
  border-left:2px dashed #d9cbb9; 
  display:inline-block;       /* blok koji se centrira */
  text-align:left;            /* sadržaj unutar njega lijevo */
}
.timeline li{ 
  display:grid; 
  grid-template-columns:72px 16px 1fr; 
  gap:12px; 
  padding:6px 0 
}
.timeline .time{ font-weight:600; color:#564b40 }
.timeline .dot{ 
  width:12px; 
  height:12px; 
  background:var(--accent-2); 
  border-radius:50%; 
  margin-top:8px 
}

/* Sekcije */
.section{ padding: clamp(24px, 5vw, 28px) 0; text-align:center }

#welcome p {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--accent-2);
  margin: 1rem 0 0;
}

#info p {
  margin: 0.2rem 0 0.5rem 0; /* manji razmak ispod */
  line-height: 1.4;          /* zbijeniji redovi teksta */
}