/* Palackposta · homok, türkiz, hab-fehér, tengerüveg-zöld, napfény. */

@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-italic.woff2) format('woff2')}
@font-face{font-family:'Allura';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/allura.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/jost-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:'Jost';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/jost-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --sand:#f1e3c4;
  --sand-deep:#e2cc9f;
  --turq:#14808e;
  --turq-soft:#3aa6aa;
  --deep:#0d4f5e;
  --ink:#1c3e48;
  --ink-soft:#4a6068;
  --foam:#fffdf6;
  --glass:#7fb59a;
  --sun:#f3c157;
  --paper:#fcf6e8;
  --serif:'Instrument Serif',Georgia,serif;
  --script:'Allura','Snell Roundhand',cursive;
  --sans:'Jost',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --bk-edit:rgba(13,79,94,.55);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:400 17px/1.62 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;background:
  var(--grain,none),
  radial-gradient(70% 40% at 0% 30%,rgba(127,181,154,.16),transparent 70%),
  radial-gradient(60% 40% at 100% 70%,rgba(58,166,170,.13),transparent 70%),
  linear-gradient(#f3e7cc,#f6ecd6 40%,#f1e3c4);background-size:160px 160px,auto,auto,auto}
body.locked{overflow:hidden;height:100svh}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--turq);outline-offset:3px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.h2{margin:0 0 .3em;font:400 clamp(2.4rem,7.4vw,3.7rem)/1.04 var(--serif);color:var(--deep);letter-spacing:-.005em}
.kicker{margin:0 0 .3em;font:italic 400 clamp(21px,3.2vw,25px)/1.3 var(--serif);color:var(--turq)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 26px;border:0;border-radius:999px;background:var(--deep);color:#fff;font:600 16px/1.2 var(--sans);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background .2s ease,transform .2s ease}
.btn:hover{background:var(--turq)}
.btn:disabled{opacity:.6;cursor:progress}
.btn.ghost{background:transparent;color:var(--deep);box-shadow:inset 0 0 0 1.5px currentColor}
.btn.ghost:hover{background:rgba(20,128,142,.08)}
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ───────────── Fejléc: a part és a palack ───────────── */
.hero{position:relative;height:100svh;min-height:540px;overflow:hidden;background:#efdfbd;isolation:isolate}
.sand{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.sea{position:absolute;left:0;top:0;width:100%;display:block;z-index:1}
.sun{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(55% 40% at 10% 6%,rgba(255,236,186,.38),rgba(255,236,186,0) 70%)}
.gull{position:absolute;left:0;top:0;width:96px;z-index:2;opacity:.12;filter:blur(2.5px);pointer-events:none;transform:translate(-160px,40svh) rotate(16deg);animation:siraly 26s linear 5s infinite}
@keyframes siraly{0%{transform:translate(-160px,48svh) rotate(16deg)}38%{transform:translate(calc(100vw + 60px),4svh) rotate(16deg)}100%{transform:translate(calc(100vw + 60px),4svh) rotate(16deg)}}
.btl{position:absolute;left:0;top:0;width:var(--bl);height:calc(var(--bl) * .3);transform-origin:50% 50%;will-change:transform;z-index:3;transform:translate(-200vw,0)}
.btl-svg{display:block;width:100%;height:100%;overflow:visible}
.btl-wet{opacity:0}
.cork{position:absolute;left:0;top:0;width:var(--cs);height:calc(var(--cs) * .867);transform-origin:50% 50%;will-change:transform;z-index:6;transform:translate(-200vw,0)}
.cork svg{display:block;width:100%;height:100%;overflow:visible}
.ck-sh{position:absolute;left:0;top:0;width:var(--cs);height:calc(var(--cs) * .62);border-radius:45%;background:rgba(74,52,18,.34);filter:blur(3px);z-index:2;transform:translate(-200vw,0);pointer-events:none}
.hero:not(.ready) .btl,.hero:not(.ready) .cork,.hero:not(.ready) .ck-sh{visibility:hidden}
.spray{position:absolute;inset:0;z-index:7;pointer-events:none}
.spray i{position:absolute;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(20,128,142,.15);animation:csepp .62s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes csepp{to{transform:translate(var(--dx),var(--dy)) scale(.5);opacity:0}}

/* a tekercs és a kigöngyölt lap */
.sheet{position:absolute;left:var(--sx);top:var(--sy);width:var(--sw);height:var(--sh);z-index:4}
.sheet-sh{position:absolute;left:5%;right:5%;top:calc(var(--De) * .5);height:calc(100% - var(--De));border-radius:6px;background:rgba(80,56,20,.3);filter:blur(12px);transform-origin:50% 0;transform:scaleY(0);pointer-events:none}
.paper{position:absolute;inset:0;clip-path:inset(0 0 100% 0);background:
  var(--grain,none),
  radial-gradient(40% 22% at 88% 92%,rgba(178,140,82,.14),transparent 70%),
  radial-gradient(30% 18% at 6% 14%,rgba(178,140,82,.1),transparent 70%),
  radial-gradient(120% 85% at 50% 42%,#fffcf3 0%,#fbf3e1 58%,#f0dfbe 100%);background-size:160px 160px,auto,auto,auto;
  box-shadow:inset 0 0 38px rgba(160,118,52,.2)}
.curl{position:absolute;left:-1px;right:-1px;top:0;height:var(--De);border-radius:4px;opacity:0;pointer-events:none;background:linear-gradient(180deg,#c9b287 0%,#efe2c6 24%,#fffaf0 44%,#f1e5ca 66%,#d3bc93 88%,#b59a6c 100%);box-shadow:0 3px 5px -2px rgba(80,56,20,.35)}
.roll{position:absolute;left:0;top:0;width:100%;height:var(--D0);border-radius:5px;transform-origin:50% 50%;will-change:transform;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,#c3aa7d 0%,#efe2c6 20%,#fffaf0 38%,#f3e8cf 58%,#d6c09a 82%,#a98e62 100%);
  box-shadow:0 calc(var(--D0) * .32) calc(var(--D0) * .38) calc(var(--D0) * -.12) rgba(70,48,16,.42);transition:box-shadow .3s ease}
.roll.lifted{box-shadow:0 calc(var(--D0) * .9) calc(var(--D0) * .8) calc(var(--D0) * -.1) rgba(70,48,16,.3)}
.roll::before,.roll::after{content:"";position:absolute;top:0;bottom:0;width:calc(var(--D0) * .3);border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,#f8efda 0 1.6px,#c8b085 1.6px 2.6px);box-shadow:inset 0 0 0 1px rgba(150,120,80,.4)}
.roll::before{left:calc(var(--D0) * -.15)}
.roll::after{right:calc(var(--D0) * -.15)}
.tw{position:absolute;top:-1px;bottom:-1px;width:3px;border-radius:2px;background:#7d5c38;box-shadow:5px 0 0 #8b6a44}
.tw1{left:24%;transform:none}
.tw2{right:26%}
.sheet-in{--u:calc(var(--sw) / 100 * var(--fk,1));position:absolute;left:calc(var(--sw) * .085);right:calc(var(--sw) * .085);top:calc(var(--De) + var(--sw) * .06);bottom:calc(var(--De) + var(--sw) * .05);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--ink);overflow:hidden}
.names{margin:0;display:flex;flex-direction:column;align-items:center;font:400 min(calc(var(--u) * 17 * var(--nk,1)),104px)/.98 var(--script);color:var(--deep)}
.names span{max-width:100%;overflow-wrap:anywhere;padding:0 .12em}
.names i{margin:.04em 0 .02em;font:italic 400 clamp(18px,calc(var(--u) * 5.4),30px)/1 var(--serif);color:var(--turq)}
.vow{margin:.55em 0 0;font:italic 400 clamp(18px,calc(var(--u) * 6.2),32px)/1.2 var(--serif);color:var(--turq)}
.squiggle{width:clamp(70px,calc(var(--u) * 26),140px);height:auto;margin:.55em 0 .7em;color:var(--turq-soft);flex:none}
.msg{margin:0 0 .85em;max-width:32ch;font:italic 400 clamp(16px,calc(var(--u) * 5),23px)/1.38 var(--serif);color:var(--ink)}
.sheet-in.tight .msg{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.when{margin:0 0 .3em;font:400 clamp(18px,calc(var(--u) * 6),29px)/1.22 var(--serif);color:var(--deep)}
.where{margin:0;font:italic 400 clamp(17px,calc(var(--u) * 5.2),25px)/1.3 var(--serif);color:var(--turq)}
.hero-cue{position:absolute;z-index:8;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);padding:9px 18px;border-radius:999px;background:rgba(13,79,94,.86);color:#fff;font:600 15px/1.2 var(--sans);text-decoration:none;white-space:nowrap;transition:opacity .6s ease;display:none}
.hero.wide .hero-cue{display:block}
.hero:not(.is-open) .hero-cue{opacity:0;pointer-events:none;transition:none}

/* nyitás */
.op{position:absolute;inset:0;z-index:20;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;transition:opacity .5s ease}
.op:focus{outline:none}
.op.is-fading{opacity:0;pointer-events:none}
.op-top{position:absolute;left:16px;right:16px;top:max(18px,env(safe-area-inset-top));text-align:center;color:#fff;text-shadow:0 1px 12px rgba(4,46,56,.55)}
.op-title{margin:0;font:italic 400 clamp(28px,7.6vw,42px)/1.08 var(--serif)}
.op-sub{margin:.3em 0 0;font:600 16px/1.3 var(--sans)}
.op-ring{position:absolute;left:0;top:0;width:calc(var(--cs) * 2.2);height:calc(var(--cs) * 2.2);margin:calc(var(--cs) * -1.1) 0 0 calc(var(--cs) * -1.1);border-radius:50%;border:2px solid rgba(255,255,255,.95);opacity:0;pointer-events:none}
.hero.is-wait .op-ring{animation:gyuru 1.7s ease-out infinite}
@keyframes gyuru{0%{opacity:.95;scale:.55}100%{opacity:0;scale:1.3}}
.op-bottom{position:absolute;left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom));text-align:center}
.op-hint,.op-hint2{opacity:0;transition:opacity .5s ease}
.hero.is-wait .op-hint,.hero.is-wait .op-hint2{opacity:1}
.op-hint{margin:0;font:italic 400 clamp(25px,6.6vw,32px)/1.15 var(--serif);color:var(--deep)}
.op-hint2{margin:.15em 0 0;font:500 16px/1.3 var(--sans);color:var(--ink-soft)}
.op-skip{margin-top:4px;background:none;border:0;padding:10px 14px;color:var(--deep);font:500 16px/1.2 var(--sans);text-decoration:underline;text-underline-offset:4px;cursor:pointer}

/* ───────────── Tartalom ───────────── */
.sec{max-width:1080px;margin:0 auto;padding:clamp(64px,10vw,120px) 20px 0}
.uzenet{display:grid;gap:clamp(32px,5vw,64px);align-items:center}
@media (min-width:860px){.uzenet{grid-template-columns:1.1fr .9fr}}
.uzenet.lead-on .lead{display:block}
.uzenet .lead{display:none;margin:0 0 1em;font:italic 400 clamp(21px,3.2vw,26px)/1.42 var(--serif);color:var(--ink)}
.story{margin:0 0 28px;color:var(--ink)}
.story p{margin:0 0 1em}
.story h3{margin:1.1em 0 .2em;font:italic 400 24px/1.2 var(--serif);color:var(--turq)}
.story ul{margin:0 0 1em;padding-left:1.2em}
.kep{margin:0;filter:drop-shadow(0 22px 26px rgba(70,52,20,.24))}
.kep img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px 6px 0 0;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V117C92 121 84 113 75 117S58 124 50 119 33 113 25 118 8 122 0 116Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V117C92 121 84 113 75 117S58 124 50 119 33 113 25 118 8 122 0 116Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}

.program{display:grid;gap:12px 64px}
@media (min-width:860px){.program{grid-template-columns:.8fr 1.2fr;align-items:start}.program .h2,.program .sub{grid-column:1}.program .hullam{grid-column:2;grid-row:1 / span 3}}
.sub{margin:0;font:italic 400 22px/1.3 var(--serif);color:var(--turq)}
.hullam{list-style:none;margin:24px 0 0;padding:0 0 0 48px;position:relative}
.hullam::before{content:"";position:absolute;left:6px;top:14px;bottom:24px;width:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 64'%3E%3Cpath d='M11 0c6 8 6 24 0 32s-6 24 0 32' fill='none' stroke='%233aa6aa' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 50% 0/22px 64px repeat-y}
.hullam li{position:relative;display:grid;grid-template-columns:auto;gap:2px;padding:0 0 30px}
.hullam li::before{content:"";position:absolute;left:-42px;top:.55em;width:16px;height:16px;border-radius:50%;background:var(--foam);box-shadow:0 0 0 3px var(--turq),0 0 0 7px rgba(58,166,170,.18)}
@media (min-width:560px){.hullam li{grid-template-columns:96px 1fr;gap:18px}}
.h-time{font:400 30px/1.05 var(--serif);color:var(--turq)}
.h-body h3{margin:0;font:400 24px/1.2 var(--serif);color:var(--deep)}
.h-body p{margin:3px 0 0;color:var(--ink-soft)}

.hely{text-align:center;display:grid;justify-items:center}
.rose{width:92px;height:92px;margin:0 0 18px;color:var(--turq)}
.hely .addr{margin:0 0 6px;color:var(--ink-soft)}
.time-note{margin:0 auto 24px;max-width:36ch;color:var(--ink)}
.venue-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

.gyik{max-width:820px}
.faq{margin-top:18px;border-top:1.5px dashed rgba(20,128,142,.35)}
.faq details{border-bottom:1.5px dashed rgba(20,128,142,.35)}
.faq summary{position:relative;display:block;list-style:none;padding:18px 44px 18px 0;cursor:pointer;font:400 clamp(22px,3.4vw,26px)/1.25 var(--serif);color:var(--deep)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:16px;height:16px;margin-top:-8px;background:linear-gradient(var(--turq),var(--turq)) 50% 50%/16px 2px no-repeat,linear-gradient(var(--turq),var(--turq)) 50% 50%/2px 16px no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .txt{padding:0 0 20px;color:var(--ink)}
.faq .txt p{margin:0 0 .6em}
.faq .txt ul{margin:0 0 .6em;padding-left:1.2em}

.valasz{padding-bottom:0}
.note{position:relative;max-width:660px;margin:0 auto;padding:calc(clamp(28px,6vw,52px) + 14px) clamp(20px,6vw,52px) clamp(28px,6vw,48px);background:var(--grain,none),radial-gradient(120% 90% at 50% 40%,#fffcf3,#f8eeda 70%,#efdfbf);background-size:160px 160px,auto;box-shadow:0 30px 50px -30px rgba(70,52,20,.5),0 2px 0 rgba(255,255,255,.6) inset,inset 0 0 34px rgba(160,118,52,.16);border-radius:3px}
.note-curl{position:absolute;left:-2px;right:-2px;top:-6px;height:22px;border-radius:5px;background:linear-gradient(180deg,#c9b287 0%,#efe2c6 24%,#fffaf0 44%,#f1e5ca 66%,#d3bc93 88%,#b59a6c 100%);box-shadow:0 4px 6px -3px rgba(80,56,20,.4)}
.rsvp-intro{margin:0 0 26px;color:var(--ink-soft)}
.field{display:block;margin:0 0 20px;border:0;padding:0;min-width:0}
.field label,.field legend{display:block;margin-bottom:8px;padding:0;font:600 16px/1.35 var(--sans);color:var(--ink)}
.field small{display:block;margin-top:6px;font-size:15px;color:var(--ink-soft)}
.input{width:100%;min-height:50px;padding:12px 14px;border:1.5px solid rgba(20,128,142,.3);border-radius:10px;background:rgba(255,253,246,.9);color:var(--ink);font:400 17px/1.4 var(--sans)}
.input:focus{border-color:var(--turq);outline:none;box-shadow:0 0 0 3px rgba(58,166,170,.2)}
textarea.input{min-height:110px;resize:vertical}
.choice{display:grid;gap:10px}
@media (min-width:560px){.choice{grid-template-columns:1fr 1fr}}
.choice label{display:flex;gap:10px;align-items:center;margin:0;padding:12px 16px;border:1.5px solid rgba(20,128,142,.35);border-radius:999px;cursor:pointer;font-weight:500;background:rgba(255,253,246,.6)}
.choice label:has(input:checked){background:rgba(58,166,170,.16);border-color:var(--turq)}
.choice input{width:20px;height:20px;accent-color:var(--deep);margin:0;flex:none}
.cond{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.cond>div{overflow:hidden}
.cond.show{grid-template-rows:1fr}
.form-error{min-height:1.2em;margin:0 0 10px;color:#a3301c;font-weight:600}
.rsvp-submit{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.demo-note{margin:0;font-size:15px;color:var(--ink-soft)}
.thanks{position:relative;outline:none;padding-top:8px}
.thanks-big{margin:0 0 6px;font:400 clamp(44px,10vw,60px)/1 var(--script);color:var(--deep)}
.drift{position:relative;height:40px;margin-bottom:14px;overflow:hidden}
.drift svg{position:absolute;left:0;top:6px;width:96px;height:auto;animation:sodrodik 3.6s ease-in-out forwards}
@keyframes sodrodik{0%{left:0;transform:rotate(-4deg) translateY(0)}25%{transform:rotate(3deg) translateY(-4px)}50%{transform:rotate(-3deg) translateY(3px)}75%{transform:rotate(2deg) translateY(-3px);opacity:1}100%{left:calc(100% - 96px);transform:rotate(-2deg);opacity:0}}

.closing{padding:clamp(64px,10vw,110px) 20px clamp(56px,9vw,100px);text-align:center}
.closing-names{margin:0 0 6px;font:400 clamp(3rem,12vw,4.6rem)/1.05 var(--script);color:var(--deep)}
.closing p{margin:0}
.replay{margin-top:22px;background:none;border:0;padding:10px;color:var(--deep);font:500 16px var(--sans);text-decoration:underline;text-underline-offset:4px;cursor:pointer}

.gate{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;background:var(--grain,none),linear-gradient(#bfe7e1 0,#8fd3cd 22%,#e9d6ad 23%,#f1e3c4);background-size:160px 160px,auto}
.gate form{position:relative;width:min(100%,430px);padding:30px 26px 26px;text-align:center;background:var(--paper);border-radius:4px;box-shadow:0 30px 50px -28px rgba(70,52,20,.55)}
.gate-btl{display:block;width:120px;height:auto;margin:0 auto 12px;transform:rotate(-8deg)}
.gate h1{margin:0 0 10px;font:400 44px/1.05 var(--script);color:var(--deep)}
.gate p{margin:0 0 16px;color:var(--ink-soft)}
.gate .input{text-align:center;letter-spacing:.2em}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .gull{display:none}
  .roll{transition:none}
}

/* Kérdéscímkék a sablon talpas betűjével (elegánsabb, mint a félkövér talpatlan) */
.field>label,.field>legend,.field label:not(.choice label),.field legend{font:400 1.35rem/1.25 var(--serif);letter-spacing:0}