:root { background: var(--web98-background); }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; padding: var(--space-8) var(--space-5) var(--space-12); color: var(--web98-ink); font-family: var(--retro-face); line-height: var(--leading-web98); font-synthesis: none; }
img { max-width: 100%; height: auto; }
.preserve-lines { white-space: pre-line; overflow-wrap: anywhere; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 10; padding: var(--space-2); background: var(--web98-paper); }
.skip-link:focus { top: 16px; }

.wallpaper { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.flag-blue { fill: var(--jamtland-blue); }
.flag-white { fill: var(--jamtland-white); }
.flag-green { fill: var(--jamtland-green); }
.flag-pole { fill: var(--web98-ink); }

.page { max-width: 37.5rem; margin-inline: auto; padding: var(--space-3) var(--space-3) var(--space-1); background: var(--web98-paper); }
main { overflow-wrap: break-word; }

.masthead { text-align: center; }
.title { display: flex; justify-content: center; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.waving-flag { flex: none; width: 1.75rem; }
.waving-flag.right { scale: -1 1; }
.waving-flag .frame + .frame { visibility: hidden; }
h1 { margin: 0; color: var(--web98-heading); font-size: var(--text-masthead); white-space: nowrap; }
h2 { color: var(--web98-heading); }

.marquee { overflow: hidden; color: var(--web98-shout); font-weight: var(--weight-display); white-space: nowrap; }
.marquee p { display: flex; width: max-content; margin: 0; }

.links { padding: 0; text-align: center; list-style: none; }
.links::before { content: '[ '; content: '[ ' / ''; }
.links::after { content: ' ]'; content: ' ]' / ''; }
.links li { display: inline; }
.links li:not(:last-child)::after { content: ' | '; content: ' | ' / ''; }
.links a { display: inline-block; padding-block: var(--space-3); }

.letter { text-align: center; }
.invitation-greeting { font-weight: var(--weight-display); overflow-wrap: anywhere; }
.rsvp { font-size: var(--text-heading); font-weight: var(--weight-display); }
.rsvp a { display: inline-block; padding-block: var(--space-2); }
.notice { color: var(--web98-shout); font-weight: var(--weight-display); text-align: center; }
.picture, .pictures { text-align: center; }
.picture img { width: 20rem; }
.pictures img { width: 5.5rem; vertical-align: top; }
.pictures a img { border: 2px solid currentColor; }

.entry-list > div + div { margin-top: var(--space-5); }
dt { margin-bottom: var(--space-1); font-weight: var(--weight-display); }
dd { margin: 0; }
ul { padding-left: 0; list-style-position: inside; }
dd p { margin: 0; }
dd p + p { margin-top: var(--space-3); }
li a { display: inline-block; padding-block: var(--space-2); }

summary { display: block; padding-block: var(--space-3); color: var(--web98-link); text-decoration: underline; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: '[+] '; content: '[+] ' / ''; color: var(--web98-ink); text-decoration: none; display: inline-block; white-space: pre; }
details[open] > summary::before { content: '[−] '; content: '[−] ' / ''; }
details > p { margin: 0 0 var(--space-3); }

.to-top { text-align: right; }
.to-top a { display: inline-block; padding-block: var(--space-2); }
.countdown { text-align: center; }
.countdown b { color: var(--web98-shout); }
.updated { font-style: italic; text-align: center; }

.site-footer { text-align: center; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-6); }
.site-footer form { margin: 0; }
.site-footer small { display: block; padding-bottom: var(--space-2); }
.link-button { min-height: var(--touch-target); padding: 0; border: 0; background: transparent; color: var(--web98-link); font: inherit; text-decoration: underline; cursor: pointer; }
.toast { position: fixed; bottom: var(--space-6); left: 50%; z-index: 6; max-width: calc(100% - 32px); padding: var(--space-2) var(--space-3); translate: -50% 0; border: 1px solid var(--web98-ink); background: var(--web98-paper); opacity: 0; pointer-events: none; }
.toast.visible { opacity: 1; }

@media (min-width: 560px) {
  .page { padding: var(--space-5) var(--space-6) var(--space-2); }
  .waving-flag { width: 2.75rem; }
  .pictures img { width: 7.5rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .waving-flag .frame { animation: flag-frame 1.2s steps(1) infinite; }
  .waving-flag .frame:nth-child(2) { animation-delay: -900ms; }
  .waving-flag .frame:nth-child(3) { animation-delay: -600ms; }
  .waving-flag .frame:nth-child(4) { animation-delay: -300ms; }
  .marquee p { animation: marquee 22s linear infinite; }
}
@keyframes flag-frame { 0% { visibility: visible; } 25%, 100% { visibility: hidden; } }
@keyframes marquee { to { translate: -50% 0; } }