/* Közös pillanatok · polaroidok egy faasztalon */
@font-face{font-family:"Kezirat";src:url(fonts/reenie-beanie.woff2) format("woff2");font-display:swap}
/* A Reenie Beanie 5-öse S-nek látszik: a számjegyek, a kettőspont és az & a Kalam Lightból jön */
@font-face{font-family:"Kezirat";src:url(fonts/kalam-szamok.woff2) format("woff2");unicode-range:U+26,U+30-3A;font-display:swap}
@font-face{font-family:"Libre Caslon Text";src:url(fonts/libre-caslon-text.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"Libre Caslon Text";src:url(fonts/libre-caslon-text-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}

:root{
  --ink:#1c2740;            /* filctoll: kékesfekete */
  --text:#2b2520;
  --muted:#5e544a;
  --card:#fbf7ee;
  --kraft:#c9a77c;
  --tape:rgba(236,226,200,.82);
  --accent:#a2432e;         /* téglavörös a gombokon */
  --accent-dark:#7f3222;
  --bk-edit:rgba(255,236,200,.9);
  --hand:"Kezirat","Bradley Hand","Segoe Print",cursive;
  --serif:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --wood:
    radial-gradient(120% 70% at 18% -8%,rgba(255,214,160,.30),rgba(255,214,160,0) 62%),
    radial-gradient(90% 60% at 100% 100%,rgba(20,8,0,.38),rgba(20,8,0,0) 70%),
    linear-gradient(rgba(96,58,30,.22),rgba(40,20,8,.30)),
    url(kepek/asztal.webp) 0 0/760px auto;
}
*,*::before,*::after{box-sizing:border-box}
html{background:#3b2414;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--wood);background-color:#3b2414;color:var(--text);font:400 16.5px/1.65 var(--serif);overflow-x:hidden}
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:3px solid #f3d7a0;outline-offset:3px}

/* ── Polaroid ── */
.pola{
  --dev:1;margin:0;
  position:relative;width:var(--w,320px);aspect-ratio:88/107;container-type:inline-size;
  padding:6.2% 5.7% 0;border-radius:2px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,0) 40%,rgba(0,0,0,.035) 100%),
    #f4f1ea;
  box-shadow:0 1px 1px rgba(0,0,0,.28),0 9px 16px -6px rgba(25,12,2,.5),0 26px 48px -18px rgba(25,12,2,.55);
}
.pola::after{ /* a műanyag keret enyhe fénye */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.08);
}
.pola-photo{position:relative;aspect-ratio:1;overflow:hidden;background:#232825;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.pola-photo img{width:100%;height:100%;object-fit:cover;
  filter:
    sepia(calc((1 - var(--dev)) * .55))
    hue-rotate(calc((1 - var(--dev)) * 150deg))
    saturate(calc(.15 + var(--dev) * .95))
    contrast(calc(.42 + var(--dev) * .6))
    brightness(calc(.78 + var(--dev) * .26));
}
/* Előhívó vegyszer: egyenletes sötét réteg, a szélek és a foltok később tisztulnak */
.chem,.chem-edge,.chem-mottle{position:absolute;inset:0;pointer-events:none}
.chem{background:linear-gradient(160deg,#363d39,#2a302d 55%,#313833);opacity:clamp(0,calc(1 - var(--dev) * 1.45),1)}
.chem-edge{background:radial-gradient(closest-side,rgba(40,46,42,0) 62%,rgba(40,46,42,.95) 118%);opacity:clamp(0,calc(1.2 - var(--dev) * 1.35),1)}
.chem-mottle{
  background:
    radial-gradient(30% 24% at 22% 30%,rgba(78,92,86,.55),transparent 70%),
    radial-gradient(26% 30% at 74% 62%,rgba(60,72,66,.5),transparent 70%),
    radial-gradient(22% 20% at 56% 18%,rgba(96,104,92,.4),transparent 70%),
    radial-gradient(34% 26% at 36% 82%,rgba(70,80,76,.45),transparent 70%);
  background-size:140% 140%;
  opacity:clamp(0,calc(1.1 - var(--dev) * 1.25),1);
  animation:mottle 6s ease-in-out infinite alternate;
}
@keyframes mottle{to{background-position:100% 60%}}
.scene .gloss{animation:sheen 4.2s ease-in-out infinite}
@keyframes sheen{0%,15%{background-position:120% 0}85%,100%{background-position:-30% 0}}
.gloss{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(112deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.16) 46%,rgba(255,255,255,.05) 52%,rgba(255,255,255,0) 60%);
  background-size:260% 100%;background-position:120% 0}
.pola-cap{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100cqw * 107 / 88 - 100cqw * (.062 + .886));
  padding:0 4% 1%;text-align:center;font-family:var(--hand);color:var(--ink);line-height:.95}
