:root { --ink:#2a2a1f; --cream:#f6f5ee; --paper:#fffefa; --sand:#ededd9; --plum:#191911; --rose:#858a70; --olive:#a5a058; --line:#c2c1a5; --green:#61765a; --serif:'Italiana', Georgia, serif; --sans:'Jost', Arial, sans-serif; --mono:'Josefin Sans', Arial, sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--cream); color:var(--ink); font-family:var(--sans); font-size:15px; } button,a { font:inherit; } button { cursor:pointer; } .noise { pointer-events:none; position:fixed; inset:0; opacity:.18; z-index:20; 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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E"); }
.site-header { height:88px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,6vw,92px); border-bottom:1px solid var(--line); position:relative; z-index:1; } .brand { color:var(--ink); text-decoration:none; font-weight:800; letter-spacing:-1.5px; font-size:24px; line-height:1; display:inline-flex; align-items:baseline; } .brand-mark { color:var(--rose); font-family:var(--serif); font-style:italic; font-size:29px; letter-spacing:-4px; margin-right:1px; } .brand i { font:500 8px var(--mono); letter-spacing:.8px; margin-left:5px; color:var(--rose); text-transform:uppercase; } nav { display:flex; gap:35px; margin-left:112px; } nav a { color:#55514b; font-size:12px; font-weight:700; text-decoration:none; } nav a:hover { color:var(--rose); } .text-button { border:0; padding:0; background:transparent; font-size:12px; font-weight:800; color:var(--ink); } .text-button span { color:var(--rose); font-size:18px; margin-left:3px; }
.hero { min-height:640px; padding:clamp(70px,10vw,150px) clamp(24px,8vw,126px) 90px; display:grid; grid-template-columns:1.03fr .97fr; gap:50px; align-items:center; overflow:hidden; } .eyebrow { margin:0 0 18px; color:var(--rose); font:500 10px var(--mono); letter-spacing:1.5px; text-transform:uppercase; display:flex; align-items:center; gap:8px; } .eyebrow span { width:21px; height:1px; background:currentColor; display:inline-block; } h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:var(--serif); font-weight:500; letter-spacing:-2.5px; line-height:1.06; } h1 { font-size:clamp(48px,5vw,76px); margin-bottom:24px; } h1 em,h2 em { color:var(--rose); font-weight:500; } .lead { color:#58544f; font-size:15px; line-height:1.75; max-width:470px; } .hero-actions { display:flex; align-items:center; gap:28px; margin-top:35px; } .button { padding:14px 20px; border:1px solid var(--ink); border-radius:2px; background:transparent; font-weight:800; font-size:12px; min-height:48px; transition:.2s ease; } .button span { margin-left:15px; font-size:18px; vertical-align:-1px; } .button-dark { color:white; background:var(--ink); } .button-dark:hover { background:var(--rose); border-color:var(--rose); transform:translateY(-2px); } .button-outline:hover { background:var(--ink); color:white; transform:translateY(-2px); } .button-light { color:var(--ink); background:var(--paper); border-color:var(--paper); } .play-button { border:0; background:transparent; color:#403d38; font-size:12px; font-weight:800; display:flex; gap:9px; align-items:center; } .play-icon { width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--ink); border-radius:50%; font-size:9px; padding-left:2px; } .trust-row { display:flex; align-items:center; gap:12px; margin-top:57px; } .trust-row p { margin:0; font-size:11px; color:#5a5650; } .trust-row strong { color:var(--ink); } .avatar-stack { display:flex; } .avatar-stack b { margin-right:-6px; width:25px; height:25px; display:grid; place-items:center; border:2px solid var(--cream); border-radius:50%; background:#4d2b39; color:#f5ebdb; font:9px var(--serif); } .avatar-stack b:nth-child(2) { background:#9a574d; } .avatar-stack b:nth-child(3) { background:#af9176; } .avatar-stack b:nth-child(4) { background:#657460; }
.hero-art { min-height:440px; position:relative; max-width:520px; margin-left:auto; width:100%; } .sun-orbit { border:1px solid #d6c4a1; width:330px; height:330px; border-radius:50%; position:absolute; right:48px; top:54px; } .sun-orbit:after { content:''; position:absolute; width:238px; height:238px; border:1px solid #e7d8bc; border-radius:50%; top:45px; left:45px; } .photo { position:absolute; box-shadow:10px 13px 28px rgba(34,24,18,.15); overflow:hidden; color:white; } .photo:after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.42)); } .photo span,.photo small { z-index:1; position:absolute; } .photo-one { width:220px; height:300px; left:10px; top:37px; transform:rotate(-7deg); background:linear-gradient(150deg,#755249 0 18%,transparent 18%),radial-gradient(circle at 75% 25%,#f6a98d 0 6%,transparent 7%),linear-gradient(120deg,#2f2c31 0 24%,#b46d53 24% 47%,#e3b693 47% 69%,#615e3c 69%); } .photo-one:before { content:''; position:absolute; width:116px; height:116px; border-radius:51% 49% 40% 60%; background:#d99475; top:60px; left:68px; box-shadow:-34px 92px 0 14px #40313a,48px 98px 0 11px #6c3b33; } .photo-one span { top:15px; right:18px; font-size:24px; color:#ffeace; } .photo-one small { bottom:17px; left:16px; font:8px var(--mono); letter-spacing:1.5px; } .photo-two { width:164px; height:207px; right:15px; top:4px; transform:rotate(8deg); background:linear-gradient(155deg,#c5bc96 0 22%,#896158 22% 43%,#d9a46d 43% 58%,#5c463f 58%); } .photo-two:before { content:''; position:absolute; border-radius:48% 48% 45% 45%; width:88px; height:110px; top:44px; left:39px; background:radial-gradient(circle at 52% 31%,#edba91 0 31%,#503e35 32% 35%,#edba91 36% 48%,transparent 49%),linear-gradient(#503e35 0 28%,#d09a72 28% 100%); } .photo-two span { top:11px; right:13px; font-size:21px; } .photo-two small { bottom:14px; left:14px; font:8px var(--mono); } .photo-three { width:178px; height:185px; right:45px; bottom:24px; transform:rotate(-3deg); background:linear-gradient(145deg,#1e2520 0 40%,#939a70 40% 42%,#bd6848 43% 58%,#352e34 59%); } .photo-three:before { content:'✦'; font-size:66px; color:#f2bf7a; position:absolute; left:54px; top:49px; opacity:.8; } .photo-three small { top:13px; left:15px; font:9px var(--mono); letter-spacing:1px; } .scribble { position:absolute; bottom:14px; left:28px; color:var(--rose); font:italic 25px var(--serif); line-height:.8; transform:rotate(-11deg); z-index:2; } .event-chip { position:absolute; right:0; bottom:3px; z-index:2; padding:11px 13px; background:var(--paper); box-shadow:0 8px 18px rgba(0,0,0,.08); font-size:9px; font-weight:800; } .pulse { width:7px; height:7px; display:inline-block; border-radius:50%; background:#dd6759; margin-right:5px; box-shadow:0 0 0 4px rgba(221,103,89,.15); vertical-align:1px; }
.intro-section { background:var(--paper); padding:106px clamp(24px,7vw,110px) 116px; } .centered { justify-content:center; } .section-heading { display:grid; grid-template-columns:1.2fr .8fr; align-items:end; margin:0 auto 54px; max-width:1040px; } .section-heading h2,.owner-heading h2,.feature-copy h2,.benefit-intro h2,.cta-section h2 { font-size:clamp(37px,4vw,57px); margin:0; } .section-heading p { font-size:13px; color:#64605c; line-height:1.75; margin:0 0 5px 80px; max-width:300px; } .journey-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; max-width:1180px; margin:auto; } .journey-card { min-height:430px; padding:31px; position:relative; overflow:hidden; display:flex; flex-direction:column; } .dark-card { background:#222221; color:#faf7ef; } .sand-card { background:#e5d0a4; color:#342e24; } .plum-card { background:#542b40; color:#fff8f3; } .step { font:10px var(--mono); opacity:.75; } .card-icon { margin-top:52px; font-size:30px; color:#d9a66f; } .sand-card .card-icon { color:#795e38; } .journey-card h3 { font:500 31px/1.05 var(--serif); letter-spacing:-1px; margin:15px 0 10px; z-index:1; } .journey-card p { max-width:260px; line-height:1.65; font-size:12px; opacity:.83; z-index:1; } .card-link { color:inherit; background:transparent; border:0; padding:0; font-size:11px; font-weight:800; margin-top:auto; text-align:left; z-index:2; } .card-link span { color:#e5a46c; margin-left:9px; font-size:17px; vertical-align:-1px; } .card-decoration { position:absolute; } .invite-decoration { right:-5px; bottom:-51px; width:210px; height:210px; border:1px solid rgba(255,255,255,.18); border-radius:50%; transform:rotate(11deg); } .invite-decoration span { color:#d9a66f; position:absolute; top:43px; left:44px; font:italic 98px var(--serif); } .invite-decoration b { position:absolute; right:15px; top:48px; font:32px var(--serif); }.invite-decoration i { position:absolute; right:12px; top:83px; font:9px var(--mono); text-transform:uppercase; } .rsvp-decoration { position:absolute; bottom:20px; right:12px; width:180px; transform:rotate(-5deg); font-size:8px; box-shadow:0 10px 20px rgba(68,47,22,.13); background:#f8f2e6; padding:13px; color:#4c4437; } .rsvp-decoration div { font:11px var(--serif); margin-bottom:8px; }.rsvp-decoration span { display:block; padding:6px 7px; border:1px solid #c9b48d; margin-top:4px; }.rsvp-decoration span:first-of-type { background:#2c2b27; color:white; }.upload-decoration { position:absolute; bottom:-34px; right:-14px; width:180px; height:180px; border:1px dashed rgba(255,255,255,.35); border-radius:50%; display:grid; place-items:center; transform:rotate(-15deg); }.upload-decoration span { font:63px var(--serif); }.upload-decoration b { position:absolute; bottom:45px; font:italic 13px var(--serif); text-align:center; }
.feature-band { display:grid; grid-template-columns:1.15fr .85fr; background:#e8ddd0; min-height:510px; } .feature-visual { min-height:510px; background:#bd695e; position:relative; overflow:hidden; display:grid; place-items:center; } .feature-visual:before { content:''; width:580px; height:580px; position:absolute; border-radius:50%; border:1px solid rgba(255,239,209,.3); }.feature-visual:after { content:''; width:430px; height:430px; position:absolute; border-radius:50%; border:1px solid rgba(255,239,209,.28); }.projector { width:360px; height:230px; position:relative; z-index:1; }.projector-head { width:155px; height:30px; margin:auto; background:#292425; border-radius:8px 8px 0 0; display:flex; justify-content:space-around; align-items:center; }.projector-head i { width:18px; height:18px; border:3px solid #dbb184; border-radius:50%; }.projection-screen { height:190px; background:linear-gradient(155deg,#625249,#e0a774 48%,#563f43); box-shadow:0 17px 31px rgba(59,23,24,.28); position:relative; overflow:hidden; padding:29px; display:flex; flex-direction:column; justify-content:end; color:#fff5e5; }.projection-screen:before { content:''; width:160px; height:200px; border-radius:50%; background:linear-gradient(80deg,#49322f 42%,#dda57e 43% 76%,#3e3033 77%); position:absolute; right:86px; bottom:-75px; }.projection-screen span { position:relative; z-index:1; font:48px var(--serif); letter-spacing:-5px; }.projection-screen small { position:relative; z-index:1; font:9px var(--mono); margin-top:5px; }.projection-screen em { position:absolute; top:18px; right:19px; z-index:1; font:24px var(--serif); }.live-note { position:absolute; z-index:2; bottom:65px; left:50%; transform:translateX(-50%); background:#fffaf0; padding:10px 12px; white-space:nowrap; font-size:9px; font-weight:800; }.feature-copy { padding:90px clamp(30px,6vw,100px); align-self:center; }.feature-copy h2 { margin-bottom:22px; }.feature-copy > p:not(.eyebrow) { font-size:13px; line-height:1.8; max-width:360px; color:#615955; margin-bottom:30px; }
.owner-section { background:#f9f6ef; padding:112px clamp(24px,7vw,110px); display:grid; grid-template-columns:.75fr 1.25fr; gap:70px; align-items:center; overflow:hidden; }.owner-heading p:not(.eyebrow) { max-width:330px; color:#69645f; font-size:13px; line-height:1.8; }.owner-heading h2 { margin-bottom:20px; }.dashboard-preview { background:#fffdf9; box-shadow:0 25px 55px rgba(43,35,26,.14); min-width:590px; position:relative; }.dash-top { height:50px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; border-bottom:1px solid #eee8de; }.mini-brand { font:700 14px var(--sans); }.mini-brand i { font:7px var(--mono); color:var(--rose); }.dash-account { font-size:9px; border:1px solid #e9e1d4; padding:5px 8px; border-radius:14px; }.dash-body { min-height:325px; display:flex; }.dash-body aside { width:120px; padding:17px 12px; border-right:1px solid #eee8de; }.dash-body aside span { display:block; padding:8px; font-size:8px; color:#878078; }.dash-body aside .active { color:var(--ink); background:#f5eee3; font-weight:800; border-radius:3px; }.dash-content { flex:1; padding:22px; }.event-title { display:flex; justify-content:space-between; }.event-title small,.dash-metrics small { font:8px var(--mono); color:#918a7f; text-transform:uppercase; }.event-title h3 { font:500 22px var(--serif); margin:3px 0 10px; }.event-title button { border:0; background:transparent; font-size:17px; }.dash-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.dash-metrics > div { padding:10px; background:#faf7f1; }.dash-metrics b { display:block; font-size:17px; margin:8px 0 5px; }.dash-metrics b i { font-style:normal; color:#aaa298; font-size:9px; }.dash-metrics span { font-size:7px; color:#80796f; }.dash-metrics .up,.dash-metrics .new { color:#668264; }.dash-gallery { margin-top:16px; }.gallery-head { display:flex; justify-content:space-between; font-size:9px; }.gallery-head span { color:#9f5e52; }.gallery-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:5px; margin-top:10px; }.gallery-grid i { height:67px; background:linear-gradient(135deg,#a2665c,#e0b28d 56%,#4e5950 57%); }.gallery-grid i:nth-child(2),.gallery-grid i:nth-child(5) { background:linear-gradient(135deg,#304448,#b87359 53%,#e7c487 54%); }.gallery-grid i:nth-child(3) { background:linear-gradient(135deg,#765c56,#d5a372 53%,#344135 54%); }.download-card { position:absolute; display:flex; align-items:center; gap:10px; padding:12px 15px; background:#292826; color:white; right:-25px; bottom:-37px; box-shadow:0 12px 22px rgba(0,0,0,.18); }.download-icon { background:#e0a169; width:30px; height:30px; display:grid; place-items:center; color:#2b2926; font-size:18px; }.download-card small { display:block; color:#c8c0b5; font-size:8px; }.download-card b { display:block; font-size:9px; margin-top:3px; }.download-card button { background:transparent; color:#e7b582; border:0; font-size:8px; font-weight:800; margin-left:7px; }
.benefit-section { padding:110px clamp(24px,7vw,110px) 98px; background:var(--paper); }.benefit-intro { text-align:center; }.benefit-intro h2 { margin-bottom:65px; }.benefits { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); max-width:1150px; margin:auto; }.benefits article { padding:30px 25px 20px; border-right:1px solid var(--line); }.benefits article:last-child { border:0; }.benefit-icon { color:var(--rose); font:32px var(--serif); height:48px; }.benefits h3 { font-size:13px; margin:15px 0 10px; }.benefits p { font-size:11px; line-height:1.7; color:#69645e; }.cta-section { background:var(--plum); color:#fff9f2; padding:110px 24px; text-align:center; position:relative; overflow:hidden; }.cta-section:before,.cta-section:after { content:''; position:absolute; width:290px; height:290px; border:1px solid rgba(255,230,202,.15); border-radius:50%; top:50%; transform:translateY(-50%); }.cta-section:before { left:-90px; }.cta-section:after { right:-90px; }.cta-section .eyebrow { color:#e5b277; }.cta-section h2 { font-size:clamp(42px,5vw,66px); position:relative; z-index:1; }.cta-section h2 em { color:#e5b277; }.cta-stars { color:#e6a66c; letter-spacing:8px; margin-top:28px; font-size:16px; } footer { min-height:85px; padding:0 clamp(24px,7vw,110px); display:flex; align-items:center; justify-content:space-between; background:#201e1e; color:#fbf6ed; } footer .brand { color:#fbf6ed; } footer p,footer > span { margin:0; color:#afaaa1; font-size:9px; }
.modal-backdrop { position:fixed; inset:0; background:rgba(20,17,15,.54); z-index:30; opacity:0; pointer-events:none; transition:.3s; backdrop-filter:blur(3px); }.modal-backdrop.visible { opacity:1; pointer-events:auto; }.experience-modal { z-index:31; position:fixed; inset:50% auto auto 50%; transform:translate(-50%,-48%); width:min(1080px,calc(100vw - 28px)); height:min(715px,calc(100vh - 40px)); display:grid; grid-template-columns:267px 1fr; background:#fffdf9; box-shadow:0 30px 100px rgba(0,0,0,.35); opacity:0; transition:.3s; }.experience-modal.open { transform:translate(-50%,-50%); opacity:1; }.modal-close { position:absolute; z-index:4; right:15px; top:12px; width:30px; height:30px; border:0; border-radius:50%; background:rgba(255,255,255,.6); color:#393431; font-size:24px; line-height:24px; }.modal-sidebar { background:#3e2634; color:#fff8ed; padding:28px 27px; position:relative; overflow:hidden; }.modal-sidebar:after { content:'n'; position:absolute; color:#cf826e; opacity:.18; font:italic 310px var(--serif); bottom:-96px; left:-20px; }.modal-sidebar .brand { color:#fff8ed; position:relative; z-index:1; }.side-event { display:flex; align-items:center; gap:12px; margin-top:94px; position:relative; z-index:1; }.side-event span { color:#e3b17a; font:50px var(--serif); line-height:1; }.side-event small { font:10px var(--mono); line-height:1.5; color:#d5c3b9; }.modal-sidebar > p { position:relative; z-index:1; margin:18px 0 5px; font:42px/.9 var(--serif); letter-spacing:-2px; }.modal-sidebar > p em { color:#e4ad76; }.modal-sidebar > small { position:relative; z-index:1; font:9px var(--mono); color:#d5c3b9; }.modal-main { min-width:0; display:flex; flex-direction:column; }.modal-nav { min-height:60px; display:flex; align-items:center; padding:0 31px; border-bottom:1px solid #ece6dc; gap:22px; overflow:auto; }.modal-tab { white-space:nowrap; border:0; padding:21px 0 17px; background:transparent; color:#827b71; font-size:10px; font-weight:800; border-bottom:2px solid transparent; }.modal-tab.active { color:var(--ink); border-color:var(--rose); }.organizer-tab { margin-left:auto; color:var(--rose); }.modal-views { height:100%; overflow:auto; }.modal-view { min-height:100%; padding:55px 66px; display:none; }.modal-view.active { display:block; animation:fade .25s ease; }.tiny-label { color:var(--rose); font:9px var(--mono); letter-spacing:1.2px; margin-bottom:14px; }.modal-view h2 { font-size:clamp(32px,3.4vw,49px); margin-bottom:18px; }.invite-text { color:#67615b; line-height:1.75; font-size:13px; max-width:400px; }.event-detail-list { margin-top:29px; max-width:480px; border-top:1px solid #e7dfd4; }.event-detail-list > div { min-height:69px; display:flex; align-items:center; border-bottom:1px solid #e7dfd4; position:relative; gap:13px; }.event-detail-list > div > span { font-size:18px; color:var(--rose); }.event-detail-list p { margin:0; }.event-detail-list b,.event-detail-list small { display:block; }.event-detail-list b { font-size:11px; }.event-detail-list small { color:#857e74; font-size:9px; margin-top:4px; }.map-button { margin-left:auto; border:0; background:transparent; font-size:9px; color:var(--rose); font-weight:800; }.invite-actions { display:flex; gap:10px; margin-top:28px; }.helper { color:#938a7f; font-size:9px; margin-top:17px; }.rsvp-form { max-width:500px; }.rsvp-form label { display:block; font-size:10px; font-weight:800; margin:17px 0; }.rsvp-form input { display:block; width:100%; border:1px solid #ddd5ca; padding:13px; margin-top:7px; background:#fffdf9; outline-color:var(--rose); }.number-picker { margin-top:7px; width:170px; display:flex; justify-content:space-between; border:1px solid #ddd5ca; height:42px; align-items:center; }.number-picker button { background:transparent; border:0; width:40px; height:100%; font-size:17px; }.number-picker span { font-size:10px; }.attendance-choice { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:23px 0; }.choice { padding:13px; background:#fffdf9; border:1px solid #ddd5ca; text-align:left; }.choice.selected { border-color:var(--ink); background:#f3ede4; }.choice span { color:var(--rose); font:20px var(--serif); float:right; }.choice b,.choice small { display:block; }.choice b { font-size:10px; margin-bottom:4px; }.choice small { font-size:8px; color:#777066; }.form-feedback { margin:12px 0; font-size:10px; color:#668264; font-weight:800; }.upload-header,.live-top,.dashboard-head { display:flex; justify-content:space-between; align-items:start; }.live-status { color:#6b8762; padding:7px 9px; background:#edf3ea; font-size:9px; font-weight:800; white-space:nowrap; }.live-status i { width:6px; height:6px; border-radius:50%; background:#7fa771; display:inline-block; }.dropzone { border:1px dashed #bfb5a8; background:#fcfaf6; min-height:228px; margin-top:28px; display:flex; flex-direction:column; justify-content:center; align-items:center; cursor:pointer; text-align:center; transition:.2s; }.dropzone:hover { background:#f3ece1; border-color:var(--rose); }.upload-plus { color:var(--rose); font:39px var(--serif); height:54px; }.dropzone b { font-size:12px; }.dropzone small { font-size:9px; color:#8b8379; margin-top:6px; }.choose-file { margin-top:13px; font-size:9px; border-bottom:1px solid var(--ink); font-weight:800; }.upload-progress { margin-top:14px; }.progress-label { display:flex; justify-content:space-between; font-size:9px; }.progress-track { height:5px; background:#e9e2d8; margin-top:7px; }.progress-track i { display:block; height:100%; width:0; background:var(--rose); transition:width .2s; }.upload-privacy { display:flex; gap:10px; background:#f5efe6; margin-top:18px; padding:12px; }.upload-privacy span { color:var(--rose); }.upload-privacy p { font-size:9px; line-height:1.55; color:#746c63; margin:0; }.upload-privacy b { color:var(--ink); }.live-wall { display:grid; grid-template-columns:1.15fr .85fr .85fr; grid-template-rows:130px 130px; gap:7px; height:267px; }.wall-photo { position:relative; overflow:hidden; background:linear-gradient(145deg,#3e4941,#d38462 56%,#e0bd94 57%); }.wall-photo:before { content:''; width:70px; height:100px; position:absolute; left:46%; top:25%; background:radial-gradient(circle at 50% 22%,#e6b58d 0 22%,#4d372f 23% 29%,#e6b58d 30% 40%,transparent 41%),linear-gradient(#523931 0 28%,#c57b5d 29%); border-radius:50%; }.wall-photo small { position:absolute; left:8px; top:7px; z-index:1; color:#fff5e6; font:7px var(--mono); }.wall-photo.a { grid-row:span 2; background:linear-gradient(150deg,#54413b 0 27%,#c7785c 28% 62%,#e0b687 63%); }.wall-photo.a:before { width:125px; height:175px; left:32%; top:26%; }.wall-photo.b { background:linear-gradient(150deg,#b97258 0 38%,#5d6351 39%); }.wall-photo.c { background:linear-gradient(150deg,#35483f 0 47%,#e0a36f 48%); }.wall-photo.d { background:linear-gradient(150deg,#a8784c 0 42%,#4a3037 43%); }.wall-photo.e { background:linear-gradient(150deg,#92675a 0 44%,#e7bb8b 45%); }.wall-photo.f { background:linear-gradient(150deg,#424f44 0 41%,#be7057 42%); }.live-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:19px; font-size:10px; font-weight:800; }.live-bottom .button { min-height:40px; padding:10px 13px; }.dashboard-event { padding:15px; background:#f4ede1; display:flex; justify-content:space-between; align-items:center; }.dashboard-event > div { display:flex; gap:12px; align-items:center; }.dashboard-event span { font:28px var(--serif); color:var(--rose); }.dashboard-event p { margin:0; }.dashboard-event small,.dashboard-event b,.dashboard-event i { display:block; }.dashboard-event small { color:#9b8370; font:7px var(--mono); }.dashboard-event b { font:500 15px var(--serif); }.dashboard-event i { font-style:normal; font-size:8px; color:#83776d; margin-top:3px; }.small-button { min-height:34px; padding:7px 10px; font-size:9px; }.icon-button { border:1px solid #ddd4c8; background:#fffdf9; width:31px; height:31px; }.control-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0; }.control-grid > div { border:1px solid #e8dfd3; padding:12px; min-height:124px; }.control-grid small { font:8px var(--mono); color:#8f8579; }.control-grid b { display:block; margin:9px 0; font-size:20px; }.control-grid b i { font-size:10px; font-style:normal; color:#9a9185; }.control-grid p { color:#7e756a; font-size:8px; margin:7px 0 0; }.small-up { font-size:8px; color:#668264; }.chart-line { display:block; height:21px; border-bottom:1px solid #eadfd4; position:relative; }.chart-line i { position:absolute; bottom:-1px; width:90%; height:14px; border-top:2px solid #799173; transform:skewY(-8deg); }.screen-on { font-size:10px !important; color:#668264; }.screen-on i { display:inline-block; width:7px; height:7px; background:#799173; border-radius:50%; }.text-control { background:transparent; border:0; padding:0; font-size:8px; text-decoration:underline; }.approval-panel { border-top:1px solid #e8dfd3; padding-top:15px; }.approval-head { display:flex; justify-content:space-between; align-items:center; }.approval-head div b { font-size:10px; }.approval-head div span { margin-left:7px; color:var(--rose); background:#f9e8e4; font-size:8px; padding:3px 5px; }.approval-head > button { border:0; background:transparent; font-size:8px; color:var(--rose); font-weight:800; }.pending-items { display:flex; align-items:center; gap:5px; margin-top:9px; }.pending-thumb { width:36px; height:35px; background:linear-gradient(145deg,#ad745c,#e1ad7c 57%,#4d5a4c 58%); }.pending-thumb.second { background:linear-gradient(145deg,#3d5148,#b36c58 57%,#e8c492 58%); }.pending-thumb.third { background:linear-gradient(145deg,#a36b55,#53464a 57%,#e1b38c 58%); }.pending-copy { margin-left:5px; flex:1; }.pending-copy b,.pending-copy small { display:block; }.pending-copy b { font-size:9px; }.pending-copy small { font-size:8px; color:#857d72; }.approve-btn { background:#293529; color:white; border:0; padding:8px; font-size:8px; font-weight:800; }.download-zone { display:flex; align-items:center; gap:12px; background:#292826; color:white; padding:14px; margin-top:17px; }.download-zone .download-icon { flex:0 0 auto; }.download-zone small,.download-zone b,.download-zone p { display:block; }.download-zone small { color:#cfbfae; font:7px var(--mono); }.download-zone b { font-size:10px; margin:3px 0; }.download-zone p { color:#bbb2a6; font-size:8px; margin:0; }.download-actions { margin-left:auto; display:flex; gap:6px; }.download-action { min-width:75px; border:1px solid #766f65; background:transparent; color:white; padding:7px; text-align:left; font-size:8px; }.download-action small { margin-top:3px; }.download-action:hover { background:#e0a169; border-color:#e0a169; color:#222; }.download-feedback { color:#668264; font-size:9px; font-weight:800; }.toast { position:fixed; z-index:50; bottom:25px; left:50%; transform:translate(-50%,25px); opacity:0; pointer-events:none; padding:12px 17px; background:#252724; color:#fffaf1; font-size:10px; box-shadow:0 8px 22px rgba(0,0,0,.17); transition:.25s; }.toast.show { opacity:1; transform:translate(-50%,0); } @keyframes fade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media (max-width:900px) { nav { display:none; }.hero { grid-template-columns:1fr; padding-top:80px; }.hero-art { margin:20px auto 0; }.feature-band,.owner-section { grid-template-columns:1fr; }.feature-copy { padding:70px 10vw; }.owner-section { gap:45px; }.dashboard-preview { min-width:0; width:calc(100% - 20px); }.benefits { grid-template-columns:1fr 1fr; }.benefits article:nth-child(2) { border-right:0; }.experience-modal { grid-template-columns:200px 1fr; }.modal-view { padding:40px; }.modal-sidebar { padding:25px 20px; } }
@media (max-width:650px) { .site-header { height:70px; }.site-header .demo-link { font-size:10px; }.hero { min-height:auto; padding-bottom:70px; }.hero-actions { flex-direction:column; align-items:flex-start; gap:20px; }.hero-art { transform:scale(.83); transform-origin:center top; height:370px; margin-bottom:-60px; }.section-heading { grid-template-columns:1fr; gap:16px; }.section-heading p { margin-left:0; }.journey-grid { grid-template-columns:1fr; }.journey-card { min-height:350px; }.feature-visual { min-height:390px; }.projector { transform:scale(.78); }.owner-section { padding-bottom:75px; }.dashboard-preview { transform:scale(.88); transform-origin:left top; margin-bottom:-62px; }.benefits { grid-template-columns:1fr; }.benefits article { border-right:0; border-bottom:1px solid var(--line); }.benefits article:last-child { border-bottom:0; } footer { flex-wrap:wrap; gap:10px; padding-top:22px; padding-bottom:22px; }.experience-modal { display:block; height:min(760px,calc(100vh - 20px)); }.modal-sidebar { min-height:110px; height:110px; padding:18px; }.modal-sidebar .side-event,.modal-sidebar > p,.modal-sidebar > small { display:none; }.modal-sidebar:after { font-size:160px; bottom:-58px; left:auto; right:0; }.modal-nav { padding:0 20px; gap:15px; }.organizer-tab { margin-left:0; }.modal-view { padding:32px 24px; }.modal-view h2 { font-size:35px; }.attendance-choice { grid-template-columns:1fr; }.dashboard-event { align-items:flex-start; }.dashboard-event .small-button { display:none; }.control-grid { grid-template-columns:1fr; }.control-grid > div { min-height:80px; }.download-zone { flex-wrap:wrap; }.download-actions { width:100%; margin-left:0; }.download-action { flex:1; } }

/* Brand alignment and readable type scale */
.brand { height:58px; display:inline-flex; align-items:center; }
.brand-logo { width:118px; height:58px; object-fit:contain; display:block; }
.modal-sidebar .brand-logo, footer .brand-logo { filter:none; }
.modal-sidebar { background:#2a2a1f; }
.side-event span, .modal-sidebar > p em { color:#eeebc9; }
.dark-card { background:#2a2a1f; }
.plum-card { background:#494a3a; }
.feature-visual { background:var(--olive); }
.cta-section { background:#191911; }
.event-chip, .live-note { color:#2a2a1f; }
body { font-size:17px; }
button, input { font-family:var(--sans); }
button:focus-visible, a:focus-visible, input:focus-visible { outline:3px solid var(--olive); outline-offset:3px; }
.eyebrow { font-size:12px; letter-spacing:1.45px; }
nav a, .text-button { font-size:14px; }
.lead { font-size:18px; line-height:1.7; max-width:510px; }
.button { min-height:54px; padding:15px 22px; font-size:14px; }
.button { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.play-button { font-size:14px; }
.play-button, .map-button { text-decoration:none; }
.trust-row p { font-size:13px; }
.journey-card p, .feature-copy > p:not(.eyebrow), .owner-heading p:not(.eyebrow) { font-size:15px; line-height:1.72; }
.journey-card h3 { font-size:35px; }
.card-link { font-size:13px; min-height:40px; }
.section-heading p { font-size:15px; }
.benefits h3 { font-size:16px; }
.benefits p { font-size:14px; }
.tiny-label { font-size:11px; letter-spacing:1.35px; }
.invite-text { font-size:16px; }
.event-detail-list b { font-size:14px; }
.event-detail-list small { font-size:12px; }
.map-button, .helper { font-size:11px; }
.rsvp-form label { font-size:12px; }
.rsvp-form input { min-height:50px; font-size:16px; }
.number-picker { height:48px; }
.number-picker span { font-size:13px; }
.attendance-choice .choice { min-height:78px; }
.choice b { font-size:13px; }
.choice small { font-size:11px; }
.form-feedback { font-size:12px; }
.dropzone { min-height:250px; }
.dropzone b { font-size:15px; }
.dropzone small, .choose-file { font-size:11px; }
.upload-privacy p, .progress-label, .live-bottom { font-size:12px; }
.live-status { font-size:11px; padding:8px 10px; }
.modal-tab { font-size:12px; min-height:60px; }
.modal-tab:disabled { opacity:.35; cursor:not-allowed; }
.modal-sidebar > p { font-size:47px; }
.side-event small, .modal-sidebar > small { font-size:11px; }
.dash-body aside span { font-size:10px; }
.dash-metrics small, .event-title small { font-size:9px; }
.dash-metrics b { font-size:20px; }
.dash-metrics span, .gallery-head { font-size:10px; }
.dashboard-event small, .dashboard-event i, .control-grid small { font-size:9px; }
.dashboard-event b { font-size:18px; }
.control-grid p, .small-up, .approval-head > button, .pending-copy small, .download-zone p, .download-zone small, .download-action { font-size:10px; }
.approval-head div b, .pending-copy b, .download-zone b { font-size:12px; }
.approve-btn { font-size:10px; min-height:38px; }
footer p { font-size:15px; line-height:1.5; }
footer > span { font-size:14px; }
.footer-admin { color:#eeebc9; font-size:14px; text-decoration:none; border-bottom:1px solid rgba(238,235,201,.5); }
.event-countdown { max-width:480px; margin:22px 0 8px; padding:14px 17px; background:#eeefdf; border:1px solid #d6d5bd; }
.event-countdown > small { display:block; color:var(--rose); font:600 10px var(--mono); letter-spacing:1.2px; margin-bottom:9px; }
.event-countdown > div { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.event-countdown span { font-size:10px; color:#777569; }
.event-countdown b { display:block; color:var(--ink); font:400 26px var(--serif); }
.selfie-zone { min-height:180px; max-width:500px; border:1px dashed #aaa990; background:#f7f7ed; display:flex; flex-direction:column; align-items:center; justify-content:center; margin:24px 0 15px; cursor:pointer; text-align:center; }
.selfie-zone:hover { border-color:var(--rose); background:#eeefdf; }
.selfie-zone > span { color:var(--rose); font:38px var(--serif); }
.selfie-zone b { font-size:15px; }
.selfie-zone small { font-size:11px; color:#777569; margin-top:5px; }
.face-results { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:15px; }
.face-results article { aspect-ratio:1; position:relative; overflow:hidden; background:#e1e1d2; }
.face-results img,.face-results video { width:100%; height:100%; object-fit:cover; }
.face-results a { position:absolute; right:6px; bottom:6px; background:rgba(25,25,17,.82); color:white; padding:6px 8px; font-size:10px; text-decoration:none; }
.face-results article > small { position:absolute; left:6px; bottom:6px; background:rgba(255,255,248,.9); color:var(--ink); padding:6px 8px; font-size:10px; }
.face-consent { max-width:560px; display:flex; align-items:flex-start; gap:10px; margin:12px 0; color:#4e4d43; font-size:12px; line-height:1.55; cursor:pointer; }
.face-consent input { width:18px; height:18px; margin:1px 0 0; flex:0 0 auto; accent-color:var(--rose); }
.face-privacy { max-width:560px; margin:10px 0 18px; color:#68675c; font-size:11px; line-height:1.55; }
.face-privacy summary { color:var(--ink); font-weight:700; cursor:pointer; }
.face-privacy p { margin:8px 0 0; }
.experience-modal.has-event-theme .modal-sidebar { background:var(--event-primary); color:var(--event-primary-text); }
.experience-modal.has-event-theme .modal-main { background:var(--event-secondary); color:var(--event-secondary-text); }
.experience-modal.has-event-theme .modal-view[data-view="invite"] .button-dark { background:var(--event-primary); color:var(--event-primary-text); }
.experience-modal.has-event-theme .event-countdown { background:color-mix(in srgb,var(--event-primary) 8%,var(--event-secondary)); }
.invitation-artwork { padding:0 0 18px; text-align:center; }
.invitation-artwork img { display:block; width:100%; max-width:620px; max-height:52vh; margin:0 auto; object-fit:contain; border-radius:2px; }
.modal-view[data-view="invite"].artwork-mode > .tiny-label,.modal-view[data-view="invite"].artwork-mode > h2,.modal-view[data-view="invite"].artwork-mode > .invite-text,.modal-view[data-view="invite"].artwork-mode > .event-countdown { display:none; }
.invite-actions .button-outline:hover { background:var(--event-primary,var(--ink)); color:var(--event-primary-text,#fff); border-color:var(--event-primary,var(--ink)); }
@media (max-width:700px) { .invitation-artwork img { max-height:46vh; } }
.contact-form { max-width:570px; }
.contact-form > div { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.contact-form label { display:block; font-size:12px; font-weight:700; margin-bottom:13px; }
.contact-form input,.contact-form select,.contact-form textarea { display:block; width:100%; margin-top:6px; border:1px solid #d6d2c7; background:white; padding:12px; min-height:48px; font-size:16px; }
.contact-form textarea { resize:vertical; }

@media (max-width:650px) {
  .site-header { height:78px; padding:0 16px; }
  .brand-logo { width:96px; height:56px; }
  .site-header .demo-link { min-height:44px; font-size:12px; }
  .hero { padding:62px 24px 64px; }
  .lead { font-size:17px; }
  .intro-section, .benefit-section { padding:74px 24px; }
  .feature-copy { padding:64px 24px; }
  .owner-section { padding:74px 24px; }
  .dashboard-preview { width:100%; transform:none; margin-bottom:0; }
  .dash-body aside { display:none; }
  .dash-content { padding:18px 14px; }
  .dash-metrics { gap:6px; }
  .dash-metrics > div { padding:9px 7px; }
  .dash-metrics b { font-size:17px; }
  .gallery-grid { grid-template-columns:repeat(3,1fr); }
  .gallery-grid i { height:78px; }
  .download-card { right:10px; bottom:-28px; }
  .experience-modal { inset:0; width:100vw; height:100dvh; transform:translateY(12px); }
  .experience-modal.open { transform:none; }
  .modal-sidebar { min-height:100px; height:100px; }
  .modal-sidebar .brand-logo { width:106px; height:60px; }
  .modal-nav { position:sticky; top:0; z-index:2; min-height:64px; gap:20px; padding:0 22px; background:var(--paper); box-shadow:0 1px 0 #ece6dc; }
  .modal-tab { padding:20px 0 17px; }
  .modal-view { padding:34px 22px 42px; }
  .modal-view h2 { font-size:38px; }
  .invite-actions { display:grid; grid-template-columns:1fr; }
  .invite-actions .button { width:100%; }
  .event-detail-list > div { min-height:78px; }
  .map-button { padding:9px 0 9px 8px; }
  .upload-header, .live-top { gap:13px; }
  .live-wall { grid-template-columns:1.12fr .88fr; grid-template-rows:125px 125px 125px; height:389px; }
  .wall-photo.a { grid-row:span 3; }
  .live-bottom { align-items:stretch; gap:14px; flex-direction:column; }
  .live-bottom .button { width:100%; }
  .dashboard-event { gap:10px; }
  .dashboard-event b { font-size:16px; }
  .dashboard-event span { font-size:36px; }
  .control-grid > div { min-height:96px; }
  .download-zone { padding:16px; }
  footer { align-items:center; }
  .contact-form > div { grid-template-columns:1fr; gap:0; }
  .face-results { grid-template-columns:1fr 1fr; }
}

/* Interaction and modal layout corrections */
:root { --serif:'Cormorant Garamond', Georgia, serif; }
.modal-main { min-height:0; overflow:hidden; }
.experience-modal[hidden] { display:none; }
.experience-modal:not(.open) { pointer-events:none; }
.modal-views { flex:1; min-height:0; height:auto; overflow:auto; overscroll-behavior:contain; }
.modal-nav { scrollbar-width:none; }
.modal-nav::-webkit-scrollbar { display:none; }
.modal-nav { padding-right:72px; }
.organizer-tab[hidden] { display:none!important; }
.modal-view { min-height:0; padding-bottom:56px; background:#fffdf9; }
.invite-actions { position:relative; z-index:2; }
.invite-actions .button-outline { background:#fffdf9; }
.cta-section:before,.cta-section:after,.cta-stars,.feature-visual:before,.feature-visual:after { pointer-events:none; }
.cta-section .button,.feature-copy .button { position:relative; z-index:2; pointer-events:auto; }
footer { min-height:92px; position:relative; z-index:1; }
footer p,footer > span { color:#d1ccc3; font-size:12px; }
.footer-admin { min-height:44px; display:inline-flex; align-items:center; position:relative; z-index:2; font-size:15px; pointer-events:auto; }
.modal-sidebar > small { display:block; max-width:205px; line-height:1.5; overflow-wrap:anywhere; }
@media (max-width:650px) {
  .modal-main { height:calc(100dvh - 100px); }
  .modal-nav { padding-right:22px; }
}