:root {
  --ink: #2e2e2e;
  --muted: #707070;
  --accent: #e55d95;
  --paper: #fff;
  --soft: #f7f7f7;
  --border: #d8d8d8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--muted);
  background:
    radial-gradient(circle at 8% 12%, rgba(229, 93, 149, .23), transparent 34rem),
    radial-gradient(circle at 94% 42%, rgba(247, 190, 212, .32), transparent 40rem),
    linear-gradient(180deg, #ffe6f0 0%, #fff1f6 34%, #fff 72%, #fff 100%);
  background-attachment: fixed;
  font-family: Barlow, "Segoe UI", Arial, sans-serif;
  font-size: 1.075rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--ink); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
.container { width: min(100% - 2rem, 71.25rem); margin-inline: auto; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 10; padding: .7rem 1rem; color: white; background: var(--ink); }
.skip-link:focus { top: 1rem; }

.site-nav { padding: 2rem 0; }
.site-nav ul { display: flex; justify-content: flex-end; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.site-nav a { font-size: 1.15rem; }
.site-nav a.active { color: var(--ink); }

.banner {
  position: relative;
  margin-bottom: 1.25rem;
  padding: .4rem;
  overflow: hidden;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(229, 93, 149, .14);
  border-radius: 1.15rem;
  box-shadow: 0 .7rem 2.2rem rgba(74, 39, 54, .10);
}
.banner__image {
  width: 100%;
  height: auto;
  border-radius: .8rem;
  opacity: 0;
  transform: scale(.99);
  transition: opacity .4s ease, transform .4s ease;
}
.banner__image.is-loaded { opacity: 1; transform: scale(1); }
.banner__logo {
  position: absolute;
  top: clamp(1rem, 3vw, 2.25rem);
  left: clamp(1rem, 3vw, 2.25rem);
  width: min(62.5rem, calc(100% - clamp(2rem, 6vw, 4.5rem)));
  height: auto;
  opacity: 0;
  transform: translate(-20%, calc(-10% - .25rem));
  transform-origin: 30% 50%;
  transition: opacity .45s ease, transform .4s ease, filter .4s ease;
  pointer-events: none;
}
.banner__logo.is-loaded { opacity: 1; transform: translate(-20%, -10%); }
.banner:hover .banner__logo.is-loaded {
  filter: drop-shadow(0 .2rem .3rem rgba(74, 39, 54, .18));
  transform: translate(-20%, calc(-10% - .1rem)) scale(1.01);
}
.gallery-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; scroll-margin-top: 1rem; }
.jewel {
  position: relative;
  grid-column: span 12;
  padding: .38rem;
  overflow: hidden;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(229, 93, 149, .16);
  border-radius: 1rem;
  box-shadow: 0 .5rem 1.5rem rgba(74, 39, 54, .09);
  outline: 0;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.jewel:hover, .jewel:focus {
  border-color: rgba(229, 93, 149, .32);
  box-shadow: 0 .8rem 2rem rgba(74, 39, 54, .14);
  transform: translateY(-2px);
}
.jewel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(.99);
  transition: opacity .4s ease, transform .35s ease;
}
.jewel img.is-loaded { opacity: 1; transform: scale(1); }
.jewel img { border-radius: .7rem; }
.jewel:hover img.is-loaded, .jewel:focus img.is-loaded { transform: scale(1.035); }
.jewel figcaption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: grid;
  gap: .35rem;
  justify-items: start;
  max-width: calc(100% - 2rem);
  padding: .8rem .9rem;
  color: var(--muted);
  background: rgba(255, 255, 255, .93);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: .85rem;
  box-shadow: 0 .55rem 1.8rem rgba(27, 18, 22, .18);
  opacity: 0;
  transform: translateY(.8rem) scale(.98);
  transition: opacity .24s ease, transform .3s cubic-bezier(.2, .75, .25, 1);
  backdrop-filter: blur(8px);
}
.jewel:hover figcaption, .jewel:focus figcaption { opacity: 1; transform: translateY(0) scale(1); }
.jewel:focus-visible { box-shadow: 0 0 0 3px var(--accent); }
.jewel figcaption strong { color: var(--ink); font-size: 1.1rem; line-height: 1.25; }
.jewel figcaption span {
  display: inline-block;
  padding: .22rem .65rem;
  color: #8f2e58;
  background: #fbe7ef;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.information { padding-block: 4rem; }
.information h1, .contact-form h2 { margin: 0 0 1rem; color: var(--ink); line-height: 1.2; }
.information h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
.information > p { max-width: 60rem; }
.details { display: grid; gap: .65rem; margin: 2rem 0 3rem; padding: 0; list-style: none; }
.details li { display: grid; grid-template-columns: 1.5rem 7rem 1fr; gap: .25rem; align-items: baseline; }
.details li > span { color: var(--accent); }
.details strong { color: var(--ink); font-style: italic; }

.contact-form { position: relative; max-width: 38rem; }
.contact-form label { display: block; margin-top: 1rem; color: var(--ink); font-weight: 600; }
.contact-form input, .contact-form textarea {
  width: 100%; margin-top: .35rem; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: .6rem;
  color: var(--ink); background: white; font: inherit;
}
.contact-form textarea { resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { outline: 3px solid rgba(229, 93, 149, .2); border-color: var(--accent); }
.contact-form button {
  width: 100%; margin-top: 1rem; padding: .85rem 1rem; border: 0; border-radius: .6rem;
  color: white; background: var(--accent); font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1.4; cursor: pointer;
}
.contact-form button:hover { filter: brightness(.94); }
.contact-form button:disabled { cursor: wait; opacity: .65; }
.website-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.6em; margin: .75rem 0 0; }
.form-status--success { color: #23723b; }
.form-status--error { color: #a72828; }

.back-to-top { width: min(100% - 2rem, 71.25rem); margin: 0 auto 2rem; text-align: right; }
footer {
  padding: 1.5rem 1rem;
  background: linear-gradient(135deg, #fbf5f7, #fff);
  border-top: 1px solid rgba(229, 93, 149, .12);
  text-align: center;
}
footer p { margin: .5rem 0 0; font-size: .95rem; }
.email-link { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; color: var(--accent); font-size: 1.6rem; }
.data-error { grid-column: 1 / -1; }

@media (min-width: 62rem) {
  .jewel--4 { grid-column: span 4; }
  .jewel--6 { grid-column: span 6; }
  .jewel--12 { grid-column: span 12; }
}
@media (max-width: 61.99rem) {
  .jewel figcaption {
    position: static; max-width: none; border: 0; border-radius: 0; box-shadow: none;
    opacity: 1; transform: none; backdrop-filter: none;
  }
  .jewel img { height: auto; }
  .jewel:hover img { transform: none; }
  .jewel:hover, .jewel:focus { transform: none; }
}
@media (max-width: 36rem) {
  .site-nav ul { justify-content: flex-start; gap: 1rem; }
  .site-nav a { font-size: 1rem; }
  .details li { grid-template-columns: 1.25rem 1fr; }
  .details li strong { grid-column: 2; }
  .details li { display: block; }
  .details li span { margin-right: .35rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  .banner:hover .banner__logo.is-loaded { filter: none; transform: translate(-20%, -10%); }
}