.pola-names{display:block;font-size:var(--ns,11cqw);rotate:-1.5deg;max-width:100%;overflow-wrap:anywhere}
.pola-date{display:block;font-size:max(12px,6cqw);margin-top:1.5cqw;rotate:-1deg;letter-spacing:.02em}
.pola-cap .cap{font-size:max(16px,8.4cqw);rotate:-1.2deg}

/* ── Nyitójelenet ── */
.scene{position:fixed;inset:0;z-index:50;background:var(--wood);background-color:#3b2414;display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);
  overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}
.scene::before{ /* ablakfény lassan vándorol az asztalon */
  content:"";position:absolute;inset:-20%;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,230,190,.10) 42%,rgba(255,230,190,.16) 47%,transparent 60%);
  animation:windowlight 7s ease-in-out infinite alternate}
@keyframes windowlight{from{transform:translateX(-12%)}to{transform:translateX(12%)}}
.scene-top{position:relative;padding:calc(18px + env(safe-area-inset-top)) 20px 0;text-align:center}
.scene-title{margin:0;font:italic 400 17px/1.3 var(--serif);color:rgba(255,240,220,.88)}
.scene-stage{position:relative;display:grid;place-items:center;min-height:0}
.holder{position:relative;cursor:grab;will-change:transform;touch-action:none}
.holder:active{cursor:grabbing}
.scene .pola{rotate:-2.5deg;--w:min(86vw,calc((100svh - 210px) * .822),560px)}
.scene-bottom{position:relative;padding:0 20px calc(18px + env(safe-area-inset-bottom));text-align:center;display:grid;gap:10px;justify-items:center}
.scene-hint{margin:0;font:italic 400 18px/1.35 var(--serif);color:#fff3e2;text-shadow:0 1px 8px rgba(0,0,0,.5);max-width:30em;transition:opacity .4s}
.scene-skip{appearance:none;border:0;background:rgba(30,16,6,.45);color:#fff3e2;font:500 15px/1 var(--serif);padding:12px 18px;border-radius:999px;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,243,226,.5)}
.scene-skip:hover{background:rgba(30,16,6,.65)}
.scene.is-done .scene-top,.scene.is-done .scene-bottom{opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.scene.is-leaving{background:transparent;pointer-events:none}
.scene.is-leaving .holder{pointer-events:auto}
.scene.is-leaving::before{opacity:0}

/* ── Oldal ── */
main{position:relative;padding:0 16px;overflow-x:clip}
.wrap{max-width:1080px;margin:0 auto}
.rv{opacity:0;transform:translateY(26px) scale(1.035);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

.hero{grid-template-columns:minmax(0,1fr);min-height:100vh;min-height:100svh;display:grid;align-content:start;justify-items:center;gap:30px;padding:calc(5vh + env(safe-area-inset-top)) 0 56px}
.hero-pola{--w:min(86vw,calc((100svh - 210px) * .822),560px);width:var(--w)}
.hero-pola .pola{rotate:-2.5deg}
.hero-pola.is-hidden{visibility:hidden}
.hero .note,.hero .cue{transition:opacity .7s ease .1s,transform .8s cubic-bezier(.2,.7,.2,1) .1s}
.hero.pre .note,.hero.pre .cue{opacity:0;transform:translateY(30px)}
.cue{font:italic 400 16px/1 var(--serif);color:#fff1de;text-decoration:none;opacity:.9;padding:10px}

.card{position:relative;background:url(kepek/papir.webp) 0 0/420px,var(--card);background-blend-mode:multiply;border-radius:2px;
  box-shadow:0 1px 1px rgba(0,0,0,.22),0 12px 22px -10px rgba(25,12,2,.55),0 30px 50px -28px rgba(25,12,2,.6);padding:28px 24px 26px}
.card.kraft{background:url(kepek/papir.webp) 0 0/420px,var(--kraft);color:#2d2117}
.note{width:min(100%,520px);rotate:1.2deg}
.note-hi{margin:0 0 6px;font:400 34px/1 var(--hand);color:var(--ink)}
.note p{margin:0 0 14px}
.facts{margin:18px 0 20px;display:grid;gap:10px}
.facts div{display:grid;grid-template-columns:7.2em 1fr;gap:10px;align-items:baseline;border-top:1px dashed rgba(60,40,25,.25);padding-top:10px}
.facts dt{font:400 26px/1 var(--hand);color:var(--ink)}
.facts dd{margin:0}

.tape{position:absolute;top:-14px;left:50%;translate:-50% 0;rotate:-3deg;width:110px;height:30px;background:var(--tape);
  clip-path:polygon(2% 10%,0 0,100% 4%,98% 30%,100% 55%,97% 100%,3% 92%,0 70%);box-shadow:0 1px 2px rgba(0,0,0,.08);opacity:.92}
.label{position:relative;display:inline-block;margin:0 0 28px;padding:6px 22px 4px;background:var(--tape);color:var(--ink);font:400 clamp(30px,8vw,44px)/1 var(--hand);rotate:-2deg;
  clip-path:polygon(1% 8%,0 0,99% 6%,100% 40%,98% 100%,2% 94%,0 60%);box-shadow:0 2px 6px rgba(0,0,0,.15)}
section{padding:56px 0}
.sec-head{text-align:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border:0;border-radius:3px;background:var(--accent);color:#fff8ee;
  font:600 16px/1.2 var(--serif);text-decoration:none;cursor:pointer;box-shadow:0 2px 0 var(--accent-dark),0 6px 14px -6px rgba(60,20,10,.6);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--accent-dark)}
.btn.ghost{background:transparent;color:var(--accent-dark);box-shadow:inset 0 0 0 2px rgba(127,50,34,.5)}

/* Fejezetek: szétszórt polaroidok, alattuk becsúsztatott cetli */
.chapters{display:grid;grid-template-columns:minmax(0,1fr);gap:46px}
.chap{display:grid;grid-template-columns:minmax(0,1fr)}
.chap .pola{--w:min(76vw,330px);position:relative;z-index:2}
.chap-text{position:relative;z-index:1;width:min(90%,440px);margin-top:-30px;padding-top:50px}
.chap.no-shot .chap-text{margin-top:0;padding-top:28px;width:min(100%,460px);justify-self:center}
.chap:nth-child(odd) .pola{justify-self:start;margin-left:2vw;rotate:-3.5deg}
.chap:nth-child(odd) .chap-text{justify-self:end;rotate:1.4deg}
.chap:nth-child(even) .pola{justify-self:end;margin-right:2vw;rotate:3deg}
.chap:nth-child(even) .chap-text{justify-self:start;rotate:-1.2deg}
.chap-text h3,.card-title{margin:0 0 10px;font:400 clamp(32px,8vw,40px)/1 var(--hand);color:var(--ink)}
.txt p{margin:0 0 12px}.txt p:last-child{margin-bottom:0}
.txt ul{margin:0 0 12px;padding-left:1.1em}.txt li{margin:0 0 6px}
.txt h3{margin:14px 0 6px;font:400 28px/1 var(--hand);color:var(--ink)}

.spread{padding:30px 0}
.duo{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;justify-items:center}

/* Program: vonalas jegyzetlap */
.notebook{width:min(100%,520px);rotate:-1.2deg;padding:30px 20px 24px 54px;
  background:
    linear-gradient(90deg,transparent 38px,rgba(190,70,60,.38) 38px,rgba(190,70,60,.38) 40px,transparent 40px),
    repeating-linear-gradient(transparent 0 33px,rgba(70,110,160,.2) 33px 34px),
    url(kepek/papir.webp) 0 0/420px,#fdfbf5;background-blend-mode:normal,normal,multiply,normal}
.notebook ol{list-style:none;margin:0;padding:0}
.notebook li{display:grid;grid-template-columns:4em 1fr;gap:12px;padding:6px 0 10px}
.notebook .t{font:400 30px/1 var(--hand);color:var(--ink)}
.notebook h3{margin:0;font:600 18px/1.3 var(--serif)}
.notebook p{margin:2px 0 0;color:var(--muted);font-size:16px}

/* Helyszín */
.venue{display:grid;grid-template-columns:minmax(0,1fr);width:min(100%,460px)}
.venue .pola{--w:min(74vw,320px);rotate:2.5deg;justify-self:end;position:relative;z-index:2}
.venue-card{width:92%;margin-top:-34px;padding-top:52px;rotate:-1.2deg;justify-self:start}
.venue-card p{margin:0 0 18px}
.actions{display:flex;flex-wrap:wrap;gap:10px}

/* Jó, ha tudjátok */
.good{width:min(100%,520px);rotate:1.4deg}
.good-item+.good-item{margin-top:14px;padding-top:14px;border-top:1px dashed rgba(45,33,23,.35)}
.good h3{margin:0 0 2px;font:600 17px/1.3 var(--serif);color:#22170f}
.good .card-title{color:#22170f}
.good::before{content:"";position:absolute;top:10px;right:12px;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#e6e1d8,#8b8378 70%);box-shadow:0 2px 3px rgba(0,0,0,.35)}

/* Visszajelzés */
.rsvp-card{width:min(100%,620px);rotate:-.5deg;padding:34px 24px 30px;scroll-margin-top:24px}
.rsvp-card h2{margin:0 0 8px;font:400 clamp(36px,9vw,48px)/1 var(--hand);color:var(--ink)}
.rsvp-intro{margin:0 0 22px}
.field{margin:0 0 18px;border:0;padding:0;min-width:0}
.field label,.field legend{display:block;font-weight:600;margin:0 0 6px;padding:0}
.field small{display:block;margin-top:5px;color:var(--muted);font-size:15px;line-height:1.4}
.input{width:100%;min-height:48px;padding:10px 12px;border:1.5px solid rgba(60,45,30,.35);border-radius:3px;background:rgba(255,255,255,.7);font-size:17px}
textarea.input{min-height:96px;resize:vertical}
.input:focus{border-color:var(--ink);outline:2px solid rgba(28,39,64,.25);outline-offset:1px}
.choice{display:grid;gap:8px}
.choice label{display:flex;gap:10px;align-items:center;font-weight:400;padding:10px 12px;border:1.5px solid rgba(60,45,30,.25);border-radius:3px;background:rgba(255,255,255,.5);cursor:pointer}
.choice input{width:20px;height:20px;accent-color:var(--accent)}
.cond{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
.cond>div{overflow:hidden}
.cond.show{grid-template-rows:1fr}
.form-error{color:#9b2318;font-weight:600;min-height:1.2em;margin:0 0 10px}
.rsvp-submit{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.demo-note{margin:0;color:var(--muted);font-size:15px}
.thanks{font:400 18px/1.5 var(--serif)}
.thanks .thanks-h{font:400 40px/1 var(--hand);color:var(--ink);margin:0 0 10px}

.closing{text-align:center;padding:30px 16px calc(60px + env(safe-area-inset-bottom));color:#fff1de}
.closing .label{margin-bottom:14px}
.closing p{margin:0 0 18px;font-style:italic}
.replay{appearance:none;border:0;background:rgba(30,16,6,.45);color:#fff1de;font:500 15px/1 var(--serif);padding:12px 18px;border-radius:999px;cursor:pointer}

/* Belépőkód */
.gate{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;background:var(--wood);background-color:#3b2414}
.gate .card{width:min(100%,420px);text-align:center;rotate:-1deg}
.gate h1{margin:0 0 10px;font:400 44px/1 var(--hand);color:var(--ink)}
.gate p{margin:0 0 16px}
.gate .input{text-align:center;font-size:22px;letter-spacing:.2em}
.gate .btn{margin-top:12px;width:100%}

@media (min-width:860px){
  body{font-size:17px}
  main{padding:0 32px}
  .hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;align-content:center;gap:56px;max-width:1120px;margin:0 auto;padding:6vh 0}
  .hero-pola{justify-self:end}
  .hero-pola{--w:min(44vw,calc((100vh - 140px) * .822),540px)}
  .note{justify-self:start;margin-top:40px}
  .cue{grid-column:1/-1;justify-self:center}
  section{padding:70px 0}
  .spread{padding:40px 0}
  .card{padding:34px 34px 30px}
  .chapters{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;align-items:start}
  .chapters.n1{grid-template-columns:minmax(0,440px);justify-content:center}
  .chapters.n2{grid-template-columns:repeat(2,minmax(0,400px));justify-content:center;gap:70px}
  .chap .pola{--w:min(100%,320px)}
  .chap .pola,.chap .chap-text{justify-self:center!important;margin-left:0!important;margin-right:0!important}
  .chap-text{width:94%}
  .chap:nth-child(3n+2){margin-top:110px}
  .chap:nth-child(3n){margin-top:36px}
  .chap:nth-child(3n+1) .pola{rotate:-4deg}.chap:nth-child(3n+1) .chap-text{rotate:1.8deg}
  .chap:nth-child(3n+2) .pola{rotate:3deg}.chap:nth-child(3n+2) .chap-text{rotate:-1.4deg}
  .chap:nth-child(3n) .pola{rotate:-1.6deg}.chap:nth-child(3n) .chap-text{rotate:2.2deg}
  .duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start;justify-items:stretch}
  .duo.solo{grid-template-columns:minmax(0,560px);justify-content:center}
  .duo .notebook{justify-self:end;margin-top:30px}
  .duo .venue{justify-self:start}
  .duo-b{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .duo-b .good{justify-self:end;margin-top:60px}
  .rsvp-card{padding:42px 44px 38px}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .chem-mottle,.scene::before{animation:none}
}