:root {
  --paper: #d8b982;
  --ink: #21170d;
  --ink-deep: #1a120a;
  --ink-soft: #51391f;
  --ink-mid: #3d2a16;
  --wine: #c54433;
  --wine-deep: #8f271d;
  --surround: #17110c;
  --cream: #e5ca98;
  --display: Cormorant, Baskerville, "Times New Roman", serif;
  --text: "EB Garamond", Baskerville, "Times New Roman", serif;
  --sheet-pad: clamp(10px, 2vmin, 22px);
  --intro-play: paused;
}

@property --hover-amplitude {
  syntax: "<length>";
  inherits: true;
  initial-value: 0.52cqw;
}

* { box-sizing: border-box; }

html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surround);
  color: var(--ink);
  font-family: var(--text);
  font-feature-settings: "onum" 1;
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--ink); -webkit-tap-highlight-color: transparent; }
a:active { color: var(--wine); }
@media (hover: hover) {
  a:hover { color: var(--wine); }
}

/* ---------- keyframes ---------- */

@keyframes dragon-hover {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.06deg); }
  25% { transform: translate3d(0.08cqw, calc(var(--hover-amplitude) * -1), 0) rotate(0.1deg); }
  50% { transform: translate3d(0, 0, 0) rotate(-0.04deg); }
  75% { transform: translate3d(-0.08cqw, calc(var(--hover-amplitude) * 0.86), 0) rotate(-0.12deg); }
}
@keyframes dragon-amplitude {
  0%, 100% { --hover-amplitude: 0.44cqw; }
  34% { --hover-amplitude: 0.62cqw; }
  67% { --hover-amplitude: 0.49cqw; }
}
@keyframes diamond-pulse {
  0%, 100% { opacity: 0.5; transform: rotate(45deg) scale(0.9); }
  50% { opacity: 1; transform: rotate(45deg) scale(1.08); }
}
@keyframes star-turn { to { transform: rotate(360deg); } }
@keyframes star-fade {
  0%, 100% { opacity: 0.62; }
  40% { opacity: 0.95; }
  70% { opacity: 0.74; }
}
@keyframes rule-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes note-bob {
  0%, 100% { transform: translateY(0.6px); }
  50% { transform: translateY(-1.6px); }
}
@keyframes candle {
  0%, 100% { box-shadow: inset 0 0 6cqw rgba(69, 40, 14, 0.26), 0 2.3cqw 5.5cqw rgba(0, 0, 0, 0.48); }
  17% { box-shadow: inset 0 0 7.4cqw rgba(69, 40, 14, 0.3), 0 2.3cqw 5.5cqw rgba(0, 0, 0, 0.48); }
  31% { box-shadow: inset 0 0 5.2cqw rgba(69, 40, 14, 0.22), 0 2.3cqw 5.5cqw rgba(0, 0, 0, 0.48); }
  52% { box-shadow: inset 0 0 8.1cqw rgba(69, 40, 14, 0.33), 0 2.3cqw 5.5cqw rgba(0, 0, 0, 0.48); }
  68% { box-shadow: inset 0 0 6.1cqw rgba(69, 40, 14, 0.25), 0 2.3cqw 5.5cqw rgba(0, 0, 0, 0.48); }
  84% { box-shadow: inset 0 0 7cqw rgba(69, 40, 14, 0.29), 0 2.3cqw 5.5cqw rgba(0, 0, 0, 0.48); }
}

/* ---------- opening gate ---------- */

.gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: var(--surround);
  transition: opacity 780ms ease, visibility 0s linear 800ms;
}

