:root {
   --ink: #0c0b0b;
   --panel: #151211;
   --wine: #56121d;
   --wine-light: #8c2634;
   --gold: #b79758;
   --gold-dim: #695632;
   --cream: #eee6d7;
   --cream-soft: #f5efe4;
   --cream-deep: #dfd2bd;
   --muted2: #a79e8e;
   --muted: #4b3c23;
}

* {
   box-sizing: border-box;
}
html {
   scroll-behavior: smooth;
}
body {
   margin: 0;
   background: var(--ink);
   color: var(--cream);
   font-family: Georgia, "Times New Roman", serif;
}
a {
   color: inherit;
   text-decoration: none;
}
button {
   font: inherit;
}

main {
   overflow: hidden;
   background: radial-gradient(circle at 12% 22%, rgba(92, 19, 30, 0.12), transparent 28%), radial-gradient(circle at 88% 70%, rgba(183, 151, 88, 0.06), transparent 23%), #0c0b0b;
}

.hero {
   min-height: 100vh;
   position: relative;
   padding: 0 5vw 42px;
   display: flex;
   flex-direction: column;
   border-bottom: 1px solid #332a1b;
   background: linear-gradient(rgba(12, 11, 11, 0.25), rgba(12, 11, 11, 0.78)), repeating-linear-gradient(90deg, transparent 0, transparent 79px, rgba(183, 151, 88, 0.035) 80px);
   background: linear-gradient(rgb(133 0 0 / 25%), rgba(12, 11, 11, 0.78)), repeating-linear-gradient(90deg, transparent 0, transparent 79px, rgba(183, 151, 88, 0.035) 80px);
}
.hero::before,
.hero::after {
   content: "";
   position: absolute;
   width: 42vw;
   height: 42vw;
   border: 1px solid rgba(183, 151, 88, 0.12);
   border-radius: 50%;
   top: 10%;
}
.hero::before {
   left: -25vw;
}
.hero::after {
   right: -25vw;
}
.nav {
   height: 92px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid rgba(183, 151, 88, 0.25);
   position: relative;
   z-index: 2;
}
.monogram {
   font-size: 20px;
   letter-spacing: 0.14em;
   color: var(--gold);
   font-weight: bold;
}
.monogram span {
   color: var(--wine-light);
   padding: 0 5px;
}
.navLinks {
   display: flex;
   gap: 34px;
   font: 10px Arial, sans-serif;
   letter-spacing: 0.2em;
   color: #c6bda9;
}
.navLinks a:hover {
   color: var(--gold);
}
.heroOrnament {
   text-align: center;
   color: var(--gold);
   font-size: 15px;
   margin-top: 22px;
}
.eyebrow,
.sectionNumber {
   font: 10px Arial, sans-serif;
   letter-spacing: 0.3em;
   color: var(--gold);
   text-align: center;
}
.versus {
   flex: 1;
   width: min(1120px, 100%);
   margin: 12px auto 0;
   display: grid;
   grid-template-columns: 1fr 1.1fr 1fr;
   align-items: center;
   gap: 38px;
}
.fighter {
   text-align: center;
   position: relative;
}
.fighterNumber {
   font: 9px Arial, sans-serif;
   letter-spacing: 0.24em;
   color: #776b59;
}
.portrait {
   aspect-ratio: 3 / 4;
   width: min(260px, 100%);
   margin: 12px auto 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   border: 1px solid var(--gold-dim);
   background: linear-gradient(145deg, rgba(183, 151, 88, 0.16), transparent 45%), radial-gradient(circle at 50% 35%, #4f2b25, #161211 61%);
   clip-path: polygon(12% 0, 88% 0, 100% 9%, 100% 91%, 88% 100%, 12% 100%, 0 91%, 0 9%);
}
.groom .portrait {
   background: linear-gradient(215deg, rgba(183, 151, 88, 0.15), transparent 45%), radial-gradient(circle at 50% 35%, #2c3434, #121313 61%);
}
.portrait::before {
   content: "";
   position: absolute;
   inset: 10px;
   border: 1px solid rgba(183, 151, 88, 0.22);
   clip-path: inherit;
}
.portrait span {
   font-size: clamp(90px, 11vw, 160px);
   color: rgba(238, 230, 215, 0.08);
}
.portrait small {
   position: absolute;
   bottom: 20px;
   font: 9px Arial, sans-serif;
   letter-spacing: 0.4em;
   color: var(--gold);
}
.fighter h2 {
   font-size: clamp(22px, 3vw, 38px);
   margin: 0;
   letter-spacing: 0.14em;
   font-weight: normal;
}
.heroTitle {
   text-align: center;
   z-index: 1;
}
.heroTitle p {
   margin: 0 0 4px;
   color: var(--gold);
   font: 10px Arial, sans-serif;
   letter-spacing: 0.45em;
}
.heroTitle h1 {
   margin: 0;
   font-size: clamp(54px, 7vw, 96px);
   line-height: 0.78;
   font-weight: normal;
   letter-spacing: -0.055em;
   text-shadow: 0 8px 30px #000;
}
.rings {
   height: 60px;
   display: flex;
   justify-content: center;
   align-items: center;
}
.rings i {
   display: block;
   width: 35px;
   height: 35px;
   border: 2px solid var(--gold);
   border-radius: 50%;
   margin: -5px;
}
.startButton,
.outlineButton {
   display: inline-block;
   border: 1px solid var(--gold);
   padding: 15px 28px;
   color: var(--gold);
   font: bold 10px Arial, sans-serif;
   letter-spacing: 0.25em;
   transition: 0.2s ease;
}
.startButton:hover,
.outlineButton:hover {
   color: var(--ink);
   background: var(--gold);
   box-shadow: 0 0 28px rgba(183, 151, 88, 0.18);
}
.scrollHint {
   text-align: center;
   color: #5f574c;
   font: 8px Arial, sans-serif;
   letter-spacing: 0.25em;
}
.scrollHint span {
   color: var(--gold);
   margin-left: 10px;
}

.section {
   padding: 100px 7vw;
   position: relative;
}
.sectionTitle {
   text-align: center;
   font-size: clamp(45px, 6vw, 84px);
   line-height: 0.95;
   font-weight: normal;
   margin: 20px 0 26px;
}
.sectionTitle em {
   color: var(--wine-light);
   font-weight: normal;
}
.lead {
   text-align: center;
   color: var(--muted);
   line-height: 1.8;
   font-size: 16px;
}
.story {
   background: #100e0d;
}
.playerCards {
   max-width: 1000px;
   margin: 70px auto 0;
   display: grid;
   grid-template-columns: 1fr 100px 1fr;
   gap: 30px;
   align-items: center;
}
.playerCard {
   border: 1px solid #40341f;
   background: linear-gradient(135deg, #1b1715, #100e0d);
   padding: 28px;
   min-height: 280px;
}
.cardTop {
   display: flex;
   justify-content: space-between;
   font: 9px Arial, sans-serif;
   letter-spacing: 0.22em;
   color: var(--gold);
}
.playerCard h3 {
   font-size: 31px;
   letter-spacing: 0.12em;
   font-weight: normal;
   margin: 38px 0;
}
.playerCard dl {
   margin: 0;
}
.playerCard dl div {
   border-top: 1px solid #30291d;
   padding: 12px 0;
   display: flex;
   justify-content: space-between;
   gap: 20px;
}
.playerCard dt {
   font: 8px Arial, sans-serif;
   letter-spacing: 0.16em;
   color: #786e60;
}
.playerCard dd {
   margin: 0;
   text-align: right;
   color: #c4bba9;
   font-size: 13px;
}
.heartSeal {
   width: 86px;
   height: 112px;
   margin: auto;
   border: 1px solid var(--gold-dim);
   display: grid;
   place-content: center;
   text-align: center;
   color: var(--gold);
   font-size: 17px;
   line-height: 0.85;
   transform: rotate(45deg);
   position: relative;
}
.heartSeal span {
   color: var(--wine-light);
   margin: 10px;
}
.heartSeal > * {
   transform: rotate(-45deg);
}

.arena,
.schedule,
.dress,
.guests,
.notes {
   isolation: isolate;
   overflow: hidden;
   background-color: var(--cream-soft);
   color: #171310;
}
.arena::before,
.schedule::before,
.dress::before,
.guests::before,
.notes::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -2;
   background-position: center bottom;
   background-repeat: no-repeat;
   background-size: cover;
}
.arena::after,
.schedule::after,
.dress::after,
.guests::after,
.notes::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   pointer-events: none;
   background: linear-gradient(180deg, rgba(245, 239, 228, 0.98) 0%, rgba(245, 239, 228, 0.9) 33%, rgba(245, 239, 228, 0.54) 70%, rgba(245, 239, 228, 0.75) 100%);
}
.arena::before {
   background-image: url("/assets/locations/st-petersburg.webp");
}
.schedule::before {
   background-image: url("/assets/locations/kostroma.webp");
}
.dress::before {
   background-image: url("/assets/locations/istanbul.webp");
}
.guests::before {
   background-image: url("/assets/locations/mitino.webp");
}
.notes::before {
   background-image: url("/assets/locations/kaliningrad.webp");
}
.arena {
   min-height: 720px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
   padding-right: 4vw;
}
.arena .sectionNumber,
.arena .sectionTitle {
   text-align: left;
}
.arenaCopy {
   max-width: 590px;
   z-index: 2;
}
.arenaName {
   margin-top: 50px;
   color: var(--wine);
   font-size: 16px;
   letter-spacing: 0.1em;
}
.address {
   color: #6e6559;
   line-height: 1.8;
}

#schedule {
   padding-bottom: 10px;
}

