:root { color-scheme: light; background: #e7e5e3; }
* { box-sizing: border-box; }
body { margin: 0; font-family: Georgia, 'Times New Roman', serif; }
.invitation { width: min(100%, 700px); margin: 0 auto; background: #edebea; box-shadow: 0 0 40px #66564c1c; overflow: hidden; }
.art { display: block; width: 100%; height: auto; }
.countdown { padding: 0 12% 4%; text-align: center; color: #a34731; background: #eeedec; }
.countdown[hidden] { display: none; }
.countdown h2 { margin: 0 0 8%; font-size: clamp(13px, 3.5vw, 24px); font-weight: normal; letter-spacing: .35em; text-transform: uppercase; }
.countdown-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8%; }
.countdown-grid span { display: grid; place-items: center; aspect-ratio: 1.35; background: #b36f60; color: white; font-size: clamp(18px, 5vw, 38px); font-variant-numeric: tabular-nums; }
.countdown-grid small { display: block; margin-top: .65em; font-size: clamp(8px, 1.9vw, 13px); letter-spacing: .22em; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (min-width: 701px) { body { padding: 24px; } }

.location { padding: 2% 0 3%; text-align: center; background: #e9e8e7; }
.location a { display: inline-block; padding: .45em 1.15em; border-radius: 999px; background: #b36f60; color: #fff; font-size: clamp(16px, 4.3vw, 29px); letter-spacing: .2em; text-decoration: none; text-transform: uppercase; }
.location a:hover { background: #9f584a; }
.location a:focus-visible { outline: 3px solid #783f33; outline-offset: 4px; }