@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400&family=Pinyon+Script&family=Jost:wght@400;500&family=Tiro+Devanagari+Sanskrit&display=swap');

/* Palette from the invitation box, quietened:
   ink-navy depths · warm pearl text (never pure white) · muted champagne used sparingly */
:root {
  --ink: #0a1230; --ink-2: #0d1838; --ink-3: #14214a; --card: #121e45; --card-2: #0e1939;
  --pearl: #e8e1d3; --pearl-2: rgba(232, 225, 211, .78); --mist: #98a1bd; --mist-2: #6d7697;
  --champ: #c8b48a; --champ-2: #a38e64; --line: rgba(200, 180, 138, .2); --line-2: rgba(200, 180, 138, .38);
  --rose: #c76b7e;
  --f-display: 'Cinzel', 'Trajan Pro', serif;
  --f-serif: 'Cormorant Garamond', Georgia, serif;
  --f-script: 'Pinyon Script', cursive;
  --f-ui: 'Jost', system-ui, sans-serif;
  --f-deva: 'Tiro Devanagari Sanskrit', serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; overflow-x: clip; background: var(--ink); color: var(--pearl); font-family: var(--f-serif); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
img, svg { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--champ); color: var(--ink); }
:focus-visible { outline: 1px solid var(--champ); outline-offset: 3px; border-radius: 6px; }

.cap { font: 400 10.5px/1.5 var(--f-display); letter-spacing: .32em; text-transform: uppercase; color: var(--champ); }
.cap.dim { color: var(--mist); }
.script { font-family: var(--f-script); font-weight: 400; }
.names { font: 400 clamp(60px, 18vw, 104px)/1 var(--f-script); background: linear-gradient(180deg, #f1e7cf 10%, #c3a977 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* script swashes overhang their box — give every split letter room so nothing gets clipped */
.names span { display: inline-block; background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; padding: .14em .16em; margin: -.14em -.16em; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 999px; font: 500 12.5px var(--f-ui); letter-spacing: .05em; text-decoration: none; border: 1px solid var(--line-2); color: var(--pearl); background: rgba(232, 225, 211, .04); transition: background .3s, border-color .3s; white-space: nowrap; }
.btn:active { background: rgba(232, 225, 211, .1); }
.btn.solid { background: var(--pearl); color: var(--ink); border-color: var(--pearl); }
.btn svg { width: 16px; height: 16px; flex: none; }

.toast { position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); z-index: 90; transform: translate(-50%, 180%); padding: 12px 18px; border-radius: 999px; background: #16234e; color: var(--pearl); font: 400 13px var(--f-ui); box-shadow: inset 0 0 0 1px var(--line-2), 0 12px 30px rgba(0, 0, 0, .35); transition: transform .6s var(--ease); white-space: nowrap; }
.toast.on { transform: translate(-50%, 0); }

/* install nudge */
.nudge { position: fixed; z-index: 80; left: 50%; bottom: calc(16px + var(--safe-b)); width: min(380px, calc(100vw - 28px)); transform: translate(-50%, 150%); transition: transform .8s var(--ease);
  background: #121f48; color: var(--pearl); border-radius: 22px; padding: 18px 18px 14px 80px; font-family: var(--f-ui); box-shadow: 0 20px 60px rgba(0, 0, 0, .5), inset 0 0 0 1px var(--line-2); }
.nudge.show { transform: translate(-50%, 0); }
.nudge__art { position: absolute; left: 16px; top: 20px; width: 50px; height: 50px; color: var(--champ); }
.nudge__art .env { animation: nwig 2.6s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes nwig { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg) translateY(-2px); } }
.nudge h4 { margin: 0 0 4px; font: 500 15px/1.3 var(--f-ui); }
.nudge p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--pearl-2); }
.nudge__row { display: flex; gap: 6px; }
.nudge__yes { flex: 1; border: 0; border-radius: 999px; padding: 11px 14px; background: var(--pearl); color: var(--ink); font-weight: 500; font-size: 13px; }
.nudge__no { border: 0; background: none; color: var(--mist); font-size: 12.5px; padding: 10px; }
.nudge__ios { display: none; font-size: 12.5px; color: var(--mist); margin-top: 10px; }
.nudge.ios .nudge__ios { display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* studio credit: a slim black strip, deliberately quiet */
.studio { position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; padding: 14px 20px calc(14px + var(--safe-b)); background: #000; color: rgba(232, 225, 211, .5); font: 400 11px/1.5 var(--f-ui); letter-spacing: .04em; text-align: center; }
.studio a { color: rgba(232, 225, 211, .78); text-decoration: none; border-bottom: 1px solid rgba(200, 180, 138, .35); }
.studio a:hover, .studio a:focus-visible { color: var(--pearl); border-color: var(--champ); }
.studio span { opacity: .5; }
.studio--app { margin: 34px -16px 0; border-radius: 0; }