.blurbox {
   border: 1px solid rgba(89, 64, 36, 0.3);
   background: rgba(245, 239, 228, 0.58);
   box-shadow: 0 25px 70px rgba(83, 50, 27, 0.1);
   backdrop-filter: blur(4px);
   padding: 5px 20px;
   width: fit-content;
   margin: auto;
   margin-bottom: 15px;
}

#arena .blurbox {
   margin: 0;
   margin-bottom: 15px;
}

#flowers .lead,
#story .lead {
   color: var(--muted2);
   max-width: 720px;
   margin: auto;
   margin-bottom: 15px;
}

#dress .blurbox {
   max-width: 700px;
   margin: auto;
}

#arena .outlineButton {
   backdrop-filter: blur(4px);
}

.arenaVisual {
   height: 540px;
   position: relative;
   display: grid;
   place-content: center;
   overflow: hidden;
   border: 1px solid rgba(89, 64, 36, 0.3);
   background: rgba(245, 239, 228, 0.58);
   box-shadow: 0 25px 70px rgba(83, 50, 27, 0.1);
   backdrop-filter: blur(4px);
}
.moon {
   position: absolute;
   top: 45px;
   right: 12%;
   width: 90px;
   height: 90px;
   border: 1px solid var(--wine);
   border-radius: 50%;
   display: grid;
   place-content: center;
   text-align: center;
   color: var(--wine);
   font-size: 26px;
   line-height: 0.8;
   background: rgba(245, 239, 228, 0.6);
}
.moon small {
   font: 8px Arial, sans-serif;
   letter-spacing: 0.25em;
}

