:root {
  color-scheme: dark;
  --stage-ratio: 1672 / 941;
  --ink: #f8f1df;
  --muted: #d5ccb7;
  --gold: #d8bd77;
  --gold-soft: rgba(216, 189, 119, .46);
  --glass: rgba(20, 29, 17, .84);
  --glass-deep: rgba(13, 20, 12, .94);
  --line: rgba(239, 219, 163, .42);
  --shadow: rgba(0, 0, 0, .58);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #0d120b; }
body {
  min-width: 320px;
  min-height: 100dvh;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: #0d120b;
  font-family: Georgia, "Times New Roman", serif;
}
button, input, textarea { font: inherit; }
a { color: inherit; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: .75rem;
  left: .75rem;
  transform: translateY(-170%);
  padding: .7rem 1rem;
  border-radius: .5rem;
  color: #10170e;
  background: #fff5d7;
  font-family: system-ui, sans-serif;
  font-weight: 700;
}
.skip-link:focus { transform: none; }

.preview-banner {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: .7rem;
  transform: translateX(-50%);
  max-width: calc(100vw - 2rem);
  padding: .5rem .85rem;
  border: 1px solid #e8c96d;
  border-radius: 999px;
  color: #201b0d;
  background: #fff0b8;
  font: 700 .78rem/1.2 system-ui, sans-serif;
  text-align: center;
}

.ambient-backing {
  position: fixed;
  inset: -5vmax;
  z-index: -2;
  background:
    linear-gradient(rgba(7, 10, 6, .34), rgba(7, 10, 6, .72)),
    url("assets/background/forest-glade-final.png") center / cover no-repeat;
  filter: blur(24px) saturate(.76) brightness(.55);
  transform: scale(1.08);
}
.ambient-backing::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 35%, transparent 0 38%, rgba(0, 0, 0, .58) 100%);
}

.guest-viewport {
  display: grid;
  width: 100vw;
  min-height: 100dvh;
  place-items: center;
}

.scene-stage {
  position: relative;
  width: min(100vw, calc(100dvh * 1672 / 941));
  aspect-ratio: var(--stage-ratio);
  overflow: hidden;
  isolation: isolate;
  background: #151d11;
  box-shadow: 0 1.2rem 4rem rgba(0, 0, 0, .7);
}

.scene-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}
.scene-warmth {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 73% 42%, rgba(255, 223, 135, .13), transparent 26%),
    linear-gradient(to bottom, rgba(9, 13, 7, .06), rgba(9, 13, 7, .15));
}
.scene-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 7vw rgba(0, 0, 0, .38);
}

.mist-layer {
  position: absolute;
  inset: -8%;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background:
    radial-gradient(ellipse at 35% 65%, rgba(235, 241, 226, .82), transparent 34%),
    radial-gradient(ellipse at 72% 55%, rgba(229, 237, 218, .76), transparent 36%),
    linear-gradient(110deg, rgba(220, 231, 210, .74), rgba(247, 244, 224, .5), rgba(215, 228, 207, .72));
  filter: blur(18px);
  transform: scale(1.12);
}
.mist-front {
  z-index: 6;
  opacity: 0;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 252, 235, .78), transparent 32%),
    linear-gradient(95deg, rgba(235, 240, 228, .82), rgba(255, 249, 229, .65), rgba(228, 238, 221, .8));
  filter: blur(24px);
}
.js .mist-layer { opacity: 1; visibility: visible; }
.js .scene-stage.mist-clearing .mist-back { animation: mist-clear-back 2s ease-out forwards; }
.js .scene-stage.mist-clearing .mist-front { animation: mist-clear-front 2s ease-out forwards; }
@keyframes mist-clear-back {
  0% { opacity: .96; transform: scale(1.12) translateX(0); }
  60% { opacity: .58; }
  100% { opacity: 0; transform: scale(1.06) translateX(-4%); visibility: hidden; }
}
@keyframes mist-clear-front {
  0% { opacity: .98; transform: scale(1.15) translateX(0); }
  42% { opacity: .72; }
  100% { opacity: 0; transform: scale(1.05) translateX(5%); visibility: hidden; }
}

