@font-face{font-family:"Fortuna Gothic FlorishC";src:url("./FortunaGothicFlorishC.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
:root{--bg:#061b37;--deep:#041224;--fg:#f7f4ed;--muted:rgba(247,244,237,.72);--line:rgba(247,244,237,.14);--accent:#f2b73d;--x:clamp(20px,5vw,76px);--display:"Fortuna Gothic FlorishC",Georgia,serif;--sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);font-family:var(--sans)}body{overflow-x:hidden}.scroll-scene{position:relative;height:510svh;background:var(--bg)}.hero{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;background:var(--bg)}
.hero-video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(1.03) contrast(1.02);pointer-events:none}.shade{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(2,10,24,.1),rgba(2,10,24,.34) 45%,rgba(2,10,24,.94));opacity:0}
.content-wrap{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;padding:clamp(24px,6svh,68px) var(--x) max(clamp(34px,8svh,88px),env(safe-area-inset-bottom));pointer-events:none}.content{width:min(100%,1120px);opacity:0;transform:translate3d(0,72px,0)}
.date-big,.event-title,.hero-time,.section-title,.salute,.program-time{font-family:var(--display);font-weight:400}.date-big{margin:0;font-size:clamp(7rem,29vw,19rem);line-height:.67;text-shadow:0 12px 38px rgba(0,0,0,.34)}.event-title{margin:clamp(16px,2.5vh,28px) 0 0;font-size:clamp(4.35rem,20vw,13.5rem);line-height:1.02;letter-spacing:.045em;color:var(--accent);text-shadow:0 12px 36px rgba(0,0,0,.3)}.event-title span{display:block;white-space:nowrap}.hero-time{margin:12px 0 0;font-size:clamp(2.2rem,8vw,5rem);line-height:.9;color:var(--fg);letter-spacing:.04em}
.scroll-hint{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));z-index:4;transform:translateX(-50%);font-size:10px;letter-spacing:.18em;color:rgba(247,244,237,.7);white-space:nowrap}.scroll-hint:after{content:"";display:block;width:1px;height:28px;margin:10px auto 0;background:linear-gradient(to bottom,rgba(247,244,237,.85),transparent);animation:pulse 1.4s ease-in-out infinite}
.section{padding:clamp(68px,11vw,124px) var(--x);background:var(--deep)}.section+.section{border-top:1px solid var(--line)}.inner{width:min(100%,1120px);margin:0 auto}.kicker{margin:0 0 14px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}.section-title{margin:0;font-size:clamp(3rem,9vw,7rem);line-height:.9;letter-spacing:.02em}.invite-card{margin-top:clamp(28px,4.5vw,48px);padding:clamp(24px,4vw,44px);border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015));box-shadow:0 20px 50px rgba(0,0,0,.16)}.salute{margin:0;color:var(--accent);font-size:clamp(2.5rem,7vw,5.2rem);line-height:.92}.invite-copy{margin:24px 0 0;max-width:760px;font-size:clamp(1.15rem,2.6vw,1.55rem);line-height:1.55}.invite-copy strong{font-weight:600}
.program{display:grid;gap:12px;margin-top:34px}.program-row{display:grid;grid-template-columns:92px 1fr;gap:18px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}.program-time{font-size:clamp(1.7rem,4vw,2.7rem);color:var(--accent)}.program-text{font-size:clamp(1.05rem,2.2vw,1.35rem);line-height:1.4}.notice{margin-top:36px;padding:24px;border:1px solid rgba(242,183,61,.4);border-radius:20px;background:rgba(242,183,61,.06)}.notice h3{margin:0 0 12px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}.notice p,.address{margin:0;font-size:clamp(1rem,2.1vw,1.22rem);line-height:1.6}.address{margin-top:28px;color:var(--fg)}.address strong{color:var(--accent)}.footer{height:90px;background:var(--deep)}
@keyframes pulse{0%,100%{transform:scaleY(.45);opacity:.35}50%{transform:scaleY(1);opacity:1}}
@media(max-width:600px){.scroll-scene{height:500svh}.date-big{font-size:clamp(6.5rem,28vw,9.5rem)}.event-title{font-size:clamp(3.8rem,16.2vw,6.2rem)}.hero-time{font-size:clamp(2rem,9vw,3.2rem)}.program-row{grid-template-columns:76px 1fr}.section-title{font-size:clamp(2.8rem,11.5vw,4.2rem)}}
@media(max-width:360px){.date-big{font-size:6rem}.event-title{font-size:3.35rem}}
@media(orientation:landscape),(min-width:900px){.scroll-scene{height:470svh}.hero{background:radial-gradient(circle at center,#163f69 0%,var(--bg) 72%)}.hero-video{width:min(100%,calc(100vh * .574));height:100%;left:50%;right:auto;transform:translateX(-50%);object-fit:contain}.date-big{font-size:clamp(9rem,18vw,20rem)}.event-title{font-size:clamp(5.4rem,8.6vw,10.6rem)}.hero-time{font-size:clamp(2.7rem,4.2vw,4.8rem)}}
@media(prefers-reduced-motion:reduce){.scroll-hint:after{animation:none}}



/* FINAL INVITATION RULES
   Запрещено переносить часть слова в готических заголовках и персональном обращении.
   Если строка не помещается по ширине — уменьшается общий размер шрифта строки,
   но слова остаются целыми и вся фраза сохраняет единый кегль.
*/

.content-wrap{
  align-items:flex-end;
  padding:clamp(22px,5.5svh,52px) var(--x) max(28px,env(safe-area-inset-bottom));
}

.content{
  width:min(100%,1120px);
  opacity:1;
  transform:none;
}

.hero-typo{
  position:relative;
  z-index:4;
  will-change:transform,opacity;
}

.date-big{
  margin:0 0 8px;
  font-size:clamp(2rem,7vw,4.5rem);
  line-height:.95;
  white-space:nowrap;
  word-break:keep-all;
  overflow-wrap:normal;
  hyphens:none;
  color:var(--fg);
}

.event-title{
  margin:0;
  font-size:clamp(4rem,15vw,8.8rem);
  line-height:.92;
  letter-spacing:.03em;
  color:var(--accent);
}

.event-title span{
  display:block;
  white-space:nowrap;
  word-break:keep-all;
  overflow-wrap:normal;
  hyphens:none;
}

.hero-time{display:none!important}

.scroll-hint{
  position:absolute;
  left:50%;
  bottom:max(18px,env(safe-area-inset-bottom));
  z-index:5;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:rgba(247,244,237,.96);
  font-size:0;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
  white-space:nowrap;
  will-change:transform,opacity;
}

.scroll-hint::before{
  content:"Листай вниз";
  font-size:12px;
}

.scroll-hint::after{
  content:"↓";
  display:block;
  width:auto;
  height:auto;
  margin:0;
  background:none;
  font-size:22px;
  line-height:1;
  animation:pulseArrow 1.25s ease-in-out infinite;
}

.hero-bottom-fade{
  position:absolute;
  inset:auto 0 0 0;
  height:28svh;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(4,18,36,0) 0%,
    rgba(4,18,36,.18) 34%,
    rgba(4,18,36,.88) 100%
  );
  will-change:transform,opacity;
}

@keyframes pulseArrow{
  0%,100%{transform:translateY(0);opacity:.55}
  50%{transform:translateY(6px);opacity:1}
}

/* SECOND SCREEN */
.scroll-scene + .section{
  min-height:auto;
  display:block;
  padding-top:clamp(42px,7vw,68px);
  padding-bottom:clamp(42px,7vw,68px);
}

.scroll-scene + .section .kicker{display:none}
.scroll-scene + .section .inner{width:min(100%,960px)}

.salute{
  margin:0;
  color:var(--fg);
  font-family:var(--display);
  font-weight:400;
  line-height:.92;
  letter-spacing:.015em;
}

.salute-line{
  display:block;
  white-space:nowrap;
  word-break:keep-all;
  overflow-wrap:normal;
  hyphens:none;
}

.invite-card{
  margin-top:clamp(24px,3vw,32px);
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}

.invite-copy{
  margin:0;
  max-width:900px;
  font-family:var(--display);
  font-size:clamp(1.55rem,4vw,2.45rem);
  line-height:1.22;
}

.invite-line{display:block}
.invite-copy strong{font-weight:400}

/* compact program layout */
.section{
  padding:clamp(44px,8vw,84px) var(--x);
}

.section + .section{
  border-top:1px solid rgba(247,244,237,.08);
}

.section-title{
  margin:0 0 20px;
  font-size:clamp(2.6rem,8vw,5rem);
  line-height:.92;
  letter-spacing:.01em;
}

.program{
  display:grid;
  gap:8px;
  margin-top:0;
}

.program-row{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:14px;
  align-items:baseline;
  padding:10px 0;
  border-bottom:1px solid rgba(247,244,237,.09);
}

.program-time{
  font-size:clamp(1.5rem,3.6vw,2.3rem);
}

.program-text{
  font-size:clamp(1rem,2vw,1.25rem);
  line-height:1.32;
}

.address{
  margin:18px 0 0;
  font-family:var(--display);
  font-size:clamp(1.55rem,4vw,2.25rem);
  line-height:1.08;
}

.address strong{display:none}

.address a{
  color:var(--fg);
  text-decoration:none;
  border-bottom:1px solid rgba(242,183,61,.75);
}

.address a:hover{color:var(--accent)}

.notice{
  margin-top:18px;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
}

.notice h3{display:none}

.notice p{
  margin:0;
  font-size:clamp(1rem,2vw,1.16rem);
  line-height:1.45;
  color:var(--muted);
}

@media(max-width:600px){
  .scroll-scene{height:500svh}
  .date-big{font-size:clamp(1.7rem,7vw,2.5rem)}
  .event-title{font-size:clamp(3.6rem,15vw,5.6rem)}
  .section{padding:34px var(--x)}
  .salute{font-size:62px}
  .invite-copy{font-size:clamp(1.45rem,6vw,1.95rem)}
  .program-row{
    grid-template-columns:72px 1fr;
    gap:12px;
    padding:9px 0;
  }
}

@media(max-width:360px){
  .salute{font-size:56px}
}

@media(orientation:landscape),(min-width:900px){
  .scroll-scene{height:470svh}
  .date-big{font-size:clamp(2.2rem,4vw,4.2rem)}
  .event-title{font-size:clamp(5.4rem,8.6vw,10.6rem)}
  .salute{font-size:92px}
}

/* HERO 2 — возвращенный заголовок внизу */
.hero-title-2{
  position:absolute;
  left:var(--x);
  right:var(--x);
  bottom:clamp(74px,10svh,118px);
  z-index:5;
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(4rem,15vw,8.8rem);
  line-height:.92;
  letter-spacing:.03em;
  color:var(--accent);
  text-shadow:0 12px 36px rgba(0,0,0,.34);
  opacity:0;
  transform:translate3d(0,54px,0);
  pointer-events:none;
  will-change:transform,opacity;
}
.hero-title-2 span{
  display:block;
  white-space:nowrap;
  word-break:keep-all;
  overflow-wrap:normal;
  hyphens:none;
}
.hero-bottom-fade{
  height:34svh;
  background:linear-gradient(
    180deg,
    rgba(4,18,36,0) 0%,
    rgba(4,18,36,.16) 24%,
    rgba(4,18,36,.62) 62%,
    rgba(4,18,36,.94) 100%
  );
}
@media(max-width:600px){
  .hero-title-2{
    font-size:clamp(3.6rem,15vw,5.6rem);
    bottom:clamp(68px,9svh,92px);
  }
}
@media(orientation:landscape),(min-width:900px){
  .hero-title-2{font-size:clamp(5.4rem,8.6vw,10.6rem)}
}

/* v33 guest layout — root page mechanics retained */
html,body{width:100%;overflow-x:hidden}
body{display:flex;justify-content:center;background:#111820}
main{width:min(100vw,520px);max-width:520px;min-height:100vh;background:var(--bg);overflow-x:hidden}

.scroll-scene{height:500svh}
.hero{background:var(--bg)}

.hero1{
  position:absolute;
  z-index:5;
  top:clamp(18px,4svh,44px);
  left:var(--x);
  right:var(--x);
  will-change:opacity,transform;
}
.hero1-date,.hero2-date{
  margin:0 0 10px;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.1rem,8vw,3.2rem);
  line-height:.92;
  color:var(--fg);
  white-space:nowrap;
  text-shadow:0 10px 30px rgba(0,0,0,.3);
}
.hero1-title,.hero2-title{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(3.7rem,15vw,5.7rem);
  line-height:.92;
  letter-spacing:.03em;
  color:var(--accent);
  text-shadow:0 12px 36px rgba(0,0,0,.32);
}
.hero1-title span,.hero2-title span{
  display:block;
  white-space:nowrap;
}

.hero2{
  position:absolute;
  z-index:5;
  top:clamp(18px,4svh,44px);
  left:var(--x);
  right:var(--x);
  opacity:0;
  will-change:opacity,transform;
  pointer-events:none;
}

/* Keep root bottom fade behavior; no extra panels are introduced. */
.hero-top-fade{display:none!important}
.hero-bottom-fade{
  display:block!important;
  position:absolute;
  inset:auto 0 0 0;
  height:34svh;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(4,18,36,0),rgba(4,18,36,.16) 24%,rgba(4,18,36,.62) 62%,rgba(4,18,36,.94));
}

.scroll-hint{
  font-family:var(--display);
  font-size:clamp(2.05rem,7vw,2.8rem)!important;
  text-transform:none;
  letter-spacing:.01em;
}
.scroll-hint::before{content:none!important}
.scroll-hint::after{
  content:"↓"!important;
  font-family:var(--sans);
  font-size:32px!important;
}

/* Personalized block */
.scroll-scene + .section{
  padding:34px var(--x);
  background:var(--deep);
}
.salute{
  margin:0;
  text-align:left;
  font-family:var(--display);
  font-weight:400;
  font-size:58px;
  line-height:.96;
  color:var(--fg);
}
.salute-line{
  display:block;
  white-space:nowrap;
  margin-top:.075em;
  text-shadow:0 .012em .02em rgba(0,0,0,.10);
}
.salute-line:first-child{margin-top:0}
.cap{display:inline-block;font-size:1.5em;line-height:.66;vertical-align:-.06em}

.invite-copy{
  margin:42px 0 0;
  width:100%;
  max-width:100%;
  font-family:var(--display);
  font-size:clamp(2.25rem,6.9vw,2.95rem);
  line-height:1.01;
  letter-spacing:.002em;
}
.invite-line{
  display:block;
  white-space:nowrap;
  word-break:keep-all;
  overflow-wrap:normal;
  hyphens:none;
}
.invite-line:last-child{color:var(--accent)}

.section.program-section{
  min-height:100svh;
  display:flex;
  padding:34px var(--x);
}
.section.program-section .inner{
  width:100%;
  display:flex;
  min-height:calc(100svh - 68px);
  flex-direction:column;
}
.section-title{
  margin:0 0 18px;
  font-size:clamp(3rem,10vw,4.8rem);
  line-height:.9;
}
.program{display:grid;gap:6px;margin-top:0}
.program-row{
  grid-template-columns:76px 1fr;
  gap:12px;
  padding:9px 0;
}
.program-time{font-size:clamp(1.5rem,5vw,2.25rem)}
.program-text{font-size:clamp(1rem,3.5vw,1.2rem)}
.address-footer{margin-top:auto;padding-top:28px}
.address{margin:0}
.address a{display:flex;flex-direction:column;align-items:flex-start;border-bottom:0}
.address-line:first-child{
  font-size:clamp(3.7rem,15vw,5.7rem);
  line-height:.92;
  letter-spacing:.03em;
  margin-bottom:8px;
}
.address-line:last-child{
  font-size:clamp(1.7rem,5.2vw,2.25rem);
  line-height:1.02;
}

@media(min-width:521px){
  :root{--x:28px}
  .hero-video{width:100%;height:100%;left:0;right:0;transform:none;object-fit:cover}
  .salute{font-size:58px}
  .section{padding:34px var(--x)}
}

/* v34 — scroll-scene is a transparent motion track only */
.scroll-scene{
  position:relative!important;
  height:500svh!important;
  background:transparent!important;
  overflow:visible!important;
  isolation:auto!important;
}

/* The hero itself is the only visible layer during the scroll sequence. */
.scroll-scene > .hero{
  position:sticky!important;
  top:0!important;
  height:100svh!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#000!important;
  transform:none!important;
}

/* Absolutely no parent-section color may appear under/around the video. */
.scroll-scene::before,
.scroll-scene::after{
  content:none!important;
  display:none!important;
}

/* Keep video pinned edge-to-edge inside the sticky hero. */
.hero-video{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  transform:none!important;
}

/* The next content section starts immediately after the motion track;
   it must not introduce a spacer or translated block. */
.scroll-scene + .section{
  position:relative!important;
  margin-top:0!important;
  transform:none!important;
}

/* v35 — restore true sticky behavior */
html,
body{
  overflow-x:clip!important;
}
main{
  overflow:visible!important;
  overflow-x:visible!important;
  overflow-y:visible!important;
  transform:none!important;
  contain:none!important;
}
.scroll-scene{
  overflow:visible!important;
  transform:none!important;
  contain:none!important;
}
.scroll-scene > .hero{
  position:-webkit-sticky!important;
  position:sticky!important;
  top:0!important;
  transform:none!important;
}

/* v36 — screen-multiple scroll rhythm */
:root{--hero-scroll-screens:5}

.scroll-scene{
  height:calc(var(--hero-scroll-screens) * 100svh)!important;
}

/* First screen: text stays clean and fully visible while video scrubs. */
.hero1-date,
.hero1-title{
  text-shadow:none!important;
}

/* Hint: regular weight. */
.scroll-hint{
  font-weight:400!important;
  font-style:normal!important;
}

/* HERO2 stays in the lower hero composition.
   It does NOT fly independently to the top; when sticky releases,
   it goes upward together with the rest of the page. */
.hero2{
  top:auto!important;
  bottom:clamp(42px,7svh,82px)!important;
  left:var(--x)!important;
  right:var(--x)!important;
}

/* Program is natural content height; address follows via margin,
   not as a remote footer at the bottom of a 100svh panel. */
.section.program-section{
  min-height:0!important;
  display:block!important;
}
.section.program-section .inner{
  display:block!important;
  min-height:0!important;
}
.address-footer{
  margin-top:32px!important;
  padding-top:0!important;
}
.address-footer .address{
  margin:0!important;
}
.footer{
  height:36px!important;
}

/* v37 — no HERO2, clean handoff to salutation */
.hero2{display:none!important}

/* HERO1 and scroll hint dim together at the end of video. */
.hero1,
.scroll-hint{
  will-change:opacity,filter,transform;
}

/* Address follows schedule and is visually centered as one block. */
.address-footer{
  margin:36px auto 0!important;
  padding:0 var(--x)!important;
  width:100%!important;
  display:flex!important;
  justify-content:center!important;
}
.address-footer .address{
  margin:0 auto!important;
  width:max-content!important;
  max-width:100%!important;
  text-align:left!important;
}
.address-footer .address a{
  align-items:flex-start!important;
}

/* v38 — hero text legibility + centered invite + clickable hint */
.hero1{
  isolation:isolate;
}
.hero1::before{
  content:"";
  position:absolute;
  inset:-16px -16px -20px -16px;
  z-index:-1;
  border-radius:22px;
  background:linear-gradient(
    180deg,
    rgba(2,8,18,.46) 0%,
    rgba(2,8,18,.30) 48%,
    rgba(2,8,18,0) 100%
  );
  filter:blur(9px);
  pointer-events:none;
}
.hero1-date,
.hero1-title{
  text-shadow:
    0 2px 10px rgba(0,0,0,.24),
    0 12px 30px rgba(0,0,0,.34)!important;
}

.scroll-hint{
  position:absolute;
  cursor:pointer!important;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  isolation:isolate;
  text-shadow:
    0 2px 10px rgba(0,0,0,.24),
    0 10px 24px rgba(0,0,0,.32);
}
.scroll-hint::before{
  content:""!important;
  position:absolute;
  inset:-10px -14px -12px -14px;
  z-index:-1;
  border-radius:18px;
  background:linear-gradient(
    180deg,
    rgba(2,8,18,0) 0%,
    rgba(2,8,18,.20) 42%,
    rgba(2,8,18,.42) 100%
  );
  filter:blur(9px);
  pointer-events:none;
}

/* Center the invite block exactly like the address block,
   while keeping the text itself left-aligned. */
.invite-copy{
  margin:42px auto 0!important;
  padding:0 var(--x)!important;
  width:100%!important;
  max-width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  text-align:left!important;
  box-sizing:border-box;
}
.invite-copy .invite-line{
  display:block!important;
  width:max-content!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:left!important;
}

/* v39 — remove program heading, tighten program upward, enlarge salutation gap */
.section.program-section{
  padding-top:22px!important;
}
.program{
  margin-top:0!important;
}
.salute-line:nth-child(2){
  margin-top:.18em!important;
}
.salute-line:nth-child(3){
  margin-top:.075em!important;
}

/* v40 — full-width gradient legibility zones, no local text shadows */

/* Remove v38 local blurred plaques/shadows */
.hero1::before{
  content:none!important;
  display:none!important;
}
.hero1-date,
.hero1-title,
.scroll-hint{
  text-shadow:none!important;
  filter:none!important;
}

/* Top full-width gradient behind HERO1 */
.hero::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:38svh;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.68) 0%,
    rgba(0,0,0,.48) 28%,
    rgba(0,0,0,.24) 58%,
    rgba(0,0,0,0) 100%
  );
}