.calendar {
   position: absolute;
   top: 4%;
   right: 4%;
   width: 200px;
   height: 200px;
   border: 1px solid var(--wine);
   border-radius: 14px;
   background-image: url(/assets/calendar.jpg);
   background-size: contain;
   background-repeat: no-repeat;
}

.arch {
   width: 330px;
   height: 440px;
   border: 2px solid #9d7941;
   border-bottom: none;
   border-radius: 180px 180px 0 0;
   box-shadow: 0 0 0 15px rgba(245, 239, 228, 0.48), 0 0 0 16px rgba(120, 87, 44, 0.24);
   display: grid;
   place-content: center;
   text-align: center;
   background: rgba(245, 239, 228, 0.2);
   background: url(/assets/locations/multiroom.jpg) 0 0 no-repeat;
   background-size: cover;
}
.arch span {
   font-size: 42px;
   letter-spacing: 0.1em;
   line-height: 0.95;
   color: rgba(58, 34, 27, 0.75);
   text-shadow: 0 1px 0 #fff;
}

.schedule .sectionNumber {
   color: #7f622f;
}
.timeline {
   max-width: 880px;
   margin: 65px auto 0;
   border-top: 1px solid #b9aa91;
}
.round {
   min-height: 92px;
   border-bottom: 1px solid #b9aa91;
   display: grid;
   grid-template-columns: 55px 110px 1fr 40px;
   align-items: center;
   background: rgba(245, 239, 228, 0.55);
   padding: 0 16px;
}
.roundNo {
   font: 9px Arial, sans-serif;
   color: #978a76;
}
.round time {
   font-size: 27px;
   color: #6e1420;
}
.round h3 {
   margin: 0 0 5px;
   font-size: 14px;
   letter-spacing: 0.12em;
}
.round p {
   margin: 0;
   color: #7d7468;
   font-size: 12px;
   font-style: italic;
}
.roundMark {
   color: #a7854a;
   text-align: right;
}

