:root{
  --paper:   #FFFAF6;   /* topla belina — pozadina */
  --paper-2: #FFF1E7;   /* pečena dunja — paneli */
  --paper-3: #FDE8EE;   /* rumen — akcentni panel */
  --line:    #F2DCD2;   /* mekana ivica */

  --ink:     #402A34;   /* topla tamna šljiva — tekst */
  --ink-2:   #7A5F69;   /* sporedni tekst */

  --sljiva:  #9A3A66;   /* glavni akcenat — prvo srce */
  --ruza:    #DD7E9E;   /* rumena — drugo srce */
  --dunja:   #E8A13C;   /* zlatna — spoj i odsjaj */
  --loza:    #6E9560;   /* zelena */

  --pad: clamp(1.25rem, 5vw, 3rem);
  --maxw: 66rem;
  --r: 14px;
  --r-b: 30px;

  --sen: 0 20px 44px -28px rgba(154,58,102,.42);

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Karla', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.97rem + .2vw,1.0625rem);
  line-height:1.72;
  overflow-x:hidden;
  background-image:
    radial-gradient(90% 55% at 12% -5%,  #FFE9DC 0%, transparent 62%),
    radial-gradient(75% 50% at 92% 12%,  #FCE4EC 0%, transparent 60%),
    radial-gradient(85% 45% at 50% 104%, #F3F7EC 0%, transparent 62%);
  background-attachment:fixed;
}

img{ max-width:100%; display:block; }

::selection{ background:var(--ruza); color:var(--ink); }

:focus-visible{ outline:2px solid var(--sljiva); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

.vh{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ── Tipografija ───────────────────────────────────────── */
.eyebrow{
  font-size:.82rem; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--sljiva); margin:0;
  text-align:center;
}

.section-title{
  font-family:var(--serif);
  font-weight:400;
  font-variation-settings:'SOFT' 45,'WONK' 1,'opsz' 60;
  font-size:clamp(1.8rem,1.1rem + 2.8vw,2.9rem);
  line-height:1.12;
  margin:.55rem 0 0;
  text-align:center;
}

.lead{ color:var(--ink-2); max-width:40ch; margin:.85rem auto 0; text-align:center; }

.mos{ display:block; line-height:0; }
.mos svg{ display:block; width:100%; height:auto; overflow:visible; }
.mos rect{
  transform-box:fill-box;
  transform-origin:50% 50%;
  opacity:0;
  transform:rotate(var(--rot)) scale(.15);
}
.mos.is-set rect{
  animation:tessera .5s cubic-bezier(.34,1.5,.64,1) forwards;
  animation-delay:calc(var(--i) * 26ms);
}
@keyframes tessera{
  to{ opacity:1; transform:rotate(var(--rot)) scale(1); }
}

.mos--crown{ width:min(310px,74vw); margin-inline:auto; }
.mos--rule{ opacity:.85; margin-block:clamp(3rem,8vw,5.5rem); }
.mos--seal{ width:104px; margin-inline:auto; }

/* girlanda se prelije brže — inače bi predugo putovala preko ekrana */
.mos--rule.is-set rect{ animation-delay:calc(var(--i) * 13ms); }

/* lebdeca traka */
.bar{
  position:fixed; inset:0 0 auto; z-index:50;
  display:flex; align-items:center; gap:1rem;
  padding:.6rem var(--pad);
  background:rgba(255,250,246,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transform:translateY(-102%);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.bar.is-up{ transform:none; }
.bar__name{
  font-family:var(--serif); font-size:.95rem;
  font-variation-settings:'SOFT' 45,'WONK' 1;
  margin:0; margin-right:auto; white-space:nowrap;
}
.bar__name em{ color:var(--sljiva); font-style:italic; }
.bar__nav{ display:none; gap:1.5rem; }
.bar__nav a{
  color:var(--ink-2); text-decoration:none;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  transition:color .2s;
}
.bar__nav a:hover{ color:var(--sljiva); }

.bar .btn.active { opacity: 1; transition: opacity 0.3s ease; }
.bar .btn:not(.active) { opacity: 0; }

@media (min-width:640px){ .bar__name{ font-size:1.1rem; } }
@media (min-width:830px){ .bar__nav{ display:flex; } }

/* dugmad */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--sans); font-size:.79rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.9rem 1.9rem;
  border:1.5px solid transparent; border-radius:999px;
  text-decoration:none; cursor:pointer;
  transition:transform .18s ease, background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn:active{ transform:translateY(1px); }

.btn--solid{
  background:var(--sljiva); color:#FFF6FA;
  box-shadow:0 12px 26px -16px rgba(154,58,102,.85);
}
.btn--solid:hover{ background:#85305A; box-shadow:0 16px 30px -16px rgba(154,58,102,.95); }

.btn--ghost{ background:transparent; color:var(--sljiva); border-color:#EBC6D5; }
.btn--ghost:hover{ border-color:var(--sljiva); background:#FDF0F5; }

.btn--sm{ padding:.55rem 1.15rem; font-size:.7rem; letter-spacing:.11em; }

.btn--loading{ position:relative; pointer-events:none; cursor:wait; opacity:.8; }

.btn--loading::after{ 
  content:"";
  width:1rem;
  height:1rem;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:btn-spin .65s linear infinite;
}

@keyframes btn-spin{
  to{ transform:rotate(360deg); }
}

/* naslovna */
.hero{
  min-height:100svh;
  display:grid; place-items:center;
  text-align:center;
  padding:clamp(4.5rem,12vh,7rem) var(--pad) clamp(3rem,8vh,5rem);
}
.hero__inner > *{ opacity:0; transform:translateY(14px); }
.hero.is-ready .hero__inner > *{ animation:rise .9s cubic-bezier(.16,1,.3,1) forwards; }
.hero.is-ready .hero__eyebrow{ animation-delay:.5s; }
.hero.is-ready .hero__names{   animation-delay:.65s; }
.hero.is-ready .hero__line{    animation-delay:.8s; }
.hero.is-ready .hero__card{    animation-delay:.95s; }
.hero.is-ready .hero__cta{     animation-delay:1.1s; }
.hero.is-ready .hero__hint{    animation-delay:1.25s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

.hero__eyebrow{ margin-top:1.7rem; }

.hero__names{
  font-family:var(--serif); font-weight:300;
  font-variation-settings:'SOFT' 60,'WONK' 1,'opsz' 144;
  font-size:clamp(3.2rem,1.2rem + 11.5vw,7.6rem);
  line-height:.97;
  letter-spacing:-.015em;
  margin:.45rem 0 0;
}
.hero__names .amp{
  display:block; color:var(--sljiva);
  font-size:.4em; line-height:1.45; font-style:italic; font-weight:400;
}

.hero__line{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-variation-settings:'SOFT' 40,'opsz' 30;
  color:var(--ink-2); max-width:30ch; margin:1.1rem auto 0; font-size:1.12rem;
}

.hero__card{
  display:grid; grid-template-columns:repeat(3,1fr);
  max-width:640px; margin:2.3rem auto 0;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-b);
  box-shadow:var(--sen);
  padding:1.7rem 1rem;
}
.hero__stat{ padding:0 .7rem; }
.hero__stat + .hero__stat{ border-left:1px solid var(--line); }
.hero__stat-k{
  font-size:.72rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--sljiva); font-weight:700; margin:0;
}
.hero__stat-v{
  font-family:var(--serif); font-weight:400;
  font-variation-settings:'SOFT' 45,'WONK' 1,'opsz' 40;
  font-size:clamp(1rem,2.6vw + .4rem,1.35rem);
  line-height:1.32; margin:.5rem 0 0;
}
.hero__stat-sub{ color:var(--ink-2); font-size:.85rem; margin:.3rem 0 0; }

@media (max-width:640px){
  .hero__card{ grid-template-columns:1fr; gap:1.1rem; padding:1.6rem 1.4rem; }
  .hero__stat + .hero__stat{ border-left:0; border-top:1px solid var(--line); padding-top:1.1rem; }
}

.hero__cta{ margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }

.hero__hint{ color:var(--ink-2); font-size:.85rem; margin:1.1rem 0 0; }

/* odbrojavanje */
.count{ text-align:center; }
.count__grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem;
  margin-top:2.1rem;
}
@media (min-width:640px){ .count__grid{ grid-template-columns:repeat(4,1fr); gap:1rem; } }

.count__cell{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:1.5rem .5rem 1.2rem;
  box-shadow:var(--sen);
}
.count__cell:nth-child(2n){ background:var(--paper-3); }

.count__num{
  font-family:var(--serif); font-weight:300;
  font-variation-settings:'SOFT' 55,'opsz' 120;
  font-size:clamp(2.5rem,1.2rem + 5vw,4.2rem);
  line-height:1; display:block;
  font-variant-numeric:tabular-nums;
  color:var(--sljiva);
}
.count__lab{
  display:block; margin-top:.45rem;
  font-size:.67rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2);
}
.count__done{
  font-family:var(--serif); font-variation-settings:'SOFT' 50,'WONK' 1;
  font-size:clamp(1.4rem,3.5vw,2rem); margin-top:2rem;
}

/* galerija */
.gallery{
  display: grid;
  gap: 1.4rem;
  margin-top: 2.6rem;
  grid-template-columns: 1fr;
}
@media (min-width:760px){ .gallery{ grid-template-columns: 1fr 1fr;gap: clamp(1.2rem, 3.5vw, 2.6rem);align-items: start; } }

@media (min-width: 720px) {
    .gallery .shot:nth-child(2) {
        margin-top: clamp(2rem, 6vw, 4.5rem);
    }
}

.shot{
  position:relative; margin:0; aspect-ratio:3/4;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius: 100px 100px var(--r-b) var(--r-b);
  overflow:hidden; cursor:zoom-in;
  box-shadow:var(--sen);
}
.shot img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.16,1,.3,1), opacity .4s;
}
.shot:hover img{ transform:scale(1.05); }

.shot.is-empty{ cursor:default; }
.shot.is-empty img{ opacity:0; }
.shot.is-empty::after{
  content:attr(data-empty);
  position:absolute; inset:0;
  display:grid; place-items:center; text-align:center; padding:1.2rem;
  color:#C9A79A;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
}

.lightbox{
  position:fixed; inset:0; z-index:90;
  display:none; place-items:center; padding:1.5rem;
  background:rgba(64,42,52,.9);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.lightbox[open]{ display:grid; }
.lightbox img{ max-width:min(92vw,900px); max-height:86vh; object-fit:contain; border-radius:8px; }
.lightbox__close{
  position:absolute; top:1rem; right:1rem;
  background:var(--paper); border:0; color:var(--ink);
  width:44px; height:44px; border-radius:50%;
  font-size:1.2rem; line-height:1; cursor:pointer;
}

/* gde i kada */
.facts{ display:grid; gap:1rem; margin-top:2.3rem; }
@media (min-width:720px){ .facts{ grid-template-columns:1fr 1fr; gap:1.2rem; } }

.facts__route{ display:flex; justify-content:center; margin-top:2rem; }

.fact{
  padding:clamp(1.6rem,4vw,2.5rem);
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--sen);
}
.fact:nth-child(2){ background:var(--paper-3); }

.fact__k{
  font-size:.67rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--sljiva); font-weight:700; margin:0;
}
.fact__v{
  font-family:var(--serif); font-weight:400;
  font-variation-settings:'SOFT' 45,'WONK' 1,'opsz' 40;
  font-size:clamp(1.3rem,3.3vw,1.75rem); line-height:1.24; margin:.65rem 0 0;
}
.fact__sub{ color:var(--ink-2); margin:.35rem 0 0; font-size:.95rem; }

/* tok data */
.timeline{ list-style:none; margin:2.6rem 0 0; padding:0; position:relative; }

/* osa */
.timeline::before{
  content:''; position:absolute; top:.8rem; bottom:.8rem;
  left:5.5px; width:0; border-left:2px dotted #EFCBA8;
}

.step{ position:relative; padding:0 0 1.1rem 2.4rem; }
.step:last-child{ padding-bottom:0; }

/* kockica na osi — pozajmljena iz mozaika */
.step::before{
  content:''; position:absolute; left:0; top:1.75rem;
  width:13px; height:13px; border-radius:2px;
  background:var(--dunja);
  border:1px solid rgba(154,58,102,.4);
  transform:rotate(-8deg);
  box-shadow:0 0 0 5px var(--paper);
  z-index:2;
}

.step__card{
  background:var(--paper-2);
  padding:1.4rem 1.5rem;
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--sen);
}
.step:nth-child(even) .step__card{ background:var(--paper-3); }

.step__time{
  font-family:var(--serif); font-weight:400;
  font-variation-settings:'SOFT' 50,'opsz' 30;
  font-size:1.2rem; line-height:1.3; color:var(--sljiva); display:block;
  font-variant-numeric:tabular-nums;
}
.step__what{
  font-family:var(--serif); font-variation-settings:'SOFT' 45,'WONK' 1;
  font-size:1.28rem; margin:.25rem 0 0; line-height:1.3;
}
.step__where{ color:var(--ink-2); margin:.25rem 0 0; font-size:.95rem; }

.step__route{
  display:inline-block;
  margin-top:.65rem;
  color:var(--sljiva);
  font-size:.78rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none;
  border-bottom:1px solid #EBC6D5;
  padding-bottom:1px;
  transition:color .2s, border-color .2s;
}
.step__route:hover{ color:#85305A; border-color:#85305A; }

@media (min-width:860px){
  .timeline::before{ left:50%; margin-left:-1px; }

  .step{ display:grid; grid-template-columns:1fr 1fr; padding:0 0 1.6rem 0; }
  .step:nth-child(odd)  .step__card{ grid-column:1; margin-right:3rem; text-align:right; }
  .step:nth-child(even) .step__card{ grid-column:2; margin-left:3rem; }

  .step::before{ left:50%; margin-left:-6.5px; }

  /* tanka spona od kartice do ose */
  .step::after{
    content:''; position:absolute; top:calc(1.75rem + 6px);
    width:3rem; border-top:1px dotted #EFCBA8;
  }
  .step:nth-child(odd)::after{  right:50%; }
  .step:nth-child(even)::after{ left:50%; }
}

/* potvrda dolaska */
.rsvp{
  margin-top:2.3rem;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(1.5rem,5vw,3rem);
  box-shadow:var(--sen);
}
.rsvp__note{
  color:var(--ink-2); margin:0 0 1.9rem;
  padding-bottom:1.4rem; border-bottom:1px dotted #EFCBA8;
}
.rsvp__note strong{ color:var(--sljiva); }

.field{ margin-bottom:1.6rem; }
.field:last-of-type{ margin-bottom:0; }

.label{
  display:block; margin-bottom:.55rem;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sljiva); font-weight:700;
}
.label__opt{
  color:var(--ink-2); font-weight:400; letter-spacing:normal; text-transform:none;
}

.field__hint{ color:var(--ink-2); font-size:.82rem; margin:.5rem 0 0; }

.input,.textarea{
  width:100%; font:inherit; color:var(--ink);
  background:#FFFDFB;
  border:1.5px solid var(--line);
  border-radius:10px;
  padding:.85rem 1rem;
  transition:border-color .2s, box-shadow .2s;
}
.input:hover,.textarea:hover{ border-color:#E8C0CE; }
.input:focus,.textarea:focus{
  border-color:var(--sljiva); outline:none;
  box-shadow:0 0 0 4px rgba(154,58,102,.1);
}
.textarea{ min-height:6.5rem; resize:vertical; }
.input::placeholder,.textarea::placeholder{ color:#BFA3AC; }

.choice{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.choice input{ position:absolute; opacity:0; width:0; height:0; }
.choice label{
  display:block; text-align:center; cursor:pointer;
  padding:.9rem .6rem; background:#FFFDFB;
  border:1.5px solid var(--line); border-radius:10px;
  font-weight:700; font-size:.95rem;
  transition:border-color .2s, background-color .2s, color .2s;
}
.choice label small{
  display:block; font-size:.82rem; font-weight:400; color:var(--ink-2);
  margin-top:.1rem; transition:color .2s;
}
.choice label:hover{ border-color:#E8C0CE; }
.choice input:checked + label{ border-color:var(--sljiva); background:#FDF0F5; color:var(--sljiva); }
.choice input:checked + label small{ color:var(--sljiva); opacity:.75; }
.choice input:focus-visible + label{ outline:2px solid var(--sljiva); outline-offset:3px; }

.stepper{ display:flex; align-items:center; gap:.9rem; }
.stepper button{
  width:46px; height:46px; flex:none;
  background:#FFFDFB; color:var(--sljiva);
  border:1.5px solid var(--line); border-radius:50%;
  font-size:1.25rem; line-height:1; cursor:pointer;
  transition:border-color .2s, background-color .2s;
}
.stepper button:hover:not(:disabled){ border-color:var(--sljiva); background:#FDF0F5; }
.stepper button:disabled{ opacity:.35; cursor:not-allowed; }
.stepper output{
  font-family:var(--serif); font-variation-settings:'SOFT' 50;
  font-size:1.7rem; min-width:2.2ch; text-align:center;
  font-variant-numeric:tabular-nums;
}

.error{ color:#B3261E; font-size:.85rem; margin:.5rem 0 0; }

.rsvp__submit{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; justify-content: center; }
.rsvp__hint{ color:var(--ink-2); font-size:.85rem; margin:1.4rem 0 0; }

.done{ display:none; text-align:center; padding:1rem 0; }
.rsvp.is-done .rsvp__form,
.rsvp.is-done .rsvp__note{ display:none; }
.rsvp.is-done .done{ display:block; }
.done__title{
  font-family:var(--serif); font-variation-settings:'SOFT' 50,'WONK' 1;
  font-size:clamp(1.7rem,4vw,2.3rem); margin:1.3rem 0 .5rem; color:var(--sljiva);
}
.done__text{ color:var(--ink-2); margin:0 auto; max-width:36ch; }

.done__confirmation {display: none; flex-direction: column; row-gap: 1rem; margin-top: 1rem;}
.done__confirmation.visible {display: flex;}
.done__confirmation-number {background-color: var(--paper-3); border: 1px solid var(--line); border-radius: 10px; padding: 1.5rem 1.25rem;}
.done__confirmation-number--label {font-size: .78rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--sljiva); margin: 0;}
.done__confirmation-number--value {font-size: 1.28rem; color: var(--ink); margin: 0; margin-top: .65rem;}
.done__confirmation-note {font-size:.95rem; line-height: 1.375rem; color: var(--ink-2); margin: 0;}

@media (min-width:860px) {
  .done__confirmation {row-gap: 1.25rem;}
  .done__confirmation-number {width: 550px; margin: 0 auto;}
}

/* podnozje */
.foot{ text-align:center; padding:clamp(3.5rem,10vw,6rem) var(--pad) clamp(2.5rem,6vw,4rem); }
.foot__names{
  font-family:var(--serif); font-weight:300;
  font-variation-settings:'SOFT' 60,'WONK' 1,'opsz' 120;
  font-size:clamp(2.1rem,1rem + 4.5vw,3.5rem);
  margin:1.8rem 0 0; line-height:1.1;
}
.foot__names em{ color:var(--sljiva); font-style:italic; }
.foot__text{ color:var(--ink-2); margin:.9rem auto 0; max-width:32ch; }
.foot__date{
  margin:2rem 0 0;
  font-size:.71rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-2);
}

/* otkrivanje pri scroll-u */
.reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal,.hero__inner > *{ opacity:1 !important; transform:none !important; }
  .mos rect{ opacity:1; transform:rotate(var(--rot)) scale(1); }
}