/* Bottom full-width gradient behind "Листай вниз" */
.hero-bottom-fade{
  display:block!important;
  opacity:1!important;
  height:30svh!important;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.18) 34%,
    rgba(0,0,0,.46) 68%,
    rgba(0,0,0,.72) 100%
  )!important;
}

/* Keep text above both gradients */
.hero1,
.scroll-hint{
  z-index:5!important;
}

/* v41 — no residual title/hint on final video frame */
.hero1,
.scroll-hint{
  transition:none!important;
}
.hero-bottom-fade{
  opacity:1!important;
}

/* v42 — hint fades immediately when animation starts */
.scroll-hint{
  transition:opacity .32s ease!important;
}
.scroll-hint.is-fading{
  opacity:0!important;
  pointer-events:none!important;
}

/* v43 — centered content columns with left-aligned typography */

/* Invite copy: center the whole block, not each line. */
.invite-copy{
  width:max-content!important;
  max-width:calc(100% - (2 * var(--x)))!important;
  margin:42px auto 0!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  text-align:left!important;
}
.invite-copy .invite-line{
  width:auto!important;
  max-width:100%!important;
  margin:0!important;
  text-align:left!important;
}

/* Program: narrower centered column with equal side margins. */
.program{
  width:calc(100% - (2 * var(--x)))!important;
  max-width:410px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.program-row{
  width:100%!important;
}

/* Address: same centered axis, but a little lower.
   Vertical margin equals the page side padding token. */
.address-footer{
  margin-top:var(--x)!important;
  padding-left:var(--x)!important;
  padding-right:var(--x)!important;
}
.address-footer .address{
  width:max-content!important;
  max-width:100%!important;
  margin:0 auto!important;
}

/* v44 — unified info grid + background-color gradients + HERO1 travels with hero */

/* Gradients use the same navy as the page background, not black. */
.hero::before{
  background:linear-gradient(
    180deg,
    rgba(6,27,55,.94) 0%,
    rgba(6,27,55,.72) 30%,
    rgba(6,27,55,.38) 62%,
    rgba(6,27,55,0) 100%
  )!important;
}
.hero-bottom-fade{
  background:linear-gradient(
    180deg,
    rgba(6,27,55,0) 0%,
    rgba(6,27,55,.20) 34%,
    rgba(6,27,55,.58) 70%,
    rgba(6,27,55,.94) 100%
  )!important;
}

/* One shared information width for schedule + address. */
.program,
.address-footer{
  width:min(calc(100% - (2 * var(--x))), 390px)!important;
  max-width:390px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Schedule rows now align exactly to the address block on both sides. */
.program-row{
  width:100%!important;
  grid-template-columns:76px minmax(0,1fr)!important;
  padding-left:0!important;
  padding-right:0!important;
}
.program-row::after{
  content:none!important;
}
.program-row{
  border-bottom:1px solid rgba(247,244,237,.09)!important;
}

/* Address sits lower: distance from final rule equals the side padding token. */
.address-footer{
  margin-top:var(--x)!important;
  padding:0!important;
  justify-content:flex-start!important;
}
.address-footer .address{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  text-align:left!important;
}
.address-footer .address a{
  width:100%!important;
  align-items:flex-start!important;
}

/* v45 — seamless hero-to-page gradient + enlarged centered address */

/* Exact color handoff into the following page background (--deep = #041224). */
.hero-bottom-fade{
  height:34svh!important;
  background:linear-gradient(
    180deg,
    rgba(4,18,36,0) 0%,
    rgba(4,18,36,.16) 28%,
    rgba(4,18,36,.44) 54%,
    rgba(4,18,36,.74) 76%,
    rgba(4,18,36,.94) 91%,
    rgba(4,18,36,1) 100%
  )!important;
}

/* Make the first content section begin with exactly the same solid color. */
.scroll-scene + .section{
  background:#041224!important;
  border-top:0!important;
}

/* Address uses the same usable width/padding logic as the salutation section. */
.address-footer{
  width:100%!important;
  max-width:none!important;
  margin:var(--x) auto 0!important;
  padding:0!important;
  display:flex!important;
  justify-content:center!important;
}
.address-footer .address{
  width:max-content!important;
  max-width:calc(100% - (2 * var(--x)))!important;
  margin:0 auto!important;
  text-align:left!important;
}
.address-footer .address a{
  width:max-content!important;
  max-width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  border-bottom:0!important;
}

/* Enlarge the address composition. */
.address-line:first-child{
  font-size:clamp(4.25rem,16.5vw,6.4rem)!important;
  line-height:.90!important;
  letter-spacing:.025em!important;
  margin-bottom:10px!important;
  white-space:nowrap!important;
}
.address-line:last-child{
  font-size:clamp(2.15rem,6.4vw,3.15rem);
  line-height:1!important;
  white-space:nowrap!important;
  display:block!important;
  transform-origin:left center;
}

/* v46 — unified gradient color + address lowered to equal bottom/side spacing */

/* Top gradient uses exactly the same navy base as the bottom gradient and content background. */
.hero::before{
  background:linear-gradient(
    180deg,
    rgba(4,18,36,.94) 0%,
    rgba(4,18,36,.72) 30%,
    rgba(4,18,36,.38) 62%,
    rgba(4,18,36,0) 100%
  )!important;
}

/* Lower the address by making the section's bottom gap exactly equal to var(--x). */
.section.program-section{
  padding-bottom:var(--x)!important;
}
.address-footer{
  margin-top:calc(var(--x) * 1.35)!important;
  margin-bottom:0!important;
}
.footer{
  height:0!important;
}

/* v47 — unified main background, equal program lines, responsive mobile sizing */
:root{
  --bg-main:#041224;
  --content-max:390px;
  --safe-top:calc(env(safe-area-inset-top,0px) + 18px);
  --safe-bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
}

html,body,main,
.section,
.scroll-scene + .section,
.section.program-section,
.scroll-scene,
.hero,
.hero-video,
.shade{
  background:var(--bg-main)!important;
}

.hero::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:38svh;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(4,18,36,.96) 0%,
    rgba(4,18,36,.82) 18%,
    rgba(4,18,36,.56) 42%,
    rgba(4,18,36,.26) 68%,
    rgba(4,18,36,0) 100%
  )!important;
}