.scene-person,
.scene-bird {
  position: absolute;
  z-index: 3;
  display: block;
  max-width: none;
  height: auto;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 .5rem .55rem rgba(0, 0, 0, .34));
}
.person-groom { left: 26.151%; top: 50.277%; width: 12.55%; }
.person-priestess { left: 45.514%; top: 47.503%; width: 15.789%; }
.person-bride { left: 66.451%; top: 50.485%; width: 15.268%; }
.bird-tui { left: 21.1%; top: 10.818%; width: 2.752%; }
.bird-fantail { left: 79.246%; top: 37.201%; width: 3.071%; }

.js .scene-person,
.js .scene-bird { opacity: 0; visibility: hidden; }
.js .person-priestess.is-visible,
.js .person-bride.is-visible,
.js .person-groom.is-visible {
  visibility: visible;
  animation: person-reveal .45s ease-out forwards;
}
.js .scene-bird.is-visible {
  visibility: visible;
  opacity: 1;
  animation: bird-pop .16s ease-out both, bird-idle 5.8s ease-in-out .2s infinite;
}
.js .bird-tui.is-visible { animation-duration: .16s, 6.6s; animation-delay: 0s, .45s; }
@keyframes person-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes bird-pop { from { opacity: 0; transform: scale(.62); } to { opacity: 1; transform: scale(1); } }
@keyframes bird-idle {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  48% { translate: 0 -2px; rotate: 1.8deg; }
  72% { translate: 0 -1px; rotate: -1deg; }
}

.celtic-frame {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}
.frame-piece { position: absolute; display: block; opacity: .94; filter: drop-shadow(0 .16rem .16rem rgba(0, 0, 0, .48)); }
.frame-corner { width: 20%; height: auto; }
.frame-top-left { top: 0; left: 0; }
.frame-top-right { top: 0; right: 0; }
.frame-bottom-left { bottom: 0; left: 0; }
.frame-bottom-right { right: 0; bottom: 0; }
.frame-centre { left: 50%; width: 20%; height: auto; transform: translateX(-50%); }
.frame-top-centre { top: .1%; }
.frame-bottom-centre { bottom: .1%; }
.frame-side { top: 50%; width: 3.5%; height: auto; transform: translateY(-50%); }
.frame-left-middle { left: .25%; }
.frame-right-middle { right: .25%; }

