/* ==========================================================================
   Rafayel & Narine — animated invitation, "Tuff & Stone"

   Mobile keeps the portrait film centered. The agenda and RSVP become
   full-bleed sections, while large screens use the same editorial split as
   the scroll invitation. Marcellus/Noto Serif carries the display text and
   Manrope carries the interface text in both versions.
   ========================================================================== */

:root {
  --ground:   #DFD2BA;
  --surface:  #E8DFCF;
  --ink:      #51483B;
  --stone:    #786D5D;
  --tuff:     #A45740;
  --tuff-deep:#843F2F;
  --blue:     #718C9B;
  --gold:     #D0AA57;
  --reply:    #51483B;
  --on-tuff:  #FFF7E9;
  --rule:     rgba(81, 72, 59, .24);
  --edge:     rgba(81, 72, 59, .42);
  --error-bg: #F3E3DC;  --error-fg: #8A2E1E;
  --ok-bg:    #E1EADD;  --ok-fg:    #2F4F2C;

  --display: "Marcellus", "Trajan Pro", Georgia, serif;
  --text:    "Manrope", Arial, sans-serif;

  /* The column, in two sizes.
     Cover: the painting plus the names and button under it fit one screen.
     Playing: the names fold away and the film grows to the full screen
     height (or width, on a narrow phone), and stays that size — the
     programme and reply appear under it at the same width.
     svh is the height with the browser's toolbars showing (about 664px on
     an iPhone in Safari), so neither size ever hides under them. */
  --top: 12px;
  --side: 12px;
  --cover-h: 140px;
  --lang-h: 32px;       /* the language switch above the film, with its gap */
  --vh: 1vh;
  --col-by-width: calc(100vw - 2 * var(--side));
  --col-cover: max(min(270px, var(--col-by-width)),
                   min(var(--col-by-width), calc((100 * var(--vh) - var(--top) - var(--lang-h) - var(--cover-h)) * 9 / 16), 520px));
  --col-play:  max(min(270px, var(--col-by-width)),
                   min(var(--col-by-width), calc((100 * var(--vh) - 2 * var(--top)) * 9 / 16), 560px));
  --col: var(--col-cover);
}
@supports (height: 1svh) {
  :root { --vh: 1svh; }
}
/* Armenian display copy follows the scroll invitation. */
html:lang(hy) {
  --display: "Noto Serif Armenian", Georgia, serif;
}
/* Armenian capitals run about a quarter wider than Marcellus: the cover's
   one-line names, date and button are set smaller and tracked tighter so they
   still fit the narrowest column (270px). */
html:lang(hy) .cover__names { font-size: max(20px, calc(var(--col) * .074)); letter-spacing: .06em; }
html:lang(hy) .cover__when  { font-size: 15px; letter-spacing: .06em; }
html:lang(hy) .cover__open  { letter-spacing: .08em; }
html:lang(hy) .rsvp__done-title { font-size: min(23px, calc(var(--col) * .078)); letter-spacing: .08em; }
html:lang(hy) .heading { font-size: clamp(2.4rem, 11.5vw, 3.5rem); line-height: 1.08; }
/* Noto Serif Armenian has no italic; a slanted imitation reads poorly. */
html:lang(hy) .rsvp__closing, html:lang(hy) .note { font-style: normal; }
@media (min-height: 760px) and (min-width: 700px) {
  :root { --top: 28px; }
}
.is-opened { --col: var(--col-play); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ground); }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1rem/1.5 var(--text);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
}
img, video { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.column {
  width: var(--col);
  margin: 0 auto;
  padding: var(--top) 0;
  display: flex;
  flex-direction: column;
}

/* The language switch: EN | ՀԱՅ above the film's top-right corner, off the
   picture. It goes while the film plays, so the film keeps the full height,
   and comes back when the film ends. */
.lang {
  align-self: flex-end;
  display: flex;
  height: calc(var(--lang-h) - 6px);
  margin-bottom: 6px;
  border: 1px solid var(--edge);
}
.lang__opt {
  display: grid; place-items: center;
  position: relative;
  min-width: 46px; padding: 0 10px;
  font-family: var(--text); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; line-height: 1;
  color: var(--stone); text-decoration: none;
}
.lang__opt:lang(hy) { font-family: "Noto Serif Armenian", Georgia, serif; font-size: 13px; }
a.lang__opt::after { content: ""; position: absolute; inset: -9px -2px; }   /* a finger-sized target */
.lang__opt.is-current { background: var(--tuff); color: var(--on-tuff); }
a.lang__opt:hover { color: var(--ink); }
.is-filming .lang { display: none; }

/* The programme and reply stay hidden until the film has been watched to the
   end on this visit, then rise in under it. */
.details {
  width: 100vw;
  margin-left: calc((var(--col) - 100vw) / 2);
  padding-bottom: 0;
}
.details[hidden] { display: none; }
.details.is-arriving { opacity: 0; transform: translateY(14px); }
.details { transition: opacity .8s ease, transform .8s ease; }

/* --- Headings shared by the programme and the reply ---------------------- */

.heading {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.9rem, 14vw, 4.3rem);
  letter-spacing: -.04em;
  text-align: left;
  line-height: 1.05;
}
.section-heading { display: grid; gap: 18px; }
.kicker {
  color: var(--gold); font-size: .66rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
}
.label {
  font-family: var(--text);
  font-weight: 600;
  font-size: .62rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--stone);
}

