* { box-sizing: border-box; }
html { background: var(--palette-paper); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--palette-paper); color: var(--palette-text); font-family: var(--grotesk); font-size: var(--text-body); line-height: var(--leading-body); font-synthesis: none; font-kerning: normal; }
::selection { background: var(--palette-selection); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .24em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--palette-text); outline-offset: var(--focus-offset); }
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
h1, h2, p, dl, dd, figure { margin: 0; }
h1, h2 { font-weight: var(--weight-regular); }
.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: var(--space-4); z-index: 10; padding: var(--space-3); background: var(--palette-ink); color: var(--palette-paper); }
.skip-link:focus { top: var(--space-4); }
.page { overflow-x: clip; }
main { width: min(100% - 2 * var(--space-5), 40rem); margin-inline: auto; }

.display { width: 100%; height: auto; overflow: visible; fill: var(--palette-ink); }
.display text { font-family: var(--grotesk); font-kerning: normal; font-feature-settings: 'case'; }
.eyebrow, .opening-place, .days dt, .deadline, .calendar-link, .travel-links a, .site-footer { font-size: var(--text-small); font-weight: var(--weight-emphasis); letter-spacing: var(--tracking-open); text-transform: uppercase; }

.opening { padding-top: var(--space-6); }
.opening-place { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.pennant { flex: none; 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, 76% 50%, 100% 100%, 0 100%); }
/* theme-exception: The gaps inside the opening lock-up scale with the fitted type, as a share of the measure. */
.opening-dates { margin-top: 3.5%; }

.letter { margin-top: var(--space-12); }
.invitation-greeting, .invitation-message, .travel-intro, .contact-message { font-size: var(--text-heading); line-height: var(--leading-lead); }
.invitation-message { margin-top: var(--space-2); }
.rsvp { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 64px; margin-top: var(--space-8); padding-inline: var(--space-5); background: var(--palette-ink); color: var(--palette-paper); font-size: var(--type-action); font-weight: var(--weight-black); font-stretch: var(--width-extended); line-height: var(--leading-heading); text-transform: uppercase; text-decoration: none; transition: scale var(--feedback-duration) ease; }
.rsvp::after { content: '→' / ''; font-stretch: var(--width-normal); transition: translate var(--step-duration) ease; }
.rsvp:hover::after { translate: var(--space-1) 0; }
.rsvp:active { scale: var(--pressed-scale); }
.rsvp:focus-visible { outline-offset: var(--space-1); }
.deadline, .host-preview { margin-top: var(--space-4); }
.announcement { margin-top: var(--space-12); padding-block: var(--space-4); border-block: var(--rule) solid var(--palette-ink); }

.snapshot { width: 100%; height: auto; margin-top: var(--space-16); }

.weekend { margin-top: var(--space-24); }
.days { margin-top: var(--space-8); }
.days > div { display: grid; grid-template-columns: calc(var(--type-numeral) * 1.34) 1fr; grid-template-rows: auto 1fr; column-gap: var(--space-4); padding-block: var(--space-5) var(--space-6); border-top: 1px solid var(--palette-ink); }
.days dt { grid-column: 2; grid-row: 1; }
.days dd { display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; grid-column: 1 / -1; grid-row: 1 / span 2; }
.day-numeral { grid-column: 1; grid-row: 1 / span 2; justify-self: end; color: var(--palette-ink); font-size: var(--type-numeral); font-weight: var(--weight-black); line-height: var(--leading-solid); font-feature-settings: 'tnum'; text-box: trim-both cap alphabetic; }
.day-text { grid-column: 2; grid-row: 2; padding-top: var(--space-2); }
.day-text p + p, .ways dd p + p { margin-top: var(--space-3); }
.calendar-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); margin-top: var(--space-2); }
.calendar-link::after, .travel-links a::after { content: '→' / ''; letter-spacing: 0; }

.travel { margin-top: var(--space-24); }
.travel-intro { margin-top: var(--space-8); }
.ways { display: grid; gap: var(--space-8); margin-top: var(--space-8); }
.ways > div { display: grid; grid-template-columns: auto 1fr; align-items: start; column-gap: var(--space-5); }
.ways dt { writing-mode: vertical-rl; rotate: 180deg; color: var(--palette-ink); font-size: var(--type-edge); font-weight: var(--weight-black); font-stretch: var(--width-extended); line-height: var(--leading-solid); text-transform: uppercase; }
.travel-links { display: flex; flex-direction: column; margin-top: var(--space-8); border-top: 1px solid var(--palette-ink); }
.travel-links a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 52px; padding-block: var(--space-2); border-bottom: 1px solid var(--palette-ink); text-decoration: none; text-wrap: balance; }

