/* The invitation page is a supper-club poster written by hand in one ink: Clear Skies deepened, on book-page paper. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--palette-paper) url(paper.webp); color: var(--invite-ink); font-family: var(--invite-face); font-size: var(--text-body); line-height: var(--leading-body); text-align: center; font-synthesis: none; }
::selection { background: var(--butter); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
a:active, summary:active { opacity: .6; }
:focus-visible { outline: 2px solid var(--invite-ink); outline-offset: var(--focus-offset); }
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
figure, h1, h2, p, dl, dd { margin: 0; }
h1, h2 { font-weight: var(--weight-regular); }
.preserve-lines { white-space: pre-line; overflow-wrap: anywhere; }
p, dd { text-wrap: pretty; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 10; padding: var(--space-3); background: var(--invite-ink); color: var(--palette-paper); }
.skip-link:focus { top: 16px; }
.page { overflow-x: clip; isolation: isolate; }
main { display: flex; flex-direction: column; align-items: center; }
.hero, .letter, .announcement, .weekend, .travel, .practical, .closing { width: min(100% - 40px, 34rem); }
.drawing { width: 100%; height: auto; }

.hero { width: min(100% - 40px, 56rem); padding-top: var(--space-6); }
.hero-place { display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
/* Jämtland's flag flies beside the place as a small swallow-tailed pennant. */
.pennant { width: 30px; height: 18px; background: linear-gradient(to bottom, var(--jamtland-blue) 0 33.4%, var(--jamtland-white) 33.4% 66.7%, var(--jamtland-green) 66.7%); clip-path: polygon(0 0, 100% 0, 78% 50%, 100% 100%, 0 100%); }
.hero h1 { width: min(100%, 40rem); margin: var(--space-5) auto 0; }
.hero-date { width: fit-content; margin: var(--space-5) auto 0; font-size: var(--text-heading); }

.letter { margin-top: var(--space-8); }
.invitation-greeting, .invitation-message { font-size: var(--text-heading); line-height: var(--leading-control); }
.invitation-greeting { margin-bottom: var(--space-4); overflow-wrap: anywhere; }
.invitation-message { max-width: 22em; margin-inline: auto; }
/* The one action is circled by hand, as on a paper invitation. */
.rsvp-link { position: relative; display: inline-block; margin-top: var(--space-8); padding: var(--space-4) var(--space-8); font-size: var(--text-heading); line-height: var(--leading-control); text-decoration: none; }
.deadline, .host-preview { margin-top: var(--space-6); font-size: var(--text-small); }
.announcement { margin-top: var(--space-12); padding: var(--space-4) var(--space-5); border: 1px solid currentColor; }

.print { padding: var(--space-2); background: var(--print-border); box-shadow: var(--print-shadow); }

/* theme-exception: The map runs to the paper's edges on phones, one large drawing the page moves across in pieces. */
.map-piece { position: relative; width: calc(100% + 40px); translate: -20px; }
.map-view { position: relative; }
.map-art { width: 100%; height: auto; }
.map-leader, .map-pen { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-leader path { fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1 2; }
.map-pen mask { mask-type: alpha; }
.map-route { fill: none; stroke: currentColor; stroke-width: 90; stroke-linejoin: round; stroke-dasharray: 1 2; }
.map-label, .map-here { position: absolute; translate: -50% -50%; line-height: var(--leading-heading); white-space: nowrap; text-shadow: 0 0 2px var(--palette-paper), 0 0 6px var(--palette-paper); }
.map-label { font-size: var(--text-small); }
.map-here { left: 72.5%; top: 92%; translate: 0 -50%; font-size: var(--text-heading); }
.label-sylarna { left: 40%; top: 4%; }
.label-blahammaren { left: 78%; top: 9%; }
.label-station { left: 33%; top: 19%; }
.label-handol { left: 26%; top: 55%; }
.label-enafors { left: 87.5%; top: 77.5%; }
.map-fjallet { margin-top: var(--space-8); }
.map-fjallet .map-view { mask-image: linear-gradient(currentColor 90%, transparent); }
.map-stationen .map-view, .map-dalen .map-view { mask-image: linear-gradient(to right, transparent, currentColor 8%, currentColor 92%, transparent), linear-gradient(transparent, currentColor 10%, currentColor 90%, transparent); mask-composite: intersect; }
.map-dalen .map-view { mask-image: linear-gradient(to right, transparent, currentColor 8%, currentColor 92%, transparent), linear-gradient(transparent, currentColor 8%); }
.map-piece .print { position: absolute; }
.map-piece .print img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.pin-dinner { right: var(--space-5); top: 52%; width: 31%; rotate: 2deg; }
.pin-snow { left: var(--space-5); top: 20%; width: 36%; rotate: -2.5deg; }

.weekend, .travel, .practical, .closing { margin-top: var(--space-16); }
.map-stationen { margin-bottom: var(--space-16); }
.map-dalen { margin-block: var(--space-8); }
h2 { margin-bottom: var(--space-8); font-size: var(--text-title); line-height: var(--leading-heading); text-transform: uppercase; letter-spacing: .03em; text-wrap: balance; }
.entry-list > div + div { margin-top: var(--space-8); }
.entry-list dt { margin-bottom: var(--space-3); font-size: var(--text-heading); line-height: var(--leading-heading); }
.entry-list dd { max-width: 26em; margin-inline: auto; }
.entry-list dd p + p { margin-top: var(--space-2); }
.calendar-link { display: inline-block; margin-top: var(--space-8); padding-block: var(--space-3); }

.closing-photo img { width: 100%; height: auto; object-fit: cover; }

.travel-intro { max-width: 26em; margin-inline: auto; }
.travel-links { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); margin-top: var(--space-8); }
.travel-links a { padding-block: var(--space-2); }

summary { padding: var(--space-4) 0; font-size: var(--text-heading); line-height: var(--leading-heading); cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; content: '+' / ''; margin-left: var(--space-3); }
details[open] > summary::after { content: '−'; content: '−' / ''; }
.detail-copy { max-width: 26em; margin-inline: auto; padding-bottom: var(--space-6); }

.closing-photo { width: min(62%, 17rem); margin-inline: auto; rotate: 1.5deg; }
.closing-photo img { aspect-ratio: 9 / 16; }
.contact-message { margin-top: var(--space-8); font-size: var(--text-heading); line-height: var(--leading-control); }
.contact-links { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); margin-top: var(--space-4); overflow-wrap: anywhere; }
.contact-links a { padding-block: var(--space-2); }
.closing-drawing { width: min(60%, 15rem); margin: var(--space-12) auto 0; }

.site-footer { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-16) var(--space-5) var(--space-8); font-size: var(--text-small); }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-6); }
.site-footer nav > a { display: inline-flex; align-items: center; min-height: var(--touch-target); }
.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; text-underline-offset: .22em; cursor: pointer; }
.toast { position: fixed; left: 50%; bottom: var(--space-6); translate: -50% 0; padding: var(--space-3) var(--space-5); background: var(--invite-ink); color: var(--palette-paper); opacity: 0; pointer-events: none; transition: opacity var(--feedback-duration) ease; }
.toast.visible { opacity: 1; }

@media (min-width: 1024px) {
  /* theme-exception: On wide screens the whole invitation scales up from its root size, like a poster printed larger. */
  html { font-size: 118.75%; }
}
@media (min-width: 720px) {
  .map-piece { width: 100%; translate: none; }
  .map-fjallet { width: min(100%, 40rem); margin-inline: auto; }
  .map-leader path { stroke-width: 4; }
  .hero { padding-top: var(--space-12); }
  .hero h1 { width: min(100%, 34rem); margin-top: var(--space-8); }
  .map-fjallet, .letter, .rsvp-link { margin-top: var(--space-12); }
  .weekend, .travel, .practical, .closing { margin-top: var(--space-24); }
  .hero-date { font-size: var(--text-title); }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .map-here.written-after-lettering { animation-duration: .35s; animation-delay: 3.5s; }
  .map-leader path { animation: pen-draws 500ms cubic-bezier(.4, 0, .6, 1) 3.9s backwards; animation-timing-function: var(--ease-pen-line); }
  .map-pen { will-change: transform; }
  .map-dalen:has([data-motion="waiting"]) .map-route { stroke-dashoffset: 1; }
  .map-dalen:has([data-motion="playing"]) .map-route { animation: pen-draws 3.4s cubic-bezier(.45, .05, .35, 1) both; animation-timing-function: linear(0, .019, .057, .101, .141, .195, .241, .277, .315, .361, .415, .46, .496, .537, .582, .617, .659, .713, .763, .808, .852, .906, .95, .978, 1); }
}
@keyframes pen-draws { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .toast { transition: none; } }