.mirror-entry {
  position: absolute;
  z-index: 9;
  left: 54.58%;
  top: 54.4%;
  width: 4.9%;
  aspect-ratio: .82;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgba(237, 224, 190, .22);
  border-radius: 48%;
  background:
    radial-gradient(circle at 42% 35%, rgba(255, 255, 255, .14), rgba(209, 221, 211, .02) 58%, rgba(0, 0, 0, .06) 100%);
  box-shadow: inset 0 0 .45rem rgba(255, 255, 255, .12), 0 0 .45rem rgba(225, 214, 170, .08);
  cursor: pointer;
}
.js .mirror-entry { opacity: 0; visibility: hidden; pointer-events: none; }
.js .mirror-entry.is-ready { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s ease; }
.mirror-entry:hover { border-color: rgba(255, 244, 202, .55); box-shadow: inset 0 0 .7rem rgba(255, 255, 255, .18), 0 0 .9rem rgba(241, 226, 168, .26); }
.mirror-entry:focus-visible { outline: 3px solid #fff4c9; outline-offset: 4px; }
.mirror-entry:disabled { cursor: default; }
.mirror-glint {
  position: absolute;
  top: 15%;
  left: 16%;
  width: 25%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  background: white;
  filter: blur(1px);
  box-shadow: 0 0 .45rem .15rem rgba(255, 248, 210, .88);
}
.mirror-entry.is-ready:not(.is-activated) .mirror-glint { animation: mirror-glint 2.8s ease-in-out .35s infinite; }
@keyframes mirror-glint {
  0%, 66%, 100% { opacity: 0; transform: scale(.5); }
  73% { opacity: .95; transform: scale(1); }
  82% { opacity: 0; transform: translate(115%, 95%) scale(.35); }
}
.mirror-prompt {
  position: absolute;
  z-index: 9;
  left: 52.1%;
  top: 65.8%;
  width: 12%;
  margin: 0;
  padding: .35rem .45rem;
  border: 1px solid rgba(236, 219, 170, .32);
  border-radius: 999px;
  color: #fff7dd;
  background: rgba(12, 19, 11, .72);
  box-shadow: 0 .25rem .7rem rgba(0, 0, 0, .38);
  font: 700 clamp(.58rem, .68vw, .82rem)/1.2 system-ui, sans-serif;
  text-align: center;
  text-shadow: 0 1px 2px #000;
}
.js .mirror-prompt { opacity: 0; visibility: hidden; }
.js .mirror-prompt.is-ready { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.js .mirror-prompt.is-hidden { opacity: 0; visibility: hidden; transition: opacity .2s ease; }

.audio-control {
  position: absolute;
  z-index: 10;
  top: 4.7%;
  right: 20.5%;
  display: grid;
  width: clamp(44px, 3.1%, 54px);
  aspect-ratio: 1;
  place-items: center;
  padding: .65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #f5e7bb;
  background: rgba(17, 25, 15, .74);
  box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .35), inset 0 0 .6rem rgba(255, 244, 205, .06);
  cursor: pointer;
}
.js .audio-control { opacity: 0; visibility: hidden; }
.js .audio-control.is-ready { opacity: .92; visibility: visible; transition: opacity .3s ease; }
.audio-control:hover { background: rgba(28, 39, 24, .9); }
.audio-control:focus-visible { outline: 3px solid #fff1ba; outline-offset: 2px; }
.audio-control svg { width: 100%; fill: currentColor; }
.audio-control .icon-sound { display: block; }
.audio-control .icon-muted { display: none; }
.audio-control.is-muted .icon-sound { display: none; }
.audio-control.is-muted .icon-muted { display: block; }

.content-window {
  position: absolute;
  z-index: 6;
  top: 5.7%;
  left: 50%;
  display: flex;
  width: min(48%, 810px);
  height: 12.5%;
  min-height: 92px;
  transform: translateX(-50%);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--gold-soft);
  border-radius: clamp(16px, 1.8vw, 30px);
  color: var(--ink);
  background:
    linear-gradient(145deg, rgba(48, 58, 38, .83), rgba(17, 25, 15, .92) 65%),
    rgba(17, 25, 15, .88);
  box-shadow:
    0 1.2rem 3rem var(--shadow),
    inset 0 0 0 1px rgba(255, 247, 214, .08),
    inset 0 1rem 3rem rgba(255, 244, 200, .025);
  backdrop-filter: blur(12px) saturate(1.15);
}
.content-window::before {
  content: "";
  position: absolute;
  inset: .45rem;
  z-index: -1;
  border: 1px solid rgba(238, 218, 161, .2);
  border-radius: calc(clamp(16px, 1.8vw, 30px) - .35rem);
  pointer-events: none;
}
.js .content-window { opacity: 0; visibility: hidden; }
.js .content-window.is-ready { opacity: 1; visibility: visible; transition: opacity .4s ease; }
.content-window.is-expanded {
  width: min(54%, 900px);
  height: 43.5%;
  min-height: 270px;
  transition: width .8s cubic-bezier(.2,.75,.2,1), height .8s cubic-bezier(.2,.75,.2,1);
}
.content-header { flex: 0 0 auto; padding: 1rem 4.4rem .7rem 1.5rem; text-align: center; }
.event-kicker {
  margin: 0 0 .3rem;
  color: #e6cb83;
  font-family: system-ui, sans-serif;
  font-size: clamp(.63rem, .72vw, .83rem);
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.content-header h1 {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 2.55rem);
  font-weight: 500;
  line-height: 1.05;
  text-wrap: balance;
  text-shadow: 0 .18rem .4rem rgba(0, 0, 0, .55);
}

.guest-menu {
  display: flex;
  flex: 0 0 auto;
  gap: .25rem;
  justify-content: center;
  padding: 0 1rem .7rem;
  border-bottom: 1px solid rgba(235, 218, 170, .18);
  font-family: system-ui, sans-serif;
  font-size: clamp(.7rem, .76vw, .88rem);
  font-weight: 700;
}
.content-window:not(.is-expanded) .guest-menu,
.content-window:not(.is-expanded) .content-scroll { display: none; }
.guest-menu a {
  min-height: 38px;
  padding: .58rem .72rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #e5ddca;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.guest-menu a:hover { border-color: rgba(226, 202, 139, .35); background: rgba(255, 255, 255, .045); }
.guest-menu a[aria-current="page"] {
  border-color: rgba(229, 201, 124, .8);
  color: #fff8e6;
  background: rgba(190, 157, 78, .16);
}
.guest-menu a:focus-visible,
.primary-action:focus-visible,
.rsvp-form input:focus-visible,
.rsvp-form textarea:focus-visible,
.gallery-card:focus-visible,
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible {
  outline: 3px solid #fff1ba;
  outline-offset: 2px;
}

.content-scroll {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  padding: .85rem 1.45rem 1.4rem;
  scrollbar-color: rgba(226, 202, 139, .52) rgba(255, 255, 255, .04);
  scrollbar-width: thin;
}
.view-panel { max-width: 78ch; margin: 0 auto; }
.view-panel[hidden] { display: none; }
.view-panel h2 { margin: 0 0 .55rem; color: #f6e8bb; font-size: clamp(1.15rem, 1.45vw, 1.65rem); font-weight: 500; }
.view-panel h3 { margin: 0 0 .25rem; color: #e6cd8e; font-size: 1rem; }
.view-panel p { margin: 0 0 .75rem; color: var(--muted); font-family: system-ui, sans-serif; font-size: clamp(.83rem, .88vw, 1rem); line-height: 1.55; white-space: pre-line; }
.view-panel .lead { color: #fff5df; font-family: Georgia, serif; font-size: clamp(1rem, 1.15vw, 1.25rem); font-style: italic; }
.information-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.information-grid article { padding: .7rem .8rem; border: 1px solid rgba(238, 218, 161, .14); border-radius: .8rem; background: rgba(255, 255, 255, .035); }
.information-grid article p { margin: 0; font-size: .84rem; }
.quiet-note { margin-top: .8rem!important; padding: .7rem .8rem; border-left: 2px solid rgba(229, 201, 124, .6); background: rgba(255, 255, 255, .03); }

.rsvp-form { display: grid; gap: .7rem; font-family: system-ui, sans-serif; }
.rsvp-form label, .rsvp-form legend { color: #eee5d2; font-size: .82rem; font-weight: 700; }
.rsvp-form input, .rsvp-form textarea {
  display: block;
  width: 100%;
  margin-top: .28rem;
  padding: .58rem .65rem;
  border: 1px solid rgba(235, 218, 170, .3);
  border-radius: .55rem;
  color: #fffaf0;
  background: rgba(4, 8, 3, .48);
}
.rsvp-form textarea { resize: vertical; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.rsvp-form fieldset { margin: 0; padding: .55rem .7rem; border: 1px solid rgba(235, 218, 170, .22); border-radius: .65rem; }
.rsvp-form .choice { display: inline-flex; align-items: center; gap: .35rem; margin: .3rem .8rem .1rem 0; font-weight: 500; }
.rsvp-form .choice input { display: inline; width: auto; margin: 0; }
.primary-action {
  justify-self: start;
  min-height: 44px;
  padding: .65rem 1.1rem;
  border: 1px solid rgba(238, 213, 145, .8);
  border-radius: 999px;
  color: #fff9e7;
  background: linear-gradient(180deg, rgba(173, 139, 66, .58), rgba(102, 79, 34, .72));
  cursor: pointer;
}
.primary-action:disabled { opacity: .55; cursor: wait; }
.form-status { min-height: 0; margin: 0 0 .65rem; padding: 0; font-family: system-ui, sans-serif; font-size: .88rem; }
.form-status.success, .form-status.error { padding: .65rem .8rem; border-radius: .65rem; }
.form-status.success { color: #e6ffe8; background: rgba(38, 108, 61, .42); border: 1px solid rgba(117, 211, 141, .45); }
.form-status.error { color: #ffe9e4; background: rgba(134, 55, 43, .48); border: 1px solid rgba(238, 139, 124, .45); }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: .75rem; }
.gallery-card {
  display: grid;
  gap: .35rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(238, 218, 161, .23);
  border-radius: .75rem;
  color: #f6edd7;
  background: rgba(255, 255, 255, .035);
  cursor: pointer;
  text-align: left;
}
.gallery-card:hover { border-color: rgba(229, 201, 124, .7); transform: translateY(-1px); }
.gallery-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: rgba(0,0,0,.25); }
.gallery-card span { padding: .25rem .55rem .55rem; color: #d7ccb4; font: 600 .78rem/1.35 system-ui, sans-serif; }
.empty-state { padding: 1rem; border: 1px dashed rgba(235, 218, 170, .36); border-radius: .85rem; text-align: center; background: rgba(255, 255, 255, .035); }
.empty-state p { margin: 0; color: #fff3d2; font-family: Georgia, serif; font-size: 1.1rem; }

.gallery-lightbox {
  width: min(94vw, 1120px);
  max-height: 94dvh;
  padding: 0;
  overflow: visible;
  border: 1px solid rgba(238, 218, 161, .5);
  border-radius: 1rem;
  color: var(--ink);
  background: rgba(8, 13, 7, .96);
  box-shadow: 0 2rem 6rem rgba(0,0,0,.8);
}
.gallery-lightbox::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(5px); }
.gallery-lightbox figure { display: grid; max-height: 90dvh; margin: 0; padding: 1.1rem; place-items: center; }
.gallery-lightbox img { display: block; max-width: 100%; max-height: calc(90dvh - 5rem); object-fit: contain; }
.gallery-lightbox figcaption { width: 100%; min-height: 1.5rem; padding: .65rem .5rem .15rem; color: #ddd1b8; font: 600 .9rem/1.4 system-ui, sans-serif; text-align: center; }
.lightbox-close, .lightbox-nav {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 46px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(238, 218, 161, .45);
  border-radius: 50%;
  color: #fff7df;
  background: rgba(13, 20, 12, .86);
  cursor: pointer;
}
.lightbox-close { top: .7rem; right: .7rem; font-size: 1.6rem; }
.lightbox-nav { top: 50%; transform: translateY(-50%); font-size: 2rem; }
.lightbox-prev { left: .7rem; }
.lightbox-next { right: .7rem; }

@media (max-aspect-ratio: 4/3) {
  .guest-viewport { align-items: start; min-height: 100dvh; padding-top: env(safe-area-inset-top); }
  .scene-stage { width: 100vw; max-width: none; margin-top: 0; }
  .content-window {
    top: 3.5%;
    width: 72%;
    height: 13%;
    min-height: 72px;
  }
  .content-window.is-expanded {
    position: fixed;
    z-index: 20;
    inset: max(.65rem, env(safe-area-inset-top)) .65rem max(.65rem, env(safe-area-inset-bottom));
    width: auto;
    height: auto;
    min-height: 0;
    transform: none;
    border-radius: 1.15rem;
  }
  .content-header { padding: .8rem 3.5rem .5rem 1rem; }
  .content-header h1 { font-size: clamp(1.15rem, 5.4vw, 1.9rem); }
  .event-kicker { font-size: .58rem; }
  .guest-menu { justify-content: flex-start; overflow-x: auto; padding: 0 .65rem .65rem; scrollbar-width: none; }
  .guest-menu::-webkit-scrollbar { display: none; }
  .guest-menu a { flex: 0 0 auto; min-height: 44px; padding: .7rem .8rem; }
  .content-scroll { padding: .8rem 1rem 1.2rem; }
  .information-grid, .form-grid { grid-template-columns: 1fr; }
  .audio-control { position: fixed; z-index: 25; top: max(1rem, env(safe-area-inset-top)); right: 1rem; width: 46px; }
  .mirror-entry { min-width: 44px; min-height: 44px; }
  .mirror-prompt { left: 48%; top: 67%; width: 22%; font-size: .58rem; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview-banner { bottom: max(.5rem, env(safe-area-inset-bottom)); }
}

@media (max-width: 520px) {
  .frame-side { display: none; }
  .frame-corner { width: 24%; }
  .frame-centre { width: 24%; }
  .content-window { width: 78%; }
  .lightbox-nav { top: auto; bottom: .8rem; transform: none; }
  .lightbox-prev { left: .8rem; }
  .lightbox-next { right: .8rem; }
  .gallery-lightbox figure { padding: .8rem .8rem 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto!important;
    animation-duration: .001ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .001ms!important;
  }
  .js .scene-bird.is-visible { animation: none!important; opacity: 1; }
}