.hero-bottom-fade{
  display:block!important;
  position:absolute!important;
  left:0!important;right:0!important;bottom:0!important;
  height:36svh!important;
  z-index:3!important;
  pointer-events:none!important;
  opacity:1!important;
  background:linear-gradient(
    180deg,
    rgba(4,18,36,0) 0%,
    rgba(4,18,36,.18) 24%,
    rgba(4,18,36,.42) 48%,
    rgba(4,18,36,.70) 74%,
    rgba(4,18,36,.92) 92%,
    rgba(4,18,36,1) 100%
  )!important;
}

.hero1{
  top:var(--safe-top)!important;
}
.scroll-hint{
  bottom:var(--safe-bottom)!important;
}

.invite-copy{
  width:max-content!important;
  max-width:calc(100% - (2 * var(--x)))!important;
  margin:42px auto 0!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  text-align:left!important;
}
.invite-copy .invite-line{
  width:auto!important;
  max-width:100%!important;
  margin:0!important;
  text-align:left!important;
}

.program{
  width:calc(100% - (2 * var(--x)))!important;
  max-width:var(--content-max)!important;
  margin:0 auto!important;
  gap:0!important;
}
.program-row{
  width:100%!important;
  display:grid!important;
  grid-template-columns:76px minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:18px!important;
  padding:18px 0!important;
  border-bottom:1px solid rgba(247,244,237,.09)!important;
  box-sizing:border-box!important;
}
.program-row:first-child{
  border-top:1px solid rgba(247,244,237,.09)!important;
  margin-top:0!important;
}
.program-time,.program-text{margin:0!important}
.program-time{white-space:nowrap}
.program-text{min-width:0}

.address-footer{
  width:100%!important;
  max-width:none!important;
  margin:var(--x) auto 0!important;
  padding:0 0 var(--x) 0!important;
  display:flex!important;
  justify-content:center!important;
  background:transparent!important;
}
.address-footer .address{
  width:max-content!important;
  max-width:calc(100% - (2 * var(--x)))!important;
  margin:0 auto!important;
  text-align:left!important;
}
.address-footer .address a{
  width:max-content!important;
  max-width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  border-bottom:0!important;
}
.address-line:first-child{
  font-size:clamp(4.1rem,15vw,6rem)!important;
  line-height:.9!important;
  letter-spacing:.02em!important;
  margin-bottom:10px!important;
  white-space:nowrap!important;
}
.address-line:last-child{
  font-size:clamp(2rem,6.2vw,3rem)!important;
  line-height:1!important;
  white-space:nowrap!important;
  display:block!important;
  transform-origin:left center!important;
}

@media(max-width:390px){
  :root{--content-max:340px}
  .hero1-date{font-size:clamp(2.2rem,8.4vw,3.1rem)!important}
  .hero1-title{font-size:clamp(4rem,14.6vw,5.7rem)!important}
  .salute{font-size:clamp(3.4rem,12.4vw,5rem)!important}
  .invite-copy{margin-top:34px!important}
  .invite-copy .invite-line{font-size:clamp(2.15rem,8.2vw,3rem)!important;line-height:1.04!important}
  .program-row{grid-template-columns:68px minmax(0,1fr)!important;column-gap:14px!important;padding:16px 0!important}
  .program-time{font-size:clamp(2rem,7.4vw,2.6rem)!important}
  .program-text{font-size:clamp(1.55rem,4.8vw,2rem)!important}
  .address-line:first-child{font-size:clamp(3.6rem,13.8vw,5rem)!important}
  .address-line:last-child{font-size:clamp(1.8rem,5.7vw,2.5rem)!important}
}
@media(min-width:391px) and (max-width:480px){
  :root{--content-max:410px}
  .hero1-date{font-size:clamp(2.5rem,7.6vw,3.4rem)!important}
  .hero1-title{font-size:clamp(4.4rem,13.6vw,6.1rem)!important}
  .invite-copy .invite-line{font-size:clamp(2.3rem,7.3vw,3.25rem)!important;line-height:1.03!important}
  .program-time{font-size:clamp(2.1rem,6.9vw,2.8rem)!important}
  .program-text{font-size:clamp(1.65rem,4.6vw,2.1rem)!important}
}
@media(max-height:760px){
  .hero::before{height:34svh!important}
  .hero-bottom-fade{height:32svh!important}
  .scroll-hint{bottom:calc(env(safe-area-inset-bottom,0px) + 12px)!important}
}
@media(min-height:900px){
  .hero::before{height:40svh!important}
  .hero-bottom-fade{height:38svh!important}
  .invite-copy{margin-top:48px!important}
  .address-footer{margin-top:calc(var(--x) * 1.15)!important}
}

