/* Préselt virág · herbáriumlap: krémpapír, tinta, zsályazöld, pauszpapír */
@font-face{font-family:"Crimson Pro";src:url(fonts/crimson-pro.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Crimson Pro";src:url(fonts/crimson-pro-italic.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap}
@font-face{font-family:"Square Peg";src:url(fonts/square-peg.woff2) format("woff2");font-display:swap}

:root{
  --paper:#f6f1e4;
  --ink:#3a3428;
  --text:#41392d;
  --muted:#6c6352;
  --sage:#566641;
  --sage-dark:#43512f;
  --rule:#c9bc9c;
  --bk-edit:rgba(86,102,65,.6);
  --serif:"Crimson Pro",Georgia,"Times New Roman",serif;
  --hand:"Square Peg","Segoe Print",cursive;
  --W:min(560px,calc(100vw - 24px));
  --fiber:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --fiber2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .36 0 0 0 0 .28 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  --desk:
    radial-gradient(80% 60% at 30% 8%,rgba(255,253,247,.5),rgba(255,253,247,0) 62%),
    radial-gradient(130% 90% at 50% 115%,rgba(55,52,40,.2),rgba(55,52,40,0) 70%),
    var(--fiber2),var(--fiber),#d8d5c9;
}
*,*::before,*::after{box-sizing:border-box}
html{background:#d8d5c9;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--desk);background-color:#d8d5c9;color:var(--text);font:400 18px/1.6 var(--serif);overflow-x:hidden;font-variant-numeric:lining-nums}
body.locked{overflow:hidden;height:100vh;height:100svh}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px}

/* ── Lapok ── */
.desk{padding:12px 0 40px;overflow-x:clip}
.sheet{position:relative;width:var(--W);margin:0 auto;background:var(--paper)}
.hero{background:none;perspective:1400px}
.tilt{position:relative;transform-style:flat;will-change:transform}
.paper{position:relative;container-type:inline-size;background:var(--fiber2),var(--fiber),linear-gradient(170deg,#f8f4e8,#f3ecdb);
  box-shadow:0 1px 1px rgba(60,52,38,.12),0 12px 26px -12px rgba(60,52,38,.38),0 34px 60px -38px rgba(60,52,38,.45);padding:7% 6% 6%}
.paper::before,.sheet.body::before,.card::before{content:"";position:absolute;inset:10px;border:1px solid rgba(120,104,72,.32);box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 3.6px rgba(120,104,72,.2);pointer-events:none}
.paper::before{inset:2.6cqw}

.head-text{position:relative;text-align:center;padding:2.4cqw 2cqw 0}
.kicker{margin:0;font:italic 400 max(15px,4.3cqw)/1.3 var(--serif);color:var(--muted)}
.names{margin:1.6cqw 0 0;font:italic 300 var(--ns,13.5cqw)/1.02 var(--serif);color:var(--ink);letter-spacing:-.005em;overflow-wrap:anywhere}
.names .amp{font-size:.5em;color:var(--sage);font-weight:400;vertical-align:.2em;margin:0 .1em}
.date{margin:3cqw 0 0;font:500 max(15px,4.4cqw)/1.2 var(--serif);color:var(--sage-dark);letter-spacing:.06em}
.date .day{font-style:italic;font-weight:400;letter-spacing:0;color:var(--muted);margin-left:.6em}
.place{margin:1cqw 0 0;font:400 max(15px,4cqw)/1.3 var(--serif);color:var(--muted)}

/* A virágmező: rögzített arányú, minden %-ban, így minden szélességen ugyanaz a kompozíció */
.field{position:relative;margin:3.4cqw 0 0;aspect-ratio:5/7}
.field-art{position:absolute;inset:0}
.pl{position:absolute;height:auto;mix-blend-mode:multiply;pointer-events:none;-webkit-user-select:none;user-select:none}
.cser{left:-7%;top:-2%;width:80%}
.nef{left:60%;top:-2%;width:42%}
.gyv{left:52%;top:46%;width:42%}
.tag{position:absolute;margin:0;line-height:1.05;color:var(--ink);rotate:-3deg}
.tag .hand{display:block;font:400 max(19px,6.2cqw)/1 var(--hand);color:#4a4233}
.tag i{display:block;font:italic 400 max(12px,3.5cqw)/1.2 var(--serif);color:var(--muted);margin-top:.2em}
.t-cser{left:33%;top:56%;rotate:-5deg}
.t-nef{right:27%;top:42.5%;rotate:3deg;text-align:right}
.label{position:absolute;left:0;bottom:0;width:50%;background:#fbf8ef;border:1px solid rgba(110,96,66,.5);padding:2.2cqw 2.4cqw 1.6cqw;box-shadow:0 1px 2px rgba(60,52,38,.18);rotate:-.6deg}
.label::before{content:"";position:absolute;inset:3px;border:1px solid rgba(110,96,66,.22);pointer-events:none}
.label p{margin:0;display:grid;grid-template-columns:auto 1fr;gap:0 .5em;align-items:baseline;border-bottom:1px dotted rgba(110,96,66,.45);padding:.25em 0 .1em;font:400 max(12px,3.1cqw)/1.25 var(--serif);color:var(--muted)}
.label p:last-child{border-bottom:0}
.label p.label-h{display:block;font:500 max(14px,3.9cqw)/1.2 var(--serif);color:var(--ink);border-bottom:1px solid rgba(110,96,66,.5);padding:0 0 .35em;margin-bottom:.15em}
.label p.label-h i{font-weight:400;color:var(--muted)}
.label .hand{font:400 max(17px,5cqw)/1 var(--hand);color:#3e372b;overflow-wrap:break-word;min-width:0}

/* ── Tartalom ── */
.sheet.body{margin-top:26px;padding:56px 9% 64px;text-align:center;background:var(--fiber2),var(--fiber),var(--paper);box-shadow:0 1px 1px rgba(60,52,38,.1),0 18px 36px -22px rgba(60,52,38,.4)}
.rv{opacity:0;transform:translateY(18px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.invite{margin:0 auto;max-width:24ch;font:italic 400 24px/1.45 var(--serif);color:var(--ink)}
.facts{margin:40px auto 0;display:grid;gap:0;max-width:22em;text-align:left;border-top:1px solid var(--rule)}
.facts>div{display:grid;grid-template-columns:7.2em 1fr;gap:12px;padding:12px 2px;border-bottom:1px solid var(--rule)}
.facts dt{font:italic 400 17px/1.4 var(--serif);color:var(--muted)}
.facts dd{margin:0;font-size:18px;line-height:1.45;color:var(--ink)}
.print{position:relative;margin:56px auto 0;width:min(84%,340px);padding:10px 10px 12px;background:#fdfbf5;box-shadow:0 1px 2px rgba(60,52,38,.2),0 10px 22px -12px rgba(60,52,38,.4);rotate:-1.6deg}
.print img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:sepia(.18) saturate(.82) contrast(.97) brightness(1.02)}
.pc{position:absolute;width:30px;height:30px;background:linear-gradient(135deg,#e3d8bd 50%,transparent 50.5%);filter:drop-shadow(0 1px 1px rgba(60,52,38,.25))}
.pc.tl{left:2px;top:2px}.pc.tr{right:2px;top:2px;rotate:90deg}.pc.br{right:2px;bottom:2px;rotate:180deg}.pc.bl{left:2px;bottom:2px;rotate:270deg}
.sec{margin:64px auto 0;max-width:30em;position:relative}
.sec h2{margin:0 0 16px;font:italic 400 32px/1.1 var(--serif);color:var(--ink)}
.sec h2::after{content:"";display:block;width:40px;height:1px;margin:14px auto 0;background:var(--sage)}
.sec p{margin:0 0 14px}
.txt p{margin:0 0 14px}.txt p:last-child{margin-bottom:0}
.txt ul{margin:0 auto 12px;padding:0;list-style:none}
.txt li{margin:0 0 8px}
.txt h3{margin:16px 0 6px;font:italic 400 21px/1.25 var(--serif)}
.prog{list-style:none;margin:0 auto;padding:0;max-width:22em;text-align:left}
.prog li{display:grid;grid-template-columns:3.4em 1fr;gap:16px;align-items:baseline;padding:11px 2px;border-bottom:1px dotted rgba(110,96,66,.5)}
.prog li:first-child{border-top:1px dotted rgba(110,96,66,.5)}
.prog .t{color:var(--sage-dark);font-weight:500;font-variant-numeric:tabular-nums lining-nums}
.prog b{display:block;font-weight:500;font-size:19px;line-height:1.3;color:var(--ink)}
.prog small{display:block;font:400 16px/1.4 var(--hand);font-size:21px;line-height:1.1;color:var(--muted);margin-top:2px}
.petals{position:absolute;right:-6%;top:-26px;width:76px;height:auto;mix-blend-mode:multiply;pointer-events:none;rotate:12deg}
.actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:20px!important}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 26px;border:1px solid var(--sage-dark);background:var(--sage-dark);color:#fbf8ef;font:500 17px/1 var(--serif);letter-spacing:.02em;text-decoration:none;cursor:pointer;border-radius:2px;transition:background .2s,color .2s}
.btn:hover{background:#34401f}
.btn.ghost{background:transparent;color:var(--sage-dark)}
.btn.ghost:hover{background:rgba(86,102,65,.08)}
.btn:disabled{opacity:.6;cursor:wait}
.goods{display:grid;gap:22px;text-align:left}
.good{padding-left:16px;border-left:1px solid var(--rule)}
.good h3{margin:0 0 4px;font:italic 500 20px/1.3 var(--serif);color:var(--sage-dark)}

/* ── Visszajelzés: herbáriumi cédulakarton ── */
.card{position:relative;width:min(calc(var(--W) - 28px),500px);margin:26px auto 0;padding:44px 8% 40px;background:var(--fiber),#fbf8ef;box-shadow:0 1px 2px rgba(60,52,38,.16),0 16px 30px -18px rgba(60,52,38,.42);text-align:left}
.card::before{inset:8px}
.rsvp h2{margin:0 0 8px;text-align:center;font:italic 400 34px/1.1 var(--serif);color:var(--ink)}
.rsvp-intro{text-align:center;margin:0 0 26px;color:var(--muted)}
.fld{margin:0 0 20px;padding:0;border:0;min-width:0}
.fld label,.fld legend{display:block;margin:0 0 6px;font-weight:500;color:var(--ink);padding:0}
.fld small{display:block;margin-top:5px;font-size:15px;color:var(--muted);line-height:1.4}
.input{width:100%;min-height:48px;padding:10px 4px;border:0;border-bottom:1px solid rgba(80,70,50,.55);background:transparent;font-size:18px;color:var(--ink);border-radius:0;-webkit-appearance:none;appearance:none}
textarea.input{min-height:96px;resize:vertical;border:1px solid rgba(80,70,50,.4);padding:10px}
select.input{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2343512f' stroke-width='1.5'/%3E%3C/svg%3E") right 6px center no-repeat;padding-right:28px}
.input:focus{outline:none;border-color:var(--sage-dark);box-shadow:0 1px 0 var(--sage-dark)}
.input::placeholder{color:#8d846f}
.choice{display:grid;gap:10px}
.choice label{display:flex;gap:12px;align-items:center;min-height:48px;padding:8px 14px;border:1px solid rgba(80,70,50,.35);cursor:pointer;font-weight:400;margin:0;background:rgba(255,255,255,.4)}
.choice label:has(input:checked){border-color:var(--sage-dark);background:rgba(86,102,65,.08)}
.choice input{width:20px;height:20px;accent-color:var(--sage-dark);margin:0;flex:none}
.cond{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease}
.cond>div{overflow:hidden}
.cond.show{grid-template-rows:1fr}
.form-error{min-height:0;margin:0 0 10px;color:#8a3324;font-weight:500}
.form-error:empty{display:none}
.rsvp-submit{text-align:center}
.rsvp-submit .btn{width:100%;max-width:320px}
.demo-note{margin:12px 0 0;font-size:15px;color:var(--muted)}
.thanks{text-align:center;padding:10px 0}
.thanks-h{font:italic 400 30px/1.2 var(--serif);color:var(--ink);margin:0 0 8px}
.thanks:focus{outline:none}

.foot{text-align:center;padding:44px 20px 10px;color:var(--muted)}
.foot-names{margin:0 0 4px;font:italic 300 34px/1.1 var(--serif);color:var(--ink)}
.foot p{margin:0}
.replay{margin-top:22px;background:none;border:0;border-bottom:1px solid rgba(80,70,50,.4);padding:8px 2px;color:var(--muted);cursor:pointer;font-size:16px}

/* ── Nyitójelenet ── */
.scene{position:fixed;inset:0;z-index:50;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab}
.scene:active{cursor:grabbing}
.scene.is-done{cursor:default}
.scene-bg{position:absolute;inset:0;background:var(--desk);background-color:#d8d5c9}
.card-wrap{position:absolute;transform-origin:0 0;perspective:1400px;will-change:transform}
.card-wrap .tilt{width:100%;height:100%}
.tissue-layer{position:absolute;clip-path:inset(-3px -400% -60px -400%);pointer-events:none}
.tissue{position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,0) 50%),var(--fiber2),rgba(247,245,237,.82)}
.tissue.flat{-webkit-backdrop-filter:blur(1.8px);backdrop-filter:blur(1.8px);box-shadow:inset 0 0 0 1px rgba(150,140,118,.22)}
.flap-wrap{position:absolute;inset:0;--sh:0;filter:drop-shadow(2px 5px 7px rgba(55,46,30,calc(var(--sh) * .3)))}
.tissue.flap{transform-origin:0 0;background:linear-gradient(200deg,rgba(255,255,255,.25),rgba(255,255,255,0) 60%),var(--fiber2),rgba(250,249,243,.6);box-shadow:inset 0 0 0 1px rgba(150,140,118,.3);overflow:hidden}
.flap-shade{position:absolute;left:0;top:0;width:200vmax;height:400vmax;margin-top:-200vmax;transform-origin:0 200vmax;background:linear-gradient(90deg,rgba(255,255,255,.75),rgba(255,255,255,.25) 14px,rgba(255,255,255,0) 46px,rgba(90,78,55,.06) 40%)}
.curl-clip{position:absolute;inset:0;overflow:hidden}
.curl{position:absolute;left:0;top:0;height:22px;margin-top:-11px;transform-origin:0 11px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.55) 38%,rgba(255,255,255,.9) 50%,rgba(70,60,40,.2) 56%,rgba(70,60,40,.06) 74%,rgba(70,60,40,0))}
.hinge{position:absolute;left:-5px;top:10%;width:15px;height:80%;background:var(--fiber),rgba(236,226,200,.92);box-shadow:0 1px 1.5px rgba(60,52,38,.22)}
.scene-bottom{position:absolute;left:0;right:0;bottom:0;padding:10px 16px max(14px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;transition:opacity .4s}
.scene.is-done .scene-bottom{opacity:0;pointer-events:none}
.scene-hint{margin:0;font:italic 400 17px/1.35 var(--serif);color:#4b4434;min-height:1.35em}
.scene-skip{background:none;border:0;padding:10px 8px;min-height:44px;font:400 16px/1.2 var(--serif);color:#4b4434;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ── Belépőkód ── */
.gate{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;background:var(--desk);background-color:#d8d5c9}
.gate-card{width:min(420px,100%);padding:36px 28px;background:var(--fiber),#fbf8ef;box-shadow:0 18px 40px -20px rgba(60,52,38,.5);text-align:center}
.gate-names{font:italic 300 36px/1.1 var(--serif);color:var(--ink);margin:0 0 12px}
.gate-card .input{text-align:center;letter-spacing:.3em;margin:10px 0 12px}
.gate-card .btn{width:100%}

@media (min-width:760px){
  .desk{padding-top:28px}
  .sheet.body{padding:72px 11% 80px}
  .invite{font-size:27px}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .cond{transition:none}
}