@font-face {
  font-family: 'EB Garamond SC';
  src: url('../fonts/EBGaramondSC12-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --olive: #5e651e;
  --red: #99150f;
  --ink: #332f28;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  background: #e7e7df;
}

.page::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(247, 243, 234, 0.42), rgba(247, 243, 234, 0.48)),
    url('../img/3.jpeg') center center/cover no-repeat;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--olive);
  outline-offset: 5px;
}

.page {
  width: 100%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 32px;
}

p {
  margin: 0;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 9px;
  width: 100%;
  margin: 0 auto;
  max-width: 1300px;
}

.gallery-item {
  display: block;
  aspect-ratio: 1.4;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid #f6f1e140;
  box-shadow: 0 3px 14px #24211126;
  transition: transform 0.2s;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-item:hover {
  transform: translateY(-5px);
}

.lightbox {
  border: 0;
  padding: 50px 70px;
  background: #24231ff5;
  color: #fff;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
}

.lightbox::backdrop {
  background: #24231f;
}

.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox figure {
  margin: 0;
  max-width: 1200px;
}

.lightbox-image {
  max-height: 80dvh;
  max-width: 100%;
  margin: auto;
  object-fit: contain;
  border-radius: 8px;
}

.lightbox figcaption {
  text-align: center;
  font-size: 14px;
  margin-top: 18px;
  color: #ddd8cd;
}

.lightbox button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgba(247, 243, 234, 0.22);
  border-radius: 50%;
  background: rgba(247, 243, 234, 0.04);
  color: #f7f3ea;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.lightbox button:hover {
  background: rgba(247, 243, 234, 0.14);
  border-color: rgba(247, 243, 234, 0.55);
}

.lightbox button:focus-visible {
  outline: 2px solid #f7f3ea;
  outline-offset: 4px;
}

.lightbox button svg {
  pointer-events: none;
}

.lightbox-close {
  right: 20px;
  top: 15px;
}

.lightbox-nav {
  top: calc(50% - 26px);
}

.lightbox-prev {
  left: 15px;
}

.lightbox-next {
  right: 15px;
}

body.lightbox-open {
  overflow: hidden;
}

@media (max-width: 1000px) {
  .gallery {
    gap: 7px;
  }

  .gallery-item {
    border-radius: 10px;
  }
}