/* v48 — final mobile composition */

/* Do not flood the whole video with a solid dark fill. Keep only controlled gradients. */
.shade{
  background:transparent!important;
}
.hero::before{
  background:linear-gradient(
    180deg,
    rgba(4,18,36,.76) 0%,
    rgba(4,18,36,.52) 22%,
    rgba(4,18,36,.26) 48%,
    rgba(4,18,36,.10) 70%,
    rgba(4,18,36,0) 100%
  )!important;
}
.hero-bottom-fade{
  background:linear-gradient(
    180deg,
    rgba(4,18,36,0) 0%,
    rgba(4,18,36,.10) 28%,
    rgba(4,18,36,.24) 52%,
    rgba(4,18,36,.48) 74%,
    rgba(4,18,36,.82) 92%,
    rgba(4,18,36,1) 100%
  )!important;
}

/* Pull content upward, except address block. */
.scroll-scene + .section{
  padding-top:24px!important;
  padding-bottom:30px!important;
}
.section.program-section{
  padding-top:18px!important;
  padding-bottom:var(--x)!important;
}

/* One stable left-aligned content column for salutation/invite/address. */
.scroll-scene + .section .inner,
.section.program-section .inner{
  width:100%!important;
  max-width:none!important;
}

/* Salutation: always left aligned, same side margins as address, preserved line spacing, soft shadow. */
.salute{
  width:calc(100% - (2 * var(--x)))!important;
  max-width:390px!important;
  margin:0 auto!important;
  text-align:left!important;
  line-height:.96!important;
}
.salute-line{
  display:block!important;
  white-space:nowrap!important;
  margin-top:.08em!important;
  text-align:left!important;
  text-shadow:
    0 2px 5px rgba(0,0,0,.10),
    0 8px 16px rgba(0,0,0,.12)!important;
}
.salute-line:first-child{margin-top:0!important}

/* Invite block follows the same centered column and left alignment. */
.invite-copy{
  width:calc(100% - (2 * var(--x)))!important;
  max-width:390px!important;
  margin:34px auto 0!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  text-align:left!important;
}
.invite-copy .invite-line{
  width:auto!important;
  max-width:100%!important;
  margin:0!important;
  text-align:left!important;
}

/* PROGRAM:
   width is determined by its own text content;
   block is centered so left/right outer spaces are equal;
   every separator is exactly the full width of this text block. */
.program{
  display:grid!important;
  width:max-content!important;
  max-width:calc(100% - (2 * var(--x)))!important;
  margin:0 auto!important;
  gap:0!important;
}
.program-row{
  width:100%!important;
  display:grid!important;
  grid-template-columns:max-content max-content!important;
  align-items:center!important;
  column-gap:18px!important;
  padding:16px 0!important;
  margin:0!important;
  border-bottom:1px solid rgba(247,244,237,.09)!important;
  box-sizing:border-box!important;
}
.program-row:first-child{
  border-top:0!important;
  padding-top:0!important;
}
.program-time,
.program-text{
  margin:0!important;
  white-space:nowrap!important;
}

/* Address stays lower, centered, with the same outer margins as salutation. */
.address-footer{
  width:calc(100% - (2 * var(--x)))!important;
  max-width:390px!important;
  margin:var(--x) auto 0!important;
  padding:0 0 var(--x) 0!important;
  display:flex!important;
  justify-content:flex-start!important;
}
.address-footer .address{
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  text-align:left!important;
}
.address-footer .address a{
  width:max-content!important;
  max-width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  border-bottom:0!important;
}

/* Compact phones */
@media(max-width:390px){
  .salute,
  .invite-copy,
  .address-footer{
    max-width:340px!important;
  }
  .salute{
    font-size:clamp(3.35rem,12.2vw,4.95rem)!important;
  }
  .invite-copy{
    margin-top:30px!important;
  }
  .invite-copy .invite-line{
    font-size:clamp(2rem,7.8vw,2.85rem)!important;
    line-height:1.03!important;
  }
  .program-row{
    column-gap:14px!important;
    padding:14px 0!important;
  }
  .program-time{
    font-size:clamp(1.9rem,7.1vw,2.5rem)!important;
  }
  .program-text{
    font-size:clamp(1.35rem,4.4vw,1.85rem)!important;
  }
}

/* Wider phones */
@media(min-width:391px) and (max-width:480px){
  .salute,
  .invite-copy,
  .address-footer{
    max-width:390px!important;
  }
  .program-row{
    column-gap:18px!important;
  }
}

/* v49 FINAL */

/* HERO1: equal left/right paddings, adaptive to mobile width */
.hero1{
  left:var(--x)!important;
  right:var(--x)!important;
  width:auto!important;
  max-width:none!important;
  box-sizing:border-box!important;
}
.hero1-date{
  max-width:100%!important;
  font-size:clamp(1.95rem,7.2vw,3.2rem)!important;
  line-height:.95!important;
  white-space:nowrap!important;
}
.hero1-title{
  max-width:100%!important;
  font-size:clamp(3.15rem,12.6vw,5.6rem)!important;
  line-height:.90!important;
}
.hero1-title span{
  display:block!important;
  max-width:100%!important;
  white-space:nowrap!important;
}

/* "буду..." — equal side distances, left aligned inside */
.invite-copy{
  width:calc(100% - (2 * var(--x)))!important;
  max-width:390px!important;
  margin:34px auto 0!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  text-align:left!important;
}
.invite-copy .invite-line{
  width:auto!important;
  max-width:100%!important;
  margin:0!important;
  text-align:left!important;
}

/* Schedule: content-width, centered, responsive, only top line */
.program{
  width:max-content!important;
  max-width:calc(100% - (2 * var(--x)))!important;
  margin:0 auto!important;
  padding:0!important;
  display:grid!important;
  gap:0!important;
  border-top:1px solid rgba(247,244,237,.09)!important;
  box-sizing:border-box!important;
}
.program-row{
  width:100%!important;
  display:grid!important;
  grid-template-columns:max-content max-content!important;
  align-items:center!important;
  column-gap:14px!important;
  padding:14px 0!important;
  margin:0!important;
  border:0!important;
  box-sizing:border-box!important;
}
.program-row:first-child{
  padding-top:14px!important;
}
.program-time{
  margin:0!important;
  white-space:nowrap!important;
  font-size:clamp(1.6rem,5.7vw,2.45rem)!important;
  line-height:1!important;
}
.program-text{
  margin:0!important;
  white-space:nowrap!important;
  font-size:clamp(1.05rem,3.7vw,1.65rem)!important;
  line-height:1.08!important;
}

/* Compact phones */
@media(max-width:390px){
  .hero1-date{
    font-size:clamp(1.85rem,6.9vw,2.7rem)!important;
  }
  .hero1-title{
    font-size:clamp(2.95rem,11.9vw,4.7rem)!important;
  }

  .invite-copy{
    max-width:340px!important;
    margin-top:30px!important;
  }
  .invite-copy .invite-line{
    font-size:clamp(1.9rem,7.2vw,2.65rem)!important;
    line-height:1.03!important;
  }

  .program-row{
    column-gap:11px!important;
    padding:12px 0!important;
  }
  .program-time{
    font-size:clamp(1.5rem,5.35vw,2.1rem)!important;
  }
  .program-text{
    font-size:clamp(.98rem,3.45vw,1.42rem)!important;
  }
}

/* Very narrow phones */
@media(max-width:340px){
  .hero1-title{
    font-size:clamp(2.7rem,11.2vw,4.2rem)!important;
  }
  .program-row{
    column-gap:9px!important;
  }
  .program-time{
    font-size:clamp(1.4rem,5.05vw,1.95rem)!important;
  }
  .program-text{
    font-size:clamp(.92rem,3.25vw,1.28rem)!important;
  }
}

/* v50 — TWO ADAPTIVE SCREENS */

/* Shared adaptive side inset. */
:root{
  --screen-pad:clamp(20px,6vw,34px);
  --screen2-max:430px;
}

/* SCREEN 1 — HERO + VIDEO */
.hero1{
  left:var(--screen-pad)!important;
  right:var(--screen-pad)!important;
  top:max(env(safe-area-inset-top,0px),clamp(18px,2.6dvh,34px))!important;
  width:auto!important;
  box-sizing:border-box!important;
}
.hero1-date{
  font-size:clamp(1.9rem,min(7.4vw,4.5dvh),3.2rem)!important;
  line-height:.95!important;
  white-space:nowrap!important;
  max-width:100%!important;
}
.hero1-title{
  font-size:clamp(3rem,min(12.8vw,7.2dvh),5.7rem)!important;
  line-height:.90!important;
  max-width:100%!important;
}
.hero1-title span{
  display:block!important;
  white-space:nowrap!important;
  max-width:100%!important;
}
.scroll-hint{
  bottom:max(env(safe-area-inset-bottom,0px),clamp(14px,2.2dvh,24px))!important;
}

/* SCREEN 2 — one viewport from salutation through address. */
.screen2{
  position:relative!important;
  width:100%!important;
  height:100dvh!important;
  min-height:100svh!important;
  padding:
    max(env(safe-area-inset-top,0px),clamp(16px,2.2dvh,26px))
    var(--screen-pad)
    max(env(safe-area-inset-bottom,0px),clamp(16px,2.2dvh,26px))!important;
  background:var(--deep)!important;
  border:0!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
}
.screen2-shell{
  width:100%!important;
  max-width:var(--screen2-max)!important;
  margin:0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:0!important;
  transform-origin:top center!important;
}

/* Salutation shares the same dynamic side boundaries as the address. */
.salute{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  text-align:left!important;
  font-size:clamp(2.85rem,min(11.8vw,6.6dvh),5rem)!important;
  line-height:.93!important;
}
.salute-line{
  display:block!important;
  margin-top:.075em!important;
  white-space:nowrap!important;
  text-align:left!important;
  text-shadow:
    0 2px 5px rgba(0,0,0,.10),
    0 8px 16px rgba(0,0,0,.12)!important;
}
.salute-line:first-child{margin-top:0!important}

/* "буду..." = max-content left-aligned block, centered by equal dynamic margins. */
.invite-copy{
  width:max-content!important;
  max-width:100%!important;
  margin:clamp(12px,2.2dvh,26px) auto 0!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  text-align:left!important;
  font-size:clamp(1.65rem,min(7.1vw,4.0dvh),3rem)!important;
  line-height:1.02!important;
}
.invite-copy .invite-line{
  width:auto!important;
  max-width:100%!important;
  margin:0!important;
  text-align:left!important;
  white-space:nowrap!important;
}

/* Exactly ONE full-width divider. */
.screen-divider{
  width:100vw!important;
  height:1px!important;
  margin:
    clamp(12px,2dvh,24px)
    calc(50% - 50vw)
    clamp(8px,1.5dvh,18px)!important;
  background:rgba(247,244,237,.09)!important;
  flex:0 0 auto!important;
}