.dress .sectionNumber {
   color: #7f622f;
}
.dress .lead {
   color: #6f665a;
}
.swatches {
   display: flex;
   justify-content: center;
   gap: 24px;
   margin-top: 55px;
}
.swatch {
   text-align: center;
}
.swatch i {
   display: block;
   width: 84px;
   height: 84px;
   border-radius: 50%;
   border: 1px solid rgba(66, 45, 28, 0.3);
   box-shadow: inset 0 0 0 7px rgba(245, 239, 228, 0.9), 0 10px 30px rgba(71, 49, 30, 0.12);
   background-image: url(/assets/fabrics/1.jpg);
   background-size: contain;
   background-position: center center;
}
.swatches .swatch:nth-child(2) i {
   background-image: url(/assets/fabrics/2.jpg);
}

.swatches .swatch:nth-child(3) i {
   background-image: url(/assets/fabrics/3.jpg);
}

.swatches .swatch:nth-child(4) i {
   background-image: url(/assets/fabrics/4.jpg);
}

.swatches .swatch:nth-child(5) i {
   background-image: url(/assets/fabrics/5.jpg);
}

.swatch span {
   display: block;
   margin-top: 15px;
   font: 8px Arial, sans-serif;
   letter-spacing: 0.2em;
   color: #685f53;
}

