*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: #1b1a1a;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.55;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.invitation { max-width: var(--max-width); margin: 0 auto; background: var(--bg); overflow: hidden; }
section { padding: 48px var(--gutter); }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
h1, h2 { font-weight: 500; }
.script { font-family: var(--font-script); font-weight: 400; line-height: .9; }
[data-text] { white-space: pre-line; }

.photo {
  position: relative; overflow: hidden; background: var(--surface);
  border-radius: var(--radius-photo);
}
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 28px; border-radius: 999px; border: 0; cursor: pointer;
  font: 500 14px/1 var(--font-serif); text-decoration: none;
}
.pill--cream { background: var(--accent); color: var(--accent-ink); }
.pill--light { background: #fff; color: #222; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }