* { box-sizing: border-box; }
:root { background: var(--web98-background); }
html { scroll-behavior: smooth; scroll-padding-top: var(--space-4); -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; color: var(--web98-dark); font-family: var(--retro-face); font-size: var(--text-body); line-height: var(--leading-body); font-synthesis: none; }
a { color: var(--web98-link); text-underline-offset: .15em; }
a:visited { color: var(--web98-visited); }
:focus-visible { outline: 1px dotted var(--web98-dark); outline-offset: 2px; }
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
figure, h1, h2, p, dl, dd, ul { margin: 0; }
.preserve-lines { white-space: pre-line; overflow-wrap: anywhere; }
p, dd { text-wrap: pretty; }
.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-3); border: 3px outset var(--web98-face); background: var(--web98-face); color: var(--web98-dark); }
.skip-link:focus { top: 16px; }
.page { overflow-x: clip; isolation: isolate; }

.wallpaper { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none; 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-dark); }

.site { display: flex; flex-direction: column; gap: var(--space-5); width: min(100% - 24px, 44rem); margin: var(--space-5) auto 0; padding-bottom: var(--space-8); }
.panel { padding: var(--space-5) var(--space-4); border: 3px outset var(--web98-face); background: var(--web98-paper); }

.masthead { padding-block: var(--space-6); text-align: center; }
.title-row { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.waving-flag { width: 4rem; height: auto; }
.waving-flag.right { display: none; scale: -1 1; }
.waving-flag .frame + .frame { visibility: hidden; }
h1 { color: var(--web98-heading); font-size: var(--text-masthead); font-weight: var(--weight-display); line-height: var(--leading-display); white-space: nowrap; }
.masthead-place { margin-top: var(--space-3); }
.masthead-date { font-size: var(--text-heading); font-weight: var(--weight-display); line-height: var(--leading-heading); }

.marquee { overflow: hidden; border: 3px inset var(--web98-face); background: var(--web98-heading); color: var(--butter); font-weight: var(--weight-display); white-space: nowrap; }
.marquee p { display: flex; width: max-content; padding-block: var(--space-2); }

.links { padding-block: var(--space-2); }
.links ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-2); padding: 0; list-style: none; }
.links ul::before { content: '['; content: '[' / ''; align-self: center; }
.links ul::after { content: ']'; content: ']' / ''; align-self: center; }
.links li { display: flex; align-items: center; gap: var(--space-2); }
.links li:not(:last-child)::after { content: '|'; content: '|' / ''; }
.links a { padding-block: var(--space-2); }

.letter { text-align: center; }
.invitation-greeting { margin-bottom: var(--space-3); font-weight: var(--weight-display); overflow-wrap: anywhere; }
.invitation-message { max-width: 30em; margin-inline: auto; font-size: var(--text-heading); line-height: var(--leading-control); }
.rsvp-button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-target); margin-top: var(--space-6); padding: var(--space-2) var(--space-6); border: 3px outset var(--web98-face); background: var(--web98-face); font-weight: var(--weight-display); text-decoration: none; }
.rsvp-button, .rsvp-button:visited { color: var(--web98-dark); }
.rsvp-button:active { border-style: inset; }
.rsvp-button:focus-visible { outline-offset: -7px; }
.deadline, .host-preview { margin-top: var(--space-4); font-size: var(--text-small); }
.announcement { background: var(--butter); }

.framed { border: 4px outset var(--web98-face); background: var(--web98-face); }
.wide-photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 75%; }

h2 { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-5); color: var(--web98-heading); font-size: var(--text-title); font-weight: var(--weight-display); line-height: var(--leading-heading); text-align: center; }
h2 span { min-width: 0; text-wrap: balance; }
.flag-bullet { flex: none; width: 32px; height: 32px; }

.entry-list { display: grid; gap: 2px; padding: 2px; border: 1px outset var(--web98-face); }
.entry-list > div { border: 1px inset var(--web98-face); }
.entry-list dt { padding: var(--space-2) var(--space-3); background: var(--web98-face); font-weight: var(--weight-display); }
.entry-list dd { padding: var(--space-3); }
.entry-list dd p + p { margin-top: var(--space-2); }
.travel-intro { margin-bottom: var(--space-4); }
.more { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-6); margin-top: var(--space-4); }
.more a { padding-block: var(--space-2); }
.more a::before { content: '» '; content: '» ' / ''; }

.practical-list details + details { border-top: 1px dotted var(--web98-face); }
summary { display: flex; align-items: center; min-height: var(--touch-target); color: var(--web98-link); text-decoration: underline; text-underline-offset: .15em; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: '[+]'; content: '[+]' / ''; display: inline-block; margin-right: var(--space-2); color: var(--web98-dark); }
details[open] > summary::before { content: '[−]'; content: '[−]' / ''; }
.detail-copy { padding: 0 0 var(--space-4) var(--space-8); }

.contact { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; gap: var(--space-4); }
.contact img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.contact-message { font-size: var(--text-heading); line-height: var(--leading-control); }
.contact-links { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-3); overflow-wrap: anywhere; }
.contact-links a { padding-block: var(--space-2); }

.counter { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); padding-block: var(--space-3); }
.digits { display: flex; gap: 2px; padding: 2px; border: 2px inset var(--web98-face); background: var(--web98-face); }
.digits span { min-width: 1.2em; background: var(--web98-dark); color: var(--web98-paper); font-weight: var(--weight-display); text-align: center; }

.site-footer { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: 0 var(--space-5) var(--space-8); color: var(--web98-dark); text-align: center; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-6); }
.site-footer nav > *, .site-footer small { padding: 0 var(--space-2); background: var(--web98-background); }
.site-footer a, .site-footer a:visited { color: inherit; }
.site-footer form { margin: 0; }
.link-button { min-height: var(--touch-target); padding: var(--space-3) 0; border: 0; background: transparent; color: inherit; 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-dark); background: var(--butter); opacity: 0; pointer-events: none; }
.toast.visible { opacity: 1; }

@media (min-width: 560px) {
  .entry-list > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); }
}
@media (min-width: 720px) {
  .site { gap: var(--space-8); margin-top: var(--space-8); }
  .panel { padding: var(--space-6) var(--space-8); }
  .title-row { flex-direction: row; justify-content: center; gap: var(--space-5); }
  .waving-flag { width: 3.5rem; }
  .waving-flag.right { display: block; }
}
@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; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@keyframes flag-frame { 0% { visibility: visible; } 25%, 100% { visibility: hidden; } }
@keyframes marquee { to { translate: -50% 0; } }