[hidden]{display:none !important}
:root{
  --ink:#2E1F4D; --sky:#CDEBFF; --pink:#D6336C; --pink-2:#FF5C93;
  /* 1 "dizajnerski piksel" iz 1080 px široke pozivnice */
  --u: calc(min(100vw, 1080px) / 1080);
}
*{box-sizing:border-box}
body{margin:0;background:var(--sky);color:var(--ink);font-family:'Nunito',system-ui,sans-serif;font-weight:800;font-size:18px}
main{max-width:1080px;margin:0 auto;overflow-x:hidden}
p{margin:0}
a{color:var(--ink)}a:hover{color:#1A1030}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* ------------------------------------------------------------ pozivnica */
.invite{position:relative;overflow:hidden;padding-bottom:calc(330 * var(--u))}
.sky{position:absolute;left:0;top:0;width:100%;height:auto}
.scene{position:absolute;left:0;bottom:0;width:100%;height:auto}
.deco{position:absolute;width:max(20px,calc(40 * var(--u)))}
.d1{left:4%;top:calc(640 * var(--u))}.d2{right:4%;top:calc(760 * var(--u))}
.d3{left:4%;top:calc(1180 * var(--u))}.d4{right:4%;top:calc(1300 * var(--u))}

.content{position:relative;z-index:2;padding:calc(300 * var(--u)) 16px 0;display:flex;flex-direction:column;align-items:center;text-align:center}
.pill{display:inline-block;background:var(--ink);color:#fff;font-family:'Fredoka',sans-serif;font-weight:600;
  font-size:max(13px,calc(26 * var(--u)));letter-spacing:max(4px,calc(8 * var(--u)));padding:.4em 1.1em;border-radius:999px}

h1{margin:calc(40 * var(--u)) 0 0;font-family:'Fredoka',sans-serif;font-weight:700;line-height:1;letter-spacing:2px;
  text-shadow:max(2px,calc(5 * var(--u))) max(2px,calc(5 * var(--u))) 0 var(--ink);display:flex;flex-direction:column;align-items:center}
h1 span span{display:inline-block;transform:rotate(var(--r,0)) translateY(var(--y,0))}
h1 .w1{font-size:max(54px,calc(132 * var(--u)))}
h1 .w2{font-size:max(42px,calc(112 * var(--u)))}

.pair{margin-top:calc(44 * var(--u));display:flex;align-items:center;justify-content:center;gap:max(6px,calc(24 * var(--u)))}
.bubble{width:max(132px,calc(320 * var(--u)));aspect-ratio:1;border-radius:50%;border:max(4px,calc(8 * var(--u))) solid var(--ink);
  box-shadow:max(5px,calc(10 * var(--u))) max(5px,calc(10 * var(--u))) 0 var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff}
.bubble.laura{background:var(--pink-2);transform:rotate(-6deg)}
.bubble.mama{background:#8A5FE0;transform:rotate(6deg)}
.bubble .n{font-family:'Fredoka',sans-serif;font-weight:700;font-size:max(70px,calc(176 * var(--u)));line-height:.95}
.bubble .n34{font-size:max(60px,calc(150 * var(--u)))}
.bubble .who{font-family:'Pacifico',cursive;font-weight:400;font-size:max(20px,calc(46 * var(--u)));line-height:1.3}
.amp{width:max(52px,calc(120 * var(--u)));flex-shrink:0}

.tagline{margin-top:calc(50 * var(--u));font-weight:900;font-size:max(20px,calc(36 * var(--u)));line-height:1.35}

.cards{list-style:none;margin:calc(40 * var(--u)) 0 0;padding:0;width:min(860px,100%);display:flex;flex-direction:column;gap:max(16px,calc(26 * var(--u)))}
.card{display:flex;align-items:center;gap:max(14px,calc(24 * var(--u)));text-align:left;border:max(3px,calc(5 * var(--u))) solid var(--ink);border-radius:max(18px,calc(28 * var(--u)));
  box-shadow:max(4px,calc(7 * var(--u))) max(4px,calc(7 * var(--u))) 0 var(--ink);padding:max(14px,calc(22 * var(--u))) max(16px,calc(32 * var(--u)))}
.card svg{width:max(30px,calc(46 * var(--u)));height:auto;flex-shrink:0;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.card.yellow{background:#FFF1A8;transform:rotate(-1.5deg)}
.card.green{background:#C8F2D4;transform:rotate(1.2deg)}
.card.pink{background:#FFD6E2;transform:rotate(-1deg)}
.card .big{font-family:'Fredoka',sans-serif;font-weight:600;font-size:max(22px,calc(42 * var(--u)));line-height:1.2}
.card .place{font-size:max(20px,calc(38 * var(--u)))}
.card .stack{display:flex;flex-direction:column;gap:2px}
.card .addr{font-size:max(16px,calc(28 * var(--u)))}
.card .map{font-size:max(15px,calc(24 * var(--u)));margin-top:4px}

.gift{margin-top:calc(44 * var(--u));display:flex;align-items:center;gap:max(10px,calc(18 * var(--u)));background:#fff;border:4px dashed var(--pink-2);
  border-radius:max(24px,calc(60 * var(--u)));padding:max(14px,calc(18 * var(--u))) max(18px,calc(34 * var(--u)));max-width:min(920px,100%);transform:rotate(1deg);text-align:left;
  font-weight:900;font-size:max(17px,calc(30 * var(--u)));line-height:1.3}
.gift .ico{width:max(30px,calc(40 * var(--u)));flex-shrink:0;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gift .heart{width:max(24px,calc(34 * var(--u)));flex-shrink:0;fill:#E23E7A}

.see{margin-top:calc(40 * var(--u));font-family:'Fredoka',sans-serif;font-weight:600;font-size:max(22px,calc(42 * var(--u)))}
.sign{font-family:'Pacifico',cursive;font-weight:400;font-size:max(34px,calc(64 * var(--u)));line-height:1.3;color:var(--pink)}

/* ------------------------------------------------------------ galerija */
.gallery{background:#6FC283;padding:8px 16px 48px}
.panel{max-width:860px;margin:0 auto;background:#fff;border:5px solid var(--ink);border-radius:28px;box-shadow:8px 8px 0 var(--ink);padding:28px 22px}
h2{margin:0 0 6px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:34px}
.lead{font-weight:800;color:#4A3D6B;margin-bottom:20px}
.gate label{display:block;font-weight:900;margin-bottom:8px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row input{flex:1 1 180px;min-height:52px;font:inherit;font-weight:900;letter-spacing:2px;text-transform:uppercase;padding:0 14px;border:4px solid var(--ink);border-radius:16px;color:var(--ink)}
.row input:focus{outline:3px solid var(--pink-2);outline-offset:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border:4px solid var(--ink);border-radius:16px;
  background:var(--pink);color:#fff;font-family:'Fredoka',sans-serif;font-weight:600;font-size:20px;cursor:pointer;text-decoration:none;box-shadow:5px 5px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.btn:hover{background:#B8285A;color:#fff}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn-big:focus-within{outline:3px solid var(--ink);outline-offset:3px}
.btn svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.btn-big{width:100%;min-height:68px;font-size:24px}
.hint{margin-top:12px;font-size:15px;color:#4A3D6B}
.msg{min-height:1.4em;margin-top:10px;font-weight:900;color:var(--pink)}
.progress{margin-top:12px;height:14px;border-radius:8px;border:3px solid var(--ink);background:#FFD6E2;overflow:hidden}
.progress div{height:100%;width:0;background:var(--pink-2);transition:width .2s}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:10px;margin-top:18px}
.grid button{position:relative;padding:0;border:3px solid var(--ink);border-radius:14px;overflow:hidden;aspect-ratio:1;background:var(--sky);cursor:pointer}
.grid img{width:100%;height:100%;object-fit:cover;display:block}
.grid .vid-ph{width:100%;height:100%;background:#8A5FE0}
.grid .play{position:absolute;left:6px;bottom:6px;width:34px;height:34px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center}
.grid .play svg{width:16px;height:16px;fill:#fff}
.empty{margin-top:16px;color:#4A3D6B;text-align:center}

dialog{border:0;padding:0;background:#111;max-width:100vw;max-height:100vh;width:100vw;height:100vh}
dialog::backdrop{background:rgba(0,0,0,.85)}
dialog img,dialog video{width:100%;height:calc(100% - 80px);object-fit:contain;display:block;background:#000}
.viewer-bar{display:flex;justify-content:center;gap:8px;padding:14px;flex-wrap:wrap}
.vbtn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:48px;padding:0 18px;border:0;border-radius:12px;background:#2a2a2a;color:#fff;font:inherit;font-weight:800;cursor:pointer;text-decoration:none}
.vbtn:hover{background:#444;color:#fff}