/* Remove every legacy line from program/section. */
.screen2,
.screen2 *{
  border-top-color:transparent;
}
.program{
  width:max-content!important;
  max-width:100%!important;
  margin:0 auto!important;
  padding:0!important;
  display:grid!important;
  gap:0!important;
  border:0!important;
}
.program-row{
  width:100%!important;
  display:grid!important;
  grid-template-columns:max-content max-content!important;
  align-items:center!important;
  column-gap:clamp(10px,3vw,18px)!important;
  padding:clamp(5px,1.1dvh,11px) 0!important;
  margin:0!important;
  border:0!important;
}
.program-time{
  margin:0!important;
  white-space:nowrap!important;
  font-size:clamp(1.45rem,min(5.8vw,3.4dvh),2.55rem)!important;
  line-height:1!important;
}
.program-text{
  margin:0!important;
  white-space:nowrap!important;
  font-size:clamp(.98rem,min(3.8vw,2.35dvh),1.72rem)!important;
  line-height:1.08!important;
}

/* Address stays inside screen 2 and follows the same side bounds. */
.address-footer{
  width:100%!important;
  max-width:none!important;
  margin:clamp(10px,1.8dvh,20px) 0 0!important;
  padding:0!important;
  display:flex!important;
  justify-content:flex-start!important;
}
.address-footer .address{
  width:max-content!important;
  max-width:100%!important;
  margin:0 auto!important;
  text-align:left!important;
}
.address-footer .address a{
  width:max-content!important;
  max-width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  border:0!important;
}
.address-line:first-child{
  font-size:clamp(3.1rem,min(13.5vw,6.4dvh),5.8rem)!important;
  line-height:.88!important;
  margin-bottom:clamp(4px,.7dvh,9px)!important;
  white-space:nowrap!important;
}
.address-line:last-child{
  font-size:clamp(1.7rem,min(6.1vw,3.2dvh),3rem)!important;
  line-height:1!important;
  white-space:nowrap!important;
}

/* Narrow phones: proportional reduction of all blocks and vertical gaps. */
@media(max-width:390px){
  :root{--screen-pad:clamp(18px,5.6vw,24px)}
  .screen2{padding-top:clamp(12px,1.8dvh,20px)!important;padding-bottom:clamp(12px,1.8dvh,20px)!important}
  .salute{font-size:clamp(2.55rem,min(11.1vw,6dvh),4.45rem)!important}
  .invite-copy{font-size:clamp(1.5rem,min(6.7vw,3.65dvh),2.6rem)!important;margin-top:clamp(10px,1.7dvh,18px)!important}
  .screen-divider{margin-top:clamp(10px,1.6dvh,18px)!important;margin-bottom:clamp(7px,1.2dvh,14px)!important}
  .program-row{padding:clamp(4px,.9dvh,8px) 0!important}
  .program-time{font-size:clamp(1.35rem,min(5.4vw,3.1dvh),2.2rem)!important}
  .program-text{font-size:clamp(.92rem,min(3.5vw,2.1dvh),1.5rem)!important}
  .address-footer{margin-top:clamp(8px,1.4dvh,15px)!important}
  .address-line:first-child{font-size:clamp(2.8rem,min(12.6vw,5.8dvh),5rem)!important}
  .address-line:last-child{font-size:clamp(1.55rem,min(5.7vw,2.9dvh),2.6rem)!important}
}

/* Short screens: reduce the entire rhythm further. */
@media(max-height:720px){
  .salute{font-size:clamp(2.35rem,min(10.5vw,5.5dvh),4.1rem)!important}
  .invite-copy{font-size:clamp(1.4rem,min(6.2vw,3.3dvh),2.35rem)!important;margin-top:8px!important}
  .screen-divider{margin-top:8px!important;margin-bottom:6px!important}
  .program-row{padding:3px 0!important}
  .program-time{font-size:clamp(1.25rem,min(5.1vw,2.8dvh),2rem)!important}
  .program-text{font-size:clamp(.88rem,min(3.35vw,1.9dvh),1.38rem)!important}
  .address-footer{margin-top:6px!important}
  .address-line:first-child{font-size:clamp(2.6rem,min(12vw,5.2dvh),4.6rem)!important}
  .address-line:last-child{font-size:clamp(1.45rem,min(5.3vw,2.6dvh),2.35rem)!important}
}

/* Remove legacy sectional spacing/borders now that screen2 is one viewport. */
.screen2.section{padding-left:var(--screen-pad)!important;padding-right:var(--screen-pad)!important}
.section + .section{border-top:0!important}

/* v51 — ONE SITE PADDING + HEIGHT-DRIVEN VERTICAL RHYTHM */
:root{
  --site-pad:clamp(20px,5.6vw,30px);
  --gap-xl:clamp(16px,2.8dvh,30px);
  --gap-lg:clamp(12px,2.2dvh,24px);
  --gap-md:clamp(8px,1.5dvh,18px);
  --gap-sm:clamp(4px,.9dvh,10px);
}

/* SCREEN 1: HERO1 occupies full usable width = viewport - 2×site padding */
.hero1{
  left:var(--site-pad)!important;
  right:var(--site-pad)!important;
  width:auto!important;
  max-width:none!important;
  top:max(env(safe-area-inset-top,0px),clamp(16px,2.4dvh,30px))!important;
}
.hero1-date{
  width:100%!important;
  max-width:100%!important;
  margin:0 0 var(--gap-sm)!important;
}
.hero1-title{
  width:100%!important;
  max-width:100%!important;
}

/* SCREEN 2 uses the same exact horizontal padding */
.screen2{
  padding-left:var(--site-pad)!important;
  padding-right:var(--site-pad)!important;
  padding-top:max(env(safe-area-inset-top,0px),clamp(14px,2.1dvh,24px))!important;
  padding-bottom:max(env(safe-area-inset-bottom,0px),clamp(14px,2.1dvh,24px))!important;
}
.screen2-shell{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  transform:none!important;
}

/* "Уважаемый..." full usable width = viewport - 2×site padding */
.salute{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  text-align:left!important;
}
.salute-line{
  margin-top:clamp(3px,.55dvh,7px)!important;
}
.salute-line:first-child{margin-top:0!important}

/* Invite copy remains a left-aligned block centered inside the same site grid */
.invite-copy{
  max-width:100%!important;
  margin:var(--gap-lg) auto 0!important;
}

/* One full-width divider, with height-driven spacing */
.screen-divider{
  margin-top:var(--gap-lg)!important;
  margin-bottom:var(--gap-md)!important;
}

/* Program vertical rhythm follows viewport height */
.program-row{
  padding:clamp(4px,.9dvh,10px) 0!important;
}

/* "МОСКВА..." full usable width = viewport - 2×site padding */
.address-footer{
  width:100%!important;
  max-width:none!important;
  margin:var(--gap-lg) 0 0!important;
  padding:0!important;
}
.address-footer .address{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}
.address-footer .address a{
  width:100%!important;
  max-width:none!important;
  align-items:flex-start!important;
}
.address-line:first-child,
.address-line:last-child{
  max-width:100%!important;
}

/* Medium-low screens */
@media(max-height:760px){
  :root{
    --gap-xl:clamp(12px,2.2dvh,20px);
    --gap-lg:clamp(9px,1.7dvh,16px);
    --gap-md:clamp(6px,1.1dvh,12px);
    --gap-sm:clamp(3px,.6dvh,7px);
  }
  .screen2{
    padding-top:max(env(safe-area-inset-top,0px),12px)!important;
    padding-bottom:max(env(safe-area-inset-bottom,0px),12px)!important;
  }
  .salute{
    font-size:clamp(2.35rem,min(10.7vw,5.5dvh),4.1rem)!important;
  }
  .invite-copy{
    font-size:clamp(1.4rem,min(6.25vw,3.25dvh),2.3rem)!important;
  }
  .program-time{
    font-size:clamp(1.22rem,min(5vw,2.8dvh),1.95rem)!important;
  }
  .program-text{
    font-size:clamp(.86rem,min(3.3vw,1.9dvh),1.34rem)!important;
  }
  .address-line:first-child{
    font-size:clamp(2.55rem,min(11.8vw,5dvh),4.4rem)!important;
  }
  .address-line:last-child{
    font-size:clamp(1.4rem,min(5.15vw,2.5dvh),2.25rem)!important;
  }
}

/* Very short screens */
@media(max-height:650px){
  :root{
    --gap-lg:6px;
    --gap-md:4px;
    --gap-sm:2px;
  }
  .screen2{
    padding-top:max(env(safe-area-inset-top,0px),9px)!important;
    padding-bottom:max(env(safe-area-inset-bottom,0px),9px)!important;
  }
  .salute{
    font-size:clamp(2.15rem,min(10vw,5dvh),3.7rem)!important;
  }
  .invite-copy{
    font-size:clamp(1.28rem,min(5.8vw,3dvh),2.05rem)!important;
  }
  .program-row{padding:2px 0!important}
  .program-time{
    font-size:clamp(1.12rem,min(4.7vw,2.55dvh),1.75rem)!important;
  }
  .program-text{
    font-size:clamp(.8rem,min(3.1vw,1.75dvh),1.2rem)!important;
  }
  .address-line:first-child{
    font-size:clamp(2.3rem,min(11vw,4.6dvh),3.95rem)!important;
  }
  .address-line:last-child{
    font-size:clamp(1.28rem,min(4.9vw,2.3dvh),2rem)!important;
  }
}

/* v52 — equal content widths + address pinned to screen bottom */
:root{
  --site-pad:clamp(20px,5.6vw,30px);
}

/* Second screen is exactly one viewport and owns all vertical distribution. */
.screen2{
  height:100dvh!important;
  min-height:100svh!important;
  padding:
    max(env(safe-area-inset-top,0px),clamp(12px,2dvh,22px))
    var(--site-pad)
    max(env(safe-area-inset-bottom,0px),var(--site-pad))!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
}

.screen2-shell{
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  transform:none!important;
}

/* Salutation uses full usable site width. */
.salute{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}

/* "буду..." and program have EXACTLY the same wrapper width. */
.invite-copy,
.program{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  box-sizing:border-box!important;
}