.guests {
   min-height: 900px;
}
.guests .sectionNumber {
   color: #7f622f;
}
.guests .lead {
   color: #6f665a;
}
.guestSelect {
   width: min(1180px, 100%);
   margin: 65px auto 0;
   display: grid;
   grid-template-columns: minmax(290px, 0.85fr) minmax(460px, 1.35fr);
   border: 1px solid #7c633d;
   background: #120f0e;
   box-shadow: 0 30px 80px rgba(72, 43, 24, 0.2);
   min-height: 720px;
}
.guestProfile {
   min-width: 0;
   padding: 22px;
   border-right: 1px solid #5b492e;
   background: radial-gradient(circle at 50% 15%, rgba(118, 29, 42, 0.36), transparent 42%), linear-gradient(145deg, #251b19, #0e0d0c);
   color: var(--cream);
}
.guestPortrait {
   display: block;
   /*background-image: url("/assets/guests/guest-portraits-50.webp");
  background-repeat: no-repeat;
  background-size: 1000% 500%;
  background-position: var(--portrait-x) var(--portrait-y);*/
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
}
.guestPortraitLarge {
   width: 60%;
   width: 95%;
   aspect-ratio: 5 / 6;
   margin: 0 auto;
   border: 1px solid #8e7142;
   filter: saturate(0.82) contrast(1.04);
   box-shadow: inset 0 0 0 8px rgba(14, 12, 11, 0.28);
}
.guestProfileCopy {
   padding: 24px 5px 8px;
}
.guestPlayer {
   color: var(--gold);
   font: 9px Arial, sans-serif;
   letter-spacing: 0.25em;
}
.guestProfile h3 {
   margin: 10px 0 6px;
   font-size: clamp(30px, 4vw, 52px);
   line-height: 1;
   font-weight: normal;
   letter-spacing: 0.06em;
}
.guestProfileCopy > p:not(.guestTeam) {
   color: #b9af9e;
   font-size: 14px;
   line-height: 1.6;
}
.guestTeam {
   margin: 0;
   color: var(--wine-light);
   font: bold 10px Arial, sans-serif;
   letter-spacing: 0.2em;
}
.guestProfile small {
   color: #70675b;
   font: 8px Arial, sans-serif;
   letter-spacing: 0.15em;
}
.guestRoster {
   align-self: start;
   padding: 18px;
   display: grid;
   grid-template-columns: repeat(8, 1fr);
   gap: 6px;
   background: linear-gradient(rgba(183, 151, 88, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(183, 151, 88, 0.035) 1px, transparent 1px), #0c0b0b;
   background-size: 24px 24px;
}
.guestThumb {
   position: relative;
   aspect-ratio: 5 / 6;
   min-width: 0;
   padding: 0;
   overflow: hidden;
   border: 1px solid #403722;
   background: #1a1614;
   cursor: pointer;
   transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.guestThumb:hover,
.guestThumb:focus-visible {
   z-index: 2;
   transform: scale(1.09);
   border-color: var(--gold);
   outline: none;
}
.guestThumb.isSelected {
   z-index: 1;
   border-color: #d6b56f;
   box-shadow: 0 0 0 2px #6c1824, 0 0 20px rgba(183, 151, 88, 0.45);
}
.guestThumbImage {
   position: absolute;
   inset: 0;
   filter: saturate(0.72) contrast(1.03);
}
.guestThumb.isSelected .guestThumbImage {
   filter: saturate(1) contrast(1.08);
}
.guestThumb b {
   position: absolute;
   right: 2px;
   bottom: 1px;
   padding: 2px;
   background: rgba(10, 9, 8, 0.76);
   color: #d9c18c;
   font: 7px Arial, sans-serif;
}

.rsvp {
   min-height: 700px;
   display: grid;
   place-items: center;
   background: radial-gradient(circle, #35141a, #0c0b0b 65%);
}
.rsvpFrame {
   width: min(780px, 100%);
   padding: 75px 30px;
   text-align: center;
   border: 1px solid var(--gold-dim);
   outline: 1px solid rgba(183, 151, 88, 0.18);
   outline-offset: -12px;
   background: rgba(12, 11, 11, 0.72);
}
.rsvpFrame h2 {
   font-size: clamp(50px, 7vw, 86px);
   line-height: 0.82;
   font-weight: normal;
   margin: 24px 0 32px;
}
.rsvpFrame > p:not(.sectionNumber) {
   color: var(--muted);
   line-height: 1.7;
}
.rsvpButtons {
   display: flex;
   justify-content: center;
   gap: 14px;
   margin-top: 35px;
}
.rsvpButtons button,
.answer button,
.rsvpButtons .button {
   padding: 15px 24px;
   border: 1px solid var(--gold);
   background: transparent;
   color: var(--gold);
   font: bold 9px Arial, sans-serif;
   letter-spacing: 0.16em;
   cursor: pointer;
}
.rsvpButtons button:first-child,
.rsvpButtons .button:first-child {
   background: var(--gold);
   color: #15110d;
}

.rsvpButtons .button:hover {
   text-decoration: none;
}
.answer {
   margin-top: 35px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 14px;
   color: var(--gold);
}
.answer strong {
   letter-spacing: 0.18em;
}
.answer span {
   color: var(--cream);
}
.answer button {
   border-color: #514633;
   color: #96866b;
   margin-top: 12px;
}
footer {
   padding: 55px 7vw;
   text-align: center;
   border-top: 1px solid #332a1b;
}
footer p {
   font: 9px Arial, sans-serif;
   letter-spacing: 0.28em;
   color: var(--gold);
   margin: 24px 0 10px;
}
footer small {
   color: #4f4940;
   font-style: italic;
}

@media (max-width: 760px) {
   .navLinks {
      display: none;
   }
   .hero {
      min-height: auto;
   }
   .versus {
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      padding: 42px 0;
   }
   .heroTitle {
      grid-column: 1 / -1;
      grid-row: 1;
   }
   .fighter {
      grid-row: 2;
   }
   .portrait {
      width: 145px;
   }
   .heroTitle h1 {
      font-size: 58px;
   }
   .section {
      padding: 85px 22px;
   }
   .playerCards {
      grid-template-columns: 1fr;
   }
   .heartSeal {
      transform: rotate(45deg) scale(0.7);
      height: 90px;
   }
   .arena {
      grid-template-columns: 1fr;
      padding-right: 22px;
   }
   .arenaVisual {
      margin-top: 60px;
      height: 480px;
   }
   .arch {
      width: 250px;
      height: 370px;
   }

   .calendar {
      width: 130px;
      height: 130px;
      top: 10px;
      right: 10px;
   }
   .round {
      grid-template-columns: 32px 75px 1fr 15px;
   }
   .round time {
      font-size: 21px;
   }
   .swatches {
      flex-wrap: wrap;
      gap: 16px;
   }
   .swatch i {
      width: 60px;
      height: 60px;
   }
   .guestSelect {
      grid-template-columns: 1fr;
   }
   .guestProfile {
      border-right: 0;
      border-bottom: 1px solid #5b492e;
   }
   .guestPortraitLarge {
      width: 60%;
      max-height: 310px;
   }
   .guestRoster {
      grid-template-columns: repeat(4, 1fr);
      padding: 10px;
      gap: 5px;
   }
   .rsvpButtons {
      flex-direction: column;
   }

   .rsvpFrame h2 {
      font-size: 29px;
      line-height: 1;
   }
}