:root{
  --green:#1F4E3D; --gold:#E3A96A; --cream:#FFFEF9; --sand:#F6F0E3;
  --gold-deep:#9A6A2E; /* tamnija zlatna za sitan tekst (kontrast) */
  --ease:cubic-bezier(.2,.7,.2,1);
  --serif:"EB Garamond","Cormorant",Georgia,serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(20px,6vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#FFFEF9;color:var(--green);font:400 16px/1.7 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
h1,h2{font-family:var(--serif);font-weight:500;line-height:1.1;margin:0}
h2{font-size:clamp(30px,8vw,48px);letter-spacing:.01em;margin-bottom:20px}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--green);color:var(--cream);padding:10px 14px;z-index:100}
.skip:focus{left:8px}
.wrap{max-width:1040px;margin:0 auto;padding:0 var(--gutter)}
.wrap--narrow{max-width:600px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 18px}
section{padding:clamp(64px,14vw,120px) 0}

/* Hero */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px var(--gutter) 56px}
.hero__logo{width:min(76vw,420px);height:auto}
.hero__tag{font-family:var(--serif);font-style:italic;font-size:clamp(22px,6vw,30px);margin:20px 0 32px}

/* Buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 34px;
  border:1px solid var(--green);border-radius:2px;background:transparent;color:var(--green);
  font:600 13px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:background-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.btn:hover{background:var(--green);color:var(--cream)}
.btn:active{transform:scale(.98)}
.btn--solid{background:var(--green);color:var(--cream);width:100%}
.btn--solid:hover{background:#17392d}
.btn[disabled]{opacity:.75;cursor:progress}
.btn__ball{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none;transform:translateX(0);transition:transform .5s var(--ease)}
.btn:hover .btn__ball{transform:translateX(5px) scale(1.15)}
.spinner{display:none;width:14px;height:14px;border:2px solid rgba(255,254,249,.35);border-top-color:var(--cream);border-radius:50%;animation:spin .8s linear infinite}
.btn.is-busy .spinner{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

/* About */
.about__grid{display:grid;gap:8px;align-items:start}
.numeral{font-family:var(--serif);font-weight:400;font-size:clamp(96px,30vw,220px);line-height:.85;color:var(--gold);letter-spacing:-.02em;display:block;margin-bottom:12px}
.about p{max-width:46ch}
.details{margin:48px 0 0;display:grid;border-top:1px solid var(--gold)}
.details div{padding:18px 0;border-bottom:1px solid rgba(227,169,106,.45)}
.details dt{font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:4px}
.details dd{margin:0;font-family:var(--serif);font-size:24px;line-height:1.2}

/* Gallery */
.gallery{background:var(--sand);padding-bottom:clamp(56px,12vw,100px)}
.gallery__grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:24px var(--gutter) 8px;scroll-padding:0 var(--gutter);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.gallery__grid::-webkit-scrollbar{display:none}
.tile{flex:0 0 78%;aspect-ratio:4/5;scroll-snap-align:start;position:relative;padding:0;border:0;border-radius:2px;background:var(--sand);overflow:hidden;cursor:zoom-in}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.tile:hover img{transform:scale(1.03)}
.tile.is-missing{cursor:default}
.ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--sand);border:1px solid var(--gold);
  font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep);text-align:center;padding:12px}
.gallery .tile.is-missing{outline:0}

