@charset "UTF-8";
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/EBGaramond-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/EBGaramond-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/EBGaramond-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/EBGaramond-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Luxury ivory and beige: espresso text, champagne details. */
:root{--paper:#f8f4ee;--white:#fffdfa;--ink:#2e2722;--muted:#7a6f64;--line:#e3d9cc;--gold:#b39064;--gold-deep:#8c6b42;--sand:#efe6da;--sand-deep:#e8ddcf;--dark:#2e2722;--serif:"EB Garamond",Garamond,Georgia,serif}
h1,h2,h3{letter-spacing:-.03em}
/* Desktop scrollbars stay put: the page keeps its width when the intro or the lightbox hides the scrollbar. */
html{overflow-y:scroll}
html.intro-playing,html.lightbox-open{padding-right:var(--scrollbar-gap,0px)}
body{background:var(--paper)}
.eyebrow{color:var(--gold-deep);font-size:.68rem;letter-spacing:.22em}
.site-header{height:76px;padding:0 clamp(1.25rem,4vw,5rem);display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line)}
.site-header a{text-decoration:none}.brand{font-family:var(--serif);font-size:1.55rem;letter-spacing:-.01em;white-space:nowrap}.header-edition,.header-link{font-size:.7rem;font-weight:650;letter-spacing:.13em}.header-edition{color:var(--muted)}.header-link{white-space:nowrap}.header-link span{font-size:1rem;margin-left:.5rem;color:var(--gold-deep)}
.hero{display:grid;grid-template-columns:55% 45%;min-height:630px;height:min(740px,calc(100svh - 76px));overflow:hidden;background:linear-gradient(180deg,var(--paper) 0%,var(--sand) 100%);color:var(--ink)}
.hero-content{position:relative;z-index:3;padding:clamp(3rem,5.2vw,6rem) clamp(2rem,5vw,6rem) 3rem;align-self:stretch;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.hero-topline{display:flex;align-items:center;gap:.7rem;color:var(--gold-deep);font-size:.82rem;font-weight:750;letter-spacing:.15em;margin-bottom:clamp(2rem,4vw,4rem)}
.status-dot{width:10px;height:10px;flex:none;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px #b3906433;animation:status-pulse 2.6s ease-in-out infinite}
.hero h1{font-size:clamp(5rem,8.4vw,10rem);line-height:.82;letter-spacing:-.045em;color:var(--ink);margin:0 0 2.7rem;max-width:none;overflow:visible;white-space:nowrap}
.hero h1 em,.section-heading h2 em{font-style:italic;font-weight:400}.hero h1 em{color:var(--gold-deep);margin-left:clamp(2.5rem,7vw,8rem)}
.hero-date{min-height:0;margin:0 0 .55rem;font-size:.72rem;letter-spacing:.15em;color:var(--gold-deep)}.hero-date:empty{display:none}.hero-message{font:italic clamp(1.15rem,1.6vw,1.45rem)/1.3 var(--serif);color:#5c5148;margin:0 0 1.6rem;max-width:27rem}.hero-message:empty{display:none}
.hero-actions{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}.hero-actions button{min-height:55px}.hero .primary-btn{background:var(--ink);color:var(--paper);border:1px solid var(--ink);font-size:.86rem;font-weight:750;padding:0 1.3rem;gap:2.2rem;animation:button-pulse 2.6s ease-in-out infinite}.hero .primary-btn span{color:var(--gold)}.hero .primary-btn:hover{background:#4a3f37;border-color:#4a3f37;animation:none;transform:translateY(-4px)}.hero-message-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:2rem;padding:0 1.2rem;background:transparent;border:1px solid #2e272266;color:var(--ink);font-size:.86rem;font-weight:650;transition:background .25s,color .25s,transform .25s}.hero-message-btn:hover{background:var(--ink);color:var(--paper);transform:translateY(-4px)}.hero-message-btn span{color:var(--gold-deep)}.hero-message-btn:hover span{color:var(--gold)}
.hero-scroll{display:block;position:static;margin-top:1.45rem;max-width:35rem;font-size:.75rem;font-weight:500;letter-spacing:.015em;line-height:1.4;color:var(--muted)}
.hero-art{position:relative;min-height:0;height:100%;overflow:visible;background:transparent;isolation:auto;display:grid;place-items:center;padding:3rem 5vw 3.7rem 1rem}.hero-art::before,.hero-art::after,.hero-grain{display:none}.hero-image-wrap{position:relative;width:min(78%,510px);height:100%;max-height:620px;transform:none;outline:1px solid #b3906480;outline-offset:14px;box-shadow:0 30px 60px #5a463033;animation:portrait-float 7s ease-in-out infinite}.hero-photo{width:100%;height:100%;min-height:0;display:block;object-fit:cover;object-position:50% 25%;filter:saturate(.86) contrast(1.04)}
.photo-sticker{position:absolute;right:auto;left:-2.6rem;bottom:5.5%;width:clamp(145px,13vw,210px);z-index:5;border:0;background:transparent;padding:0;transform:rotate(-9deg);animation:sticker-bob 4.5s ease-in-out infinite}.photo-sticker:hover{animation:none;transform:rotate(-4deg) translateY(-8px)}.photo-sticker img{display:block;width:100%;height:auto;filter:drop-shadow(2px 0 #fff) drop-shadow(-2px 0 #fff) drop-shadow(0 2px #fff) drop-shadow(0 -2px #fff) drop-shadow(0 14px 15px #0007)}.photo-bubble{position:absolute;z-index:2;bottom:91%;right:40%;width:max-content;max-width:200px;padding:.72rem .9rem;background:var(--paper);border:2px solid var(--ink);border-radius:16px 16px 4px 16px;color:var(--ink);font:italic 1.12rem/1.08 var(--serif);white-space:nowrap;box-shadow:4px 5px 0 #0004;transform:rotate(-6deg);animation:bubble-pop 4.5s ease-in-out infinite}.photo-bubble::after{content:"";position:absolute;right:22px;bottom:-7px;width:12px;height:12px;background:var(--paper);border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);transform:rotate(45deg)}
html.intro-playing{overflow:hidden}.sticker-intro{display:none}.intro-playing .sticker-intro{display:block;position:fixed;inset:0;z-index:30;overflow:hidden;background:var(--paper);color:var(--ink);animation:intro-exit 3.6s ease-in-out both}.skip-intro{position:absolute;z-index:3;top:1.4rem;right:clamp(1.2rem,4vw,4rem);border:0;border-bottom:1px solid #2e272266;padding:.4rem .2rem;background:transparent;color:var(--ink);font-size:.75rem;letter-spacing:.08em}.skip-intro span{margin-left:.7rem;color:var(--gold-deep)}.intro-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;z-index:2;pointer-events:none}.intro-kicker{font-size:.65rem;font-weight:700;letter-spacing:.38em;color:var(--gold-deep);animation:intro-text .8s .2s both}.intro-center strong{max-width:16ch;margin:1.1rem 0 .8rem;font:normal clamp(3.4rem,7.5vw,8.3rem)/.96 var(--serif);letter-spacing:-.065em;animation:intro-text 1s .35s both}.intro-caption{font:italic clamp(1rem,1.6vw,1.4rem) var(--serif);color:var(--muted);animation:intro-text .8s .55s both}.intro-sticker{position:absolute;z-index:1;top:50%;left:50%;width:clamp(85px,11vw,165px);aspect-ratio:3/4;object-fit:cover;padding:6px 6px 17px;background:#fffdf8;box-shadow:0 16px 40px #0008;opacity:0;animation:intro-orbit 2.5s cubic-bezier(.21,.72,.2,1) var(--delay) both}.intro-sticker-1{--x:-39vw;--y:-25vh;--r:-18deg;--delay:.05s}.intro-sticker-2{--x:-24vw;--y:-36vh;--r:9deg;--delay:.17s}.intro-sticker-3{--x:4vw;--y:-39vh;--r:-8deg;--delay:.26s}.intro-sticker-4{--x:34vw;--y:-25vh;--r:16deg;--delay:.11s}.intro-sticker-5{--x:-41vw;--y:19vh;--r:12deg;--delay:.32s}.intro-sticker-6{--x:-17vw;--y:32vh;--r:-13deg;--delay:.2s}.intro-sticker-7{--x:15vw;--y:30vh;--r:8deg;--delay:.36s}.intro-sticker-8{--x:40vw;--y:17vh;--r:-12deg;--delay:.4s}
@keyframes intro-orbit{0%{opacity:0;transform:translate(-50%,calc(70vh + 100px)) rotate(40deg) scale(.55)}50%{opacity:1}100%{opacity:1;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r)) scale(1)}}@keyframes intro-text{from{opacity:0;transform:translateY(35px);filter:blur(8px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes intro-exit{0%,78%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:1;clip-path:inset(0 0 100% 0)}}
.intro-revealed .hero h1,.intro-revealed .hero-topline,.intro-revealed .hero-actions,.intro-revealed .hero-scroll{animation:hero-appear .7s both}.intro-revealed .hero h1{animation-delay:.12s}.intro-revealed .hero-actions{animation-delay:.28s}.intro-revealed .hero-scroll{animation-delay:.4s}@keyframes hero-appear{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes button-pulse{0%,100%{box-shadow:0 0 0 0 #b3906466}50%{box-shadow:0 0 0 12px #b3906400}}@keyframes status-pulse{50%{box-shadow:0 0 0 9px #b3906408}}@keyframes scroll-nudge{50%{transform:translateY(5px)}}@keyframes portrait-float{50%{transform:translateY(-8px)}}@keyframes sticker-bob{50%{transform:rotate(-5deg) translateY(-10px)}}@keyframes bubble-pop{50%{transform:rotate(-3deg) translateY(-4px)}}
.gallery-section{max-width:1530px;padding:3rem clamp(1.25rem,5vw,6rem) 5rem;background:var(--paper)}.gallery-section .section-heading{border-top:0;padding-top:0}.section-heading h2{font-size:clamp(4.2rem,7vw,7.5rem);line-height:.92;letter-spacing:-.04em;margin:0 0 2rem;max-width:none}.section-heading h2 em{margin-left:clamp(2rem,5vw,5rem)}.section-heading .count{font-size:.8rem;vertical-align:top;color:var(--muted)}.text-btn{display:inline-flex;align-items:center;gap:2rem;margin-bottom:2rem;font-size:.84rem}.gallery-toolbar{border-top:1px solid var(--line);padding-top:1rem}.filters button.active{background:var(--ink)}.gallery-grid{gap:10px}.media-card{background:#ebe3d8;transition:transform .35s,box-shadow .35s}.media-card:hover{z-index:2;transform:translateY(-6px);box-shadow:0 17px 28px #5a463026}.media-card img{filter:saturate(.9)}.media-card:hover img{filter:saturate(1)}.empty-state{border:1px solid var(--line);background:#f3ede4;min-height:210px;padding:3rem 1rem}.empty-state h3{font:italic clamp(2rem,4vw,3rem) var(--serif)}
.messages-section{background:var(--sand);color:var(--ink);max-width:none;padding:5.5rem max(clamp(1.25rem,5vw,6rem),calc((100vw - 1410px)/2)) 7rem}.messages-section .section-heading{border-top:0;padding-top:0}.messages-section .eyebrow{color:var(--gold-deep)}.messages-section h2{margin-bottom:3rem}.messages-layout{grid-template-columns:.7fr 1.6fr;gap:4rem}.messages-section .outlined-btn{border-color:var(--ink);min-height:55px;padding:0 1.6rem;font-size:.85rem}.messages-section .outlined-btn:hover{background:var(--ink);color:var(--paper)}.message-card{background:var(--white);border:1px solid var(--line);box-shadow:0 14px 30px #5a46301a;transition:transform .3s}.message-card:hover{transform:translateY(-5px) rotate(-1deg)}.message-card p{font-family:var(--serif);font-style:italic;font-size:1.25rem}.message-list:empty::before{content:"Ovde počinje dobra priča.";font:italic 1.5rem var(--serif)}
.photo-break{background:var(--sand-deep);color:var(--ink);padding:3rem 0 6rem;overflow:hidden}.film-heading{max-width:1530px;margin:auto;display:flex;justify-content:space-between;gap:2rem;padding:0 clamp(1.25rem,5vw,6rem) 2rem;font-size:.68rem;letter-spacing:.17em;color:#6f6358}.sticker-wall{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--gold) transparent;padding:2rem max(clamp(1.25rem,5vw,6rem),calc((100vw - 1410px)/2)) 3rem;overscroll-behavior-inline:contain}.sticker-card{flex:0 0 clamp(150px,14vw,220px);height:clamp(200px,19vw,295px);margin:0;padding:6px 6px 22px;background:var(--white);box-shadow:0 14px 26px #5a46303d;transform:rotate(var(--tilt));scroll-snap-align:center;transition:transform .4s,box-shadow .4s,opacity .5s}.sticker-card:nth-child(even){margin-top:1.7rem}.sticker-card img{display:block;width:100%;height:100%;object-fit:cover}.sticker-card:hover{z-index:2;transform:rotate(0deg) translateY(-8px) scale(1.04);box-shadow:0 20px 35px #5a463055}.wall-motion-ready .sticker-wall:not(.is-visible) .sticker-card{opacity:0;transform:translateY(40px) rotate(calc(var(--tilt) * 1.6))}.wall-motion-ready .sticker-wall.is-visible .sticker-card{transition-delay:calc(var(--order) * 35ms)}
footer{background:var(--sand-deep);border-top:1px solid #b3906455;color:var(--ink);padding:3rem clamp(1.25rem,5vw,6rem) 4rem;text-align:left}footer strong{font:normal clamp(2rem,5vw,4rem) var(--serif);letter-spacing:-.03em}footer p{font:.72rem var(--sans);letter-spacing:.15em;margin:1rem 0 0;color:#6f6358}
.primary-btn{background:var(--ink);border-color:var(--ink);color:var(--paper)}.mobile-upload{background:var(--ink);color:var(--paper)}.modal{background:var(--paper)}.modal h2{color:var(--ink)}.modal .primary-btn{background:var(--ink);color:var(--paper)}
@media(max-width:1100px){.hero{grid-template-columns:52% 48%}.hero h1{font-size:clamp(3.1rem,7.1vw,6.6rem)}.photo-sticker{left:-.5rem}.hero-actions{gap:.6rem}.hero-actions button{min-height:51px}.hero .primary-btn{gap:1rem}.hero-message-btn{gap:1rem}.hero-image-wrap{width:84%}}
@media(max-width:700px){.site-header{height:58px;padding:0 1.1rem}.brand{font-size:1.1rem}.header-edition{display:none}.header-link{font-size:.6rem;letter-spacing:0}.hero{display:flex;flex-direction:column-reverse;height:auto;min-height:0;overflow:hidden}.hero-art{height:35svh;min-height:260px;max-height:390px;padding:1.4rem 0 0;overflow:visible}.hero-image-wrap{width:min(65%,280px);height:100%;max-height:none;box-shadow:0 18px 38px #5a463033;transform:none;outline-offset:9px}.hero-photo{object-position:50% 22%}.photo-sticker{width:clamp(95px,26vw,126px);left:clamp(1.25rem,5vw,2.4rem);bottom:1.25rem}.photo-bubble{max-width:none;width:185px;font-size:1.04rem;padding:.55rem .7rem;top:calc(100% + .15rem);bottom:auto;left:0;right:auto;border-radius:4px 16px 16px 16px}.photo-bubble::after{top:-7px;bottom:auto;right:auto;left:24px;transform:rotate(225deg)}.hero-content{padding:4rem 1.3rem 3rem;display:block}.hero-topline{display:inline-flex;max-width:100%;font-size:.8rem;font-weight:800;letter-spacing:.11em;line-height:1.2;padding:.42rem .6rem;border:1px solid #b3906477;border-radius:100px;background:#b3906416;margin-bottom:1.55rem}.hero h1{font-size:clamp(3.65rem,15.6vw,5.7rem);margin:0 0 1.75rem}.hero h1 em{margin-left:clamp(.8rem,5vw,2rem)}.hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}.hero-actions button{min-height:55px;padding:0 .85rem;gap:.25rem;line-height:1.1;text-align:left;justify-content:space-between;font-size:.75rem}.hero .primary-btn{font-size:.75rem}.hero-scroll{position:static;margin-top:1.35rem;font-size:.73rem;letter-spacing:.01em;max-width:29ch}.gallery-section{padding:2.4rem 1.1rem 4rem}.section-heading{display:block}.section-heading h2{font-size:clamp(3.4rem,12vw,5rem);margin-bottom:1rem}.section-heading h2 em{margin-left:1.2rem}.gallery-section .text-btn{display:inline-flex;margin:0 0 1.3rem}.gallery-toolbar{display:block}.filters{margin:0 -1.1rem;padding:0 1.1rem .8rem;overflow:auto;flex-wrap:nowrap}.filters button{white-space:nowrap}.sort-label{display:block;margin:0 0 1rem;text-align:right}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.messages-section{padding:3.5rem 1.1rem 5rem}.messages-section h2{font-size:clamp(3.5rem,12vw,5rem)}.messages-layout{display:block}.message-intro{margin-bottom:2rem}.message-list{grid-template-columns:1fr}.film-heading{font-size:.54rem;letter-spacing:.12em;padding-inline:1.1rem}.sticker-wall{padding-left:1.1rem;padding-right:1.1rem}.sticker-card{flex-basis:160px;height:220px}.intro-center strong{max-width:10ch;font-size:clamp(3.4rem,12vw,5rem)}.intro-sticker{width:clamp(64px,19vw,90px);padding:4px 4px 12px}.intro-sticker-1{--x:-37vw;--y:-29vh}.intro-sticker-2{--x:-13vw;--y:-37vh}.intro-sticker-3{--x:14vw;--y:-34vh}.intro-sticker-4{--x:38vw;--y:-24vh}.intro-sticker-5{--x:-39vw;--y:19vh}.intro-sticker-6{--x:-12vw;--y:33vh}.intro-sticker-7{--x:16vw;--y:31vh}.intro-sticker-8{--x:40vw;--y:18vh}.mobile-upload{display:none}.mobile-upload.is-visible{display:block}footer{padding-bottom:6rem}}
@media(prefers-reduced-motion:reduce){.intro-playing .sticker-intro{display:none}.hero .primary-btn,.status-dot,.hero-image-wrap,.photo-sticker,.photo-bubble,.intro-revealed .hero h1,.intro-revealed .hero-topline,.intro-revealed .hero-actions,.intro-revealed .hero-scroll{animation:none!important}.sticker-card{transition:none!important}}

@media (min-width:701px) and (max-width:850px){
  .hero{grid-template-columns:50% 50%;min-height:600px}
  .hero-content{padding-inline:2.4rem}
  .hero h1{font-size:clamp(3.4rem,7vw,4.4rem)}
  .hero h1 em{margin-left:2rem}
  .hero-art{padding:2.5rem 2rem 3rem 0}
  .hero-image-wrap{width:78%}
  .photo-sticker{left:auto;right:1rem;bottom:2rem;width:135px}
  .photo-bubble{font-size:.9rem;padding:.55rem .65rem}
  .hero-actions button{min-height:48px;font-size:.76rem}
}
@media (max-width:350px){
  .site-header{padding-inline:.85rem;gap:.5rem}
  .brand{font-size:.98rem}
  .header-link{font-size:.55rem}
  .header-link span{margin-left:.15rem}
  .hero-content{padding-inline:1rem}
  .hero h1{font-size:clamp(3.45rem,16vw,3.8rem)}
  .hero-actions{grid-template-columns:1fr}
  .hero-actions button{min-height:49px;padding-inline:1rem;font-size:.78rem}
  .hero-scroll{max-width:31ch}
  .photo-sticker{left:1.25rem;width:93px}
  .photo-bubble{width:180px;font-size:1rem}
  .gallery-section,.messages-section{padding-inline:1rem}
  .filters{margin-inline:-1rem;padding-inline:1rem}
}
@media (min-width:701px) and (max-width:850px){
  .header-edition{display:none}
  .hero-image-wrap{width:86%;height:min(55vw,490px)}
  .photo-sticker{bottom:14%}
}
@media (max-width:700px) and (max-height:500px) and (orientation:landscape){
  .hero{display:grid;grid-template-columns:48% 52%;height:auto;min-height:calc(100svh - 58px)}
  .hero-content{align-self:center;padding:1rem 1.1rem}
  .hero-art{height:calc(100svh - 58px);min-height:290px;max-height:none;padding:1rem .5rem}
  .hero-image-wrap{width:min(77%,245px);height:100%;max-height:300px}
  .hero-topline{font-size:.6rem;margin-bottom:.9rem;padding:.3rem .45rem}
  .hero h1{font-size:clamp(2.65rem,7vw,3.7rem);margin-bottom:.95rem;line-height:.8}
  .hero h1 em{margin-left:.8rem}
  .hero-actions{grid-template-columns:1fr;gap:.4rem}
  .hero-actions button{min-height:41px;padding:0 .7rem;font-size:.7rem}
  .hero-scroll{margin-top:.7rem;font-size:.6rem;line-height:1.2}
  .photo-sticker{width:76px;left:0;bottom:4rem}
  .photo-bubble{width:140px;font-size:.78rem;padding:.4rem .5rem;top:96%}
}

/* Give the portrait and its cutout their own space on phones. */
@media (max-width:700px) and (orientation:portrait){
  .hero-art{height:auto;min-height:0;max-height:none;padding:1.5rem 1.25rem 0;display:flex;flex-direction:column;align-items:center}
  .hero-image-wrap{width:min(76vw,310px);height:min(64vw,280px);aspect-ratio:auto;max-height:none;transform:none;animation:none;box-shadow:0 18px 38px #5a463033;outline-offset:9px}
  .hero-photo{object-position:50% 19%}
  .photo-sticker{position:relative;left:auto;right:auto;bottom:auto;align-self:flex-start;width:clamp(80px,22vw,100px);margin:.4rem 0 0 .15rem;transform:rotate(-7deg)}
  .photo-bubble{top:31%;bottom:auto;left:calc(100% + .6rem);right:auto;width:184px;padding:.55rem .7rem;font-size:1rem;white-space:nowrap;border-radius:16px 16px 16px 4px;transform:rotate(-3deg)}
  .photo-bubble::after{top:auto;bottom:13px;left:-7px;right:auto;transform:rotate(135deg)}
  .hero-content{padding:2.3rem 1.3rem 3.3rem}
  .hero-topline{border:0;border-radius:0;background:none;padding:0;margin-bottom:1.7rem;letter-spacing:.17em}
  .hero h1{line-height:.9;margin-bottom:2.1rem}
  .hero h1 em{margin-left:clamp(.7rem,3vw,1.4rem)}
  .hero-actions{grid-template-columns:1.2fr .8fr;gap:.7rem}
  .hero-actions button{font-size:.76rem}
  .hero-scroll{margin-top:1.55rem}
}
@media (max-width:360px) and (orientation:portrait){
  .hero-actions{grid-template-columns:1fr}
  .photo-bubble{width:169px;font-size:.92rem}
}

.hero-image-wrap{overflow:hidden}
.hero-photo{transform:scale(1.18);transform-origin:50% 65%;filter:brightness(1.08) saturate(.9)}
@media (max-width:700px) and (orientation:portrait){
  .hero-photo{object-position:50% 60%;transform:scale(1.08);filter:brightness(1.1) saturate(.9)}
  .hero h1{display:block;width:100%;padding-left:0;font-size:clamp(2.6rem,13vw,4.8rem);line-height:1;letter-spacing:-.07em;white-space:nowrap}
  .hero h1 br{display:none}
  .hero h1 em{margin-left:.22em}
}

/* The opening is a short sequence of their own funny photos. */
.intro-playing .sticker-intro{animation:intro-finale 5.6s ease-in-out both}
.intro-heading{position:absolute;z-index:2;top:clamp(4.5rem,10svh,7rem);left:1rem;right:1rem;display:flex;flex-direction:column;align-items:center;gap:.45rem;text-align:center;pointer-events:none}
.intro-heading span{font-size:.65rem;font-weight:700;letter-spacing:.3em;color:var(--gold-deep)}
.intro-heading strong{font:normal clamp(2.25rem,5vw,4.25rem)/1 var(--serif);letter-spacing:-.03em}
.intro-slides{position:absolute;inset:0;display:grid;place-items:center;padding-top:4rem}
.intro-slide{position:absolute;width:min(60vw,320px);opacity:0;animation:intro-slide-in 2.15s var(--delay) both}
.intro-slide img{display:block;width:100%;height:min(48svh,410px);object-fit:cover;object-position:50% 40%;border:7px solid var(--white);box-shadow:0 24px 55px #5a463040}
.intro-slide-1{--delay:.18s}.intro-slide-2{--delay:1.74s}.intro-slide-3{--delay:3.3s}
.intro-slide-1 img{object-position:50% 33%}.intro-slide-2 img{object-position:50% 30%}.intro-slide-3 img{object-position:50% 30%}
.intro-note{position:absolute;left:50%;bottom:-1.1rem;z-index:2;width:max-content;max-width:min(82vw,350px);padding:.75rem 1rem;background:var(--white);border:1px solid #b3906499;color:var(--ink);box-shadow:0 12px 26px #5a463026;font:italic clamp(1.15rem,2.5vw,1.55rem)/1.05 var(--serif);text-align:center;white-space:nowrap;animation:intro-note-fly 2.15s var(--delay) both}
.intro-note small{display:block;margin-bottom:.3rem;font:600 .62rem var(--sans);letter-spacing:.06em}
@keyframes intro-slide-in{0%,10%{opacity:0;transform:translateY(85px) rotate(10deg) scale(.82)}23%,76%{opacity:1;transform:translateY(0) rotate(-3deg) scale(1)}100%{opacity:0;transform:translateY(-55px) rotate(-7deg) scale(1.06)}}
@keyframes intro-note-fly{0%,17%{opacity:0;transform:translate(-50%,48px) rotate(9deg)}32%,74%{opacity:1;transform:translate(-50%,0) rotate(-5deg)}100%{opacity:0;transform:translate(-50%,-20px) rotate(-8deg)}}
@keyframes intro-finale{0%,89%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 100% 0)}}

/* A clean, static portrait follows the intro. */
.hero-photo{transform:none;filter:saturate(.92) contrast(1.03)}
@media (max-width:700px) and (orientation:portrait){
  .hero-art{padding-bottom:1rem}
  .hero-image-wrap{width:min(78vw,340px);height:min(82vw,355px)}
  .hero-photo{object-position:50% 22%;transform:none;filter:saturate(.92) contrast(1.03)}
}
@media (prefers-reduced-motion:reduce){.intro-slide,.intro-note{animation:none!important}}
@media (max-width:360px){.intro-heading strong{font-size:1.85rem;white-space:nowrap}}
@media (max-height:500px) and (orientation:landscape){
  .intro-heading{top:1rem;gap:.2rem}
  .intro-heading strong{font-size:clamp(1.7rem,5vw,2.2rem);white-space:nowrap}
  .intro-slides{padding-top:2rem}
  .intro-slide{width:min(32vw,145px)}
  .intro-slide img{height:min(60svh,190px)}
  .intro-note{padding:.4rem .7rem;font-size:1rem}
}

/* Keep the two words in the messages heading together. */
.messages-section .section-heading h2 em{margin-left:0}
@media (max-width:700px){
  .messages-section h2{font-size:clamp(2.7rem,11.8vw,4rem);line-height:1;margin-bottom:2rem}
}

.archive-page .hero,.archive-page .sticker-intro,.archive-page .photo-break,.archive-page .missions-section{display:none!important}
.archive-intro{background:linear-gradient(180deg,var(--paper),var(--sand));color:var(--ink);padding:clamp(4rem,8vw,7rem) clamp(1.25rem,5vw,6rem) clamp(3rem,6vw,5rem)}
.archive-intro .eyebrow{color:var(--gold-deep);margin-bottom:1.3rem}
.archive-intro h1{font:normal clamp(3.8rem,9vw,8rem)/.95 var(--serif);letter-spacing:-.04em;margin:0 0 1.2rem}
.archive-intro h1 em{color:var(--gold-deep);font-weight:400}
.archive-intro p:last-child{font-size:.85rem;color:var(--muted);margin:0}
.archive-link{display:inline-flex;align-items:center;justify-content:space-between;gap:2rem;min-width:12rem;margin-top:2rem;padding:.75rem 0;border-bottom:1px solid currentColor;text-decoration:none;font-size:.84rem;font-weight:700}
.archive-link:hover{color:var(--gold-deep)}
.messages-section .archive-link{margin-top:2.5rem}
.archive-page .gallery-section{padding-top:4rem}
.archive-page .messages-section{min-height:320px}
@media(max-width:700px){
  .archive-intro{padding:3.3rem 1.1rem 3.5rem}
  .archive-intro h1{font-size:clamp(3.4rem,12vw,5rem)}
  .archive-intro p:last-child{max-width:25ch;line-height:1.45}
  .archive-page .gallery-section{padding-top:2.8rem}
}

/* Lightbox: counter and close on top, media in the middle, arrows on the sides (desktop) or in the bottom bar (phone). */
.lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgb(28 24 21 / var(--lightbox-dim,1));color:var(--paper);overflow:hidden;overscroll-behavior:contain}
.lightbox[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.lightbox::backdrop{background:rgb(28 24 21 / .6)}
html.lightbox-open{overflow:hidden;overscroll-behavior:none}
.lightbox-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:max(.7rem,env(safe-area-inset-top)) max(.9rem,env(safe-area-inset-right)) .4rem max(1.4rem,env(safe-area-inset-left))}
.lightbox-counter{font-size:.72rem;font-weight:650;letter-spacing:.2em;color:#f5f0e8b3;font-variant-numeric:tabular-nums}
.lightbox-close,.lightbox-arrow{display:grid;place-items:center;flex:none;padding:0;border:1px solid #f5f0e833;border-radius:50%;background:#f5f0e812;color:var(--paper);line-height:1;transition:background .2s,border-color .2s,opacity .2s}
.lightbox-close{width:46px;height:46px;font-size:1.7rem}
.lightbox-close:hover,.lightbox-arrow:hover{background:#f5f0e826;border-color:#b3906499}
.lightbox-stage{position:relative;overflow:hidden;touch-action:pinch-zoom}
.lightbox-content{position:absolute;inset:0 6.5rem;display:flex;align-items:center;justify-content:center;will-change:transform}
.lightbox-content img,.lightbox-content video{display:block;max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.lightbox-content p{max-width:28ch;margin:0;text-align:center;color:#f5f0e8cc}
.lightbox-arrow{position:absolute;z-index:3;top:50%;width:54px;height:54px;margin-top:-27px;font-size:1.35rem}
.lightbox-arrow.prev{left:max(1.5rem,env(safe-area-inset-left))}
.lightbox-arrow.next{right:max(1.5rem,env(safe-area-inset-right))}
.lightbox-arrow:disabled{opacity:0;pointer-events:none}
.lightbox-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem 1rem;min-height:3.6rem;padding:.8rem 1.5rem max(1rem,env(safe-area-inset-bottom));text-align:center;font-size:.8rem;color:#f5f0e8d9}
.lightbox-meta button{padding:.45rem .85rem;border:1px solid #f5f0e866;border-radius:2rem;background:none;color:var(--paper);font-size:.75rem}
.lightbox-download{color:var(--paper);text-decoration:underline;text-underline-offset:3px;font-size:.77rem}
@media(max-width:700px){
  .lightbox-content{inset:0 .5rem}
  .lightbox-arrow{top:auto;bottom:max(.8rem,env(safe-area-inset-bottom));margin-top:0;width:48px;height:48px;font-size:1.2rem}
  .lightbox-arrow.prev{left:1rem}
  .lightbox-arrow.next{right:1rem}
  .lightbox-arrow:disabled{opacity:.25}
  .lightbox-meta{min-height:calc(48px + .8rem + max(.8rem,env(safe-area-inset-bottom)));padding:.8rem 4.6rem max(.8rem,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.lightbox-close,.lightbox-arrow{transition:none}}

/* Missions of the evening: banner under the hero, "Nova misija!" popup, upload chip and gallery badge. */
.mission-banner{max-width:1530px;margin:0 auto;padding:1.75rem clamp(1.25rem,5vw,6rem) 0}
.mission-card{display:flex;align-items:center;justify-content:space-between;gap:1.25rem 3rem;padding:1.35rem 1.5rem 1.35rem 1.75rem;background:#f3ece2;border:1px solid #b3906480;box-shadow:inset 4px 0 0 var(--gold)}
.mission-label{display:flex;align-items:center;gap:.65rem;margin:0 0 .45rem;font-size:.66rem;font-weight:750;letter-spacing:.2em;text-transform:uppercase;color:#8c6b42}
.mission-label .status-dot{width:8px;height:8px}
.mission-banner-title{margin:0;font:italic clamp(1.45rem,2.6vw,2.1rem)/1.15 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.mission-card-side{display:grid;justify-items:end;gap:.55rem;flex:none}
.mission-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:1.1rem;min-height:48px;padding:0 1.3rem;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font-size:.8rem;font-weight:700}
.mission-cta:hover{background:#4a3f37}
.mission-card-side small{font-size:.7rem;color:#6b645c}
.mission-card-side small:empty{display:none}
.mission-modal{width:min(460px,calc(100vw - 2rem));animation:mission-in .45s cubic-bezier(.2,.8,.2,1) both}
.mission-modal .modal-body{padding:2.4rem 2rem 1.5rem}
.mission-eyebrow{display:flex;align-items:center;gap:.6rem;margin-bottom:1.1rem;color:#8c6b42}
.mission-eyebrow .status-dot{width:8px;height:8px}
.mission-modal h2{font-size:clamp(2.6rem,9vw,3.4rem);line-height:.95;margin-bottom:1.2rem}
.mission-dialog-title{margin:0 0 1.8rem;padding:.2rem 0 .2rem 1rem;border-left:3px solid var(--gold);font:italic 1.45rem/1.25 var(--serif);color:var(--ink)}
.mission-later{display:block;margin:.8rem auto 0;padding:.6rem 1rem;border:0;background:none;color:#6b645c;font-size:.8rem;text-decoration:underline;text-underline-offset:3px}
@keyframes mission-in{from{opacity:0;transform:translateY(18px) scale(.96)}}
.upload-mission{display:flex;align-items:center;gap:.7rem;margin:-.2rem 0 1.3rem;padding:.55rem .35rem .55rem .9rem;background:#f3ece2;box-shadow:inset 3px 0 0 var(--gold)}
.upload-mission span{flex:none;font-size:.6rem;font-weight:750;letter-spacing:.18em;text-transform:uppercase;color:#8c6b42}
.upload-mission strong{flex:1;min-width:0;font:italic 400 1.02rem/1.25 var(--serif);color:var(--ink)}
.upload-mission button{flex:none;width:40px;height:40px;border:0;background:none;color:var(--ink);font-size:1.35rem;line-height:1}
.mission-badge{position:absolute;right:.7rem;top:.7rem;z-index:2;padding:.28rem .6rem;border-radius:2rem;background:var(--gold);color:var(--ink);font-size:.62rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase;pointer-events:none}
.lightbox-mission{color:var(--gold);font-style:italic}
.missions-list .mission{display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);color:var(--ink);cursor:pointer}
.missions-list .mission small{color:#8c6b42;text-transform:uppercase}
.missions-list .mission.current{border-top:2px solid var(--gold)}
.missions-list .mission em{margin-top:1.1rem;padding-bottom:.15rem;border-bottom:1px solid currentColor;font:700 .74rem var(--sans)}
.missions-list .mission:hover em{color:#8c6b42}
@media(max-width:700px){
  .mission-banner{padding:1.25rem 1rem 0}
  .mission-card{flex-direction:column;align-items:stretch;padding:1.15rem 1.1rem 1.15rem 1.35rem}
  .mission-card-side{justify-items:stretch}
  .mission-card-side small{text-align:center}
  .mission-modal .modal-body{padding:2.2rem 1.4rem 1.3rem}
}
@media(prefers-reduced-motion:reduce){.mission-modal{animation:none}}

/* Upload list: thumbnail, name, status and one action per file; green when saved, red on error. */
.upload-modal.has-files .dropzone{flex-direction:row;gap:.8rem;min-height:0;margin:1rem 0;padding:.8rem 1rem}
.upload-modal.has-files .drop-icon{width:34px;height:34px;line-height:30px;font-size:1.15rem;margin:0}
.upload-modal.has-files .dropzone strong{font-size:1.1rem}
.upload-items{display:grid;gap:.5rem;max-height:min(46svh,380px);overflow:auto;margin:.25rem 0 .9rem}
.upload-items:empty{display:none}
.upload-item{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:.8rem;align-items:center;padding:.45rem .4rem .45rem .45rem;border:1px solid var(--line);background:#fffdf9;font-size:.78rem;transition:background .25s,border-color .25s}
.upload-thumb{display:grid;place-items:center;width:56px;height:56px;overflow:hidden;background:#e6e0d7;color:#6b645c}
.upload-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.upload-kind{font-size:.62rem;font-weight:750;letter-spacing:.06em}
.upload-info{display:grid;gap:.22rem;min-width:0}
.upload-item .file-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:650;color:var(--ink)}
.upload-item .upload-status{color:#6b645c;font-size:.72rem}
.upload-bar{height:4px;overflow:hidden;border-radius:2px;background:#e6ddd0}
.upload-bar span{display:block;width:0;height:100%;background:var(--gold);transition:width .25s}
.upload-item.is-ready .upload-bar,.upload-item.is-error .upload-bar,.upload-item.is-rejected .upload-bar,.upload-item.is-removed .upload-bar{visibility:hidden}
.upload-item.is-done{background:#e7f3e3;border-color:#9ccb92}
.upload-item.is-done .upload-status{color:#2d6a28;font-weight:700}
.upload-item.is-done .upload-bar span{background:#4c9a44}
.upload-item.is-error,.upload-item.is-rejected{background:#fbe9e6;border-color:#e2a398}
.upload-item.is-error .upload-status,.upload-item.is-rejected .upload-status{color:#a3372b;font-weight:650;white-space:normal}
.upload-item.is-removed{opacity:.55}
.upload-item .upload-action{width:40px;height:40px;padding:0;border:0;background:none;color:var(--ink);font-size:1.45rem;line-height:1;text-decoration:none}
.upload-item .upload-action.is-text{width:auto;height:auto;padding:.4rem .65rem;border:1px solid #b9ad9e;font-size:.72rem;font-weight:650;color:#4a4540}
.upload-summary{margin:0 0 .9rem;padding:.75rem .9rem;background:#efe8dc;color:var(--ink);font-size:.82rem;font-weight:650}
.upload-summary.is-done{background:#dcefd6;color:#2d6a28}
.upload-summary.is-error{background:#f8e0db;color:#a3372b}
.upload-done-actions{display:grid;gap:.6rem}
.upload-more{min-height:48px;border:1px solid var(--ink);background:transparent;color:var(--ink);font-size:.82rem;font-weight:650}
.upload-more:hover{background:#ebe5da}