@font-face {
  font-family: "Duneon";
  src: url("assets/fonts/Duneon.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Arka Sans";
  src: url("assets/fonts/arkaSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --red: #fe0501;
  --paper: #f2f2f2;
  color-scheme: light;
  font-family: "Arka Sans", Arial, sans-serif;
  color: var(--red);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, p { margin: 0; }
body { background: var(--paper); }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.frame {
  width: min(580px, 100%);
  margin-inline: auto;
  container-type: inline-size;
  background: var(--paper);
  min-height: 100vh;
  min-height: 100dvh;
}

.home, .invite, .reply {
  --u: calc(100cqi / 580);
  --scale: calc(100cqi / 580px);
}

.home {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: calc(30 * var(--u));
}

.masthead { margin-inline: calc(30 * var(--u)); }
.logo-link { display: block; color: inherit; }
.masthead-logo { margin-top: calc(25 * var(--u)); }
.afisha-slot {
  position: relative;
  left: calc(0.23 * var(--u));
  width: calc(378.451 * var(--u));
  height: calc(70.1138 * var(--u));
  margin: calc(15.9145 * var(--u)) auto 0;
}
.afisha-slot img {
  display: block;
  transform: scale(var(--scale));
  transform-origin: top left;
}

.event-list {
  margin: calc(244 * var(--u)) calc(30 * var(--u)) 0;
}
.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: calc(355 * var(--u));
  padding-block: calc(25 * var(--u));
  text-align: center;
}
.card-title {
  position: relative;
  left: calc(0.5 * var(--u));
  min-height: calc(126 * var(--u));
  padding-inline: calc(10 * var(--u));
  font-family: "Duneon", sans-serif;
  font-size: calc(70 * var(--u));
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.card-title span, .card-schedule span { display: block; }
.card-schedule {
  margin-top: calc(21 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: 1;
  letter-spacing: -0.02em;
}
.card-note { margin-top: calc(22 * var(--u)); font-size: calc(20 * var(--u)); line-height: 1.1; letter-spacing: -0.02em; }
.register-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(42 * var(--u));
  margin-top: calc(76 * var(--u));
  padding: calc(8 * var(--u));
  border: calc(1.5 * var(--u)) solid var(--red);
  font-size: calc(20 * var(--u));
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border-radius: 0;
}
.register-link:disabled { cursor: default; }
.event-card .card-divider { position: absolute; left: 0; bottom: 0; }
.empty-events {
  margin: calc(244 * var(--u)) calc(30 * var(--u)) 0;
  padding-block: calc(25 * var(--u));
  font-size: calc(30 * var(--u));
  line-height: 1.1;
  text-align: center;
}
.home-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: calc(12 * var(--u));
  margin: auto calc(30 * var(--u)) 0;
  padding-top: calc(127 * var(--u));
  padding-bottom: calc(24 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.footer-about { width: calc(192 * var(--u)); text-align: left; }
.footer-address { text-align: right; }

.invite {
  display: flex;
  flex-direction: column;
  padding-top: calc(30 * var(--u));
}

.hero {
  position: relative;
  width: calc(520 * var(--u));
  height: calc(449 * var(--u));
  margin-inline: auto;
}

.hero-photo {
  position: absolute;
  left: calc(-292 * var(--u));
  top: calc(-197 * var(--u));
  width: calc(981.3454 * var(--u));
  height: calc(1292 * var(--u));
  object-fit: cover;
  /* The original Figma mask, in its original slot within the photograph. */
  mask-image: url("assets/hero-mask.svg");
  mask-repeat: no-repeat;
  mask-position: calc(292 * var(--u)) calc(197 * var(--u));
  mask-size: calc(520 * var(--u)) calc(449 * var(--u));
}

.hero-crop { position: absolute; inset: 0; overflow: hidden; }
.hero-photo.standard-photo { left: 0; top: 0; width: 100%; height: 100%; mask-image: none; }

/* Keep exported SVGs at their intrinsic dimensions; scale their wrappers. */
.rule {
  position: relative;
  width: calc(520 * var(--u));
  height: 0;
  margin-inline: auto;
}

.rule img {
  position: absolute;
  left: 0;
  top: calc(-0.75 * var(--u));
  display: block;
  transform: scale(var(--scale));
  transform-origin: top left;
}

.hero-rule-top { position: absolute; left: 0; }
.hero-rule-top { top: 0; }

.title {
  margin: calc(25 * var(--u)) calc(10 * var(--u)) 0;
  text-align: center;
}

.title h1, .reply h1 {
  min-height: calc(239 * var(--u));
  font-family: "Duneon", sans-serif;
  font-size: calc(70 * var(--u));
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}

.title h1 span, .details span, .reply p span { display: block; }
.title-rule { margin-top: calc(12 * var(--u)); }

.details {
  display: flex;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  margin: calc(24 * var(--u)) calc(29 * var(--u)) 0 calc(28 * var(--u));
  font-size: calc(30 * var(--u));
  line-height: 1;
  letter-spacing: -0.02em;
}

.address { text-align: right; }

.description {
  width: calc(505 * var(--u));
  margin: calc(67 * var(--u)) auto 0;
  position: relative;
  left: calc(0.5 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
}

.description p { white-space: pre-line; }
.description p + p { margin-top: 1.1em; }
.details p { min-width: 0; overflow-wrap: anywhere; }

.signup {
  margin: calc(113 * var(--u)) calc(30 * var(--u)) 0;
  font-size: calc(20 * var(--u));
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.name-field { position: relative; }
.name-field input {
  display: block;
  width: 100%;
  height: calc(34 * var(--u));
  padding: 0 0 calc(12 * var(--u));
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
  caret-color: var(--red);
}

.name-field input::placeholder { color: var(--red); opacity: 1; }
.name-rule { position: absolute; bottom: 0; left: 0; pointer-events: none; }

.actions {
  display: flex;
  gap: calc(6 * var(--u));
  margin-top: calc(30 * var(--u));
}

.actions button {
  flex: 1 1 0;
  min-width: 0;
  height: calc(42 * var(--u));
  padding: 0 calc(8 * var(--u));
  border: calc(1.5 * var(--u)) solid var(--red);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

.actions .yes { background: var(--red); color: var(--paper); }
.actions button:disabled { cursor: progress; }
.signup[aria-busy="true"] .actions button { opacity: 0.6; }
input:focus-visible, button:focus-visible, a:focus-visible {
  outline: calc(1.5 * var(--u)) solid var(--red);
  outline-offset: calc(4 * var(--u));
}

.form-error {
  margin-top: calc(18 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: 1.2;
  text-align: center;
}

.footer {
  margin: calc(240 * var(--u)) calc(30.077 * var(--u)) 0;
  padding-bottom: calc(30 * var(--u));
}

.logo-slot { display: block; height: calc(69.9717 * var(--u)); }
.logo-slot img {
  display: block;
  transform: scale(var(--scale));
  transform-origin: top left;
}

.reply {
  display: flex;
  flex-direction: column;
  min-height: max(100dvh, calc(1095 * var(--u)));
  padding: calc(30 * var(--u)) calc(10 * var(--u)) calc(30 * var(--u));
  text-align: center;
}

.reply h1:focus { outline: none; }
.reply-description {
  margin-top: calc(14 * var(--u));
  font-size: calc(30 * var(--u));
  line-height: 1;
  letter-spacing: -0.02em;
}

.reply-footer {
  margin: auto calc(20.077 * var(--u)) 0;
  padding-top: calc(60 * var(--u));
}
.registration-closed {
  margin: calc(113 * var(--u)) calc(30 * var(--u)) 0;
  font-size: calc(20 * var(--u));
  line-height: 1.1;
  text-align: center;
}
.registration-closed .register-link { width: 100%; margin-top: 0; }

.honeypot, .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}