.practical { margin-top: var(--space-24); }
.practical-list { margin-top: var(--space-8); }
.practical summary { position: relative; display: block; min-height: var(--touch-target); padding-block: var(--space-1); padding-right: var(--space-12); list-style: none; cursor: pointer; color: var(--palette-ink); font-size: var(--type-list); font-weight: var(--weight-light); line-height: var(--leading-solid); text-transform: uppercase; text-wrap: balance; transition: font-weight var(--step-duration) ease; }
.practical summary::-webkit-details-marker { display: none; }
.practical summary::before, .practical summary::after { content: ''; position: absolute; right: 0; top: 50%; width: 20px; height: 2px; background: currentColor; transition: rotate var(--step-duration) ease; }
.practical summary::after { rotate: 90deg; }
.practical details[open] summary { font-weight: var(--weight-black); }
.practical details[open] summary::after { rotate: 0deg; }
.practical details p { max-width: 24rem; margin-block: var(--space-3) var(--space-6); }

.skis { width: 150%; max-width: none; height: auto; margin-top: var(--space-16); color: var(--palette-ink); stroke-dasharray: 1 2; }

.closing { display: grid; justify-items: end; gap: var(--space-6); margin-top: var(--space-24); }
.closing-photo { width: 62%; height: auto; }
.contact-message, .contact-links { justify-self: start; }
.contact-links { display: flex; flex-direction: column; }
.contact-links a { display: inline-flex; align-items: center; min-height: var(--touch-target); }

.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); width: min(100% - 2 * var(--space-5), 40rem); margin: var(--space-16) auto 0; padding-block: var(--space-4) var(--space-8); border-top: 1px solid var(--palette-ink); }
.site-footer nav { display: flex; flex-wrap: wrap; 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: 0; border: 0; background: transparent; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: underline; text-underline-offset: .24em; cursor: pointer; }
.site-footer small { font-size: var(--text-small); font-weight: var(--weight-regular); letter-spacing: 0; text-transform: none; }
.toast { position: fixed; left: 50%; bottom: var(--space-6); translate: -50% 0; padding: var(--space-3) var(--space-5); background: var(--palette-ink); color: var(--palette-paper); opacity: 0; pointer-events: none; transition: opacity var(--feedback-duration) ease; }
.toast.visible { opacity: 1; }

@keyframes press { from { font-weight: var(--weight-hairline); font-stretch: var(--width-normal); } }
@keyframes turn { from { transform: perspective(20em) translateX(50%) rotateY(-86deg) translateX(-50%); } to { transform: perspective(20em) translateX(50%) rotateY(0deg) translateX(-50%); } }
@keyframes rise { from { translate: 0 60%; opacity: 0; } }
@keyframes draw { from { stroke-dashoffset: 1; } }

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .opening:not([data-motion="playing"]) text { font-weight: var(--weight-hairline); font-stretch: var(--width-normal); }
  .opening[data-motion="playing"] text { animation: press 1.3s cubic-bezier(.3, 0, .2, 1) both; }
  .opening[data-motion="playing"] .dates text:first-child { animation-delay: .2s; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  @supports (animation-timeline: view()) {
    .weekend h2, .travel h2 { view-timeline: --heading; }
    .weekend h2 text, .travel h2 text { animation: press linear both; animation-timeline: --heading; animation-range: entry 10% cover 40%; }
    .days > div { view-timeline: --day; }
    .day-numeral { animation: press linear both; animation-timeline: --day; animation-range: entry 10% cover 35%; }
    .ways > div { view-timeline: --way; }
    .ways dt { animation: turn linear both; animation-timeline: --way; animation-range: entry 25% cover 32%; }
    .practical summary { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    .skis { view-timeline: --skis; }
    .skis path { animation: draw linear both; animation-timeline: --skis; animation-range: cover 2% cover 20%; }
    .skis g g:nth-child(2) path { animation-range: cover 6% cover 24%; }
    .skis g g:nth-child(3) path { animation-range: cover 9% cover 28%; }
    .skis g g:nth-child(4) path { animation-range: cover 12% cover 32%; }
    .skis g g:nth-child(5) path { animation-range: cover 15% cover 36%; }
    .skis g g:nth-child(6) path { animation-range: cover 18% cover 40%; }
    .skis g g:nth-child(7) path { animation-range: cover 21% cover 44%; }
    .skis g g:nth-child(8) path { animation-range: cover 26% cover 48%; }
  }
}

@media (min-width: 720px) {
  main, .site-footer { width: min(100% - 2 * var(--space-16), 44rem); }
  .opening { padding-top: var(--space-16); }
  .snapshot { width: 72%; margin-left: auto; }
  .skis { width: calc(100% + var(--space-24)); }
  .skis > g { stroke-width: 4.5px; }
  .closing { grid-template-columns: 1fr 1fr; align-items: end; }
  .closing-photo { grid-column: 2; grid-row: 1; width: 100%; }
  .contact-message { grid-column: 1; grid-row: 1; }
}