@media (max-width: 640px) {
  .page::before {
    background:
      linear-gradient(rgba(247, 243, 234, 0.48), rgba(247, 243, 234, 0.55)),
      url('../img/3.jpeg') center/cover no-repeat;
  }

  .gallery {
    display: flex;
    overflow-x: auto;
    padding: 5px 0 12px;
    scroll-snap-type: x mandatory;
  }

  .gallery-item {
    flex: 0 0 105px;
    scroll-snap-align: start;
  }

  .lightbox {
    padding: 60px 12px 85px;
  }

  .lightbox-nav {
    top: auto;
    bottom: 18px;
  }

  .lightbox-prev {
    left: calc(50% - 55px);
  }

  .lightbox-next {
    right: calc(50% - 55px);
  }

  .lightbox-image {
    max-height: 72dvh;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

@keyframes arrive {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scenery {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .page::before {
    animation: scenery 1.3s ease-out both;
    transform: translate3d(var(--scene-x, 0px), var(--scene-y, 0px), 0) scale(1.04);
    transition: transform 1.2s cubic-bezier(0.2, 0.65, 0.3, 1);
  }

  .gallery {
    animation: arrive 0.9s cubic-bezier(0.2, 0.65, 0.3, 1) 0.55s both;
  }
}

:root {
  --section-top: clamp(56px, 8svh, 88px);
  --brand-height: clamp(260px, 34svh, 330px);
  --paper: #f7f3ea;
}
.page,
.sypka-section {
  padding: var(--section-top) 6% 30px;
}
.intro {
  flex: 1;
  width: 100%;
}
.section-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}
.section-brand > img {
  width: min(100%, 350px);
  height: var(--brand-height);
  object-fit: contain;
}
.identity {
  position: relative;
}
.sypka-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: 64px;
  background: var(--paper);
}

.sypka-section::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--section-top) + var(--brand-height) + 28px);
  z-index: -1;
  background:
    linear-gradient(
      to bottom,
      rgba(247, 243, 234, 0.12),
      rgba(247, 243, 234, 0.26) 40%,
      var(--paper) 100%
    ),
    url('../img/sypka-bg.jpg') center 38% / cover no-repeat;
}
.invitation {
  width: min(100%, 720px);
  margin: 0 auto;
  text-align: center;
}
.invitation-heading {
  margin-bottom: 28px;
}
.when {
  font-family: 'EB Garamond SC', Georgia, serif;
  font-size: 25px;
  line-height: 1.2;
  color: #51591c;
}
.when strong {
  display: block;
  margin-top: 8px;
  font-size: clamp(40px, 4vw, 54px);
  font-weight: 400;
  color: var(--red);
  white-space: nowrap;
}
.invitation-details {
  margin: 30px auto 0;
  max-width: 580px;
}
.description,
.respect {
  font-size: 20px;
  line-height: 1.65;
}
.description span {
  display: block;
  margin-top: 4px;
}
.offer {
  margin: 24px 0 8px;
  font-size: 23px;
  line-height: 1.5;
  color: #51591c;
}
.welcome {
  position: relative;
  margin: 30px auto 0;
  padding-top: 23px;
  font-size: 19px;
  line-height: 1.5;
  font-style: italic;
  color: #635b50;
}
.welcome::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(50% - 24px);
  width: 48px;
  height: 1px;
  background: #b5ac94;
}
.welcome strong {
  font-weight: 400;
}
@media (prefers-reduced-motion: no-preference) {
  .identity {
    animation: arrive 1.1s cubic-bezier(0.2, 0.65, 0.3, 1) 0.15s both;
  }
  .identity > img {
    transform: translateY(var(--logo-y, 0px));
    transition: transform 1.2s ease-out;
  }
}
@media (max-width: 640px) {
  :root {
    --section-top: 48px;
    --brand-height: 260px;
  }
  .page,
  .sypka-section {
    padding-left: 24px;
    padding-right: 24px;
  }
  .section-brand > img {
    width: min(100%, 280px);
  }
  .sypka-section {
    padding-bottom: 48px;
  }
  .when {
    font-size: 23px;
  }
  .description,
  .respect {
    font-size: 18px;
  }
  .offer {
    font-size: 21px;
  }
  .welcome {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .reveal-item {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 1.2s ease,
      transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .invitation-heading.reveal-item {
    transform: translateY(24px) scale(0.96);
  }
  .reveal-item.is-revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  .scroll-reveal::before {
    transform-origin: center top;
    transform: scale(1.055);
    transition: transform 2.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .scroll-reveal.is-revealed::before {
    transform: scale(1);
  }
}
@media print {
  .reveal-item {
    opacity: 1 !important;
    transform: none !important;
  }
}

.scroll-cue {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin-top: -12px;
  padding: 8px 22px 3px;
  color: #332f28;
  text-decoration: none;
  font-family: 'EB Garamond SC', Georgia, serif;
  font-size: 18px;
  line-height: 1.2;
  text-shadow: 0 1px 8px #f7f3ea;
}
.scroll-cue:hover {
  color: var(--red);
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
  .scroll-cue svg {
    animation: scroll-hint 2s ease-in-out infinite;
  }
  @keyframes scroll-hint {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(6px);
    }
  }
}

.page::after,
.sypka-section::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  pointer-events: none;
  height: clamp(24px, 3vw, 40px);
}
.page::after {
  bottom: 0;
  background: linear-gradient(to bottom, rgba(247, 243, 234, 0), rgba(247, 243, 234, 0.45));
}
.sypka-section::after {
  top: 0;
  background: linear-gradient(to bottom, rgba(247, 243, 234, 0.45), rgba(247, 243, 234, 0));
}

.page,
.sypka-section,
.gallery-section {
  min-height: 100vh;
  min-height: 100dvh;
}
.intro-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 16px 0 30px;
}
.intro-primary {
  flex-direction: row;
  gap: 28px;
  margin: 0;
  padding: 20px 32px;
  border-radius: 4px;
  background: #51591c;
  color: #fffaf0;
  font-size: clamp(25px, 3vw, 32px);
  text-shadow: none;
  box-shadow: 0 5px 22px #332f2820;
}
.intro-primary:hover {
  background: #414817;
  color: #fffaf0;
}
.intro-primary:focus-visible {
  outline-offset: 6px;
}
.intro-secondary,
.section-next,
.back-link {
  color: var(--ink);
  text-decoration: none;
  text-underline-offset: 5px;
  font-size: 17px;
}
.intro-secondary {
  padding: 10px;
  background: #f7f3eac9;
  border-radius: 3px;
}
.intro-secondary:hover,
.section-next:hover,
.back-link:hover {
  text-decoration: underline;
}
.section-next {
  display: inline-block;
  margin-top: 32px;
  color: var(--olive);
  padding: 10px;
}
.gallery-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 36px;
  padding: 65px 6%;
  background: #eae5d9;
}
.gallery-heading {
  text-align: center;
}
.gallery-heading h2 {
  font-family: 'EB Garamond SC', Georgia, serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 400;
  color: var(--olive);
  margin: 0 0 12px;
}
.gallery-heading p {
  font-size: 18px;
  color: #635b50;
}
.gallery-section .gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  padding: 0;
  overflow: visible;
  animation: none;
}
.gallery-section .gallery-item {
  aspect-ratio: 4 / 3;
  border-radius: 5px;
}
.back-link {
  align-self: center;
  padding: 12px;
}
@media (max-width: 900px) {
  .gallery-section .gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .intro-links {
    padding-bottom: 16px;
  }
  .intro-primary {
    padding: 18px 22px;
    gap: 18px;
  }
  .gallery-section {
    padding: 48px 24px;
    gap: 28px;
  }
  .gallery-section .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}