/* The invitation page is a few pages from an illustrator's notebook kept on a spring trip to Storulvån: one card and a few prints taped in, written by hand in one ink 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); 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; }
.spread, .closing { width: min(100% - 40px, 34rem); margin-top: var(--space-16); }
.drawing { width: 100%; height: auto; }

.hero { width: min(100% - 40px, 56rem); padding-top: var(--space-6); text-align: center; }
.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); }
/* theme-exception: The table drawing runs to the paper's edges on phones, like the drawing at the foot of a poster. */
.hero-drawing { width: calc(100% + 40px); max-width: 52rem; margin: var(--space-8) auto 0; translate: -20px; }

.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; }
/* The one action is circled by hand, as on a paper invitation. */
.rsvp-link { position: relative; display: inline-block; margin: var(--space-8) 0 0 calc(-1 * var(--space-4)); padding: var(--space-4) var(--space-6); 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; }

/* Each photograph is a print laid in with a single piece of tape, sized and cropped for its page. */
.print { position: relative; padding: var(--space-2); background: var(--print-border); box-shadow: var(--print-shadow); }
.print img { width: 100%; height: auto; object-fit: cover; }
.tape { position: absolute; z-index: 1; top: calc(-1 * var(--space-3)); left: 34%; width: 32%; height: var(--space-6); background: var(--tape); clip-path: polygon(2% 0, 98% 0, 100% 22%, 97% 42%, 100% 62%, 97% 82%, 99% 100%, 1% 100%, 3% 78%, 0 58%, 3% 38%, 0 16%); rotate: -3deg; transform-origin: left center; }
.print-laugh { width: min(64%, 17rem); margin: var(--space-16) var(--space-2) 0 auto; rotate: 1.5deg; }
.print-laugh img { aspect-ratio: 2 / 3; object-position: center 25%; }
.print-winter { width: min(46%, 12rem); margin: var(--space-12) 0 0 var(--space-6); rotate: -2deg; }
.print-winter img { aspect-ratio: 4 / 5; object-position: center 75%; }
.print-winter .tape { top: var(--space-1); left: -12%; width: 46%; rotate: -38deg; }
.print-snow { margin-top: var(--space-12); rotate: -1deg; }
.print-snow img { aspect-ratio: 4 / 3; object-position: center bottom; }
.print-snow .tape { left: auto; right: 14%; rotate: 2deg; }

/* The programme is written on one card laid on the page. */
.weekend { padding: var(--space-8) var(--space-6); background: var(--card) url(paper.webp); box-shadow: var(--print-shadow); rotate: -.6deg; }
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-2); font-size: var(--text-heading); line-height: var(--leading-heading); }
.entry-list dd { max-width: 26em; }
.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); }

/* theme-exception: The night train crosses the fjäll from edge to edge on phones. */
.travel-drawing { width: calc(100% + 40px); max-width: 52rem; margin: 0 -20px var(--space-12); }
.travel-intro { max-width: 26em; margin-bottom: var(--space-8); }
.travel-links { display: flex; flex-direction: column; align-items: flex-start; 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; padding-bottom: var(--space-6); }

.closing { text-align: center; }
.contact-message { 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: 720px) {
  .hero-drawing, .travel-drawing { width: 100%; translate: none; }
  .travel-drawing { margin-inline: auto; }
  .hero { padding-top: var(--space-12); }
  .hero h1 { width: min(100%, 34rem); margin-top: var(--space-8); }
  .hero-drawing, .rsvp-link { margin-top: var(--space-12); }
  .spread, .closing { margin-top: var(--space-24); }
  .hero-date { font-size: var(--text-title); }
}
@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%; }
  .spread { display: grid; grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); grid-template-rows: repeat(3, auto) 1fr; align-items: start; column-gap: var(--space-16); width: min(100% - 80px, 56rem); }
  .spread > * { grid-column: 1; }
  .spread > .print { grid-column: 2; grid-row: 1 / -1; }
  .print-laugh { width: min(100%, 15rem); margin: var(--space-4) 0 0 var(--space-12); }
  .print-winter { width: min(100%, 12rem); margin: var(--space-24) 0 0 var(--space-6); }
  .print-snow { width: 100%; margin-top: var(--space-4); }
  .travel-drawing { grid-column: 1 / -1; margin-bottom: var(--space-16); }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .print[data-motion="waiting"] .tape { opacity: 0; }
  .print[data-motion="playing"] .tape { animation: tape-pressed 360ms var(--ease-settle) 560ms backwards; }
}
@keyframes tape-pressed { from { opacity: 0; translate: 0 -3px; scale: 1.08; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .toast { transition: none; } }