/* Keep invite typography left aligned within the shared width. */
.invite-copy{
  margin-top:var(--gap-lg)!important;
  align-items:flex-start!important;
  text-align:left!important;
}
.invite-copy .invite-line{
  width:auto!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* Program stretches to the same edges as invite copy. */
.program{
  display:grid!important;
  gap:0!important;
  border:0!important;
}
.program-row{
  width:100%!important;
  max-width:100%!important;
  grid-template-columns:max-content minmax(0,1fr)!important;
  column-gap:clamp(10px,3vw,18px)!important;
  box-sizing:border-box!important;
}
.program-text{
  min-width:0!important;
}

/* Single divider across the entire viewport remains the only line. */
.screen-divider{
  width:100vw!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
}

/* Address is anchored to the bottom of screen 2.
   Bottom distance is exactly the site padding (plus safe-area if larger). */
.address-footer{
  width:100%!important;
  max-width:none!important;
  margin-top:auto!important;
  margin-left:0!important;
  margin-right:0!important;
  margin-bottom:0!important;
  padding:0!important;
  display:flex!important;
  justify-content:flex-start!important;
  flex:0 0 auto!important;
}
.address-footer .address{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}
.address-footer .address a{
  width:100%!important;
  max-width:none!important;
}

/* Height-responsive rhythm: keep top content compact enough so the address
   can stay pinned to the bottom on short devices. */
@media(max-height:760px){
  .invite-copy{margin-top:clamp(6px,1.3dvh,12px)!important}
  .screen-divider{
    margin-top:clamp(6px,1.1dvh,12px)!important;
    margin-bottom:clamp(4px,.8dvh,9px)!important;
  }
  .program-row{padding:clamp(2px,.6dvh,6px) 0!important}
}

@media(max-height:650px){
  .screen2{
    padding-top:max(env(safe-area-inset-top,0px),8px)!important;
  }
  .invite-copy{margin-top:5px!important}
  .screen-divider{margin-top:5px!important;margin-bottom:3px!important}
  .program-row{padding:1px 0!important}
}

/* v53 — fixed 36px site padding + equal flexible vertical spacing */
:root{
  --site-pad:36px!important;
}

/* SCREEN 1 */
.hero1{
  left:var(--site-pad)!important;
  right:var(--site-pad)!important;
  width:calc(100% - (2 * var(--site-pad)))!important;
  max-width:none!important;
  box-sizing:border-box!important;
}

/* SCREEN 2 */
.screen2{
  height:100dvh!important;
  min-height:100svh!important;
  padding:0 var(--site-pad) var(--site-pad)!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
}

.screen2-shell{
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  transform:none!important;
}

/* salute = viewport width minus 36px padding on each side */
.salute{
  width:100%!important;
  max-width:none!important;
  margin:var(--site-pad) 0 0!important;
  text-align:left!important;
  box-sizing:border-box!important;
}

/* Invite copy: equal dynamic left/right margins.
   Top margin participates in equal flex distribution. */
.invite-copy{
  width:max-content!important;
  max-width:100%!important;
  margin-top:auto!important;
  margin-left:auto!important;
  margin-right:auto!important;
  margin-bottom:0!important;
  padding:0!important;
  flex:0 0 auto!important;
}

/* Divider: only top spacing is flexible. */
.screen-divider{
  margin-top:auto!important;
  margin-bottom:0!important;
  flex:0 0 auto!important;
}

/* Program: equal dynamic left/right margins + flexible top spacing. */
.program{
  width:max-content!important;
  max-width:100%!important;
  margin-top:auto!important;
  margin-left:auto!important;
  margin-right:auto!important;
  margin-bottom:0!important;
  padding:0!important;
  flex:0 0 auto!important;
}

/* Address: flexible top spacing; bottom distance is screen padding = 36px. */
.address-footer{
  width:100%!important;
  max-width:none!important;
  margin-top:auto!important;
  margin-left:0!important;
  margin-right:0!important;
  margin-bottom:0!important;
  padding:0!important;
  flex:0 0 auto!important;
}

/* Prevent old responsive rules from changing the fixed site padding. */
@media(max-width:390px),
       (max-height:760px),
       (max-height:650px){
  :root{--site-pad:36px!important}
  .screen2{
    padding-left:var(--site-pad)!important;
    padding-right:var(--site-pad)!important;
    padding-bottom:var(--site-pad)!important;
  }
  .salute{
    margin-top:var(--site-pad)!important;
  }
}

/* v54 — exact fitted display widths */
:root{
  --site-pad:36px!important;
}

/* HERO1 */
.hero1{
  top:72px!important;
  left:36px!important;
  right:36px!important;
  width:calc(100% - 72px)!important;
  max-width:none!important;
  margin:0!important;
}
.hero1-date{
  width:50%!important;
  max-width:50%!important;
  margin-left:0!important;
  margin-right:0!important;
  white-space:nowrap!important;
}
.hero1-title{
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}
.hero1-title span{
  width:max-content!important;
  max-width:none!important;
  white-space:nowrap!important;
}

/* SCREEN 2 exact 36px grid */
.screen2{
  padding-left:36px!important;
  padding-right:36px!important;
  padding-bottom:36px!important;
}
.screen2-shell{
  width:100%!important;
  max-width:none!important;
}

/* Salute target width = viewport - 72px */
.salute{
  width:100%!important;
  max-width:none!important;
  margin-top:36px!important;
  margin-left:0!important;
  margin-right:0!important;
}
.salute-line{
  width:max-content!important;
  max-width:none!important;
  white-space:nowrap!important;
}

/* invite-copy and program share exactly one measured width */
.invite-copy,
.program{
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

/* Divider before address */
.address-footer{
  position:relative!important;
  padding-top:18px!important;
}
.address-footer::before{
  content:""!important;
  position:absolute!important;
  top:0!important;
  left:calc(50% - 50vw)!important;
  width:100vw!important;
  height:1px!important;
  background:rgba(247,244,237,.09)!important;
  pointer-events:none!important;
}

/* Address target width = viewport - 72px */
.address-footer,
.address-footer .address,
.address-footer .address a{
  width:100%!important;
  max-width:none!important;
}
.address-line{
  display:block!important;
  width:max-content!important;
  max-width:none!important;
  white-space:nowrap!important;
}

/* v55 — centered boxes + shared program time column */
:root{
  --site-pad:36px!important;
  --program-time-pad:18px;
}

/* SALUTE: no top margin; box centered in usable width */
.salute{
  width:calc(100% - 72px)!important;
  max-width:none!important;
  margin-top:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
  text-align:left!important;
}
.salute-line{
  display:block!important;
  width:max-content!important;
  max-width:none!important;
  white-space:nowrap!important;
}

/* PROGRAM: one shared first-column width for every row.
   JS sets --program-time-col = widest program-time + standard padding. */
.program{
  --program-time-col:88px;
}
.program-row{
  grid-template-columns:var(--program-time-col) minmax(0,1fr)!important;
  column-gap:0!important;
  width:100%!important;
  align-items:center!important;
}
.program-time{
  width:max-content!important;
  max-width:100%!important;
  white-space:nowrap!important;
}
.program-text{
  min-width:0!important;
  width:100%!important;
}

/* ADDRESS: centered box in usable width */
.address-footer{
  width:calc(100% - 72px)!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}
.address-footer .address{
  width:100%!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:left!important;
}
.address-footer .address a{
  width:100%!important;
  max-width:none!important;
  align-items:flex-start!important;
}

/* Override earlier 36px salute top-margin on responsive rules too */
@media(max-width:390px),
       (max-height:760px),
       (max-height:650px){
  .salute{
    margin-top:0!important;
  }
}


/* v56 — exact 36px viewport grid */
:root{
  --site-pad:36px!important;
  --site-w:min(100vw,520px);
  --usable-w:calc(var(--site-w) - 72px);
}

/* SCREEN 1 */
.hero1{
  top:0!important;
  margin-top:0!important;
  left:36px!important;
  right:36px!important;
  width:var(--usable-w)!important;
  max-width:var(--usable-w)!important;
}

/* SCREEN 2 */
.section.screen2{
  padding-top:36px!important;
  padding-right:36px!important;
  padding-bottom:36px!important;
  padding-left:36px!important;
}

/* Exact common width: invite / program / salute lines / address lines */
.invite-copy,
.program,
.salute,
.salute-line{
  width:var(--usable-w)!important;
  max-width:var(--usable-w)!important;
  box-sizing:border-box!important;
}

.invite-copy,
.program,
.salute{
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Footer has 24px inner padding, while its inner address still lands
   exactly on the same 36px site grid. */
.address-footer{
  width:calc(100% + 48px)!important;
  max-width:none!important;
  margin-left:-24px!important;
  margin-right:-24px!important;
  padding:24px!important;
  box-sizing:border-box!important;
}

.address-footer .address,
.address-footer .address a,
.address-line{
  width:var(--usable-w)!important;
  max-width:var(--usable-w)!important;
  box-sizing:border-box!important;
}

.address-footer .address{
  margin-left:auto!important;
  margin-right:auto!important;
}

.address-line{
  display:block!important;
  white-space:nowrap!important;
}

/* Preserve exact values on short/narrow devices */
@media(max-width:390px),
       (max-height:760px),
       (max-height:650px){
  .section.screen2{
    padding-top:36px!important;
    padding-right:36px!important;
    padding-bottom:36px!important;
    padding-left:36px!important;
  }
  .hero1{
    top:0!important;
    margin-top:0!important;
  }
}


/* v57 — hero top rhythm + exact title fit + gothic program text */
.hero1{
  top:0!important;
  margin-top:36px!important;
}

.hero1-title{
  width:calc(100vw - 72px)!important;
  max-width:calc(100vw - 72px)!important;
  margin-left:0!important;
  margin-right:0!important;
}

.hero1-title span{
  display:block!important;
  width:max-content!important;
  max-width:none!important;
  white-space:nowrap!important;
}

.program-text{
  font-family:var(--display)!important;
  font-weight:400!important;
  font-style:normal!important;
}


/* v58 — exact viewport title widths + centered invite + fitted program text */
:root{
  --viewport-content-w:calc(100vw - 72px);
}

/* All key display blocks use the same exact working width */
.hero1,
.salute,
.address-footer,
.address-footer .address,
.address-footer .address a{
  width:var(--viewport-content-w)!important;
  max-width:var(--viewport-content-w)!important;
  box-sizing:border-box!important;
}

.hero1{
  left:36px!important;
  right:auto!important;
}

.salute{
  margin-left:auto!important;
  margin-right:auto!important;
}

.salute-line,
.address-line{
  display:block!important;
  width:var(--viewport-content-w)!important;
  max-width:var(--viewport-content-w)!important;
  box-sizing:border-box!important;
  white-space:nowrap!important;
}

.address-footer{
  margin-left:auto!important;
  margin-right:auto!important;
}
.address-footer .address{
  margin-left:auto!important;
  margin-right:auto!important;
}

/* invite-copy box centered */
.invite-copy{
  align-self:center!important;
  justify-self:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* program text: gothic, lowercase, single line */
.program-text{
  font-family:var(--display)!important;
  font-weight:400!important;
  font-style:normal!important;
  text-transform:lowercase!important;
  white-space:nowrap!important;
  min-width:0!important;
}


/* v59 — address spacing + max-fit program text + centered invite block */

/* Replace internal footer padding with external top spacing */
.address-footer{
  padding:0!important;
  margin-top:24px!important;
  box-sizing:border-box!important;
}

/* Keep address on the common 36px grid */
.address-footer,
.address-footer .address,
.address-footer .address a{
  width:calc(100vw - 72px)!important;
  max-width:calc(100vw - 72px)!important;
}

/* invite-copy: text stays left aligned, whole box is centered */
.invite-copy{
  width:max-content!important;
  max-width:calc(100vw - 72px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  align-self:center!important;
  align-items:flex-start!important;
  text-align:left!important;
}
.invite-copy .invite-line{
  width:auto!important;
  max-width:100%!important;
  text-align:left!important;
}

/* program text remains gothic/lowercase; JS will fit each row independently */
.program-text{
  font-family:var(--display)!important;
  font-weight:400!important;
  font-style:normal!important;
  text-transform:lowercase!important;
  white-space:nowrap!important;
  overflow:visible!important;
}


/* v60 — full-width hero date + zero footer padding + divider centered in gap */
.hero1-date{
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  white-space:nowrap!important;
}

/* Footer has no internal padding */
.address-footer{
  padding:0!important;
  margin-top:24px!important;
  position:relative!important;
}

/* Second divider: exactly between program and address */
.address-footer::before{
  content:""!important;
  position:absolute!important;
  top:-12px!important;
  left:calc(50% - 50vw)!important;
  width:100vw!important;
  height:1px!important;
  background:rgba(247,244,237,.09)!important;
  pointer-events:none!important;
}

/* Keep address content on the working grid */
.address-footer,
.address-footer .address,
.address-footer .address a{
  box-sizing:border-box!important;
}


/* v61 — uniform program type + evenly distributed program rows + exact address width */

/* Requested salutation spacing */
.salute-line:nth-child(2){
  margin-top:.48em!important;
}

/* Program is a vertical distribution block with equal spacing between rows */
.program{
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  gap:0!important;
  width:calc(100vw - 72px)!important;
  max-width:calc(100vw - 72px)!important;
  min-height:clamp(150px,22dvh,220px)!important;
}

.program-row{
  flex:0 0 auto!important;
  width:100%!important;
  display:grid!important;
  grid-template-columns:var(--program-time-col) minmax(0,1fr)!important;
  align-items:center!important;
  padding:0!important;
}

/* One common font size for ALL program text rows.
   JS calculates the largest common size that fits every second column. */
.program-text{
  font-family:var(--display)!important;
  font-weight:400!important;
  font-style:normal!important;
  text-transform:lowercase!important;
  white-space:nowrap!important;
  overflow:visible!important;
  line-height:1!important;
}

/* Both address lines share the exact usable width. */
.address-footer,
.address-footer .address,
.address-footer .address a,
.address-line{
  width:calc(100vw - 72px)!important;
  max-width:calc(100vw - 72px)!important;
}

.address-line{
  display:block!important;
  white-space:nowrap!important;
}


/* v62 — exact invite typography + program vertical margin */
.invite-copy{
  font-size:clamp(2.2rem,min(7.1vw,4.0dvh),3rem)!important;
}

.program{
  margin-bottom:auto!important;
}


/* v63 — final program copy + vertical margins */
.program{
  margin-bottom:auto!important;
}

.invite-copy{
  margin-bottom:0!important;
}


/* v64 — stable mobile viewport composition
   Internal layout is based on svh so browser chrome show/hide does not reflow it.
   The section background can still fill the current dynamic viewport. */
:root{
  --stable-screen-h:100svh;
}

/* Background follows current browser viewport, internal composition does not. */
.section.screen2{
  height:100dvh!important;
  min-height:100svh!important;
  padding:36px!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  overflow:hidden!important;
}

/* Stable design canvas: always the small/safe viewport minus fixed padding. */
.screen2-shell{
  width:100%!important;
  height:calc(100svh - 72px)!important;
  min-height:calc(100svh - 72px)!important;
  max-height:calc(100svh - 72px)!important;
  flex:0 0 calc(100svh - 72px)!important;
}

/* Remove active dynamic-height dependencies from second-screen typography/rhythm. */
.invite-copy{
  font-size:clamp(2.2rem,min(7.1vw,4.0svh),3rem)!important;
}

.program{
  min-height:clamp(150px,22svh,220px)!important;
}

/* The stable canvas remains identical when browser bars animate. */
@supports not (height:100svh){
  .screen2-shell{
    height:calc(100vh - 72px)!important;
    min-height:calc(100vh - 72px)!important;
    max-height:calc(100vh - 72px)!important;
    flex-basis:calc(100vh - 72px)!important;
  }
}


/* v65 — hard horizontal geometry lock.
   Never use viewport width for elements nested inside the 520px design canvas. */
html,
body{
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
}

body{
  display:flex!important;
  justify-content:center!important;
}

main{
  width:100%!important;
  max-width:520px!important;
  margin:0 auto!important;
  overflow-x:hidden!important;
  overflow-y:visible!important;
}

/* HERO is measured from the actual design canvas. */
.hero1{
  left:36px!important;
  right:36px!important;
  width:auto!important;
  max-width:none!important;
  margin-top:36px!important;
}

/* screen2 owns the 36px horizontal grid; children therefore use 100%. */
.section.screen2{
  width:100%!important;
  max-width:100%!important;
  padding:36px!important;
  box-sizing:border-box!important;
  overflow-x:hidden!important;
}

.screen2-shell{
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  box-sizing:border-box!important;
  align-items:stretch!important;
}

.salute,
.program,
.address-footer{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

.salute{
  margin-left:0!important;
  margin-right:0!important;
}

.salute-line,
.address-line{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  white-space:nowrap!important;
}

/* Center the address block itself, keep its text left aligned. */
.address-footer{
  align-self:center!important;
  margin-left:0!important;
  margin-right:0!important;
  padding:0!important;
}

.address{
  width:100%!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  align-self:center!important;
  text-align:left!important;
  box-sizing:border-box!important;
}

.address-footer .address a{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

/* invite-copy: centered box, left-aligned content */
.invite-copy{
  width:max-content!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  align-self:center!important;
  align-items:flex-start!important;
  text-align:left!important;
}

/* Full-canvas rules without 100vw, so they cannot create horizontal overflow. */
.screen-divider{
  width:calc(100% + 72px)!important;
  max-width:none!important;
  margin-left:-36px!important;
  margin-right:-36px!important;
}

.address-footer::before{
  left:-36px!important;
  width:calc(100% + 72px)!important;
}

/* Never let decorative or text layers expand the document width. */
.hero,
.scroll-scene,
.screen2,
.screen2-shell{
  overflow-x:hidden!important;
}


/* v66 — restore sticky video behavior after v65 horizontal lock */
html,
body{
  overflow-x:clip!important;
}

main{
  overflow:visible!important;
  overflow-x:visible!important;
  overflow-y:visible!important;
  transform:none!important;
  contain:none!important;
}

.scroll-scene{
  position:relative!important;
  overflow:visible!important;
  overflow-x:visible!important;
  overflow-y:visible!important;
  transform:none!important;
  contain:none!important;
  isolation:auto!important;
}

.scroll-scene > .hero{
  position:-webkit-sticky!important;
  position:sticky!important;
  top:0!important;
  height:100svh!important;
  width:100%!important;
  overflow:hidden!important;
  transform:none!important;
  contain:none!important;
}

.screen2{
  overflow-x:hidden!important;
}


/* v67 — hard reset of screen2 vertical behavior */
.section.screen2{
  position:relative!important;
  width:100%!important;
  height:100svh!important;
  min-height:100svh!important;
  max-height:100svh!important;
  padding:36px!important;
  margin:0!important;
  box-sizing:border-box!important;
  display:block!important;
  overflow:clip!important;
  overscroll-behavior:none!important;
}

.screen2-shell{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  overflow:visible!important;
  transform:none!important;
}

/* keep the salutation fully visible at the top of screen2 */
.salute{
  position:relative!important;
  flex:0 0 auto!important;
  width:100%!important;
  max-width:100%!important;
  margin-top:0!important;
  margin-bottom:0!important;
  padding:0!important;
  align-self:stretch!important;
  overflow:visible!important;
}
.salute-line{
  overflow:visible!important;
}

/* no child of screen2 is allowed to become its own scroll container */
.screen2-shell,
.salute,
.invite-copy,
.screen-divider,
.program,
.address-footer,
.address{
  overflow-y:visible!important;
  overflow-x:visible!important;
  overscroll-behavior:none!important;
}

/* keep full-width rules on the 36px content grid */
.screen-divider{
  width:calc(100% + 72px)!important;
  margin-left:-36px!important;
  margin-right:-36px!important;
}
.address-footer::before{
  left:-36px!important;
  width:calc(100% + 72px)!important;
}

@supports not (height:100svh){
  .section.screen2{
    height:100vh!important;
    min-height:100vh!important;
    max-height:100vh!important;
  }
}


/* v68 — vertical breathing room without nested scrolling */
:root{
  --screen2-gap-min:14px;
}

/* Stable one-screen canvas */
.section.screen2{
  height:100svh!important;
  min-height:100svh!important;
  max-height:100svh!important;
  padding:36px!important;
  overflow:clip!important;
}

.screen2-shell{
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  overflow:visible!important;
}

/* Slightly more restrained default sizes; JS only reduces further if height requires it. */
.salute{
  font-size:clamp(2.7rem,min(10.4vw,5.15svh),4.65rem)!important;
  line-height:.92!important;
}
.salute-line:nth-child(2){
  margin-top:.40em!important;
}
.salute-line:nth-child(3){
  margin-top:.06em!important;
}

.invite-copy{
  font-size:clamp(1.95rem,min(6.6vw,3.55svh),2.75rem)!important;
  line-height:1.01!important;
}

/* Let free height become breathing room instead of forcing oversized program height. */
.program{
  min-height:0!important;
  height:auto!important;
  flex:0 0 auto!important;
  justify-content:flex-start!important;
  margin-bottom:0!important;
}
.program-row{
  min-height:0!important;
  padding:0!important;
}
.program-row + .program-row{
  margin-top:clamp(10px,1.65svh,18px)!important;
}

/* Vertical rhythm is distributed across the major blocks. */
.invite-copy{
  margin-top:auto!important;
}
.screen-divider{
  margin-top:auto!important;
  margin-bottom:0!important;
}
.program{
  margin-top:auto!important;
}
.address-footer{
  margin-top:auto!important;
  margin-bottom:0!important;
}

/* Second divider remains centered between program and address. */
.address-footer::before{
  top:calc(-1 * clamp(7px,1.0svh,12px))!important;
}

/* Address gets a slightly tighter but still full-width display size. */
.address-line:first-child{
  line-height:.86!important;
}
.address-line:last-child{
  line-height:.96!important;
}


/* v68 — stable device profiles + automatic vertical fit */
:root{
  --s2-pad-y:36px;
  --s2-gap-min:16px;
  --s2-program-target:190px;
  --s2-program-h:190px;
  --s2-invite-size:clamp(2.2rem,min(7.1vw,4svh),3rem);
  --s2-program-scale:1;
}

/* Stable profile is chosen from screen.height by JS, not browser viewport height. */
html[data-s2-profile="compact"]{
  --s2-pad-y:18px;
  --s2-gap-min:7px;
  --s2-program-target:126px;
  --s2-invite-size:clamp(1.78rem,6.4vw,2.2rem);
}
html[data-s2-profile="small"]{
  --s2-pad-y:22px;
  --s2-gap-min:9px;
  --s2-program-target:138px;
  --s2-invite-size:clamp(1.9rem,6.6vw,2.35rem);
}
html[data-s2-profile="medium"]{
  --s2-pad-y:26px;
  --s2-gap-min:11px;
  --s2-program-target:152px;
  --s2-invite-size:clamp(2rem,6.8vw,2.5rem);
}
html[data-s2-profile="standard"]{
  --s2-pad-y:30px;
  --s2-gap-min:13px;
  --s2-program-target:166px;
  --s2-invite-size:clamp(2.1rem,7vw,2.7rem);
}
html[data-s2-profile="large"]{
  --s2-pad-y:33px;
  --s2-gap-min:15px;
  --s2-program-target:180px;
}
html[data-s2-profile="xl"]{
  --s2-pad-y:36px;
  --s2-gap-min:17px;
  --s2-program-target:196px;
}

/* Exactly one stable second screen. No nested scroll container. */
.section.screen2{
  width:100%!important;
  height:100svh!important;
  min-height:100svh!important;
  max-height:100svh!important;
  padding:var(--s2-pad-y) 36px!important;
  margin:0!important;
  box-sizing:border-box!important;
  display:block!important;
  overflow:clip!important;
  overscroll-behavior:none!important;
}

.screen2-shell{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  overflow:visible!important;
  transform:none!important;
}

/* Top block stays anchored and visible. */
.salute{
  flex:0 0 auto!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  line-height:.90!important;
}
.salute-line{
  overflow:visible!important;
}
.salute-line:nth-child(2){
  margin-top:.48em!important;
}

/* Centered box, left-aligned text. Its top gap is flexible. */
.invite-copy{
  flex:0 0 auto!important;
  width:max-content!important;
  max-width:100%!important;
  margin-top:auto!important;
  margin-right:auto!important;
  margin-bottom:0!important;
  margin-left:auto!important;
  padding:0!important;
  align-self:center!important;
  align-items:flex-start!important;
  text-align:left!important;
  font-size:var(--s2-invite-size)!important;
  line-height:.98!important;
}

/* First divider participates in the same flexible vertical rhythm. */
.screen-divider{
  flex:0 0 auto!important;
  margin-top:auto!important;
  margin-bottom:0!important;
}

/* Program receives a computed height. Rows distribute evenly inside it. */
.program{
  flex:0 0 var(--s2-program-h)!important;
  height:var(--s2-program-h)!important;
  min-height:0!important;
  max-height:var(--s2-program-h)!important;
  width:100%!important;
  margin-top:auto!important;
  margin-bottom:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  gap:0!important;
  overflow:visible!important;
}
.program-row{
  flex:0 0 auto!important;
  padding:0!important;
  min-height:0!important;
}
.program-time,
.program-text{
  line-height:.98!important;
}

/* Address stays at the bottom, with a flexible gap above it. */
.address-footer{
  flex:0 0 auto!important;
  margin-top:auto!important;
  margin-bottom:0!important;
  padding:0!important;
  overflow:visible!important;
}
.address{
  align-self:center!important;
  overflow:visible!important;
}
.address-line:first-child{
  line-height:.84!important;
}
.address-line:last-child{
  line-height:.92!important;
}

/* The second divider is positioned by JS at the midpoint of the actual free gap. */
.address-footer::before{
  top:var(--address-rule-top,-12px)!important;
}

/* Tight fallback if even the device profile is not enough. */
.screen2.is-tight{
  --s2-pad-y:14px;
  --s2-gap-min:5px;
}
.screen2.is-tight .salute{line-height:.84!important}
.screen2.is-tight .invite-copy{
  font-size:clamp(1.62rem,6vw,2.05rem)!important;
  line-height:.94!important;
}
.screen2.is-tight .program-time,
.screen2.is-tight .program-text{line-height:.92!important}
.screen2.is-tight .address-line:first-child{line-height:.78!important}
.screen2.is-tight .address-line:last-child{line-height:.86!important}

@supports not (height:100svh){
  .section.screen2{
    height:100vh!important;
    min-height:100vh!important;
    max-height:100vh!important;
  }
}

/* v69 — final mobile QA: safe bottom + balanced lower divider */
.section.screen2{
  padding-bottom:max(var(--s2-pad-y), calc(env(safe-area-inset-bottom,0px) + 16px))!important;
}

/* Keep layout geometry intact; only rebalance the perceived gap after the program. */
.address-footer::before{
  top:max(var(--address-rule-top,-14px), -14px)!important;
}

/* v70 — compact invitation typography + full-width safe address */
.section.screen2{
  padding-top:clamp(22px,3.2svh,30px)!important;
  padding-right:28px!important;
  padding-bottom:max(24px,calc(env(safe-area-inset-bottom,0px) + 20px))!important;
  padding-left:28px!important;
}

.screen2-shell{
  min-height:0!important;
}

.salute{
  line-height:.90!important;
}
.salute-line:nth-child(2){
  margin-top:.38em!important;
}
.salute-line:nth-child(3){
  margin-top:.03em!important;
}

.invite-copy{
  max-width:calc(100% - 16px)!important;
  line-height:.97!important;
}

/* Program uses natural height so the address cannot collide with the 22:00 row. */
.program{
  flex:0 0 auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin-top:auto!important;
  margin-bottom:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  gap:clamp(10px,1.25svh,14px)!important;
  overflow:visible!important;
}
.program-row + .program-row{
  margin-top:0!important;
}

/* Address occupies the whole safe content width and remains inside the bottom inset. */
.address-footer{
  flex:0 0 auto!important;
  width:100%!important;
  max-width:100%!important;
  margin-top:auto!important;
  margin-bottom:0!important;
  padding:0!important;
  display:flex!important;
  justify-content:flex-start!important;
  overflow:visible!important;
}
.address-footer::before{
  top:-10px!important;
}
.address-footer .address{
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  align-self:center!important;
  overflow:visible!important;
}
.address-footer .address a{
  width:100%!important;
  max-width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  overflow:visible!important;
}

/* v71.28 FINAL ADAPTIVE INVITATION SCREEN */
html,body{-webkit-text-size-adjust:none!important;text-size-adjust:none!important}
.screen2.v71-ready{
  --v71-side:38px;
  --v71-safe:calc(100% - 76px);
  width:100%!important;height:100svh!important;min-height:100svh!important;
  padding:36px var(--v71-side)!important;margin:0!important;overflow:hidden!important;
  background:var(--deep)!important;display:block!important
}
.v71-shell{
  width:100%;height:100%;min-height:0;display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  overflow:hidden;font-family:var(--display);color:var(--fg)
}
.v71-group{width:max-content;max-width:var(--v71-safe);margin-inline:auto;text-align:left;font-weight:400}
.v71-line{display:block;width:max-content;white-space:nowrap}
.v71-salute{line-height:.90;padding-bottom:clamp(34px,5svh,48px)}
.v71-salute .v71-line+.v71-line{margin-top:.035em}
.v71-initial{color:var(--accent)}
.v71-invite{line-height:.98}
.v71-invite .v71-gold{color:var(--accent)}
.v71-meta-zone{
  width:calc(100% + (var(--v71-side) * 2));margin-left:calc(var(--v71-side) * -1);
  min-height:0;display:flex;flex-direction:column;justify-content:space-evenly
}
.v71-divider{width:100%;height:1px;flex:0 0 1px;background:var(--line)}
.v71-meta{
  width:max-content;max-width:var(--v71-safe);margin-inline:auto;text-align:left;
  white-space:nowrap;line-height:.96;font-weight:400
}
.v71-date{color:var(--accent)}
.v71-address-wrap{width:100%}
.v71-address{width:max-content;max-width:var(--v71-safe);margin-inline:auto;text-align:left}
.v71-address a{display:block;color:inherit;text-decoration:none;border:0!important}
.v71-address p{display:block;width:max-content;margin:0;white-space:nowrap;font-weight:400}
.v71-city{line-height:.84;margin-bottom:8px!important;color:var(--accent)}
.v71-street{line-height:.96;color:var(--fg)}
@media(max-height:820px){
  .screen2.v71-ready{padding-top:30px!important;padding-bottom:30px!important}
  .v71-salute{padding-bottom:28px}
}

/* v71.29 — stronger top hero gradient, mirrored from bottom fade */
.hero::before{
  height:30svh!important;
  background:linear-gradient(
    0deg,
    rgba(4,18,36,0) 0%,
    rgba(4,18,36,.10) 28%,
    rgba(4,18,36,.24) 52%,
    rgba(4,18,36,.48) 74%,
    rgba(4,18,36,.82) 92%,
    rgba(4,18,36,1) 100%
  )!important;
}

/* v71.30 — extended top hero gradient.
   Same #041224 color and opacity ramp as the bottom fade, mirrored vertically;
   only the vertical reach is longer for stronger title/date legibility. */
.hero::before{
  height:44svh!important;
  background:linear-gradient(
    0deg,
    rgba(4,18,36,0) 0%,
    rgba(4,18,36,.18) 24%,
    rgba(4,18,36,.42) 48%,
    rgba(4,18,36,.70) 74%,
    rgba(4,18,36,.92) 92%,
    rgba(4,18,36,1) 100%
  )!important;
}

/* v71.31 — instant static first frame before interaction.
   The WebP is the actual first frame extracted from oktoberfest-scroll.mp4. */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:#041224 url("./hero-first-frame.webp") center center / cover no-repeat;
  opacity:1;
  transition:opacity .22s ease;
  will-change:opacity;
}

/* Keep the static poster until the video has usable pixel data.
   Gradients stay above it (z=3), hero typography stays above both (z=5). */
.hero.video-live::after{
  opacity:0;
}

/* The poster is the first visual layer; video remains ready underneath. */
.hero-video{
  z-index:1!important;
}

/* v71.32 — real DOM poster layer for iOS first paint.
   This exists in HTML before JS and therefore does not wait for interaction. */
.hero-poster{
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  pointer-events:none!important;
  background-color:#041224!important;
  background-image:url("./hero-first-frame.webp")!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:cover!important;
  opacity:1!important;
  transition:opacity .22s ease!important;
  will-change:opacity;
}

.hero.video-live .hero-poster{
  opacity:0!important;
}

/* Gradients and typography remain above the poster. */
.hero::before,
.hero-bottom-fade{
  z-index:3!important;
}
.hero1,
.scroll-hint{
  z-index:5!important;
}
/* v71.32 deploy sync */