/* Téli fények · kintről, a havas éjszakából nézünk be egy meleg szobába. Sötétkék, borostyán, hófehér. */

@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/newsreader.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 600;font-display:swap;src:url(fonts/newsreader-italic.woff2) format('woff2')}

:root{
  --night:#0f1626;
  --night-2:#141d31;
  --hearth:#1d150f;
  --hearth-2:#271b12;
  --snow:#f5f2ea;
  --frost:#c3ccdb;
  --amber:#eaa95a;
  --amber-soft:rgba(234,169,90,.4);
  --line:rgba(195,204,219,.2);
  --serif:'Newsreader',Georgia,serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --bk-edit:rgba(234,169,90,.75);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--night)}
body{margin:0;min-height:100vh;background:var(--night);color:var(--snow);font:400 1.125rem/1.65 var(--serif);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;overflow-x:hidden}
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(--amber);outline-offset:3px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
p{margin:0 0 1em}
.wrap{width:min(100% - 44px,68rem);margin-inline:auto}

/* ───────────── Az ablak ───────────── */
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden;background:#0b0e18}
.hero.is-opening{touch-action:none;cursor:grab}
.win{position:absolute;inset:0;width:100%;height:100%;display:block}
.glass-text{position:absolute;container-type:size;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4% 6%;color:#fbf7ee;text-shadow:0 1px 2px rgba(5,8,16,.55),0 0 22px rgba(5,8,16,.55);pointer-events:none}
.glass-text [data-edit]{pointer-events:auto}
.glass-text p{margin:0}
.g-kicker{font:italic 400 max(13px,min(4.6cqw,7cqh))/1.3 var(--serif);color:var(--frost);margin-bottom:3cqh!important}
.g-names{margin:0;display:flex;flex-direction:column;align-items:center;font-weight:300}
.g-n{font:italic 300 var(--nfs,min(17cqw,19cqh))/1.02 var(--serif);letter-spacing:-.005em;white-space:nowrap}
.g-amp{font:italic 400 max(14px,min(5.4cqw,8cqh))/1.4 var(--serif);color:var(--amber)}
.g-date{margin-top:4cqh!important;font:400 max(16px,min(7cqw,10cqh))/1.1 var(--serif);letter-spacing:.08em;font-variant-numeric:lining-nums}
.g-place{margin-top:1.4cqh!important;font:italic 400 max(13px,min(4.4cqw,7cqh))/1.3 var(--serif);color:var(--frost)}
.glass-text.is-land .g-names{flex-direction:row;align-items:baseline;gap:.3em}
.glass-text.is-land .g-n{font-size:var(--nfs,min(13.5cqw,36cqh))}
.glass-text.is-land .g-amp{font-size:max(18px,min(4.2cqw,11cqh))}
.glass-text.is-land .g-kicker{font-size:max(15px,min(2.8cqw,8cqh))}
.glass-text.is-land .g-date{font-size:max(18px,min(4.2cqw,12cqh))}
.glass-text.is-land .g-place{font-size:max(15px,min(2.8cqw,8cqh))}
.cue{position:absolute;left:50%;bottom:max(4px,calc(var(--sill,40px) * .5 - 26px));transform:translateX(-50%);padding:8px 14px;font:italic 400 1rem/1 var(--serif);color:var(--frost);text-decoration:none;transition:opacity .6s ease}
.hero.is-opening .cue{opacity:0;pointer-events:none}

.scene-ui{position:fixed;z-index:30;left:50%;bottom:calc(var(--sill,40px) + 14px + env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100% - 40px);display:flex;flex-direction:column;align-items:center;gap:0;padding:8px 22px 4px;border-radius:18px;background:rgba(9,12,22,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;transition:opacity .5s ease}
.scene-ui.is-gone{opacity:0}
.scene-ui.is-gone *{pointer-events:none!important}
.scene-hint{margin:0;padding:2px 0;font:italic 400 1.0625rem/1.3 var(--serif);color:var(--snow);text-align:center}
.scene-skip{pointer-events:auto;appearance:none;background:none;border:0;padding:8px 6px 12px;font:400 .875rem/1 var(--serif);color:var(--frost);text-decoration:underline;text-underline-offset:4px;cursor:pointer}

/* ───────────── Az oldal: bent, a meleg szobában ───────────── */
main>section{padding-block:clamp(72px,12vw,130px)}
.h2{margin:0 0 .6em;font:italic 300 clamp(2.1rem,7.6vw,3.3rem)/1.08 var(--serif);color:var(--snow);letter-spacing:-.01em}
.kicker{margin:0 0 .5em;font:italic 400 1.25rem/1.3 var(--serif);color:var(--amber)}

.invite{background:linear-gradient(var(--night),var(--night-2))}
.invite-grid{display:grid;gap:40px;justify-items:start}
.invite-lead{margin:0;max-width:22ch;font:300 clamp(1.7rem,6.6vw,2.9rem)/1.24 var(--serif);text-wrap:balance}
.facts{margin:0;display:grid;gap:22px;width:100%}
.facts>div{display:grid;grid-template-columns:7.5rem 1fr;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.facts dt{font:italic 400 1.0625rem/1.5 var(--serif);color:var(--frost)}
.facts dd{margin:0;font-size:1.25rem;line-height:1.45}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border:1px solid var(--amber);border-radius:999px;background:var(--amber);color:#1a120b;font:500 1.0625rem/1 var(--serif);text-decoration:none;cursor:pointer;transition:background .25s ease,transform .15s ease}
.btn:hover{background:#f3bb75}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--snow);border-color:rgba(245,242,234,.5)}
.btn.ghost:hover{background:rgba(245,242,234,.08)}

.story{background:var(--night-2)}
.story-grid{display:grid;gap:44px;align-items:center}
/* A fotó egy kis ablaktábla mögött: osztóléc, dér a sarkokban */
.pane-photo{position:relative;margin:0;width:min(100%,26rem);aspect-ratio:4/5;border:12px solid #223049;border-bottom-width:18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.06);background:#0b0e18}
.pane-photo img{width:100%;height:100%;object-fit:cover}
.pane-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 0 0,rgba(230,238,250,.45),transparent 22%),radial-gradient(circle at 100% 0,rgba(230,238,250,.35),transparent 20%),
  radial-gradient(circle at 0 100%,rgba(230,238,250,.35),transparent 22%),radial-gradient(circle at 100% 100%,rgba(230,238,250,.45),transparent 24%),
  linear-gradient(125deg,rgba(255,255,255,.08),transparent 40%)}
.mullion{position:absolute;inset:0;pointer-events:none}
.mullion::before,.mullion::after{content:"";position:absolute;background:#223049;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.mullion::before{display:none}
.mullion::after{top:calc(24% - 5px);left:0;right:0;height:10px}
.story-text p,.story-text li{font-size:1.1875rem}
.story-text h3{font:italic 400 1.5rem/1.2 var(--serif);color:var(--amber);margin:1.3em 0 .3em}
.story-text ul{padding-left:1.1em}
.story-text strong{font-weight:500}

/* Este a kandalló mellett: a szoba felé fordulunk, meleg fény alulról */
.hearth{position:relative;background:radial-gradient(90% 60% at 50% 105%,rgba(234,140,60,.28),transparent 70%),linear-gradient(var(--hearth),var(--hearth-2))}
.hearth-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;margin-bottom:30px}
.hearth-head p{margin:0;color:var(--frost);font-style:italic}
.evening{list-style:none;margin:0;padding:0;display:grid;gap:0}
.evening li{display:grid;grid-template-columns:5.4rem 1fr;gap:18px;padding:22px 0;border-top:1px solid rgba(234,169,90,.18)}
.e-time{font:400 1.5rem/1.2 var(--serif);color:var(--amber);font-variant-numeric:lining-nums tabular-nums;text-shadow:0 0 18px rgba(234,169,90,.45)}
.e-what h3{margin:0;font:400 1.375rem/1.3 var(--serif)}
.e-what p{margin:.25em 0 0;color:#d9cfc2;font-size:1.0625rem}

.venue{position:relative;padding-top:0!important;background:var(--night)}
.venue-photo{margin:0;height:clamp(260px,52vw,560px);overflow:hidden;position:relative}
.venue-photo img{width:100%;height:100%;object-fit:cover}
.venue-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,var(--night))}
.venue-card{position:relative;margin-top:-90px;max-width:36rem;padding:32px clamp(22px,5vw,40px);background:var(--night-2);border:1px solid var(--line);border-radius:4px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.venue-card .h2{font-size:clamp(1.9rem,7vw,2.8rem)}
.venue-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

.good{background:var(--night)}
.good-grid{display:grid;gap:28px}
.good-item{padding-top:18px;border-top:1px solid var(--line)}
.good-item h3{margin:0 0 .35em;font:italic 400 1.5rem/1.2 var(--serif);color:var(--amber)}
.good-item .txt p:last-child{margin-bottom:0}
.good-item ul{margin:0;padding-left:1.1em}
.good-item li{margin:.25em 0}

.rsvp{background:linear-gradient(var(--night),var(--hearth))}
.rsvp-box{max-width:40rem;margin-inline:auto;padding:clamp(32px,7vw,56px) clamp(22px,6vw,48px);background:rgba(20,29,49,.85);border:1px solid var(--line);border-radius:6px;box-shadow:0 0 80px -20px rgba(234,150,70,.25)}
.rsvp-box .h2{text-align:center;font-size:clamp(1.9rem,7vw,2.7rem)}
.rsvp-intro{text-align:center;color:var(--frost);margin:0 auto 2em;max-width:30rem}
.field{display:grid;gap:8px;margin:0 0 22px;border:0;padding:0;min-width:0}
.field>label,.field legend{padding:0;font:500 1rem/1.4 var(--serif);color:var(--snow)}
.field small{font:italic 400 .9375rem/1.45 var(--serif);color:var(--frost)}
.input{width:100%;min-height:50px;padding:12px 14px;border:1px solid rgba(195,204,219,.4);border-radius:6px;background:rgba(10,14,26,.6);font:400 1.125rem/1.4 var(--serif);color:var(--snow);transition:border-color .2s ease,box-shadow .2s ease}
.input::placeholder{color:rgba(195,204,219,.7)}
.input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(234,169,90,.2)}
select.input{appearance:none;background:rgba(10,14,26,.6) 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='%23eaa95a' stroke-width='1.3'/%3E%3C/svg%3E") right 14px center/12px no-repeat;padding-right:36px}
select.input option{background:var(--night-2)}
textarea.input{min-height:96px;resize:vertical}
.choice{display:grid;gap:10px}
.choice label{display:flex;align-items:center;gap:14px;min-height:54px;padding:12px 16px;border:1px solid rgba(195,204,219,.35);border-radius:6px;font:400 1.125rem/1.3 var(--serif);cursor:pointer;transition:border-color .2s,background .2s}
.choice input{appearance:none;width:18px;height:18px;margin:0;border:1px solid var(--frost);border-radius:50%;flex:none;display:grid;place-items:center}
.choice input::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber);transform:scale(0);transition:transform .2s var(--ease)}
.choice input:checked::after{transform:scale(1)}
.choice label:has(input:checked){border-color:var(--amber);background:rgba(234,169,90,.08)}
.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.4em;margin:0 0 12px;font:500 .9375rem/1.4 var(--serif);color:#ffab91}
.rsvp-submit{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:8px}
.demo-note{margin:0;font:italic 400 .875rem/1.45 var(--serif);color:var(--frost);text-align:center}
.thanks{text-align:center;padding:12px 0}
.thanks p:first-child{font:italic 300 2.6rem/1.1 var(--serif);color:var(--amber);margin-bottom:.3em}

.closing{padding:clamp(70px,12vw,120px) 24px calc(56px + env(safe-area-inset-bottom));text-align:center;background:var(--hearth-2)}
.closing-names{margin:0;font:italic 300 clamp(2.2rem,9vw,3.4rem)/1.1 var(--serif)}
.closing-date{margin:.4em 0 0;color:var(--frost);letter-spacing:.08em}
.replay{margin-top:26px;appearance:none;background:none;border:0;padding:10px;font:italic 400 1rem/1 var(--serif);color:var(--frost);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.replay:hover{color:var(--amber)}

.gate{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;background:radial-gradient(90% 70% at 50% 100%,rgba(234,140,60,.22),transparent 70%),var(--night)}
.gate form{width:min(100%,420px);text-align:center}
.gate h1{margin:0 0 .4em;font:italic 300 2.6rem/1.1 var(--serif)}
.gate p{color:var(--frost)}
.gate .input{text-align:center;letter-spacing:.14em;font-size:1.4rem}

.js .rv{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform 1.1s var(--ease)}
.js .rv.in{opacity:1;transform:none}

@media (min-width:880px){
  .invite-grid{grid-template-columns:1.25fr 1fr;align-items:end;column-gap:72px}
  .invite-grid .btn{grid-column:1}
  .story-grid{grid-template-columns:26rem 1fr;gap:72px}
  .evening{grid-template-columns:1fr 1fr;column-gap:56px}
  .good-grid{grid-template-columns:1fr 1fr;column-gap:56px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
}