:root{color-scheme:dark;--background:#555460;--ink:#f8f4e8}
*{box-sizing:border-box}
html{width:100%;height:100%;overflow:hidden;background:var(--background)}
body{margin:0;width:100%;height:100dvh;overflow:hidden;display:grid;place-items:center;color:var(--ink);font-family:'Cormorant Garamond',Georgia,serif;isolation:isolate}
#background,.wash,.grain{position:fixed;inset:0;pointer-events:none}
#background{z-index:-4;background:var(--background) url('assets/meadow.jpg') center/cover}
.wash{z-index:-3;background:#16142366}
.grain{z-index:-2;opacity:.21;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='230'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.8' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.invitation{position:relative;min-width:0;min-height:0;width:min(780px,100%);height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;padding:clamp(18px,5.8dvh,66px) clamp(20px,5vw,62px) clamp(18px,5.6dvh,64px);text-align:center}
.frame{position:absolute;inset:clamp(5px,1.6dvh,16px) 0;width:100%;height:calc(100% - clamp(10px,3.2dvh,32px));pointer-events:none;color:#e8e2e0;opacity:.4}
.rail{fill:none;stroke:currentColor;stroke-width:.7;opacity:.28}
header,footer{position:relative;z-index:1;min-width:0}
header{grid-row:1}
.little-star{display:block;font-size:clamp(14px,2.2dvh,20px);font-weight:400;opacity:.75;line-height:1;margin-bottom:clamp(8px,2dvh,18px)}
h1{margin:0;font-weight:400;line-height:1.05;text-shadow:none}
h1 span:first-child{display:block;font-size:clamp(38px,min(8.2dvh,17vw),76px);font-style:italic;letter-spacing:-.035em}
h1 span:last-child{display:block;font-size:clamp(20px,min(3.8dvh,7.6vw),34px);font-weight:400;margin-top:clamp(5px,1.3dvh,12px);letter-spacing:.005em}
.horse-stage{grid-row:2;position:relative;align-self:stretch;min-height:0;min-width:0;width:min(660px,calc(100vw - 30px));max-width:calc(100vw - 30px);margin:clamp(8px,2.4dvh,22px) 0 clamp(9px,2.8dvh,26px)}
.horse-stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:scale(1.06);transform-origin:center}
footer{grid-row:3;width:100%}
footer>p{font-size:clamp(19px,min(3.1dvh,6.5vw),28px);font-style:italic;line-height:1.24;margin:0 0 clamp(10px,3dvh,28px);font-weight:400}
.divider{display:none}
.event-details time{display:block;font-size:clamp(20px,2.9dvh,26px);font-weight:500;letter-spacing:.06em;line-height:1.2;margin-bottom:clamp(10px,2.4dvh,22px)}
.event-details time span{padding:0 12px;opacity:.65}
.map-button{display:inline-flex;align-items:center;justify-content:center;gap:13px;max-width:100%;min-height:42px;padding:clamp(8px,1.2dvh,11px) 22px;border:1px solid #fff6;border-radius:7px;background:#20251f70;backdrop-filter:blur(12px);color:var(--ink);text-decoration:none;font:500 clamp(20px,2.6dvh,23px)/1.2 'Cormorant Garamond',Georgia,serif;transition:background .2s,border-color .2s}
.map-button:hover{background:#20251fbb;border-color:#fff9}
.map-button:focus-visible{outline:2px solid white;outline-offset:5px}
.map-button svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.4}
.map-arrow{font:16px/1 system-ui,sans-serif;opacity:.8}
.venue-address{font:11px/1.6 system-ui,sans-serif;letter-spacing:.015em;opacity:.82;margin:clamp(7px,1.3dvh,12px) auto 0;max-width:340px}
#source{position:fixed;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
#media-error{position:absolute;bottom:0;left:0;right:0;font:14px system-ui}
[hidden]{display:none!important}
@media(max-width:600px){
 .frame{left:6px;width:calc(100% - 12px);opacity:.34}
 .venue-address{font-size:10px;line-height:1.6}
}
/* Wide, short screens use two columns instead of shrinking the whole invitation. */
@media(max-height:520px) and (min-width:620px){
 .invitation{width:min(1100px,100%);grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:32px;padding:26px 48px}
 header{grid-column:1;grid-row:1}
 .little-star{display:none}
 h1 span:first-child{font-size:clamp(40px,10dvh,54px)}
 h1 span:last-child{font-size:24px;margin-top:7px}
 .horse-stage{grid-column:1;grid-row:2;width:100%;max-width:100%;margin:12px 0 0}
 footer{grid-column:2;grid-row:1 / 3;align-self:center}
 footer>p{font-size:23px;margin-bottom:22px}
 .event-details time{font-size:24px;margin-bottom:19px}
 .map-button{font-size:22px}
 .venue-address{font-size:10px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.contact-details{font:12px/1.5 system-ui,sans-serif;margin:clamp(8px,1.5dvh,14px) 0 0;color:var(--ink)}
.contact-details span{padding:0 5px;opacity:.7}
.contact-details a{color:inherit;text-decoration:none;white-space:nowrap}
.contact-details a:hover{text-decoration:underline}