:root { --gold:#d6b36a; --cream:#f7f0df; --line:rgba(214,179,106,.42); --ink:#07152f; }
* { box-sizing:border-box; border-style:solid; border-width:0; }
html { scroll-behavior:smooth; line-height:1.5; -webkit-text-size-adjust:100%; }
body { margin:0; width:100%; font-family:"DM Sans",sans-serif; color:var(--cream); overflow-x:hidden; background:linear-gradient(160deg,#07152f,#0c2450,#061127); }
h1,h2,h3,p { margin:0; } h1,h2,h3{font-size:inherit;font-weight:inherit} button,input,select,textarea { font:inherit; } button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}img,svg{display:block;vertical-align:middle}img{max-width:100%;height:auto}button{background:transparent}
.page-shell { width:100%; min-height:calc(100 * min(var(--vh, 1vh), 1vh)); position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(160deg,#07152f 0%,#0c2450 55%,#061127 100%); opacity:0; transition:opacity 1s ease .45s; }
.page-shell::before { content:""; position:absolute; inset:0; z-index:-2; opacity:.19; background-image:linear-gradient(rgba(214,179,106,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(214,179,106,.22) 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(to bottom,black,transparent 72%); }
.page-shell::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(3,12,33,.15),rgba(3,9,25,.72)); pointer-events:none; }
.envelope-opening { position:fixed; inset:0; z-index:50; display:grid; place-items:start center; padding:28px 24px 24px; background:linear-gradient(160deg,#07152f 0%,#0c2450 55%,#061127 100%); transition:opacity .8s ease,visibility .8s ease; }
.envelope-opening.is-open { opacity:0; visibility:hidden; pointer-events:none; }
.envelope-trigger { position:relative; width:min(88vw,420px); aspect-ratio:1.45; border:0; padding:0; background:transparent; cursor:pointer; perspective:900px; filter:drop-shadow(0 22px 28px rgba(0,0,0,.38)); transform-origin:50% 78%; }
.envelope-trigger.is-opening { animation:envelope-settle 1.55s cubic-bezier(.22,.7,.24,1) both; }
@keyframes envelope-settle { 0%{transform:rotate(0) translateY(0)} 18%{transform:rotate(-2.5deg) translateY(3px)} 34%{transform:rotate(1.4deg) translateY(1px)} 52%{transform:rotate(0) translateY(0)} 100%{transform:rotate(0) translateY(0)} }
@keyframes envelope-flap-fold { 0%{transform:rotateX(0deg);box-shadow:0 5px 12px rgba(0,0,0,.18)} 28%{transform:rotateX(62deg);box-shadow:0 11px 18px rgba(0,0,0,.22)} 100%{transform:rotateX(178deg);box-shadow:0 18px 24px rgba(0,0,0,.28)} }
.envelope-body { position:absolute; inset:18% 0 0; overflow:hidden; border:1px solid rgba(214,179,106,.75); border-radius:10px; background:linear-gradient(145deg,#173b75,#07152f); }
.envelope-body::before,.envelope-body::after { content:""; position:absolute; bottom:-1px; width:72%; height:1px; background:rgba(214,179,106,.78); }
.envelope-body::before { left:-8%; transform:rotate(29deg); transform-origin:left center; }
.envelope-body::after { right:-8%; transform:rotate(-29deg); transform-origin:right center; }
.envelope-flap { position:absolute; top:18%; left:0; z-index:3; width:100%; height:58%; border:1px solid rgba(214,179,106,.8); border-radius:10px 10px 0 0; background:linear-gradient(155deg,#214b8d,#0b2148); clip-path:polygon(0 0,100% 0,50% 100%); transform-origin:50% 0; backface-visibility:hidden; transform-style:preserve-3d; box-shadow:0 5px 12px rgba(0,0,0,.18); }
.envelope-seal { position:absolute; top:48%; left:50%; z-index:4; display:grid; place-items:center; width:48px; height:48px; border:1px solid #f4da92; border-radius:50%; color:#07152f; background:#d6b36a; transform:translate(-50%,-50%); transition:opacity .35s ease .18s,transform .6s ease .18s; box-shadow:0 6px 14px rgba(0,0,0,.24); }
.envelope-hint { position:absolute; bottom:-58px; left:0; width:100%; color:#f3d994; font-family:"DM Sans",sans-serif; font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.envelope-trigger.is-opening .envelope-flap { animation:envelope-flap-fold 1.15s cubic-bezier(.22,.7,.24,1) .3s both; }
.envelope-trigger.is-opening .envelope-seal { opacity:0; transform:translate(-50%,-50%) scale(.7); }
.envelope-trigger:focus-visible { outline:3px solid #fff1bb; outline-offset:8px; }
body.invitation-ready .page-shell { opacity:1; }
body:not(.invitation-ready){overflow:hidden}
.hero-photo { position:absolute; top:0; left:0; width:100%; height:520px; object-fit:cover; opacity:.23; z-index:-3; mask-image:linear-gradient(to bottom,black 15%,transparent 92%); }
.stars { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.star { position:absolute; width:4px; height:4px; border-radius:999px; background:#fff7d8; box-shadow:0 0 10px 2px rgba(255,238,178,.9); animation:twinkle 3s ease-in-out infinite alternate; }
.star:nth-child(1){top:6%;left:11%}.star:nth-child(2){top:12%;left:76%;animation-delay:1.2s}.star:nth-child(3){top:24%;left:89%;animation-delay:.7s}.star:nth-child(4){top:34%;left:5%;animation-delay:1.8s}.star:nth-child(5){top:48%;left:92%;animation-delay:.1s}.star:nth-child(6){top:59%;left:16%;animation-delay:2.1s}.star:nth-child(7){top:72%;left:86%;animation-delay:.8s}.star:nth-child(8){top:85%;left:7%;animation-delay:1.5s}.star:nth-child(9){top:91%;left:68%;animation-delay:.5s}
@keyframes twinkle { from{transform:scale(.55);opacity:.3} to{transform:scale(1.4);opacity:1} }
.content-column { width:100%; max-width:720px; margin:0 auto; padding:0 20px 110px; }
.hero { padding:58px 0 32px; text-align:center; }
.eyebrow { display:flex; align-items:center; justify-content:center; gap:12px; color:#dec27f; font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.eyebrow::before,.eyebrow::after { content:""; width:38px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }
.eyebrow::after { transform:scaleX(-1); }
.crown { width:78px; height:48px; margin:16px auto 0; color:var(--gold); filter:drop-shadow(0 0 12px rgba(214,179,106,.42)); animation:float 4s ease-in-out infinite; }
@keyframes float { 50% { transform:translateY(-7px); } }
.roman { margin:15px 0 12px; font-family:"Playfair Display",serif; font-size:82px; line-height:.85; font-weight:600;color:#e8cb85;text-shadow:0 8px 28px rgba(0,0,0,.32); }
.hero-name { margin:0; font-family:"Playfair Display",serif; font-size:43px; font-weight:500; letter-spacing:-.035em; line-height:1; }
.name-sparkle-entry { position:relative; isolation:isolate; opacity:1; clip-path:inset(0 0 0 0); text-shadow:0 8px 28px rgba(0,0,0,.32); }
body.invitation-ready .name-sparkle-entry{animation:name-letter-reveal 1.5s steps(12,jump-none) .2s both}
.name-sparkle-entry::before,.name-sparkle-entry::after { content:"✦"; position:absolute; z-index:-1; color:#f4da92; font-family:"DM Sans",sans-serif; font-size:.32em; line-height:1; opacity:0; text-shadow:0 0 12px rgba(244,218,146,.95),0 0 22px rgba(214,179,106,.7); pointer-events:none; }
body.invitation-ready .name-sparkle-entry::before,body.invitation-ready .name-sparkle-entry::after{animation:name-sparkle-pop 1.1s ease-out forwards}
.name-sparkle-entry::before { top:8%; left:8%; animation-delay:.55s!important; }.name-sparkle-entry::after { right:7%; bottom:4%; animation-delay:1s!important; }
@keyframes name-letter-reveal { 0% { opacity:1; clip-path:inset(0 0 0 0); filter:brightness(.94); letter-spacing:-.035em; } 45% { opacity:1; clip-path:inset(0 0 0 0); filter:brightness(1.14); letter-spacing:.01em; } 100% { opacity:1; clip-path:inset(0 0 0 0); filter:brightness(1); letter-spacing:-.035em; } }
@keyframes name-sparkle-pop { 0% { opacity:0; transform:scale(.25) rotate(-18deg); } 35% { opacity:1; transform:scale(1.2) rotate(0); } 100% { opacity:.18; transform:scale(.72) rotate(12deg); } }
.hero-surname { display:block; margin-top:8px; font-size:19px; font-weight:600; letter-spacing:.2rem; text-transform:uppercase;color:#d9bd78; }
.ornament { display:flex; align-items:center; justify-content:center; gap:9px; width:190px; margin:25px auto 0; color:var(--gold); }
.ornament::before,.ornament::after { content:""; height:1px; flex:1; background:var(--line); }
.glass-card { border:1px solid var(--line); border-radius:18px; box-shadow:0 20px 46px rgba(0,0,0,.22); backdrop-filter:blur(6px); }
.date-card { padding:23px 20px; text-align:center; overflow:hidden; background:linear-gradient(135deg,#163668,#07152f); }
.date-day { margin:0; font-family:"Playfair Display",serif; line-height:.9;font-size:50px;font-weight:600;color:#f2d993; }
.date-month { margin:8px 0 0; font-family:"Playfair Display",serif;font-style:italic;font-size:23px;color:#fff4d6; }
.date-year { margin:8px 0 0; letter-spacing:.2rem;font-size:19px;font-weight:700;color:#d5bb7a; }
.intro { max-width:460px; margin:34px auto; text-align:center; font-family:"Playfair Display",serif; font-style:italic;font-size:20px;line-height:1.7; }
.section-heading { display:flex; align-items:center; gap:12px; margin:48px 0 17px; font-family:"Playfair Display",serif; font-weight:500;font-size:24px; }
.section-heading::after { content:""; height:1px; flex:1; background:linear-gradient(90deg,var(--gold),transparent); }
.countdown-card { padding:22px; background:#06142f; text-align:center; }.countdown-card h2{font-size:24px;font-weight:500}
.countdown-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:16px; }
.time-unit { padding:12px 4px; border:1px solid rgba(214,179,106,.27); border-radius:12px; background:rgba(214,179,106,.06); }
.time-number { display:block; color:#f4da92; font-family:"Playfair Display",serif; font-size:1.8rem; line-height:1; }
.time-label { display:block; margin-top:7px; color:#cbd7eb; font-size:9px; font-weight:700; letter-spacing:.08rem; text-transform:uppercase; }
.people-grid,.event-grid,.gallery-grid { display:grid; gap:15px; }
.people-grid { grid-template-columns:1fr; gap:28px; margin:clamp(84px, 15vw, 104px) 0 54px; }
.family-section { position:relative; padding:10px 0 2px; }
.family-section::before { content:""; position:absolute; inset:18px -8px 22px; z-index:-1; border:1px solid rgba(214,179,106,.18); border-radius:22px; background:radial-gradient(circle at 50% 0%,rgba(47,86,145,.28),transparent 58%),linear-gradient(145deg,rgba(8,25,58,.42),rgba(3,12,33,.18)); box-shadow:inset 0 0 34px rgba(214,179,106,.05),0 16px 34px rgba(0,0,0,.14); }
.family-section::after { content:"✦"; position:absolute; top:2px; left:50%; transform:translateX(-50%); padding:0 12px; color:#d6b36a; background:#0b2148; font-size:.78rem; text-shadow:0 0 12px rgba(244,218,146,.65); }
.person-group { position:relative; border-top:1px solid rgba(214,179,106,.4); padding:25px 18px 8px; text-align:center; background:linear-gradient(180deg,rgba(22,54,104,.18),transparent); }
.person-group + .person-group { margin-top:2px; border-top-color:rgba(214,179,106,.26); }
.person-names { opacity:0; transform:translateY(14px);margin:0;font-family:"Playfair Display",serif;line-height:1.55;white-space:pre-line;font-size:23px;color:#fff7e5; }
.family-section.is-visible .person-names { animation:familyNameReveal .85s cubic-bezier(.22,.7,.24,1) both; }
.family-section.is-visible .person-group + .person-group .person-names { animation-delay:.18s; }
@keyframes familyNameReveal { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
.person-label { margin:0 0 7px; font-size:16px; font-weight:700; letter-spacing:.18rem; text-transform:uppercase;color:var(--gold); }
.event-card { overflow:hidden; background:#06142f; }
.event-image { width:100%; height:160px; object-fit:cover; opacity:.84; }
.event-content { padding:19px; }
.card-topline { display:flex; align-items:center; gap:11px; }
.icon-disc { display:grid; place-items:center; width:35px; height:35px; border:1px solid rgba(214,179,106,.54); border-radius:50%; color:#d8b76f; background:rgba(214,179,106,.08); flex-shrink:0; }
.event-type { margin:0; font-size:11px; font-weight:700; letter-spacing:.15rem; text-transform:uppercase;color:#d8b76f; }
.place-name { margin:15px 0 7px; font-family:"Playfair Display",serif; font-weight:500; line-height:1.15;font-size:19px;color:#fff5d9; }
.event-time,.address { margin:0; color:#cbd7eb; line-height:1.55;font-size:14px; }
.event-time { margin-top:8px; color:#e8cb85; font-size:14px; font-weight:700; }
.action-button { display:inline-flex; width:100%; min-height:45px; margin-top:17px; align-items:center; justify-content:center; gap:8px; border:1px solid #d6b36a; border-radius:11px; color:#f3d994; background:#0f2c5d; font-size:12px; font-weight:700; letter-spacing:.08rem; text-transform:uppercase; transition:.2s ease; }
.action-button:hover { transform:translateY(-2px); background:#d6b36a; color:#081735; }.church-map-button,.gifts-link { transition:none; }.church-map-button:hover { transform:none; background:#0f2c5d; color:#f3d994; }.gifts-link:hover { transform:none; }
.dress-card { padding:25px 21px; text-align:center; background:linear-gradient(145deg,#1b3d74,#051128); }
.dress-title { margin:0; font-family:"Playfair Display",serif; font-weight:500;font-size:21px; }
.dress-rule { margin:13px 0 0; line-height:1.65;font-size:14px;color:#e2e9f4; }.dress-note{color:#f0d38d;font-weight:600}
.gallery-grid { grid-template-columns:1.1fr .9fr; grid-template-rows:145px 145px; }
.gallery-photo { width:100%; height:100%; object-fit:cover; border:1px solid rgba(214,179,106,.42); border-radius:14px; box-shadow:0 15px 30px rgba(0,0,0,.2); }
.gallery-photo:first-child { grid-row:span 2; }
.gift-card { overflow:hidden; background:linear-gradient(145deg,#0e2d60,#07152f); }
.gift-photo { width:100%; height:180px; object-fit:cover; opacity:.72; }
.gift-content { padding:23px; text-align:center; }
.gift-title { margin:0; font-family:"Playfair Display",serif; font-weight:500;font-size:22px; }
.gift-copy { margin:12px auto 0; max-width:440px; line-height:1.6;font-size:15px;color:#e2e9f4; }
.gift-note { margin:15px 0 0; padding:12px; border:1px solid rgba(214,179,106,.28); border-radius:11px; color:#f4d995; background:rgba(214,179,106,.08); font-size:14px;font-weight:600; }
.envelope-gift-card { overflow:hidden; background:linear-gradient(145deg,#102f63,#07152f); }
.envelope-gift-photo { width:100%; height:190px; object-fit:cover; opacity:.82; filter:saturate(.9) sepia(.12); }
.envelope-gift-content { padding:23px; text-align:center; }
.envelope-gift-title { margin:0; font-family:"Playfair Display",serif; font-weight:500;font-size:22px; }
.envelope-gift-copy { margin:12px auto 0; max-width:460px; color:#e2e9f4; line-height:1.65;font-size:15px; }
.rsvp-card { padding:24px; background:#06142f; }.rsvp-intro{margin:0 0 20px;line-height:1.6;color:#dce5f3;font-size:15px}
.form-grid { display:grid; gap:15px; }
.field-label { display:block; margin-bottom:7px; color:#e9ce89; font-size:11px; font-weight:700; letter-spacing:.08rem; text-transform:uppercase; }
.field-input { width:100%; border:1px solid rgba(214,179,106,.38); border-radius:10px; padding:12px 13px; color:#f7f0df; background:rgba(255,255,255,.06); outline:none; }
.field-input:focus { border-color:#f2d993; box-shadow:0 0 0 3px rgba(242,217,147,.16); }select.field-input option { color:#07152f; }textarea.field-input { min-height:96px; resize:vertical; }
.submit-button { width:100%; min-height:48px; border:0; border-radius:11px; margin-top:4px; font-weight:700; letter-spacing:.06em; transition:transform .2s ease,filter .2s ease;background:var(--gold);color:#081735;font-size:14px; }
.submit-button:hover { transform:translateY(-2px); filter:brightness(1.08); }.submit-button:disabled { opacity:.65; cursor:wait; transform:none; }
.form-status { min-height:20px; margin:8px 0 0; text-align:center; font-size:.82rem; color:#f3d994; }
.success-card { padding:35px 24px; text-align:center; background:#0a2d46; }
.success-icon { display:grid; place-items:center; width:54px; height:54px; margin:0 auto 15px; border:1px solid #d6b36a; border-radius:50%; color:#f4d995; }
.success-title { margin:0; font-family:"Playfair Display",serif;font-size:24px;font-weight:500; }
.success-copy { margin:10px 0 20px; color:#dce5f3; line-height:1.6;font-size:15px; }
.secondary-button { min-height:43px; padding:0 16px; border:1px solid var(--gold); border-radius:10px; background:transparent; color:#f3d994; font-weight:700;font-size:13px; }
.finale { padding:45px 10px 10px; text-align:center; }.finale p{color:#d2b46d;font-size:18px;font-style:italic}
.music-intro { position:relative; z-index:4; display:flex; justify-content:center; width:100%; padding:18px 20px 0; }
.music-button { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; width:min(100%,330px); min-height:56px; padding:0 20px; border:1px solid rgba(232,205,132,.9); border-radius:999px; box-shadow:0 12px 26px rgba(0,0,0,.38); font-size:12px; font-weight:700; letter-spacing:.05em;background:var(--gold);color:#081735; }
.music-label-on,.music-label-paused { display:none; }.music-button.is-playing .music-label-off,.music-button.is-playing .music-label-paused { display:none; }.music-button.is-playing .music-label-on { display:inline; }.music-button.has-played:not(.is-playing) .music-label-off { display:none; }.music-button.has-played:not(.is-playing) .music-label-paused { display:inline; }
.hidden { display:none !important; }.reveal { opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.22,.7,.24,1),transform .8s cubic-bezier(.22,.7,.24,1); }.reveal.is-visible { opacity:1; transform:translateY(0); }
.canva-text.text-entry { opacity:0; transform:translateY(10px); animation:text-entry-reveal .72s cubic-bezier(.22,.7,.24,1) var(--text-delay,0s) both; }
@keyframes text-entry-reveal { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.invitation-message-reveal { opacity:1; transform:none; clip-path:none; }.invitation-message-reveal.is-visible { opacity:1; transform:none; clip-path:none; }
.d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}.d4{transition-delay:.24s}.d5{transition-delay:.3s}
.scroll-progress { position:fixed; top:0; left:0; z-index:20; width:100%; height:3px; background:rgba(214,179,106,.12); pointer-events:none; }.scroll-progress span { display:block; width:0; height:100%; background:linear-gradient(90deg,#d6b36a,#f4da92); box-shadow:0 0 10px rgba(214,179,106,.65); transition:width .18s ease-out; }
button:focus-visible,a:focus-visible { outline:3px solid #fff1bb; outline-offset:4px; }
@media(min-width:560px){.content-column{padding-left:28px;padding-right:28px}.people-grid,.event-grid{grid-template-columns:1fr 1fr}.hero{padding-top:70px}.event-image{height:180px}.gallery-grid{grid-template-rows:180px 180px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal,.canva-text.text-entry,.person-names{opacity:1;transform:none}.name-sparkle-entry::before,.name-sparkle-entry::after{opacity:.22}}

/* Gold shimmer throughout the invitation. */
.stars{position:fixed;inset:0;z-index:-1}
.extra-spark{position:absolute;width:var(--spark-size);height:var(--spark-size);border-radius:50%;background:#fff0be;box-shadow:0 0 7px 2px #e9c87c77;opacity:.15;animation:background-sparkle var(--spark-duration) ease-in-out var(--spark-delay) infinite}
.cross-spark{background:transparent;border-radius:0;box-shadow:none;color:#f8d88c;font-size:var(--spark-size);line-height:1;text-shadow:0 0 12px #e9c87c;}
@keyframes background-sparkle{0%,100%{opacity:.12;transform:scale(.65) translateY(0)}45%{opacity:.85;transform:scale(1.15) translateY(-4px)}70%{opacity:.3;transform:scale(.8) translateY(-7px)}}
body.invitation-ready .name-sparkle-entry{animation:none}
.name-word{display:inline-block;white-space:nowrap}
.name-letter{display:inline-block;opacity:0;transform:translateY(16px);clip-path:inset(0 100% 0 0)}
body.name-ready .name-letter{animation:letter-arrival .65s cubic-bezier(.22,.7,.24,1) var(--letter-delay) both}
@keyframes letter-arrival{0%{opacity:0;transform:translateY(16px);clip-path:inset(0 100% 0 0);filter:brightness(1.8)}60%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0);filter:brightness(1)}}
.reveal{transform:translateY(30px);transition:opacity .9s cubic-bezier(.22,.7,.24,1),transform .9s cubic-bezier(.22,.7,.24,1)}
@media(prefers-reduced-motion:reduce){.name-letter{opacity:1;transform:none;clip-path:none}.extra-spark{animation:none;opacity:.25}.reveal{transform:none}}

.dress-formal{position:relative;aspect-ratio:4/5;background:#07152f url('vestimenta-marino.png') center/100% 100% no-repeat;display:flex;align-items:center;justify-content:center;padding:29% 12% 22%;overflow:hidden}
.dress-formal-content{width:100%;text-align:center}
.dress-formal .dress-title{font-size:clamp(38px,8vw,62px);font-style:italic;color:#f2d993;line-height:1.2}
.dress-options{margin:22px 0}.dress-formal .dress-rule{font-size:16px;margin:7px 0;color:#f7f0df}
.dress-gold-line{height:1px;width:110px;margin:28px auto;background:linear-gradient(90deg,transparent,#d6b36a,transparent)}
.reserved-intro,.reserved-outro{font-family:'Playfair Display',serif;font-size:clamp(18px,4vw,26px);line-height:1.45}
.reserved-color{font-family:'Playfair Display',serif;font-size:clamp(23px,5.5vw,36px);color:#f4d995;font-weight:600;letter-spacing:.04em;margin:8px 0;line-height:1.25}
@media(max-width:380px){.dress-formal{min-height:470px;aspect-ratio:auto;padding-top:36%;padding-bottom:25%}.dress-options{margin:15px 0}.dress-gold-line{margin:20px auto}}
/* A quieter dress-code section without an ornamental frame. */
.dress-formal{background:linear-gradient(145deg,#102b50,#07152f);border:0;border-radius:12px;box-shadow:none;aspect-ratio:auto;min-height:0;padding:42px 24px;backdrop-filter:none}
@media(max-width:380px){.dress-formal{min-height:0;aspect-ratio:auto;padding:36px 20px}}

.dress-formal{border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 46px rgba(0,0,0,.22)}
.formal-icons{width:190px;height:140px;object-fit:contain;margin:0 auto 18px}

.formal-icons{width:155px;height:110px;margin-bottom:18px}

.tamara-portrait{display:block;width:100%;max-width:480px;height:auto;object-fit:contain;margin:0 auto 22px;border:1px solid var(--line);border-radius:18px;box-shadow:0 16px 36px rgba(0,0,0,.28)}