@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('../fonts/vazirmatn-arabic.woff2') format('woff2');
}

@font-face {
	font-family: 'Amiri';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/amiri-arabic-regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Amiri';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/amiri-arabic-bold.woff2') format('woff2');
}

:root {
    --ink: #171416;
    --night: #161617;
    --night-soft: #211f21;
    --plum: #421e31;
    --wine: #742e42;
    --wine-bright: #a85067;
    --ivory: #f7f0e5;
    --cream: #e9ddca;
    --sand: #c8b79d;
    --gold: #d6b26c;
    --gold-light: #f0dca9;
    --emerald: #1f5048;
    --sage: #a0b7a4;
    --danger: #c66168;
    --success: #8fc6ab;
    --shadow: 0 24px 80px rgba(10, 5, 9, .25);
    --serif: 'Amiri', Georgia, serif;
    --sans: 'Vazirmatn', Tahoma, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    min-width: 320px;
    margin: 0;
    color: var(--ivory);
    background: var(--night);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.85;
    overflow-x: hidden;
}
button, input, select { font: inherit; }
button, .button { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
a, button, select, input { outline-offset: 4px; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--gold-light); }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

.grain { pointer-events: none; position: fixed; inset: 0; z-index: 100; opacity: .13; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
.container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.section { padding-block: clamp(80px, 12vw, 168px); }
.eyebrow { margin: 0 0 14px; color: var(--gold); font-size: .76rem; font-weight: 600; letter-spacing: .13em; }
.eyebrow::before { content: '✦'; margin-left: 9px; font-size: .55em; vertical-align: 2px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.28; }
h1, h2 { font-family: var(--serif); font-weight: 400; }
h1 { font-size: clamp(3.4rem, 8vw, 7rem); letter-spacing: -.04em; }
h2 { font-size: clamp(2.6rem, 5.2vw, 4.6rem); letter-spacing: -.035em; }
h3 { font-size: 1.15rem; }

/* invitation opening */
.invitation-page { background: radial-gradient(circle at 60% 10%, #4c2438 0, var(--night) 34%), var(--night); }
.opening { position: relative; min-height: 100svh; isolation: isolate; overflow: hidden; }
.opening::before, .opening::after { content: ''; position: absolute; width: min(66vw, 920px); aspect-ratio: 1; pointer-events: none; border: 1px solid rgba(214, 178, 108, .18); border-radius: 43% 57% 55% 45% / 45% 44% 56% 55%; }
.opening::before { top: -39vw; right: -21vw; transform: rotate(26deg); box-shadow: inset 0 0 100px rgba(192, 130, 86, .1); }
.opening::after { bottom: -48vw; left: -17vw; transform: rotate(-32deg); }
.ambient { position: absolute; z-index: -1; width: 32rem; height: 32rem; border-radius: 50%; filter: blur(75px); opacity: .17; animation: ambientFloat 14s ease-in-out infinite alternate; }
.ambient-one { top: 19%; right: -13rem; background: #cb7390; }
.ambient-two { bottom: -15rem; left: 8%; background: #d6b26c; animation-delay: -6s; }
.topline { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; position: relative; z-index: 2; font-size: .83rem; }
.topline-actions { display: flex; align-items: center; gap: 22px; }
.brand { display: inline-flex; align-items: center; gap: 11px; letter-spacing: .04em; }
.brand-mark { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(214,178,108,.7); border-radius: 50%; color: var(--gold-light); font-family: var(--serif); font-size: .95rem; letter-spacing: -.04em; }
.text-link { color: var(--cream); border-bottom: 1px solid rgba(214,178,108,.5); padding-bottom: 2px; transition: color .2s ease; }
.text-link:hover { color: var(--gold-light); }
.envelope-stage { position: relative; min-height: calc(100svh - 70px); display: grid; place-items: center; padding-block: 78px 105px; perspective: 1200px; }
.envelope { position: relative; width: min(82vw, 625px); aspect-ratio: 1.5; filter: drop-shadow(0 35px 32px rgba(0,0,0,.35)); transform-style: preserve-3d; transition: transform 2.7s cubic-bezier(.16,1,.3,1), filter 2.4s ease; }
.envelope::before, .envelope::after { content: ''; position: absolute; inset: 0; clip-path: polygon(0 0, 50% 49%, 100% 0, 100% 100%, 0 100%); background: linear-gradient(140deg, #e7d2b1, #a4775c 90%); border-radius: 4px; }
.envelope::after { clip-path: polygon(0 100%, 50% 49%, 100% 100%); background: linear-gradient(35deg, #7c4f43, #c79e7f 73%); z-index: 3; }
.invite-card { position: absolute; z-index: 1; top: 8%; right: 7%; width: 86%; height: 82%; display: flex; align-items: center; flex-direction: column; justify-content: center; text-align: center; padding: 20px; color: var(--plum); border: 1px solid rgba(103, 51, 48, .28); background: linear-gradient(125deg, #fcf7ef, #ead5b6); box-shadow: 0 8px 18px rgba(64, 28, 21, .16); transition: transform 2.7s cubic-bezier(.16,1,.3,1) .3s, opacity .9s ease; }
.invite-card::before { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(130, 85, 53, .42); background: linear-gradient(135deg, transparent 48%, rgba(150,100,62,.08) 49%, transparent 50%); pointer-events: none; }
.invite-card .eyebrow { color: #8b5a46; position: relative; }
.monogram { position: relative; font-family: var(--serif); font-size: clamp(3.2rem, 10vw, 6.4rem); line-height: .8; color: #662f3d; letter-spacing: -.12em; }
.monogram span { display: inline-block; color: var(--gold); font-size: .43em; padding-inline: .3em; transform: translateY(-.2em); }
.invite-copy { max-width: 300px; margin: 23px auto 7px; font-size: clamp(.72rem, 1.8vw, .93rem); line-height: 2; position: relative; }
.date-small { position: relative; margin: 0; color: #80543b; font-size: .8rem; }
.envelope-flap { position: absolute; z-index: 4; inset: 0; clip-path: polygon(0 0, 50% 53%, 100% 0); transform-origin: top; border-radius: 4px 4px 0 0; background: linear-gradient(145deg, #dcb994, #9f6c5e); transition: transform 2.5s cubic-bezier(.16,1,.3,1); backface-visibility: hidden; }
.seal { position: absolute; z-index: 7; top: 45%; right: 50%; display: grid; place-items: center; width: clamp(65px, 10vw, 88px); aspect-ratio: 1; padding: 0; transform: translate(50%, -50%); border: 1px solid #e8bd8b; border-radius: 50%; color: #f4d5a8; background: radial-gradient(circle at 30% 25%, #b66070, #702b41 60%, #451827); box-shadow: 0 4px 0 #4e1927, 0 10px 17px rgba(47, 12, 20, .55); font-family: var(--serif); font-size: .95rem; transition: transform .4s ease, opacity .4s ease; }
.seal:hover { transform: translate(50%, -50%) scale(1.08); }
.open-hint { position: absolute; bottom: 55px; right: 50%; transform: translateX(50%); color: rgba(247,240,229,.67); font-size: .75rem; letter-spacing: .08em; }
.floral { position: absolute; color: var(--gold); opacity: .75; font-size: clamp(5rem, 12vw, 10rem); animation: spinDrift 10s ease-in-out infinite alternate; }
.floral-a { top: 16%; right: 8%; }
.floral-b { bottom: 13%; left: 10%; color: #ca8692; animation-delay: -5s; }
.scroll-cue { position: absolute; z-index: 4; bottom: 21px; right: 50%; width: 24px; height: 43px; transform: translateX(50%); border: 1px solid rgba(240,220,169,.57); border-radius: 14px; }
.scroll-cue span { position: absolute; top: 7px; right: 50%; width: 4px; height: 8px; transform: translateX(50%); border-radius: 99px; background: var(--gold-light); animation: scrollDot 1.8s ease infinite; }
.is-open .envelope { transform: translateY(25px) scale(.89); filter: drop-shadow(0 14px 25px rgba(0,0,0,.25)); }
.is-open .envelope-flap { transform: rotateX(-166deg); }
.is-open .invite-card { transform: translateY(-155px) rotateX(3deg); }
.is-open .seal { transform: translate(50%, -50%) scale(0); opacity: 0; pointer-events: none; }
.is-open .open-hint { opacity: 0; }

/* narrative */
.story { position: relative; text-align: center; }
.story::before { content: '✦'; position: absolute; top: 80px; right: calc(50% - 260px); color: rgba(214,178,108,.3); font-size: 6rem; }
.section-heading { max-width: 710px; margin: 0 auto 58px; }
.section-heading h1, .section-heading h2 { margin-bottom: 18px; }
.section-heading h1 { color: var(--gold-light); }
.lead { max-width: 570px; margin-inline: auto; color: var(--cream); font-size: 1.05rem; }
.centered { text-align: center; }
.details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: right; }
.detail-card { position: relative; min-height: 270px; display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; overflow: hidden; border: 1px solid rgba(240,220,169,.16); background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.015)); box-shadow: 0 15px 40px rgba(0,0,0,.09); transition: transform .4s ease, border-color .4s ease; }
.detail-card:hover { transform: translateY(-8px); border-color: rgba(240,220,169,.5); }
.detail-card::before { content: ''; position: absolute; top: -85px; left: -80px; width: 230px; aspect-ratio: 1; border: 1px solid rgba(240,220,169,.13); border-radius: 50%; }
.detail-card p { position: relative; margin-bottom: 5px; color: var(--sand); font-size: .8rem; }
.detail-card strong { position: relative; color: var(--ivory); font-size: 1.17rem; font-weight: 500; }
.detail-card > span:not(.card-icon), .detail-card time { position: relative; display: block; margin-top: 6px; color: var(--cream); font-size: .8rem; }
.card-icon { position: absolute; top: 27px; right: 28px; color: var(--gold); font-size: 2.2rem; }
.date-card { background: linear-gradient(145deg, #54273a, #27171f); }
.dress-card { background: linear-gradient(145deg, #203f3a, #172b29); }
.countdown { direction: ltr; text-align: right; font-variant-numeric: tabular-nums; color: var(--gold-light) !important; }
.underlined-link { position: relative; z-index: 1; width: fit-content; display: block; margin-top: 12px; color: var(--gold-light); font-size: .8rem; border-bottom: 1px solid rgba(240,220,169,.55); }
.timeline-section { position: relative; background: linear-gradient(90deg, rgba(75,32,49,.35), transparent 60%), #1b191b; overflow: hidden; }
.timeline-section::after { content: ''; position: absolute; width: 700px; height: 700px; top: -460px; left: -270px; border: 1px solid rgba(214,178,108,.14); border-radius: 48% 52% 34% 66%; transform: rotate(42deg); }
.timeline { position: relative; z-index: 1; max-width: 760px; margin: 50px auto 0; padding: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: 110px 1fr; gap: 34px; padding: 0 0 34px; position: relative; }
.timeline li::after { content: ''; position: absolute; top: 7px; right: 127px; width: 8px; height: 8px; border: 2px solid var(--gold); border-radius: 50%; background: var(--night); box-shadow: 0 0 0 6px rgba(214,178,108,.08); }
.timeline li:not(:last-child)::before { content: ''; position: absolute; top: 18px; right: 131px; width: 1px; height: calc(100% - 9px); background: linear-gradient(var(--gold), transparent); }
.timeline time { direction: ltr; color: var(--gold); text-align: left; font-family: var(--serif); font-size: 1.4rem; }
.timeline h3 { margin: -5px 0 2px; font-weight: 500; }
.timeline p { margin: 0; color: var(--sand); font-size: .9rem; }

/* RSVP */
.rsvp-section { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(45px, 9vw, 135px); align-items: center; min-height: 620px; }
.rsvp-copy { position: relative; z-index: 1; }
.rsvp-copy h2 { margin-bottom: 17px; color: var(--gold-light); }
.rsvp-copy > p:not(.eyebrow) { max-width: 500px; color: var(--cream); }
.deadline { margin-top: 28px !important; color: var(--gold) !important; font-size: .86rem; }
.reservation-steps { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 27px 0 0; padding: 0; list-style: none; color: var(--ivory); font-size: .8rem; }
.reservation-steps li { display: inline-flex; align-items: center; gap: 8px; }
.reservation-steps li span { display: inline-grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(240,220,169,.55); border-radius: 50%; color: var(--gold-light); font-size: .72rem; }
.rsvp-orbit { position: absolute; right: -20%; top: 50%; width: 550px; aspect-ratio: 1; transform: translateY(-50%) rotate(23deg); border: 1px solid rgba(214,178,108,.3); border-radius: 50% 45% 55% 43%; }
.rsvp-orbit::before, .rsvp-orbit::after { content: ''; position: absolute; border: 1px solid rgba(214,178,108,.18); border-radius: inherit; }
.rsvp-orbit::before { inset: 40px; } .rsvp-orbit::after { inset: 85px; }
.rsvp-panel { position: relative; z-index: 2; padding: clamp(27px, 4vw, 48px); border: 1px solid rgba(240,220,169,.22); background: linear-gradient(145deg, rgba(70,32,49,.95), rgba(32,26,30,.9)); box-shadow: var(--shadow); }
.rsvp-panel::before { content: ''; position: absolute; inset: 10px; pointer-events: none; border: 1px solid rgba(214,178,108,.17); }
.rsvp-panel > * { position: relative; }
.panel-kicker { color: var(--gold); font-size: .78rem; margin-bottom: 7px; }
.rsvp-panel h3 { margin-bottom: 9px; font-family: var(--serif); font-size: 2rem; font-weight: 400; }
.rsvp-panel p { color: var(--cream); font-size: .9rem; }
.rsvp-form { display: grid; gap: 14px; margin-top: 26px; }
.rsvp-form fieldset { padding: 0; border: 0; }
.rsvp-form legend, .rsvp-form > label { display: block; margin-bottom: 10px; color: var(--gold-light); font-size: .83rem; }
.choice-row { display: flex; gap: 8px; }
.choice { flex: 1; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: block; padding: 11px 9px; border: 1px solid rgba(240,220,169,.26); text-align: center; color: var(--cream); font-size: .77rem; transition: all .2s ease; }
.choice input:checked + span { border-color: var(--gold); color: var(--gold-light); background: rgba(214,178,108,.1); }
.rsvp-form select { width: 100%; padding: 11px 12px; border: 1px solid rgba(240,220,169,.25); color: var(--ivory); background: #2c2329; }
.rsvp-form select:disabled { opacity: .42; }
.button { min-height: 47px; display: inline-flex; align-items: center; justify-content: center; gap: 13px; padding: 12px 21px; border: 1px solid transparent; font-weight: 500; font-size: .88rem; transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease; }
.button-compact { min-height: 40px; padding: 8px 15px; font-size: .8rem; }
.button-cta { min-height: 56px; margin-top: 7px; padding-inline: 27px; font-size: .98rem; box-shadow: 0 12px 30px rgba(205,158,88,.29); }
.panel-cta { position: relative; z-index: 1; margin-top: 17px; }
.button:hover:not(:disabled) { transform: translateY(-3px); }
.button-primary { color: #291b1d; background: linear-gradient(100deg, #e5c481, #bb8755); box-shadow: 0 10px 24px rgba(205,158,88,.17); }
.button-primary:hover:not(:disabled) { background: linear-gradient(100deg, #f1d593, #cb9561); }
.button-primary:disabled { color: #786a5c; background: #827568; box-shadow: none; }
.button-ghost { border-color: rgba(240,220,169,.45); color: var(--gold-light); background: transparent; }
.button-ghost:hover { background: rgba(240,220,169,.08); }
.message { margin: 0 0 18px; padding: 13px 14px; font-size: .84rem; line-height: 1.7; }
.message-error { border-right: 3px solid var(--danger); background: rgba(198,97,104,.12); color: #ffd5d5; }
.message-success { border-right: 3px solid var(--success); background: rgba(143,198,171,.12); color: #c5f2d9; }
.reservation-dock { display: none; }
.footer { display: flex; flex-direction: column; align-items: center; padding: 30px 0 45px; color: var(--sand); font-size: .75rem; text-align: center; }
.footer p { margin: 14px 0 2px; }.footer a { color: var(--gold); }

/* Seats experience */
.seats-page { min-height: 100vh; background: radial-gradient(circle at 20% -20%, #4e263a, transparent 45%), #151617; }
.seat-header { display: flex; justify-content: space-between; align-items: center; padding-block: 25px; border-bottom: 1px solid rgba(240,220,169,.12); }
.seat-main { padding-bottom: 80px; }
.seat-intro { padding-block: clamp(48px, 7vw, 90px) 38px; text-align: center; }
.seat-intro h1 { margin: 0 0 13px; color: var(--ivory); font-size: clamp(2.8rem, 5.5vw, 5rem); }.seat-intro h1 em { color: var(--gold); font-style: normal; }
.seat-intro > p:last-child { color: var(--cream); }.seat-intro strong { color: var(--gold-light); }
.seat-workspace { display: grid; grid-template-columns: 295px minmax(0, 1fr); min-height: 620px; border: 1px solid rgba(240,220,169,.16); background: rgba(255,255,255,.025); box-shadow: var(--shadow); }
.selection-panel { display: flex; flex-direction: column; padding: 28px; border-left: 1px solid rgba(240,220,169,.16); background: linear-gradient(150deg, #30202a, #201d20); }
.selection-status { min-height: 49px; color: var(--cream); font-size: .78rem; }.selection-count { direction: ltr; color: var(--gold-light); font-family: var(--serif); font-size: 4rem; line-height: 1.1; font-variant-numeric: tabular-nums; }.selection-count span:nth-child(2), .selection-count span:nth-child(3) { color: var(--sand); font-size: 2.35rem; }
.selection-label { margin: 4px 0 16px; color: var(--sand); font-size: .77rem; }
.selected-list { min-height: 135px; max-height: 235px; margin: 0; padding: 0; overflow: auto; list-style: none; border-top: 1px solid rgba(240,220,169,.16); }
.selected-list li { padding: 10px 1px; border-bottom: 1px solid rgba(240,220,169,.1); color: var(--cream); font-size: .78rem; }.selected-list .empty-selection { padding-top: 20px; color: #8d8380; }
.reservation-form { display: grid; gap: 9px; margin-top: 20px; }
.reservation-form label { margin-top: 3px; color: var(--gold-light); font-size: .76rem; }
.reservation-form label span { color: var(--gold); }
.reservation-form input { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid rgba(240,220,169,.28); border-radius: 2px; color: var(--ivory); background: rgba(15,14,15,.55); font-size: .86rem; }
.reservation-form input:focus { border-color: var(--gold); }
.reservation-privacy { margin: 4px 0 0; color: var(--sand); font-size: .68rem; line-height: 1.7; }
.timer { display: flex; gap: 8px; align-items: center; margin: 22px 0 9px; color: var(--gold-light); font-size: .8rem; }.timer strong { direction: ltr; display: inline-block; }
.button-full { width: 100%; margin-top: 8px; }.button-text { margin-top: 12px; padding: 8px; border: 0; color: var(--sand); background: transparent; font-size: .75rem; }.button-text:hover { color: var(--ivory); text-decoration: underline; }.panel-note { margin: auto 0 0; padding-top: 24px; color: #938580; font-size: .68rem; line-height: 1.8; }
.hall-shell { min-width: 0; padding: 20px; overflow: hidden; }.hall-caption { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 18px; color: var(--cream); font-size: .78rem; }.legend { display: flex; align-items: center; gap: 7px; color: var(--sand); font-size: .65rem; white-space: nowrap; }.legend i { display: inline-block; width: 9px; height: 9px; margin-right: 4px; border-radius: 50%; }.legend .available { border: 1px solid var(--gold); }.legend .held { background: #74635c; }.legend .taken { background: #57333d; }
.hall-scroll { overflow: auto; border: 1px solid rgba(240,220,169,.1); background: radial-gradient(ellipse at center, rgba(123,75,84,.18), transparent 58%), #181719; }.hall-map { position: relative; min-width: 690px; min-height: 570px; overflow: hidden; background-image: linear-gradient(rgba(240,220,169,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(240,220,169,.025) 1px, transparent 1px); background-size: 30px 30px; }.hall-map::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(214,178,108,.09); pointer-events: none; }.stage { position: absolute; top: 4%; right: 50%; width: 38%; height: 11%; transform: translateX(50%); display: grid; place-items: center; border-radius: 50% 50% 8px 8px; border: 1px solid rgba(240,220,169,.36); color: var(--gold-light); background: radial-gradient(ellipse at center, rgba(214,178,108,.24), transparent 70%); font-family: var(--serif); font-size: 1.35rem; letter-spacing: .08em; }.stage::before { content: '✦'; position: absolute; top: -18px; color: var(--gold); }
.table { position: absolute; z-index: 1; width: 155px; height: 155px; }.table.long { width: 250px; height: 72px; }.table-center { position: absolute; top: 50%; right: 50%; display: grid; place-items: center; width: 73px; height: 73px; transform: translate(50%, -50%); border: 1px solid rgba(214,178,108,.45); border-radius: 50%; color: var(--gold-light); background: radial-gradient(circle at 35% 30%, #513042, #2b2026); box-shadow: 0 0 0 6px rgba(214,178,108,.04); font-family: var(--serif); font-size: .88rem; text-align: center; line-height: 1.3; }.table.long .table-center { width: 135px; height: 52px; border-radius: 6px; }.seat { position: absolute; z-index: 2; display: grid; place-items: center; width: 33px; height: 33px; padding: 0; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-light); background: #272326; font-family: var(--sans); font-size: .6rem; line-height: 1; transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease; }.seat:not(:disabled):hover { transform: translate(-50%, -50%) scale(1.15); background: #604152; }.seat.selected { border-color: var(--ivory); color: #261d20; background: var(--gold-light); box-shadow: 0 0 0 4px rgba(240,220,169,.2); }.seat.held { border-color: #81716c; color: #9b8e87; background: #41383a; }.seat.taken { border-color: #5d3a43; color: #6e5359; background: #281f22; }.seat:disabled { opacity: .7; }
.confirmation-dialog { width: min(440px, calc(100% - 32px)); padding: 52px 40px 38px; border: 1px solid rgba(240,220,169,.4); color: var(--ivory); text-align: center; background: linear-gradient(140deg, #49243a, #211d20); box-shadow: 0 28px 90px rgba(0,0,0,.6); }.confirmation-dialog::backdrop { background: rgba(14,10,12,.78); backdrop-filter: blur(7px); }.confirmation-dialog h2 { margin-bottom: 11px; font-size: 2.7rem; }.confirmation-dialog p:not(.eyebrow) { color: var(--cream); font-size: .87rem; }.confirmation-dialog ul { margin: 23px 0; padding: 14px 0; list-style: none; border-block: 1px solid rgba(240,220,169,.17); color: var(--gold-light); font-size: .84rem; }.confirmation-dialog li + li { margin-top: 6px; }.dialog-close { position: absolute; top: 11px; left: 14px; border: 0; color: var(--sand); background: transparent; font-size: 1.8rem; }.dialog-star { display: block; margin-bottom: 12px; color: var(--gold); font-size: 2rem; }

/* Confirmed ticket */
.confirmation-page { min-height: 100vh; display: grid; place-items: center; padding: 30px 20px; color: var(--plum); background: radial-gradient(circle at 50% 0%, #815666, #21161d 65%); }.confirmation-card { position: relative; width: min(570px, 100%); padding: clamp(40px, 8vw, 75px); overflow: hidden; color: #4b2934; text-align: center; background: linear-gradient(135deg, #fffaf1, #e6cfaa); box-shadow: 0 28px 70px rgba(0,0,0,.42); }.confirmation-card::before { content: ''; position: absolute; inset: 13px; border: 1px solid rgba(119,74,57,.4); pointer-events: none; }.confirmation-card > * { position: relative; }.confirmation-spark { color: #9d7155; font-size: 2.2rem; }.confirmation-card h1 { margin: 5px 0 18px; font-size: clamp(2.8rem, 7vw, 4.2rem); }.confirmation-lead { max-width: 390px; margin: 0 auto 28px; }.ticket-detail { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-top: 1px solid rgba(104,67,53,.19); font-size: .83rem; text-align: right; }.ticket-detail span, .ticket-seats > span { color: #8a6752; }.ticket-detail strong { font-weight: 600; }.ticket-seats { padding: 14px 0; border-top: 1px solid rgba(104,67,53,.19); text-align: right; font-size: .83rem; }.ticket-seats ul { margin: 10px 0 0; padding: 0; list-style: none; }.ticket-seats li { margin-top: 4px; color: #6d3749; }.ticket-note { margin: 23px 0; color: #876b59; font-size: .73rem; }.ticket-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); }.reveal.visible { opacity: 1; transform: none; }
@keyframes ambientFloat { to { transform: translate(30px, -50px) scale(1.12); } } @keyframes spinDrift { to { transform: translate(30px, -20px) rotate(80deg); } } @keyframes scrollDot { 0%, 100% { opacity: 0; transform: none; } 35%, 65% { opacity: 1; transform: translate(-50%, 13px); } }

@media (max-width: 820px) {
	.details-grid { grid-template-columns: 1fr; }
	.detail-card { min-height: 210px; }
	.rsvp-section { grid-template-columns: 1fr; padding-block: 95px; }
	.rsvp-copy { text-align: center; }
	.rsvp-copy > p { margin-inline: auto; }
	.reservation-steps { justify-content: center; }
	.rsvp-orbit { top: 35%; right: 50%; transform: translate(50%,-50%); opacity: .45; }
	.seat-workspace { grid-template-columns: 1fr; }
	.selection-panel { border-left: 0; border-bottom: 1px solid rgba(240,220,169,.16); }
	.selected-list { min-height: auto; max-height: 120px; }
	.panel-note { margin-top: 20px; }
	.hall-shell { padding: 15px; }

	/* Tablet-optimized hall map */
	.hall-map { min-width: 580px; min-height: 480px; }
	.table { width: 140px; height: 140px; }
	.table.long { width: 220px; height: 65px; }
}
@media (max-width: 540px) {
	.container { width: min(100% - 32px, 1180px); }
	.topline { padding-top: 17px; }
	.topline-actions { gap: 12px; }
	.topline-actions .text-link { display: none; }
	.button-compact { min-height: 38px; padding: 7px 12px; }
	.envelope-stage { padding-block: 57px 80px; }
	.envelope { width: min(93vw, 500px); }
	.invite-copy { font-size: .68rem; margin-top: 16px; }
	.is-open .invite-card { transform: translateY(-100px); }
	.details-grid { gap: 12px; }
	.detail-card { padding: 24px; }
	.timeline li { grid-template-columns: 75px 1fr; gap: 22px; }
	.timeline li::after { right: 85px; }
	.timeline li:not(:last-child)::before { right: 89px; }
	.timeline time { font-size: 1.18rem; }
	.choice-row { flex-direction: column; }
	.reservation-steps { gap: 9px 13px; font-size: .74rem; }
	.button-cta { width: 100%; }
	.reservation-dock { position: fixed; z-index: 90; right: 16px; bottom: max(14px, env(safe-area-inset-bottom)); left: 16px; display: flex; align-items: center; justify-content: center; gap: 11px; min-height: 54px; padding: 12px 18px; border: 1px solid rgba(255,244,220,.55); border-radius: 5px; color: #291b1d; background: linear-gradient(100deg, #f0d18a, #c78b58); box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 4px rgba(214,178,108,.12); font-size: .9rem; font-weight: 600; transition: opacity .2s ease, transform .2s ease, visibility .2s ease; }
	.reservation-dock.is-hidden { visibility: hidden; opacity: 0; transform: translateY(12px); pointer-events: none; }
	.invitation-page { padding-bottom: 82px; }
	.seat-header { font-size: .72rem; }
	.brand { gap: 7px; }
	.brand-mark { width: 33px; height: 33px; }
	.hall-caption { align-items: flex-start; flex-direction: column; }
	.legend { flex-wrap: wrap; white-space: normal; }
	.selection-panel { padding: 23px; }
	.confirmation-dialog { padding: 46px 24px 29px; }
	.ticket-actions { flex-direction: column; }
	.ticket-actions .button { width: 100%; }

	/* Mobile-optimized hall map */
	.hall-scroll {
		overflow: auto;
	}
	.hall-map {
		min-width: 690px;
		min-height: 850px;
		width: 690px;
		height: auto;
		aspect-ratio: auto;
	}
	.table {
		position: absolute;
		transform: none;
		width: 120px;
		height: 120px;
	}
	.table.long {
		width: 180px;
		height: 60px;
	}
	.seat {
		width: 44px;
		height: 44px;
		font-size: .55rem;
	}
	.stage {
		font-size: 1rem;
	}
}
/* Browser setup */
.setup-page { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; background: radial-gradient(circle at 15% 10%, #472437, transparent 40%), #151617; }
.setup-shell { width: min(680px, 100%); }
.setup-brand { margin-bottom: 36px; }
.setup-content { padding: clamp(25px, 6vw, 54px); border: 1px solid rgba(240,220,169,.2); background: linear-gradient(145deg, rgba(70,32,49,.92), rgba(32,26,30,.95)); box-shadow: var(--shadow); }
.setup-content h1 { margin-bottom: 15px; color: var(--gold-light); font-size: clamp(2.2rem, 8vw, 3.5rem); }
.setup-content h2 { margin: 28px 0 12px; font-size: 1.5rem; }
.setup-lead, .setup-help { color: var(--cream); font-size: .9rem; }
.setup-form { display: grid; gap: 12px; margin-top: 28px; }
.setup-form > label { color: var(--gold-light); font-size: .86rem; }
.setup-form input[type="file"] { width: 100%; padding: 12px; border: 1px solid rgba(240,220,169,.25); color: var(--cream); background: rgba(15,14,15,.55); }
.setup-help { margin: 0; color: var(--sand); font-size: .75rem; }
.setup-toggle { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; color: var(--cream); font-size: .82rem; }
.setup-toggle input { width: 18px; height: 18px; accent-color: var(--gold); }
.setup-links { margin: 0 0 24px; padding: 0; list-style: none; }
.setup-links li { display: grid; gap: 5px; padding: 13px 0; border-bottom: 1px solid rgba(240,220,169,.14); }
.setup-links strong { color: var(--gold-light); }
.setup-links a { overflow-wrap: anywhere; color: var(--cream); font-size: .75rem; }
.setup-path { display: block; padding: 12px; overflow-wrap: anywhere; border: 1px solid rgba(240,220,169,.15); color: var(--gold-light); background: rgba(15,14,15,.55); font-size: .75rem; }

@media print { .grain, .ticket-actions { display: none; }.confirmation-page { display: block; padding: 0; background: #fff; }.confirmation-card { width: 100%; min-height: 100vh; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }.reveal { opacity: 1; transform: none; }.ambient { display: none; } }