/* --- The film and its cover ---------------------------------------------- */

.film__screen {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--ground);
  cursor: pointer;
}
.is-started .film__screen { cursor: default; }
.film__video, .film__loop {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* The dance loop waits, invisible, on top of the film; when the film ends it
   is shown on its first frame, which is the film's last, so the switch can't
   be seen. */
.film__loop { opacity: 0; pointer-events: none; }
.is-looping .film__loop { opacity: 1; }

/* Round, translucent controls that sit on the painting. */
.film__sound, .film__replay, .film__skip {
  position: absolute; border: 0; cursor: pointer;
  background: rgba(24, 18, 14, .58); color: #F6F2EA;   /* no backdrop blur: phones re-blur it on every video frame */
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
}
.film__sound { top: 10px; right: 10px; }
.film__replay { top: 10px; left: 10px; }   /* top corners stay clear of the details card */
.film__skip { bottom: 14px; right: 10px; } /* only while the film plays; clear of the progress line */
.film__sound svg, .film__replay svg, .film__skip svg { width: 19px; height: 19px; fill: currentColor; }
.film__sound .icon-off { display: none; }
.film__sound[aria-pressed="false"] .icon-on { display: none; }
.film__sound[aria-pressed="false"] .icon-off { display: block; }
.film__sound.is-asking { box-shadow: 0 0 0 2px #F6F2EA; }

.film__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .26); }
.film__progress i { display: block; height: 100%; width: 100%; background: rgba(255, 255, 255, .9); transform: scaleX(0); transform-origin: left; }
.film__progress[hidden], .film__sound[hidden], .film__replay[hidden], .film__skip[hidden] { display: none; }

.film__wait {
  position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; border: 2px solid rgba(246, 242, 234, .45); border-top-color: #F6F2EA;
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
/* spinning only while shown: an endless animation over the video costs frames */
.is-waiting .film__wait { opacity: 1; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.cover {
  height: var(--cover-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 14px;
  text-align: center;
  overflow: hidden;
}
/* On the tap the names go and the film takes its full size at once: animating
   the width resized the video on every frame just as it started to play. */
.is-started .cover { display: none; }
.cover__names {
  font-family: var(--display);
  font-weight: 400;
  font-size: max(24px, calc(var(--col) * .095));
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
}
.cover__when {
  margin-top: 6px;
  font-size: 16px;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stone);
}
.cover__open {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border: 0;
  background: var(--tuff);
  color: var(--on-tuff);
  /* "Open the invitation" must fit the narrowest cover (270px, an iPhone in
     Safari with its toolbars showing) on one line. */
  font-size: min(17.5px, calc(var(--col) * .056));
  font-weight: 500;
  letter-spacing: .1em;
  white-space: nowrap;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease;
}
.cover__open svg { width: 19px; height: 19px; fill: currentColor; flex: none; }
.cover__open:hover { background: var(--tuff-deep); }

/* --- Programme ------------------------------------------------------------ */

.programme { padding: 76px 22px 90px; display: grid; gap: 28px; text-align: left; background: var(--ground); }
.programme > * { width: min(100%, 650px); margin-inline: auto; }
.programme .kicker { color: var(--tuff); }
.event { display: grid; gap: 3px; padding: 26px 0; border-top: 1px solid var(--rule); }
.event:last-of-type { border-bottom: 1px solid var(--rule); }
.event .label { color: var(--tuff); }
.event__time { color: var(--blue); font-family: var(--display); font-size: clamp(2.5rem, 4vw, 4rem); line-height: 1; margin-top: 9px; }
.event__venue { margin-top: 7px; font-family: var(--display); font-size: 1.3rem; line-height: 1.2; }
.event__place { font-size: .78rem; color: var(--stone); }
/* Google Maps, under each place: outlined, like the form's controls, so it is
   plainly tappable without competing with the reply button. */
.map {
  justify-self: start;
  margin-top: 18px;
  display: inline-flex; align-items: center; gap: 4px;
  height: auto; padding: 0;
  border: 0; color: var(--tuff);
  font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: color .2s ease;
}
.map__arrow { width: 13px; height: 13px; flex: none; overflow: visible; }
.map:hover { color: var(--blue); }
html:lang(hy) .map { letter-spacing: .08em; }
.rule { display: none; }
.note { font-style: italic; font-size: 22.5px; line-height: 1.45; text-wrap: balance; padding: 0 6px; }

/* --- Reply ---------------------------------------------------------------- */

.rsvp { display: grid; grid-template-columns: 1fr; overflow: hidden; color: var(--on-tuff); background: var(--reply); }
.rsvp__art { position: relative; overflow: hidden; background: var(--reply); }
.rsvp__art img { width: 100%; height: auto; object-fit: contain; }
.rsvp__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, var(--reply) 100%); }
.rsvp__content { min-height: auto; display: flex; flex-direction: column; justify-content: center; padding: 76px 22px 92px; }
.rsvp__content > * { width: min(100%, 650px); margin-inline: auto; }
.rsvp .heading { color: var(--on-tuff); }
.rsvp .label, .rsvp .kicker { color: var(--gold); }
.rsvp__form { display: grid; gap: 30px; margin-top: 54px; }
.field { display: grid; gap: 6px; min-width: 0; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.input {
  width: 100%; height: 54px; padding: 0;
  background: transparent; border: 0; border-bottom: 1px solid rgba(255,247,233,.38); border-radius: 0;
  font-size: 1.1rem; color: var(--on-tuff);
}
.input::placeholder { color: rgba(255,247,233,.42); opacity: 1; }

.stepper {
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; height: 56px;
  background: var(--surface); border: 1px solid var(--edge);
}
.stepper__btn { height: 100%; border: 0; background: none; font-size: 26px; cursor: pointer; color: var(--ink); }
.stepper__btn[disabled] { opacity: .35; cursor: not-allowed; }
.stepper__value { text-align: center; font-size: 24px; }

.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.segmented__btn {
  min-height: 54px; padding: 10px 14px; background: transparent; border: 1px solid rgba(255,247,233,.28); cursor: pointer;
  font-size: .78rem; font-weight: 400; letter-spacing: .04em; color: var(--on-tuff);
  transition: background-color .2s ease, color .2s ease;
}
.segmented__btn[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.segmented__btn:disabled { cursor: default; opacity: .36; }
.party-field.is-disabled { opacity: .44; }

.submit {
  min-height: 54px; margin-top: 4px; padding: 16px 26px; border: 0; background: var(--tuff); color: var(--on-tuff); cursor: pointer;
  white-space: nowrap;   /* one line: eases down on a narrow column instead of wrapping */
  font-size: .65rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .2s ease;
}
.submit:hover { background: var(--blue); }
.submit[disabled] { cursor: progress; opacity: .75; }
.submit__spinner {
  display: none; width: 14px; height: 14px; margin-right: 10px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: spin .7s linear infinite;
}
.submit.is-busy .submit__spinner { display: inline-block; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rsvp__status { display: none; padding: 12px 14px; font-size: .8rem; line-height: 1.45; }
.rsvp__status.is-visible { display: block; }
.rsvp__status.is-error   { background: var(--error-bg); color: var(--error-fg); border: 1px solid var(--error-fg); }
.rsvp__status.is-success { background: var(--ok-bg);    color: var(--ok-fg);    border: 1px solid var(--ok-fg); }

.rsvp__done { display: none; text-align: center; gap: 8px; }
.rsvp__done.is-visible { display: grid; }
.rsvp__done-title { font-family: var(--display); font-size: 27.5px; letter-spacing: .16em; text-transform: uppercase; }
.rsvp__closing { text-align: center; font-style: italic; font-size: 22.5px; }
.is-hidden { display: none !important; }

/* On phones, the tap changes the portrait player from its framed cover size
   to the entire visible viewport. Cover crops the narrow sides of the 9:16
   movie on taller phones, which removes letterboxing without stretching it. */
@media (max-width: 959px) {
  body.is-filming { overflow: hidden; }
  body.is-filming .column { width: 100vw; height: calc(100 * var(--vh)); height: 100svh; padding: 0; }
  body.is-filming .film {
    position: fixed; z-index: 1000; inset: 0; margin: 0;
    width: 100vw; height: calc(100 * var(--vh)); height: 100svh;
    background: #201c18;
  }
  body.is-filming .film__screen { width: 100vw; height: calc(100 * var(--vh)); height: 100svh; }
  body.is-filming .film__screen { aspect-ratio: auto; background: #201c18; }
  body.is-filming .film__video,
  body.is-filming .film__loop { object-fit: cover; object-position: center; }
  body.is-filming .film__sound { top: calc(env(safe-area-inset-top, 0px) + 10px); right: calc(env(safe-area-inset-right, 0px) + 10px); }
  body.is-filming .film__replay { top: calc(env(safe-area-inset-top, 0px) + 10px); left: calc(env(safe-area-inset-left, 0px) + 10px); }
  body.is-filming .film__skip { bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); right: calc(env(safe-area-inset-right, 0px) + 10px); }
}

/* The large-screen layout mirrors the editorial scroll invitation: identity
   on the left, the portrait film on the right, a compact horizontal agenda,
   then the couple painting fading into the RSVP. The movie remains 9:16 and
   uses contain so no animation frame is cropped on a wide display. */
@media (min-width: 960px) {
  :root,
  .is-opened { --top: 0px; --side: 0px; --col: 100vw; }

  .column { width: 100%; margin: 0; padding: 0; }
  .lang {
    position: absolute; z-index: 20; top: 18px; right: 22px;
    height: 38px; margin: 0; border-color: rgba(255,247,233,.3);
    background: rgba(81,72,59,.78);
  }
  .lang__opt { min-width: 44px; color: var(--on-tuff); }
  .lang__opt.is-current { color: var(--ink); background: var(--ground); }
  a.lang__opt:hover { color: var(--gold); }

  .film {
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    background: var(--reply);
  }
  .film__screen {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: 100svh;
    aspect-ratio: auto;
    background: var(--reply);
  }
  .film__video,
  .film__loop { object-fit: contain; object-position: center; }

  .cover,
  .is-started .cover {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 72px 58px 66px;
    color: var(--on-tuff);
    background: var(--reply);
    text-align: left;
  }
  .cover__names {
    max-width: 100%;
    font-size: clamp(3.1rem, 4.5vw, 4.45rem);
    line-height: .95;
    letter-spacing: -.045em;
    white-space: normal;
    text-wrap: balance;
  }
  html:lang(hy) .cover__names {
    font-size: clamp(2.9rem, 4.15vw, 4.05rem);
    line-height: 1;
    letter-spacing: -.04em;
  }
  .cover__when {
    margin-top: 42px;
    color: var(--gold);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .18em;
  }
  .cover__open {
    margin-top: 48px;
    padding: 16px 24px;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .18em;
  }
  .is-started .cover__open { visibility: hidden; pointer-events: none; }

  .details { width: 100%; margin-left: 0; }
  .programme {
    grid-template-columns: minmax(230px, .8fr) repeat(2, minmax(0, 1fr));
    gap: 44px;
    align-items: start;
    padding: 70px 60px 78px;
  }
  .programme > * { width: auto; margin: 0; }
  .programme .section-heading { padding-right: 12px; }
  .programme .heading { font-size: clamp(2.5rem, 3.4vw, 3.75rem); }
  html:lang(hy) .programme .heading { font-size: clamp(2.3rem, 3vw, 3.3rem); line-height: 1.06; }
  .event {
    min-height: 100%;
    padding: 5px 0 0 30px;
    border-top: 0;
    border-left: 1px solid var(--rule);
  }
  .event:last-of-type { border-bottom: 0; }
  .event__time { font-size: clamp(2.6rem, 3.7vw, 3.7rem); }

  .rsvp { grid-template-columns: .85fr 1.15fr; align-items: stretch; }
  .rsvp__art img { width: 100%; height: 100%; object-fit: contain; object-position: center top; }
  .rsvp__art::after {
    background:
      linear-gradient(90deg, transparent 62%, var(--reply) 100%),
      linear-gradient(180deg, transparent 74%, var(--reply) 100%);
  }
  .rsvp__content { min-height: 0; padding: 48px 58px 56px; }
  .rsvp__content > * { width: min(100%, 650px); margin-inline: 0; }
  .rsvp .heading { font-size: clamp(3.2rem, 4.5vw, 4.6rem); }
  html:lang(hy) .rsvp .heading { font-size: clamp(2.9rem, 4vw, 4rem); line-height: 1.06; }
  .rsvp__form { gap: 23px; margin-top: 38px; }
  .submit { justify-self: start; min-width: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  .film__wait { animation: none; }
}

/* Buffer feedback only appears while the picture is held. */
.film__status { position: absolute; left: 18px; right: 18px; top: 57%; margin: 0;
  padding: 10px 14px; border-radius: 6px; color: #F6F2EA;
  background: rgba(24,18,14,.78); text-align: center; font-size: 18px; }
.film__resume { position: absolute; left: 50%; top: 68%; transform: translateX(-50%);
  padding: 12px 20px; border: 1px solid #F6F2EA; border-radius: 4px;
  background: #725338; color: #F6F2EA; cursor: pointer; font-size: 18px; }
.film__status[hidden], .film__resume[hidden] { display: none; }