/* Signup */
.signup .wrap{position:relative}
.rule{position:relative;height:1px;background:rgba(227,169,106,.35);margin-bottom:56px}
.rule::before{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left}
.rule.is-in::before{transform:scaleX(1);transition:transform 1.4s var(--ease)}
.rule__ball{position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:50%;background:#fff;border:1px solid var(--gold);opacity:0}
.rule.is-in .rule__ball{animation:roll 1.6s var(--ease) .1s forwards}
@keyframes roll{0%{opacity:1;transform:translateX(0) rotate(0)}85%{opacity:1}100%{opacity:0;transform:translateX(var(--roll,300px)) rotate(720deg)}}
.rule--static{max-width:1040px;margin:0 auto 24px;background:var(--gold);transform:scaleX(1)}
.rule--static::before{display:none}
.signup__lead{margin-bottom:36px}

.field{position:relative;margin-bottom:6px}
.field label{display:block;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:2px}
.field input{display:block;width:100%;min-height:52px;padding:10px 0;font:400 18px/1.3 var(--sans);color:var(--green);
  background:transparent;border:0;border-bottom:1px solid rgba(31,78,61,.35);border-radius:0;outline:0;-webkit-appearance:none;appearance:none}
.field input::placeholder{color:rgba(31,78,61,.35)}
.field--short{max-width:160px}
/* zlatna linija pri fokusu: animira se samo transform */
.field:focus-within input{border-bottom-color:var(--gold)}
.field .box{position:relative}
.field .u{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.field:focus-within .u{transform:scaleX(1)}
.field__err{min-height:1.4em;margin:4px 0 8px;font-size:13.5px;line-height:1.4;color:#9B2C2C}
.field.has-error input{border-bottom-color:#9B2C2C}
.field.shake{animation:shake .45s var(--ease)}
@keyframes shake{20%{transform:translateX(-5px)}45%{transform:translateX(4px)}70%{transform:translateX(-2px)}100%{transform:none}}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form__err{color:#9B2C2C;font-size:14.5px;margin:12px 0}
.form__err:empty{display:none}
#prijava-form .btn{margin-top:16px}
.status{font-size:13px;margin:12px 0 0;min-height:1.4em;color:var(--gold-deep);text-align:center}

.formwrap{position:relative}
.formwrap form{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.formwrap.is-done form{opacity:0;transform:translateY(-12px)}
.success{text-align:center;padding:24px 0;opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.success.is-in{opacity:1;transform:none}
.success:focus{outline:0}
.check{margin:0 auto 20px;display:block}
.check circle,.check path{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.success.is-in .check circle{animation:draw .9s var(--ease) forwards}
.success.is-in .check path{animation:draw .6s var(--ease) .7s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.success__msg{font-family:var(--serif);font-size:clamp(24px,6.5vw,32px);line-height:1.25;max-width:22em;margin:0 auto}

/* Footer */
.footer{padding:0 var(--gutter) 40px;text-align:center}
.footer p{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--green);margin:0}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:80;background:rgba(18,40,32,.96);display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.lb[hidden]{display:none}
.lb__img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:2px}
.lb button{position:absolute;background:none;border:0;color:var(--cream);cursor:pointer;font-family:var(--serif);line-height:1;min-width:48px;min-height:48px}
.lb__close{top:12px;right:12px;font-size:40px}
.lb__nav{top:50%;margin-top:-24px;font-size:52px}
.lb__prev{left:4px}.lb__next{right:4px}
.lb button:focus-visible{outline-color:var(--gold)}

/* Reveal */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.is-in{opacity:1;transform:none}
.js .hero__logo,.js .hero__tag,.js .hero__btn{opacity:0;animation:rise 1s var(--ease) forwards}
.js .hero__logo{transform:scale(.98);animation-name:fadescale}
.js .hero__tag{animation-delay:.35s}
.js .hero__btn{animation-delay:.55s}
@keyframes fadescale{to{opacity:1;transform:none}}
@keyframes rise{from{transform:translateY(14px)}to{opacity:1;transform:none}}

/* >=768 */
@media (min-width:768px){
  body{font-size:17px}
  .about__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
  .numeral{margin:0}
  .details{grid-template-columns:repeat(3,1fr);border-top:1px solid var(--gold)}
  .details div{border-bottom:0;padding:24px 24px 0 0}
  .gallery__grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(80px,11vw,140px);gap:14px;overflow:visible;max-width:1040px;margin:0 auto;padding:32px var(--gutter) 0}
  .tile{flex:none;aspect-ratio:auto}
  .t1{grid-column:1/8;grid-row:1/5}
  .t2{grid-column:8/13;grid-row:1/3}
  .t3{grid-column:8/13;grid-row:3/5}
  .t4{grid-column:1/6;grid-row:5/8}
  .t5{grid-column:6/9;grid-row:5/8}
  .t6{grid-column:9/13;grid-row:5/8}
  .field--short{max-width:180px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js .hero__logo,.js .hero__tag,.js .hero__btn,.success{opacity:1;transform:none}
  .rule::before{transform:scaleX(1)}
  .rule__ball{display:none}
  .check circle,.check path{stroke-dashoffset:0}
}
.ts:empty{display:none}
.ts{margin:4px 0 12px}