/* Borítékom Ünnepek · a meghívó közös oldala, a Borítékom-arculatban.
   A sablon a színeket változókkal adja (a :root-on), a jelenetet a fejlécbe rajzolja. */
@font-face{font-family:'Cormorant Garamond';font-weight:300 700;font-display:swap;src:url(../../fonts/cormorant-garamond-normal-sablon.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;src:url(../../fonts/cormorant-garamond-italic-sablon.woff2) format('woff2')}
@font-face{font-family:'Pinyon Script';font-display:swap;src:url(../../fonts/pinyon-script-normal.woff2) format('woff2')}
@font-face{font-family:'Jost';font-weight:300 700;font-display:swap;src:url(../../fonts/jost-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:'Jost';font-weight:300 700;font-display:swap;src:url(../../fonts/jost-latin-ext.woff2) format('woff2');unicode-range:U+0100-02FF}

:root{
  --u-hatter:#F6F0E6;--u-lap:#FBF7EF;--u-tinta:#2F2420;--u-halk:#5b4a42;--hangsuly:#6B2333;--u-arany:#9C7A41;--u-vonal:rgba(47,36,32,.14);
  --u-fej:#cbb594;
  --serif:'Cormorant Garamond',Georgia,serif;--sans:'Jost',system-ui,sans-serif;--script:'Pinyon Script',cursive;
  --kifuto:cubic-bezier(.16,.84,.24,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.bkm-zarva,html.bkm-zarva body{overflow:hidden}
body{margin:0;background:var(--u-hatter);color:var(--u-tinta);font:400 1.06rem/1.65 var(--sans)}
img,svg{display:block;max-width:100%}
a{color:inherit}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Fejléc: a nyitás tere, utána a meghívó feje. A jelenet SVG-je túlnyúlik a viewBoxon, így a sávok is a jelenet anyagát mutatják. */
.u-fej{position:relative;height:100svh;min-height:400px;overflow:hidden;background:var(--u-fej);isolation:isolate}
.u-fej>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.u-tovabb{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:4;width:max-content;max-width:calc(100% - 32px);white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 18px;border-radius:999px;
  /* Üveganyag: ugyanaz, mint a súgón és a „Megnyitás animáció nélkül” gombon (mechanika.js). */
  background:rgba(36,26,22,.8);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);border:1px solid rgba(255,248,236,.18);
  font:500 .78rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--u-fej-szoveg,#fbf4ea);text-decoration:none;opacity:0;-webkit-user-select:none;user-select:none;
  transition:opacity 1.2s var(--kifuto) .4s,transform .16s var(--kifuto)}
.u-tovabb:active{transform:translateX(-50%) scale(.95);transition:opacity 1.2s var(--kifuto) .4s,transform .1s var(--kifuto)}
/* A kapszulában csak a felirat (a függőleges vonal benne a kapszula alját üresen hagyta, töröttnek hatott). */
.u-tovabb::after{display:none}
.bkm-kesz .u-tovabb,.u-fej.u-nyitva .u-tovabb{opacity:.9}
@media (min-width:900px){.u-tovabb{left:auto;right:32px;transform:none}.u-tovabb:active{transform:scale(.95)}}

.u-oldal{position:relative}
.u-szakasz{padding:88px 0}
.u-szakasz+.u-szakasz{border-top:1px solid var(--u-vonal)}
.u-belso{width:min(100% - 40px,720px);margin-inline:auto}
.u-meghivo{text-align:center;padding-top:96px}
.u-felso{margin:0 0 18px;font:500 .78rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--hangsuly)}
.u-nev{margin:0;font:400 clamp(3.4rem,11vw,5.6rem)/1.05 var(--script);color:var(--u-arany);font-weight:400}
.u-nev2{margin:10px 0 0;font:italic 400 1.45rem/1.3 var(--serif);color:var(--u-halk)}
/* Hosszú név: a betűméretet az unnep.js (nevIlleszt) csökkenti, amíg a leghosszabb szó kifér; ami így sem fér el
   (törés nélküli, 40 karakteres szó), az itt törik. A megszokott neveken nem változtat. */
.u-nev,.u-nev2,.u-kapu .u-cim{overflow-wrap:anywhere}
.u-nev2-cimke{margin:22px 0 0;font:500 .78rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--u-halk)}
.u-nev2-cimke+.u-nev2{margin-top:8px}
.u-disz{width:120px;margin:26px auto 22px;color:var(--u-arany)}
.u-disz svg{width:100%;height:auto}
.u-szoveg{max-width:34rem;margin:0 auto;font:400 1.3rem/1.6 var(--serif)}
.u-szoveg p{margin:0 0 .8em}
.u-cim{margin:0 0 18px;font:400 clamp(2rem,6vw,2.6rem)/1.1 var(--serif);color:var(--u-tinta)}
.u-ket{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.u-datum{margin:0;font:300 clamp(2.2rem,7vw,3rem)/1.1 var(--serif);letter-spacing:.02em}
.u-hely{margin:0;font:400 1.6rem/1.25 var(--serif)}
.u-halk{margin:6px 0 0;color:var(--u-halk)}
.u-gombok{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.u-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border:1px solid var(--hangsuly);border-radius:2px;background:var(--hangsuly);color:#fbf4ea;
  font:600 .95rem/1 var(--sans);text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s ease,color .15s ease,transform .16s var(--kifuto)}
.u-btn:not([disabled]):active{transform:scale(.97);transition-duration:.1s}
.u-btn.u-ures{background:transparent;color:var(--hangsuly)}
.u-btn:focus-visible,.u-input:focus-visible{outline:2px solid var(--hangsuly);outline-offset:2px}
.u-btn[disabled]{opacity:.6;cursor:wait}
.u-lista{list-style:none;margin:0;padding:0}
.u-lista li{display:grid;grid-template-columns:5.2rem 1fr;gap:18px;padding:18px 0;border-top:1px solid var(--u-vonal)}
.u-lista li:first-child{border-top:0}
.u-ido{font:500 1.15rem/1.4 var(--serif);color:var(--hangsuly)}
.u-lista h3,.u-pont h3{margin:0;font:500 1.3rem/1.3 var(--serif)}
.u-lista p{margin:4px 0 0;color:var(--u-halk)}
.u-pont{padding:16px 0;border-top:1px solid var(--u-vonal)}
.u-pont:first-of-type{border-top:0}
.u-pont p{margin:6px 0 0;color:var(--u-halk)}
.u-kartya{background:var(--u-lap);border:1px solid var(--u-vonal);padding:40px 36px;box-shadow:0 30px 60px -44px rgba(47,36,32,.6)}
.u-mezo{margin:20px 0 0;border:0;padding:0;min-width:0}
.u-mezo label,.u-mezo legend{display:block;margin-bottom:8px;font:500 .78rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--u-halk)}
.u-mezo small{display:block;margin-top:6px;font-size:.86rem;color:var(--u-halk)}
.u-input{width:100%;min-height:50px;padding:12px 14px;border:1px solid rgba(47,36,32,.28);border-radius:2px;background:#fffdf8;color:var(--u-tinta);font:400 1.15rem/1.3 var(--serif)}
textarea.u-input{min-height:110px;resize:vertical}
.u-valaszt{display:grid;gap:10px}
.u-valaszt label{display:flex;gap:12px;align-items:center;min-height:48px;padding:0 14px;border:1px solid var(--u-vonal);border-radius:2px;background:#fffdf8;font:400 1.15rem/1.3 var(--serif);letter-spacing:0;text-transform:none;color:var(--u-tinta);cursor:pointer}
.u-valaszt input{accent-color:var(--hangsuly);width:18px;height:18px}
/* A feltételes mezők: rövid nyílás (300 ms; layout-tulajdonság, ezért rövid), a tartalom 200 ms-mal áttűnik. */
.u-felt{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--kifuto)}
.u-felt>div{overflow:hidden;opacity:0;transition:opacity .2s ease}
.u-felt.lat{grid-template-rows:1fr}
.u-felt.lat>div{opacity:1}
.u-hiba{min-height:1.4em;margin:16px 0 0;color:#9b1c2c;font-weight:500}
.u-kuld{margin-top:10px}
.u-kuld .demo-note{margin:12px 0 0;font-size:.86rem;color:var(--u-halk)}
.u-koszi{font:400 1.3rem/1.5 var(--serif)}
.u-koszi:focus,.u-oldal:focus{outline:none}

.u-kapu{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;background:var(--u-hatter);text-align:center}
.u-kapu form{width:min(100%,420px)}
.u-kapu .u-input{text-align:center;letter-spacing:.2em;font-size:1.5rem}
.u-kapu .u-btn{width:100%;margin-top:6px}

/* Felúszás: legfeljebb 20 px, 500 ms, a kézikönyv kifutó görbéjével. */
.rv{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s var(--kifuto)}
.rv.lat{opacity:1;transform:none}
/* Két oszlopban (Mikor, Hol) a második 60 ms-mal később érkezik. */
.u-ket>.rv+.rv{transition-delay:60ms}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.u-felt{transition:none}.u-tovabb{transition:none}
  .u-btn:not([disabled]):active{transform:none;opacity:.85}.u-tovabb:active{transform:translateX(-50%);opacity:.75;transition:opacity .1s ease}}
@media (prefers-reduced-motion:reduce) and (min-width:900px){.u-tovabb:active{transform:none}}
@media (prefers-reduced-transparency:reduce){.u-tovabb{background:rgba(36,26,22,.92);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-contrast:more){.u-tovabb{background:#241a16;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:#fbf4ea}}
@media (max-width:640px){
  .u-szakasz{padding:64px 0}
  .u-meghivo{padding-top:72px}
  .u-ket{grid-template-columns:1fr;gap:40px}
  .u-kartya{padding:28px 20px}
  .u-lista li{grid-template-columns:4.2rem 1fr;gap:12px}
  .u-gombok .u-btn{flex:1 1 140px}
}
/* ?szinpad: beágyazott bemutató, csak a jelenet (lásd unnep.js) */
html.bk-szinpad,html.bk-szinpad body{overflow:hidden!important}
html.bk-szinpad .u-oldal,html.bk-szinpad .u-tovabb{display:none!important}