.gate.is-open {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.gate-open {
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: 20px 28px;
  border: none;
  background: transparent;
  color: rgba(229, 202, 152, 0.4);
  font-family: var(--text);
  cursor: default;
  transition: color 400ms ease;
}

.gate-open:not([disabled]) {
  color: rgba(229, 202, 152, 0.82);
  cursor: pointer;
}

.gate-open:focus { outline: none; }
.gate-open:focus-visible { outline: 1px solid rgba(226, 196, 143, 0.45); outline-offset: 8px; }
.gate-open:not([disabled]):active { color: #f0dcb4; opacity: 0.7; }
@media (hover: hover) {
  .gate-open:not([disabled]):hover { color: #f0dcb4; }
}

.gate-envelope {
  position: relative;
  display: block;
  width: 46px;
  height: 31px;
  border: 1px solid currentColor;
}

.gate-envelope::before,
.gate-envelope::after {
  position: absolute;
  top: 0;
  width: 27.5px;
  height: 1px;
  background: currentColor;
  content: "";
}

.gate-envelope::before {
  left: 0;
  transform-origin: left top;
  transform: rotate(33.8deg);
}

.gate-envelope::after {
  right: 0;
  transform-origin: right top;
  transform: rotate(-33.8deg);
}

.gate-label {
  font-size: 13px;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  line-height: 1;
}

/* ---------- chrome ---------- */

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 50;
  padding: 9px 13px;
  background: var(--ink);
  color: var(--cream);
  font-size: 13px;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.18em;
  text-decoration: none;
  transform: translateY(-220%);
}

.skip-link:focus { transform: translateY(0); }

.music-toggle {
  position: fixed;
  bottom: clamp(12px, 2.4vh, 24px);
  left: clamp(12px, 2.4vw, 24px);
  z-index: 50;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(226, 196, 143, 0.28);
  border-radius: 50%;
  background: rgba(23, 17, 12, 0.82);
  color: rgba(229, 202, 152, 0.78);
  cursor: pointer;
}

.music-toggle:active { border-color: rgba(197, 68, 51, 0.85); color: var(--cream); opacity: 0.72; }
@media (hover: hover) {
  .music-toggle:hover { border-color: rgba(197, 68, 51, 0.85); color: var(--cream); }
}

.music-note {
  grid-area: 1 / 1;
  font-family: var(--text);
  font-size: 17px;
  line-height: 1;
}

.music-toggle.is-playing .music-note { animation: note-bob 2.6s ease-in-out infinite; }

.music-slash {
  grid-area: 1 / 1;
  width: 21px;
  height: 1px;
  background: currentColor;
  opacity: 0.8;
  transform: rotate(-45deg);
}

.music-toggle.is-playing .music-slash { opacity: 0; }

/* ---------- sheets ---------- */

.page {
  display: grid;
  width: 100%;
  height: 100svh;
  place-items: center;
  overflow: hidden;
  padding: var(--sheet-pad);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.sheet {
  container-type: inline-size;
  position: relative;
  width: min(
    calc(100vw - var(--sheet-pad) * 2),
    calc((100svh - var(--sheet-pad) * 2) * 2 / 3)
  );
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 1px solid rgba(73, 47, 22, 0.55);
  background-color: var(--paper);
  background-image: url("assets/parchment-variant-02-realistic-vellum.png");
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 6cqw rgba(69, 40, 14, 0.26), 0 2.3cqw 5.5cqw rgba(0, 0, 0, 0.48);
  isolation: isolate;
  animation: candle 13.5s ease-in-out infinite;
}

.sheet--centered { text-align: center; }

#cover .sheet { animation-delay: 0s; }
#ceremony .sheet { animation-delay: -3.4s; }
#reception .sheet { animation-delay: -7.1s; }
#rsvp .sheet { animation-delay: -10.6s; }

.sheet--ruled::after {
  position: absolute;
  inset: 3.4cqw;
  z-index: 8;
  border: 1px solid rgba(75, 49, 24, 0.16);
  content: "";
  pointer-events: none;
}

/* ---------- cover ---------- */

.cover-art {
  position: absolute;
  z-index: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.cover-art--dragon {
  --hover-amplitude: 0.52cqw;
  top: 2.5%;
  right: 4%;
  width: 36%;
  aspect-ratio: 460 / 470;
  background-image: url("assets/cover-dragon-full-ink.png");
  transform-origin: 52% 48%;
  animation: dragon-hover 1.5s linear -0.35s infinite,
    dragon-amplitude 6.3s ease-in-out -1.4s infinite;
  will-change: transform;
}

.cover-art--castle {
  bottom: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 3 / 2;
  background-image: url("assets/cover-castle-drowned-red-ink.webp");
  background-position: bottom center;
  opacity: 0.94;
  transform: scaleX(-1);
}

.cover-copy {
  position: absolute;
  top: 10.5%;
  left: 9.5%;
  z-index: 3;
  display: grid;
  justify-items: start;
  width: 62%;
  row-gap: 0;
}

.star {
  width: 3.6cqw;
  aspect-ratio: 1;
  margin: 0 0 5.5cqw;
  background: var(--wine);
  clip-path: polygon(
    50% 0, 55% 40%, 84% 16%, 60% 45%, 100% 50%, 60% 55%, 84% 84%, 55% 60%,
    50% 100%, 45% 60%, 16% 84%, 40% 55%, 0 50%, 40% 45%, 16% 16%, 45% 40%
  );
  opacity: 0.85;
  animation: star-turn 96s linear infinite, star-fade 9.5s ease-in-out infinite;
}

.names {
  display: grid;
  justify-items: start;
  width: 100%;
  margin: 0;
  color: var(--ink-deep);
  font-family: var(--display);
  font-weight: 300;
  line-height: 1;
}

.name-line {
  display: flex;
  height: 15cqw;
  align-items: center;
  gap: 1.4cqw;
}

.initial {
  display: block;
  flex: 0 0 14cqw;
  width: 14cqw;
  aspect-ratio: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.initial--d { background-image: url("assets/cover-initial-d-ink.webp"); }
.initial--a { background-image: url("assets/cover-initial-a-ink.webp"); }

.name-rest {
  display: block;
  font-size: 12.4cqw;
  line-height: 0.86;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ampersand {
  display: grid;
  width: 76%;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2.6cqw;
  margin: 1.2cqw 0;
  color: var(--wine);
  font-family: var(--display);
  font-style: italic;
  font-size: 8cqw;
  line-height: 1;
  text-align: center;
}

.ampersand::before,
.ampersand::after {
  height: 1px;
  background: var(--wine);
  content: "";
  opacity: 0.5;
  animation: rule-draw 1.15s 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-play-state: var(--intro-play);
}

.ampersand::before { transform-origin: right center; }
.ampersand::after { transform-origin: left center; }

.invite-line {
  margin: 7cqw 0 0;
  max-width: 26ch;
  color: var(--ink-mid);
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.98rem, 4.5cqw, 1.7rem);
  line-height: 1.35;
  text-wrap: pretty;
}

.cover-date {
  margin: 5.5cqw 0 0;
  color: var(--wine);
  font-size: clamp(0.82rem, 3.5cqw, 1.38rem);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.2em;
}

.cover-rule {
  width: 34cqw;
  height: 1px;
  margin: 4.4cqw 0 0;
  background: rgba(65, 42, 20, 0.42);
  transform-origin: left center;
  animation: rule-draw 1s 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-play-state: var(--intro-play);
}

.cover-menu {
  display: grid;
  justify-items: start;
  gap: 3.4cqw;
  margin: 4.4cqw 0 0;
  font-size: clamp(0.8rem, 3.3cqw, 1.3rem);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.24em;
}

.cover-menu a { text-decoration: none; }

/* ---------- shared event type ---------- */

.event-head,
.event-copy,
.rsvp-copy {
  position: absolute;
  z-index: 3;
  display: grid;
  justify-items: center;
}

.event-head { top: 5%; left: 8%; right: 8%; }
.event-copy { top: 5%; left: 8%; right: 8%; }
.rsvp-copy { top: 52%; left: 11%; right: 11%; }

.event-head h2,
.event-copy h2,
.rsvp-copy h2 {
  margin: 0;
  color: var(--ink-deep);
  font-family: var(--display);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.event-head h2 { font-size: 9.4cqw; }
.event-copy h2 { font-size: 10.4cqw; }
.rsvp-copy h2 {
  font-size: 10.4cqw;
  letter-spacing: 0.09em;
  text-transform: none;
}

.rule {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2.4cqw;
  width: 46cqw;
  margin: 4.6cqw 0 0;
}

.event-head .rule { width: 42cqw; margin: 3.2cqw 0 0; }
.rule--narrow { width: 40cqw; margin: 4.4cqw 0 0; }

.rule-line {
  height: 1px;
  background: rgba(65, 42, 20, 0.42);
  transform-origin: center;
  transform: scaleX(0);
  transition: transform 950ms cubic-bezier(0.2, 0.7, 0.2, 1) 120ms;
}

.page.is-seen .rule-line { transform: scaleX(1); }

.rule-diamond {
  width: 1.3cqw;
  height: 1.3cqw;
  background: var(--wine);
  transform: rotate(45deg);
  animation: diamond-pulse 8.5s ease-in-out infinite;
}

#reception .rule-diamond { animation-duration: 9.4s; }
#rsvp .rule-diamond { animation-duration: 10.3s; }

/* ---------- ceremony ---------- */

.ceremony-frame {
  position: absolute;
  inset: 2.6cqw;
  z-index: 6;
  border: 1px solid rgba(78, 50, 22, 0.6);
  box-shadow: inset 0 0 0 0.45cqw rgba(82, 52, 22, 0.07);
  pointer-events: none;
}

.ceremony-frame::before,
.ceremony-frame::after {
  position: absolute;
  left: 50%;
  padding: 0 1.2cqw;
  color: rgba(77, 48, 20, 0.8);
  content: "\2767";
  font-size: 3.6cqw;
  line-height: 1;
}

.ceremony-frame::before { top: -1.9cqw; transform: translateX(-50%); }
.ceremony-frame::after { bottom: -1.9cqw; transform: translateX(-50%) rotate(180deg); }

.arch-art {
  position: absolute;
  z-index: 1;
  top: 15.2%;
  left: 1.5%;
  width: 95%;
  aspect-ratio: 1331 / 1181;
  background-image: url("assets/ceremony-cherubs-red-detail-ink.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.arch-copy {
  position: absolute;
  top: 50.2%;
  left: 34.9%;
  width: 30%;
  z-index: 3;
  display: grid;
  justify-items: center;
}

.venue-sm {
  margin: 0;
  color: var(--ink-deep);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.05rem, 4.4cqw, 1.7rem);
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.arch-rule {
  width: 12cqw;
  height: 1px;
  margin: 2.4cqw 0;
  background: rgba(65, 42, 20, 0.45);
}

.arch-date {
  margin: 0;
  color: var(--wine);
  font-size: clamp(0.72rem, 2.6cqw, 1.05rem);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.arch-time {
  margin: 1.4cqw 0 0;
  color: var(--ink-soft);
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.82rem, 3.3cqw, 1.3rem);
  line-height: 1.2;
  white-space: nowrap;
}

.map-plate {
  position: absolute;
  top: 74%;
  left: 34.5%;
  width: 31%;
  z-index: 3;
  display: grid;
  justify-items: center;
  color: var(--wine-deep);
  text-decoration: none;
}

.map-plate:active { opacity: 0.7; }

.map-art {
  display: block;
  width: 100%;
  aspect-ratio: 560 / 358;
  background-image: url("assets/ceremony-map-cop-cot.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.map-label {
  margin-top: 1.4cqw;
  font-size: clamp(0.7rem, 2.7cqw, 1.08rem);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.22em;
  line-height: 1;
}

.ceremony-location {
  position: absolute;
  top: 91.5%;
  left: 8%;
  right: 8%;
  z-index: 3;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(0.72rem, 2.8cqw, 1.12rem);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.2em;
}

/* ---------- reception ---------- */

.event-time {
  margin: 5cqw 0 0;
  color: var(--ink-soft);
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.88rem, 3.9cqw, 1.5rem);
  line-height: 1.3;
}

.event-time--tight { margin: 0.8cqw 0 0; }

.venue {
  margin: 3.6cqw 0 0;
  color: var(--ink-deep);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.3rem, 5.5cqw, 2.1rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

.venue-note {
  margin: 1.8cqw 0 0;
  color: var(--ink-soft);
  font-size: clamp(0.74rem, 2.9cqw, 1.16rem);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.24em;
}

.map-link {
  margin: 2cqw 0 0;
  color: var(--wine-deep);
  font-size: clamp(0.72rem, 2.8cqw, 1.12rem);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.24em;
  text-decoration: none;
  border-bottom: 1px solid rgba(143, 39, 29, 0.4);
}

.map-link:active { border-bottom-color: var(--wine-deep); opacity: 0.7; }
@media (hover: hover) {
  .map-link:hover { border-bottom-color: var(--wine-deep); }
}

.attire {
  margin: 3.4cqw 0 0;
  max-width: 24ch;
  color: var(--ink-soft);
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.8rem, 3.2cqw, 1.25rem);
  line-height: 1.3;
  text-wrap: balance;
}

.accent { color: var(--wine); font-weight: 500; }

.ravens {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1406 / 1258;
  background-image: url("assets/reception-ravens-red-detail-v2-ink.webp");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

/* ---------- rsvp ---------- */

.rsvp-dragon {
  --hover-amplitude: 0.52cqw;
  position: absolute;
  z-index: 1;
  top: 8%;
  left: 1%;
  width: 98%;
  aspect-ratio: 1687 / 932;
  pointer-events: none;
  animation: dragon-amplitude 7.1s ease-in-out infinite;
}

.rsvp-dragon::before {
  position: absolute;
  inset: 0;
  background-image: url("assets/rsvp-dragon-red-talons-detail-ink.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  transform-origin: 52% 48%;
  animation: dragon-hover 1.5s linear infinite;
  will-change: transform;
}

.send-word {
  margin: 4.6cqw 0 0;
  color: var(--ink-soft);
  font-size: clamp(0.74rem, 3cqw, 1.2rem);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
}

.rsvp-message {
  margin: 4cqw 0 0;
  max-width: 27ch;
  color: var(--ink-mid);
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.95rem, 4.2cqw, 1.6rem);
  line-height: 1.4;
  text-wrap: pretty;
}

.closing-mark {
  width: 1.5cqw;
  height: 1.5cqw;
  margin: 7.5cqw 0 0;
  border: 1px solid var(--ink-soft);
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .rule-line { transform: scaleX(1); }
  .ampersand::before,
  .ampersand::after,
  .cover-rule { transform: scaleX(1); }
}