* { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 5rem; } body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); } button, input, select, textarea { font: inherit; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(198,154,75,.65); outline-offset: 3px; }.section-pad { padding: var(--space-section) 0; }.section-pad-sm { padding: clamp(4rem, 7vw, 6rem) 0; }
.topbar { position: absolute; z-index: 10; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 1.6rem clamp(1.4rem,4vw,4rem); color: var(--warm-white); }.brand { display: flex; align-items: center; gap: .6rem; color: inherit; font: 800 .7rem var(--sans); letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }.brand-mark { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-light); font: 600 1.35rem var(--serif); }.main-nav { display: flex; gap: 2rem; }.main-nav a { color: rgba(255,255,255,.86); font: 700 .64rem var(--sans); letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }.main-nav a:hover { color: var(--gold-light); }.nav-rsvp { border: 1px solid rgba(255,255,255,.55); border-radius: var(--radius-pill); padding: .75rem 1rem; color: var(--warm-white); font: 800 .62rem var(--sans); letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.hero-flow { position: relative; background-color: var(--forest); background-image: var(--hero-image),radial-gradient(circle at 78% 18%,rgba(223,183,104,.55),transparent 20%),linear-gradient(135deg,#17352a,#5f4429); background-size: cover; background-position: center top; background-attachment: fixed; }.hero { position: relative; display: flex; min-height: max(760px,100vh); overflow: hidden; align-items: center; background: transparent; color: var(--warm-white); }.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg,rgba(6,18,13,.93) 0%,rgba(11,28,20,.72) 47%,rgba(11,23,18,.18) 100%); }.hero-photo { position: absolute; inset: 0; background: linear-gradient(110deg,rgba(17,42,30,.24),rgba(13,16,13,.04)),radial-gradient(circle at 70% 20%,rgba(218,173,87,.24),transparent 25%); }.hero-texture { position: absolute; inset: 0; opacity: .22; background-image: radial-gradient(rgba(246,227,181,.38) .7px,transparent .7px); background-size: 9px 9px; }.hero-content { position: relative; z-index: 1; width: min(720px,100%); margin-left: clamp(1.5rem,12vw,12rem); padding-top: 4.5rem; }.hero-kicker { margin: 0 0 .75rem; color: var(--gold-light); font: italic 1.25rem var(--serif); }.hero h1 { max-width: 650px; margin: 0; color: var(--warm-white); font: 500 clamp(4.4rem,9.5vw,8.7rem)/.78 var(--serif); letter-spacing: -.06em; }.hero-subtitle { max-width: 450px; margin: 1.75rem 0; color: rgba(255,255,255,.86); font: 400 1.1rem/1.7 var(--sans); }.hero-host { color: rgba(255,255,255,.7); font: .73rem var(--sans); }.hero-host strong { color: var(--gold-light); }.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.7rem; margin-top: 2.3rem; }.hero-countdown { position: absolute; z-index: 2; right: clamp(2rem,8vw,9rem); bottom: 3rem; }.hero-countdown > p { margin: 0 0 .7rem; color: var(--gold-light); font: 700 .58rem var(--sans); letter-spacing: .17em; text-transform: uppercase; }.countdown-mini { display: flex; align-items: center; gap: .65rem; }.countdown-mini span { display: grid; }.countdown-mini b { color: var(--warm-white); font: 500 1.7rem/1 var(--serif); }.countdown-mini small { color: rgba(255,255,255,.65); font: .53rem var(--sans); letter-spacing: .1em; text-transform: uppercase; }.countdown-mini i { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); }.scroll-cue { position: absolute; z-index: 2; bottom: 2.3rem; left: 2rem; display: flex; align-items: center; gap: .7rem; color: rgba(255,255,255,.7); font: 700 .55rem var(--sans); letter-spacing: .14em; text-decoration: none; text-transform: uppercase; writing-mode: vertical-rl; }.scroll-cue span { width: 1px; height: 42px; background: rgba(255,255,255,.65); animation: scrollLine 2s infinite; }
.intro { position: relative; background: linear-gradient(to bottom,rgba(251,248,241,.12),rgba(251,248,241,.63) 54%,var(--cream) 100%); }.detail-grid { display: grid; grid-template-columns: repeat(3,1fr); max-width: 1000px; margin: 0 auto; }.countdown-photo { position: relative; display: grid; min-height: clamp(330px,46vw,620px); overflow: hidden; place-items: center; color: var(--warm-white); background-color: var(--forest); background-image: var(--countdown-image),radial-gradient(circle at 72% 28%,rgba(224,182,100,.66),transparent 18%),linear-gradient(135deg,#204533,#0e1b17); background-position: center; background-size: cover; }.countdown-photo-overlay { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(7,22,16,.68),rgba(7,22,16,.15),rgba(7,22,16,.55)); }.countdown-photo-content { position: relative; display: grid; gap: .8rem; place-items: center; padding: 2rem; text-align: center; }.countdown-photo-content i { color: var(--gold-light); font-size: 1.5rem; }.countdown-photo-content p { margin: 0; font: italic clamp(2rem,4vw,3.6rem)/.9 var(--serif); }.countdown-photo-content span { color: rgba(255,255,255,.78); font: .63rem var(--sans); letter-spacing: .08em; text-transform: uppercase; }.countdown-photo-content code { color: var(--gold-light); font: inherit; }.countdown-section { position: relative; overflow: hidden; padding: clamp(5.5rem,9vw,8rem) 0; color: var(--warm-white); background: var(--forest); }.countdown-section h2 { margin: 0 0 3rem; font: 500 clamp(2.5rem,5vw,4rem)/.9 var(--serif); }.countdown-large { display: flex; justify-content: center; gap: clamp(.8rem,4vw,3.5rem); }.countdown-large div { min-width: 85px; display: grid; gap: .6rem; }.countdown-large b { color: var(--gold-light); font: 500 clamp(3.6rem,7vw,6.2rem)/.8 var(--serif); }.countdown-large span { color: rgba(255,255,255,.7); font: 800 .58rem var(--sans); letter-spacing: .18em; text-transform: uppercase; }.countdown-ornament { position: absolute; color: rgba(246,227,181,.27); font-size: 14rem; }.ornament-left { left: -2rem; top: -4rem; }.ornament-right { right: -2rem; bottom: -5rem; }
.two-col { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(3rem,9vw,9rem); }.visual-panel { position: relative; padding: 1rem 0 1rem 1rem; }.portrait-frame { position: relative; aspect-ratio: .78; max-width: 410px; border: 1px solid var(--gold); padding: .7rem; }.portrait-frame::after { content: ""; position: absolute; z-index: -1; top: 2rem; left: 3rem; width: 100%; height: 100%; background: var(--forest); }.portrait-placeholder { display: flex; align-items: center; justify-content: center; gap: .7rem; height: 100%; color: rgba(246,227,181,.75); text-align: center; background: radial-gradient(circle at 70% 22%,rgba(220,180,102,.35),transparent 16%),linear-gradient(145deg,#274a3a,#10271e); font: 600 1.15rem/1.3 var(--serif); }.portrait-placeholder i { color: var(--gold); }.handwritten-note { position: absolute; right: -3rem; bottom: 1rem; color: var(--gold); font: italic 2.2rem var(--serif); transform: rotate(-8deg); }.copy-panel h2 { font-size: clamp(3.1rem,5.6vw,4.8rem); }.colour-row { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 2rem 0; }.colour-dot { width: 22px; height: 22px; border: 2px solid var(--warm-white); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.1); }.colour-row small { margin-right: .5rem; color: var(--muted); font: 700 .57rem var(--sans); letter-spacing: .06em; text-transform: uppercase; }.champagne { background:#d6bd88 }.emerald { background:#1f5a44 }.midnight { background:#1b2635 }.gold { background:var(--gold) }.style-notes { display: grid; gap: 1.1rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }.style-notes div { display: grid; grid-template-columns: 27px 1fr; align-items: center; gap: .8rem; color: var(--muted); font: .76rem/1.6 var(--sans); }.style-notes i { color: var(--gold); }.style-notes strong { display: block; color: var(--ink); font: 800 .65rem var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.guidelines { background: #f0eadf; }.guideline-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-top: 3rem; }.gift-section { padding: 0 0 4rem; background: #f0eadf; }.gift-card { display: flex; align-items: center; gap: 2.2rem; padding: 3rem clamp(1.6rem,5vw,5rem); background: linear-gradient(120deg,#12271e,#204232); color: var(--warm-white); box-shadow: var(--shadow-deep); }.gift-card .eyebrow { color: var(--gold-light); }.gift-card h2 { margin: 0 0 .7rem; font: 500 clamp(2rem,3.8vw,3.4rem)/.9 var(--serif); }.gift-card p:not(.eyebrow) { max-width: 640px; margin: 0; color: rgba(255,255,255,.72); font: .82rem/1.7 var(--sans); }.gift-icon { display: grid; min-width: 62px; height: 62px; place-items: center; border: 1px solid rgba(246,227,181,.5); border-radius: 50%; color: var(--gold-light); font-size: 1.5rem; }.gift-card .btn-outline-light { margin-left: auto; white-space: nowrap; }
.gallery { background: var(--cream); }.gallery-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }.gallery-item:nth-child(1) { grid-row: span 2; }.photo-note { margin: 1.3rem 0 0; color: var(--muted); text-align: center; font: .68rem var(--sans); }.photo-note i { color: var(--gold); }.photo-note code { color: var(--forest); font: 700 .64rem var(--sans); }.venue-section { display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; background: #e5e4da; }.venue-map { min-height: 550px; overflow: hidden; filter: grayscale(1) contrast(.85); }.venue-map iframe { width: 100%; height: 100%; min-height: 550px; border: 0; }.venue-card { position: relative; z-index: 1; width: calc(100% + 3rem); margin-left: -3rem; padding: clamp(2.5rem,5vw,4.5rem); background: var(--warm-white); box-shadow: var(--shadow-deep); }.venue-card p:not(.eyebrow) { color: var(--muted); font: .82rem/1.7 var(--sans); }.venue-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: 2rem; }.copy-address { padding: 0; margin-top: 1.5rem; border: 0; border-bottom: 1px solid var(--gold); color: var(--ink); background: transparent; font: 800 .62rem/1.7 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.guest-upload-prompt { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(1.4rem,4vw,3.5rem); max-width: 760px; margin: 3rem auto 0; padding: 1.25rem clamp(1.25rem,3vw,2.4rem); background: var(--gold-pale); border: 1px solid rgba(198,154,75,.32); }.upload-qr { display: grid; min-width: 130px; min-height: 130px; place-items: center; padding: .55rem; background: var(--warm-white); }.upload-qr img { display: block; width: 112px; height: 112px; }.upload-qr span { color: var(--muted); font: .6rem/1.5 var(--sans); text-align: center; }.guest-upload-prompt .eyebrow { margin-bottom: .75rem; }.guest-upload-prompt h3 { margin: 0 0 .55rem; font: 600 2rem/.95 var(--serif); }.guest-upload-prompt p:not(.eyebrow) { max-width: 480px; color: var(--muted); font: .76rem/1.6 var(--sans); }.guest-upload-prompt .btn-gold { margin-top: .3rem; }
.rsvp-section { background: var(--cream); }.rsvp-layout { display: grid; grid-template-columns: .75fr 1.25fr; align-items: center; gap: clamp(3rem,9vw,9rem); }.guest-counter { display: flex; gap: 2.5rem; margin-top: 2.5rem; }.guest-counter div { display: grid; gap: .35rem; }.guest-counter b { color: var(--gold); font: 600 2.8rem/.8 var(--serif); }.guest-counter span { color: var(--muted); font: 800 .55rem var(--sans); letter-spacing: .13em; text-transform: uppercase; }.rsvp-form-card { padding: clamp(1.8rem,4vw,3.4rem); background: var(--warm-white); box-shadow: var(--shadow-soft); }.rsvp-form-card form { display: grid; gap: 1.15rem; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }.rsvp-form-card label { display: block; margin-bottom: .48rem; color: var(--ink); font: 800 .61rem var(--sans); letter-spacing: .08em; text-transform: uppercase; }.rsvp-form-card label small { color: var(--muted); font-weight: 600; letter-spacing: 0; text-transform: none; }.rsvp-form-card input, .rsvp-form-card select, .rsvp-form-card textarea { width: 100%; border: 1px solid #dedbd3; border-radius: 0; padding: .8rem .85rem; color: var(--ink); background: #fffefa; font: .75rem var(--sans); }.rsvp-form-card textarea { resize: vertical; }.rsvp-form-card input:focus, .rsvp-form-card select:focus, .rsvp-form-card textarea:focus { border-color: var(--gold); outline: 0; box-shadow: 0 0 0 3px rgba(198,154,75,.12); }.rsvp-form-card span.field-validation-error { display: block; margin-top: .35rem; color: #a33e32; font: .62rem var(--sans); }.submit-rsvp { justify-self: start; margin-top: .6rem; }.success-state { padding: 2rem 1rem; text-align: center; animation: successPop .55s both; }.success-state > i { display: grid; width: 55px; height: 55px; place-items: center; margin: auto; border-radius: 50%; color: var(--forest); background: var(--gold-light); font-size: 1.2rem; }.success-state h3 { margin: 1.2rem 0 .5rem; font: 600 2.2rem var(--serif); }.success-state p { margin: 0; color: var(--muted); font: .8rem/1.7 var(--sans); }.calendar-strip { display: flex; justify-content: center; align-items: center; gap: 1.8rem; padding: 1.25rem; color: var(--warm-white); background: var(--forest); }.calendar-strip p { margin: 0; font: 500 1.15rem var(--serif); }.calendar-strip p i { color: var(--gold); }.calendar-link { border: 0; color: var(--gold-light); background: none; font: 800 .64rem var(--sans); letter-spacing: .1em; text-transform: uppercase; }.calendar-link i { margin-left: .4rem; }
.site-footer { padding: 4rem 1.5rem 2rem; color: var(--warm-white); background: var(--forest-2); text-align: center; }.footer-mark { display: grid; width: 46px; height: 46px; place-items: center; margin: auto; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-light); font: 600 1.7rem var(--serif); }.footer-title { margin: 1rem 0 1.2rem; color: var(--gold-light); font: italic 1.5rem var(--serif); }.footer-socials { display: flex; justify-content: center; gap: .65rem; }.footer-socials a { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(246,227,181,.35); border-radius: 50%; color: var(--gold-light); text-decoration: none; }.footer-copy { margin: 2.5rem 0 0; color: rgba(255,255,255,.45); font: .57rem var(--sans); letter-spacing: .06em; }.gift-modal { padding: 3rem; border: 0; border-radius: 0; text-align: center; }.gift-modal > i { color: var(--gold); font-size: 1.7rem; }.gift-modal h2 { font: 600 2.8rem var(--serif); }.gift-modal > p:not(.eyebrow) { color: var(--muted); font: .8rem/1.7 var(--sans); }.modal-close { position: absolute; top: .5rem; right: .85rem; border: 0; background: none; font: 2rem var(--serif); }.bank-placeholder { display: grid; gap: .35rem; margin-top: 1.5rem; padding: 1.3rem; background: var(--gold-pale); }.bank-placeholder span { color: var(--muted); font: 700 .56rem var(--sans); letter-spacing: .1em; text-transform: uppercase; }.bank-placeholder b { font: 500 1.8rem var(--serif); }.bank-placeholder small { color: var(--muted); font: .65rem var(--sans); }.admin-page { min-height: 100vh; padding: 10vh 1.5rem; background: var(--cream); }.admin-shell { width: min(900px,100%); margin: auto; }.admin-shell h1 { font: 500 clamp(3.3rem,7vw,5rem)/.85 var(--serif); }.admin-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin: 3rem 0; }.admin-stats div { display: grid; padding: 1.5rem; background: var(--warm-white); box-shadow: var(--shadow-soft); }.admin-stats small { color: var(--muted); font: 800 .55rem var(--sans); letter-spacing: .11em; text-transform: uppercase; }.admin-stats b { margin-top: .5rem; color: var(--gold); font: 600 3rem/.8 var(--serif); }.admin-note { display: flex; align-items: flex-start; gap: 1rem; margin: 2rem 0; padding: 1.5rem; border-left: 3px solid var(--gold); background: var(--gold-pale); }.admin-note i { color: var(--gold); }.admin-note h2 { font: 600 1.7rem var(--serif); margin: 0 0 .4rem; }.admin-note p { margin: 0; color: var(--muted); font: .78rem/1.7 var(--sans); }
.share-page { display: grid; grid-template-columns: minmax(280px,.8fr) minmax(0,1.2fr); min-height: 100vh; background: var(--cream); }.share-side { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; overflow: hidden; padding: clamp(2rem,6vw,6rem); color: var(--gold-light); background: radial-gradient(circle at 72% 23%,rgba(208,165,87,.55),transparent 14%),linear-gradient(145deg,#1e4434,#10271e); }.share-side::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(246,227,181,.25) .7px,transparent .7px); background-size: 9px 9px; }.share-side-mark { position: relative; z-index: 1; display: grid; width: 55px; height: 55px; place-items: center; margin-bottom: auto; border: 1px solid var(--gold); border-radius: 50%; font: 600 2rem var(--serif); }.share-side p { position: relative; z-index: 1; margin: 0; font: italic clamp(2.5rem,4vw,4rem)/.9 var(--serif); }.share-card { width: min(600px,100%); align-self: center; padding: clamp(2rem,8vw,7rem) clamp(1.5rem,7vw,6rem); }.share-back { display: inline-flex; gap: .6rem; margin-bottom: clamp(3rem,6vw,6rem); color: var(--muted); font: 800 .62rem var(--sans); letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }.share-card h1 { margin: 0; color: var(--ink); font: 500 clamp(3.2rem,6vw,5.6rem)/.82 var(--serif); letter-spacing: -.05em; }.share-card h1 em { color: var(--gold); font-weight: 500; }.photo-upload-form { display: grid; gap: 1.2rem; margin-top: 2.2rem; }.photo-upload-form label:not(.consent-check) { display: block; margin-bottom: .48rem; color: var(--ink); font: 800 .61rem var(--sans); letter-spacing: .08em; text-transform: uppercase; }.photo-upload-form label small { color: var(--muted); font-weight: 600; letter-spacing: 0; text-transform: none; }.photo-upload-form input:not([type=checkbox]),.photo-upload-form textarea { width: 100%; border: 1px solid #dedbd3; padding: .8rem .85rem; color: var(--ink); background: var(--warm-white); font: .75rem var(--sans); }.photo-upload-form textarea { resize: vertical; }.file-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }.file-picker label { display: grid !important; min-height: 150px; place-content: center; gap: .55rem; border: 1px dashed var(--gold) !important; color: var(--forest) !important; background: var(--gold-pale); text-align: center; cursor: pointer; }.file-picker label i { color: var(--gold); font-size: 1.6rem; }.file-picker label strong { font: 600 1.45rem var(--serif); text-transform: none; letter-spacing: 0; }.file-picker label span { color: var(--muted); font: .6rem var(--sans); text-transform: none; letter-spacing: 0; }.consent-check { display: flex; align-items: flex-start; gap: .7rem; color: var(--muted); font: .7rem/1.5 var(--sans); }.consent-check input { margin-top: .18rem; accent-color: var(--forest); }.photo-upload-form span.field-validation-error { display: block; margin-top: .35rem; color: #a33e32; font: .62rem var(--sans); }.upload-success { margin-top: 2.5rem; padding: 2rem; background: var(--gold-pale); text-align: center; }.upload-success > i { color: var(--gold); font-size: 1.7rem; }.upload-success h2 { margin: .7rem 0 .35rem; font: 600 2.4rem var(--serif); }.upload-success p { color: var(--muted); font: .78rem/1.7 var(--sans); }.upload-success .btn-gold { margin-top: 1rem; }