:root {
  --paper: #f5efe7;
  --paper-deep: #eadfd3;
  --wine: #722f3c;
  --wine-dark: #4b1d29;
  --gold: #b88953;
  --ink: #34272a;
  --muted: #806e6c;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font-family: 'Noto Sans', sans-serif; }
button { font: inherit; }
.invitation { min-height: 100svh; position: relative; overflow: hidden; padding: 34px clamp(24px, 7vw, 110px) 30px; display: flex; flex-direction: column; isolation: isolate; background: linear-gradient(135deg, #f8efe6 0%, #f6e7de 54%, #e9d8d1 100%); }
.invitation::before { content: ''; position: absolute; inset: 0; z-index: -2; opacity: .14; background-image: url('assets/kazakh-pattern.svg'), radial-gradient(circle at 25% 25%, rgba(114,47,60,.035) 0 1px, transparent 1.5px); background-size: 520px 520px, 26px 26px; background-position: center, 0 0; }
.invitation::after { content: ''; position: absolute; width: 70vw; height: 70vw; max-width: 850px; max-height: 850px; right: -24vw; top: -30vw; z-index: -1; border: 1px solid rgba(114,47,60,.1); border-radius: 50%; box-shadow: 0 0 0 25px rgba(114,47,60,.025), 0 0 0 50px rgba(114,47,60,.025); }
.grain { position: absolute; inset: 0; opacity: .045; z-index: 2; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.topbar, .footer { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; }
.eyebrow, .kicker, .venue small, .event-item small, .footer span { text-transform: uppercase; letter-spacing: .19em; font-size: 10px; font-weight: 700; color: var(--muted); }
.eyebrow { text-transform: none; letter-spacing: .08em; color: var(--wine); font: 600 clamp(27px, 4vw, 36px)/1 'Noto Serif', serif; text-shadow: 0 2px 0 rgba(255,250,244,.9), 0 5px 14px rgba(114,47,60,.12); }
.eyebrow::before, .eyebrow::after { color: var(--gold); content: '❧'; display: inline-block; font-size: .6em; margin: 0 16px; vertical-align: middle; }
.music-button { position: fixed; bottom: 22px; right: clamp(20px, 7vw, 110px); z-index: 1000; border: 0; background: none; color: var(--wine); display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 14px; min-width: 72px; min-height: 72px; pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: opacity .2s ease; }
.music-button:hover { opacity: .75; }
.music-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; border-radius: 30px; }
.music-ring { width: 62px; height: 62px; border: 1px solid rgba(114,47,60,.4); border-radius: 50%; display: grid; place-items: center; position: relative; pointer-events: none; background: conic-gradient(from 0deg, rgba(184,137,83,.6), rgba(114,47,60,.14), rgba(184,137,83,.6), rgba(114,47,60,.14), rgba(184,137,83,.6)); box-shadow: 0 8px 20px rgba(114,47,60,.18); }
.music-ring::after { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(114,47,60,.35); border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(114,47,60,.28) 0 8deg, transparent 8deg 22deg); -webkit-mask: radial-gradient(transparent 0 62%, #000 63%); mask: radial-gradient(transparent 0 62%, #000 63%); animation: spin 9s linear infinite; }
.music-ring::before { content: ''; position: absolute; inset: 4px; border: 1px dashed rgba(184,137,83,.7); border-radius: 50%; }
.music-icon { width: 0; height: 0; margin-left: 3px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid var(--wine); }
.music-button.is-playing .music-icon { width: 10px; height: 13px; margin-left: 0; border: 0; position: relative; background: linear-gradient(90deg, var(--wine) 0 3px, transparent 3px 6px, var(--wine) 6px 9px); }
.music-button.is-playing .music-ring { animation: pulse 1.8s ease-in-out infinite; }
.music-label { font-size: 11px; font-weight: 600; }
.hero { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(42px, 10vh, 100px) clamp(14px, 3vw, 42px) 40px; position: relative; z-index: 1; background: rgba(250,245,239,.94); border: 1px solid rgba(114,47,60,.12); border-radius: 24px; box-shadow: 0 14px 40px rgba(114,47,60,.07); }
.folklore-art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .075; mix-blend-mode: multiply; pointer-events: none; }
.kicker { color: var(--gold); margin: 0 0 17px; }
h1 { position: relative; z-index: 2; color: var(--wine); font: 600 clamp(82px, 13vw, 172px)/.9 'Noto Serif', serif; letter-spacing: -.045em; margin: 0; text-shadow: 0 2px 0 rgba(248,239,230,.9), 0 0 18px rgba(248,239,230,.85); }
.intro { color: var(--wine-dark); font: 500 clamp(17px, 2vw, 24px)/1.45 'Noto Serif', serif; margin: 30px 0 18px; }
.flourish { display: flex; align-items: center; width: min(300px, 60vw); gap: 12px; color: var(--gold); margin: 0 0 18px; }
.flourish span { height: 1px; background: linear-gradient(90deg, transparent, rgba(184,137,83,.75)); flex: 1; }
.flourish span:last-child { background: linear-gradient(90deg, rgba(184,137,83,.75), transparent); }
.flourish i { font-style: normal; font-size: 15px; }
.invitation-copy { color: var(--muted); font-size: 13px; line-height: 1.8; margin: 0 0 32px; }
.event-card { display: flex; align-items: center; gap: clamp(24px, 5vw, 52px); padding: 20px clamp(20px, 4vw, 38px); border-top: 1px solid rgba(114,47,60,.22); border-bottom: 1px solid rgba(114,47,60,.22); }
.event-item { display: flex; align-items: center; gap: 13px; text-align: left; }
.event-item span:last-child { display: flex; flex-direction: column; gap: 4px; }
.event-icon { color: var(--gold); width: 26px; height: 26px; display: block; }
.event-icon svg { width: 100%; height: 100%; }
.event-item small { color: var(--muted); font-size: 9px; letter-spacing: .14em; }
.event-item strong { color: var(--wine-dark); font-size: 12px; font-weight: 600; white-space: nowrap; }
.event-divider { width: 1px; height: 37px; background: rgba(114,47,60,.2); }
.venue { display: flex; align-items: center; gap: 16px; margin-top: 28px; color: var(--wine-dark); }
.venue div { display: flex; flex-direction: column; gap: 5px; }
.venue small { font-size: 9px; color: var(--gold); }
.venue strong { font: 600 20px 'Noto Serif', serif; }
.venue em { color: var(--muted); font-size: 11px; font-style: normal; }
.venue-line { width: 32px; height: 1px; background: var(--gold); }
.footer { justify-content: center; flex-direction: row; align-items: baseline; gap: 9px; margin-top: auto; margin-bottom: 70px; padding: 10px 18px; background: rgba(248,239,230,.72); border-radius: 30px; }
.footer span::after { content: '·'; margin-left: 9px; color: var(--gold); }
.footer strong { color: var(--wine); font: 600 24px 'Noto Serif', serif; }
.footer span::after { content: none; margin: 0; }
.rsvp-section { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(300px, .9fr) minmax(420px, 1.1fr); gap: clamp(34px, 7vw, 92px); max-width: 1080px; width: 100%; align-self: center; padding: 52px clamp(14px, 3vw, 42px) 60px; border-top: 1px solid rgba(114,47,60,.2); }
.rsvp-heading { padding-top: 4px; }
.rsvp-heading h2 { color: var(--wine); font: 600 clamp(32px, 4vw, 48px)/1.08 'Noto Serif', serif; letter-spacing: -.025em; max-width: 360px; overflow-wrap: break-word; margin: 13px 0 15px; }
.rsvp-heading p { color: var(--muted); font-size: 12px; line-height: 1.7; max-width: 270px; }
.meaning-section, .program-section { position: relative; z-index: 3; max-width: 760px; width: 100%; align-self: center; text-align: center; }
.meaning-section { padding: 86px clamp(16px, 4vw, 60px) 94px; }
.meaning-section h2, .program-section h2 { color: var(--wine); font: 600 clamp(38px, 5vw, 58px)/1.05 'Noto Serif', serif; margin: 12px 0 18px; }
.meaning-section > p:not(.quote) { max-width: 530px; margin: 0 auto; color: var(--muted); font-size: 14px; line-height: 1.9; }
.ornament-divider { display: flex; align-items: center; gap: 14px; max-width: 300px; margin: 0 auto 26px; color: var(--gold); }
.ornament-divider span { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(184,137,83,.7)); }
.ornament-divider span:last-child { background: linear-gradient(90deg, rgba(184,137,83,.7), transparent); }
.ornament-divider b { font-size: 22px; font-weight: 400; transform: rotate(-12deg); }
.quote { margin: 30px auto 0; color: var(--wine); font: 600 20px/1.45 'Noto Serif', serif; max-width: 440px; }
.program-section { padding: 64px clamp(16px, 4vw, 60px) 80px; text-align: left; }
.section-heading { text-align: center; margin-bottom: 30px; }
.program-list { border-top: 1px solid rgba(114,47,60,.2); }
.program-item { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: 22px 8px; border-bottom: 1px solid rgba(114,47,60,.18); }
.program-number { color: var(--gold); font: 600 18px 'Noto Serif', serif; }
.program-item strong { color: var(--wine-dark); font: 600 20px 'Noto Serif', serif; }
.program-item p { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 5px 0 0; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.rsvp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-width: 0; }
.rsvp-form label { color: var(--wine-dark); display: grid; gap: 7px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rsvp-form input, .rsvp-form select { width: 100%; border: 1px solid rgba(114,47,60,.22); border-radius: 4px; background: rgba(255,255,255,.35); color: var(--ink); padding: 13px 12px; font: 500 12px Manrope, sans-serif; outline: none; }
.rsvp-form input::placeholder { color: #aa9690; }
.rsvp-form input:focus, .rsvp-form select:focus { border-color: var(--wine); box-shadow: 0 0 0 3px rgba(114,47,60,.1); }
.submit-button { grid-column: 1 / -1; min-height: 48px; border: 0; border-radius: 4px; background: var(--wine); color: #fff8f1; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-size: 11px; font-weight: 700; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.submit-button:hover { background: var(--wine-dark); transform: translateY(-2px); }
.submit-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.submit-button:disabled { opacity: .65; cursor: wait; transform: none; }
.form-status { grid-column: 1 / -1; min-height: 16px; margin: 0; font-size: 11px; color: var(--wine); }
.ornament { position: absolute; color: rgba(184,137,83,.38); font-size: 18px; z-index: 1; }
.ornament-top { top: 26%; left: 12%; }
.ornament-bottom { bottom: 25%; right: 11%; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(114,47,60,.08); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .rsvp-section { grid-template-columns: 1fr; max-width: 680px; gap: 26px; } .rsvp-heading h2 { max-width: 100%; } }
@media (max-width: 600px) { .invitation { padding: 20px 16px 24px; } .eyebrow { font-size: 25px; text-align: center; } .eyebrow::before, .eyebrow::after { margin: 0 8px; } .music-label { display: none; } .hero { padding: 54px 15px 42px; background: rgba(250,245,239,.98); } .folklore-art { opacity: .045; } .kicker, .intro { position: relative; z-index: 3; text-shadow: 0 1px 0 #fffaf4; } .intro { font-size: 18px; margin-top: 24px; } .invitation-copy { font-size: 12px; margin-bottom: 26px; } .event-card { gap: 18px; padding: 16px 4px; } .event-item { gap: 8px; } .event-item strong { font-size: 10px; } .event-icon { width: 22px; } .venue { margin-top: 23px; } .venue-line { width: 18px; } .venue strong { font-size: 18px; } .meaning-section { padding: 76px 13px 78px; } .meaning-section h2, .program-section h2 { font-size: 39px; } .meaning-section > p:not(.quote) { font-size: 13px; line-height: 1.85; } .quote { font-size: 18px; } .program-section { padding: 58px 8px 70px; } .program-item { grid-template-columns: 42px 1fr; gap: 12px; padding: 20px 0; } .program-item strong { font-size: 19px; } .program-item p { font-size: 12px; } .rsvp-section { grid-template-columns: 1fr; gap: 24px; padding: 36px 0 48px; } .rsvp-heading h2 { font-size: clamp(32px, 10vw, 44px); } .rsvp-heading p { max-width: 100%; } .footer { margin-bottom: 76px; } }
@media (max-width: 390px) { .event-card { gap: 10px; } .event-item strong { font-size: 9px; } .event-divider { height: 30px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }