@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&family=Shantell+Sans:wght@500&family=Source+Sans+3:wght@300;400;600&display=swap');
* { box-sizing: border-box; }
body { margin: 0; background: #f1edf4; color: #231f20; font-family: 'Source Sans 3', sans-serif; }
main { position: relative; isolation: isolate; overflow: hidden; width: min(100%, 420px); min-height: 100dvh; margin: auto; padding: max(52px, env(safe-area-inset-top)) 18px max(36px, env(safe-area-inset-bottom)); display: grid; align-items: center; background: linear-gradient(135deg, #dce8ee, #7fa8bb); }
.content { position: relative; z-index: 1; min-width: 0; text-align: center; }
.logo { display: block; width: 60%; max-width: 280px; height: auto; margin: 0 auto 16px; }
.tagline { margin: 0 0 26px; font: 400 14px 'Jost', sans-serif; text-transform: uppercase; letter-spacing: .05em; opacity: .7; }
.stone-track { display: flex; align-items: center; width: calc(100% + 36px); margin: 0 -18px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
.stone-track::-webkit-scrollbar { display: none; }
.spacer { flex: 0 0 20%; }
.stone-slide { flex: 0 0 60%; min-width: 0; padding: 20px 0 26px; border: 0; background: transparent; scroll-snap-align: center; cursor: inherit; }
.stone-slide img { display: block; width: 90%; height: auto; margin: auto; filter: drop-shadow(0 4px 8px #0005); user-select: none; }
.stone-track.dragging { scroll-snap-type: none; cursor: grabbing; }
.names, .descriptions { display: grid; max-width: 320px; margin: auto; }
.names h1, .descriptions p { grid-area: 1 / 1; margin: 0; min-width: 0; align-self: start; }
[data-description][aria-hidden='true'] { visibility: hidden; }
.names h1 { font: 400 18px 'Jost', sans-serif; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.descriptions p { font: 300 14px/1.5 'Source Sans 3', sans-serif; }
.stones { margin-bottom: 28px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.invitation { max-width: 320px; margin: auto; border-top: 1px solid #536e7c40; padding-top: 22px; }
.invitation h2 { font: 500 19px/1.35 'Jost', sans-serif; margin: 0 0 14px; }
.invitation p { font-size: 15px; line-height: 1.55; margin: 0 0 14px; }
.invitation .availability { font-size: 13px; color: #354c57; margin: 18px 0 22px; }
.primary { display: flex; justify-content: center; align-items: center; min-height: 44px; width: 100%; max-width: 270px; margin: auto; padding: 8px 22px; color: #231f20; text-decoration: none; background: url('/assets/button.svg') center/100% 100% no-repeat; font: 500 13px 'Shantell Sans', sans-serif; text-transform: uppercase; }
.invitation .destination { margin: 8px 0 0; font-size: 12px; color: #3c535d; }
.destination a { color: inherit; text-decoration: none; }
.qr-note, .no-script { font-size: 13px; line-height: 1.4; max-width: 320px; margin: 0 auto 12px; }
.motif-defs { position: absolute; width: 0; height: 0; }
.motifs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.motifs svg { position: absolute; left: var(--x); top: var(--y); width: 60px; height: 65px; opacity: .12; }
button:focus-visible, a:focus-visible, .stone-track:focus-visible { outline: 2px solid #344b55; outline-offset: 3px; border-radius: 8px; }
/* One mobile gradient on the document canvas, with transparent content above.
   Keep the lavender surround and separate content gradient on desktop. */
@media (max-width: 420px) {
  html {
    min-height: 100%;
    background-color: #b5ced9;
    background-image:
      linear-gradient(to bottom, #b5ced9 0%, transparent 18%, transparent 78%, #b5ced9 100%),
      linear-gradient(135deg, #dce8ee, #7fa8bb);
    background-attachment: fixed;
  }
  body { min-height: 100dvh; background: transparent; }
  main { background: transparent; padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .logo { margin-bottom: 8px; }
  .tagline { margin-bottom: 8px; }
  .stone-slide { padding: 8px 0 10px; }
  .stone-slide img { width: 80%; }
  .stone-track { margin-bottom: 4px; }
  .names h1 { margin-bottom: 6px; }
  .descriptions p { line-height: 1.4; }
  .stones { margin-bottom: 14px; }
  .invitation { padding-top: 12px; }
  .invitation h2 { margin-bottom: 8px; }
  .invitation p { line-height: 1.4; margin-bottom: 8px; }
  .invitation .availability { margin: 10px 0 12px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }