* { box-sizing: border-box; }
html { -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(--sheet-face); font-size: var(--sheet-text); font-weight: var(--sheet-regular); line-height: var(--sheet-leading-text); font-synthesis: none; -webkit-font-smoothing: antialiased; }
::selection { background: var(--sheet-selection); }
[hidden] { display: none !important; }
p, h1, h2, dl, dd, figure { margin: 0; }
img { max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .24em; }
:focus-visible { outline: 2px solid var(--palette-text); outline-offset: 3px; }
.preserve-lines { white-space: pre-line; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.page { overflow-x: clip; }
.skip-link { position: fixed; top: -100px; left: var(--space-4); z-index: 10; padding: var(--space-3); background: var(--palette-text); color: var(--palette-paper); }
.skip-link:focus { top: var(--space-4); }
.toast { position: fixed; left: 50%; bottom: var(--space-6); z-index: 10; max-width: calc(100% - 2 * var(--sheet-margin)); padding: var(--space-3) var(--space-4); background: var(--palette-text); color: var(--palette-paper); opacity: 0; transform: translateX(-50%); pointer-events: none; transition: opacity var(--step-duration); }
.toast.visible { opacity: 1; }

.cover .display, h2, .day-numeral, .ways dt, .rsvp-link::before { mask-image: url(teckningen/grain.png); mask-size: 192px; }

.plate-art, .turn, .track { display: block; overflow: visible; color: var(--palette-ink); }
.track { position: absolute; inset: 0; width: 100%; height: 100%; stroke-width: var(--sheet-pen); }
.lane, .start, .finish { position: relative; }
.turn { stroke-width: 1.8; }

.cover { position: relative; isolation: isolate; display: flex; flex-direction: column; width: min(100%, 75svh); min-height: clamp(calc(1.25 * min(100svw, 75svh)), 100svh, calc(2.5 * min(100svw, 75svh))); margin-inline: auto; background: var(--sky); color: var(--sheet-cover-ink); }
.cover::before { content: ''; position: absolute; inset: 0 0 45%; z-index: -1; background: linear-gradient(var(--sheet-cover-scrim), transparent); }
.cover-photo { position: absolute; inset: 0; z-index: -2; width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: 50% 100%; }
.cover-type { padding: var(--space-6) var(--sheet-margin) 0; }
.cover-place { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-size: var(--sheet-label); font-weight: var(--sheet-bold); letter-spacing: .2em; text-transform: uppercase; }
.cover h1 { margin-top: var(--space-4); }
.display { display: block; width: 100%; height: auto; overflow: visible; fill: currentColor; }
.display text { font-family: var(--sheet-face); font-kerning: normal; font-feature-settings: 'case'; }
/* theme-exception: The gap inside the lock-up scales with the fitted type, as a share of the measure. */
.cover-dates { margin-top: 3.5%; }
.trail { position: relative; max-width: var(--sheet-width); height: var(--sheet-start); margin-inline: auto; }
.pennant { width: 2.75em; height: auto; flex: none; overflow: visible; }
.pennant-blue { fill: var(--jamtland-blue); }
.pennant-white { fill: var(--jamtland-white); }
.pennant-green { fill: var(--jamtland-green); }
.pennant-edge, .pennant-pole { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; }
.pennant-cloth { transform-origin: 3px 12px; }
.start { position: absolute; inset: 0 var(--sheet-lane-centre) calc(-1 * var(--space-4)) calc(50% + .2 * min(100%, 75svh)); }

.leg { container-type: inline-size; max-width: var(--sheet-width); margin-inline: auto; }
.turn { width: calc(100% - 2 * var(--sheet-lane-centre)); height: auto; margin-inline: var(--sheet-lane-centre); }
.turn-wide { display: none; }
.leg-body { display: grid; grid-template-columns: var(--sheet-lane) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--sheet-gutter); padding-inline-end: var(--sheet-margin); }
.leg-right .leg-body { grid-template-columns: minmax(0, 1fr) var(--sheet-lane); padding-inline: var(--sheet-margin) 0; }
.lane { grid-column: 1; grid-row: 1 / span 2; justify-self: center; width: 20px; }
.leg-right .lane { grid-column: 2; }
.leg-text { grid-column: 2; grid-row: 1; padding-block: var(--space-8) var(--space-12); }
.leg-right .leg-text { grid-column: 1; }
.leg-text > h2:first-child { margin-top: calc(-.2 * (100cqi - 2 * var(--sheet-lane-centre))); }
h2 { color: var(--palette-ink); font-size: var(--sheet-headline); font-weight: var(--sheet-heavy); font-stretch: 125%; line-height: var(--sheet-leading-display); letter-spacing: -.01em; text-transform: uppercase; overflow-wrap: break-word; }
.leg-left h2 { text-align: right; }
.plate { grid-column: 2; grid-row: 2; }
.leg-right .plate { grid-column: 1; }
.plate-art { width: 100%; height: auto; }

.invitation-greeting { font-size: var(--sheet-lead); font-weight: var(--sheet-bold); line-height: var(--sheet-leading-lead); }
.invitation-message { margin-top: var(--space-2); font-size: var(--sheet-lead); line-height: var(--sheet-leading-lead); }
.rsvp-link { display: flex; text-wrap: balance; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--space-16); margin-top: var(--space-8); padding-inline: var(--space-5); position: relative; isolation: isolate; color: var(--palette-paper); font-size: var(--sheet-action); font-weight: var(--sheet-heavy); font-stretch: 125%; line-height: var(--leading-heading); letter-spacing: .02em; text-transform: uppercase; text-decoration: none; transition: transform var(--feedback-duration); }
.rsvp-link::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--palette-ink); transition: background-color var(--feedback-duration); }
.rsvp-link::after { content: '→'; font-weight: var(--sheet-regular); }
.rsvp-link:hover::before { background: var(--sheet-ink-pressed); }
.rsvp-link:active { transform: scale(var(--pressed-scale)); }
.host-preview { margin-top: var(--space-8); }
.deadline { margin-top: var(--space-4); font-size: var(--sheet-label); font-weight: var(--sheet-bold); letter-spacing: .16em; text-transform: uppercase; }
.announcement { margin-top: var(--space-8); padding-block: var(--space-4); border-block: var(--rule) solid var(--palette-ink); }
.plate-fjallet { overflow: clip; margin-inline-start: calc(-1 * var(--sheet-margin)); padding-bottom: var(--space-12); }
.plate-fjallet .plate-art { width: 270%; margin-left: -105%; stroke-width: 4; }

.days { display: grid; gap: var(--space-8); margin-top: var(--space-8); }
.days > div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); }
.days dt { grid-column: 2; grid-row: 1; align-self: end; padding-bottom: var(--space-2); font-size: var(--sheet-label); font-weight: var(--sheet-bold); letter-spacing: .2em; text-transform: uppercase; }
.days dd { grid-column: 1 / -1; grid-row: 1 / span 2; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
.day-numeral { grid-column: 1; grid-row: 1; align-self: end; color: var(--palette-ink); font-size: var(--sheet-numeral); font-weight: var(--sheet-heavy); font-stretch: 125%; line-height: var(--sheet-leading-display); letter-spacing: -.02em; }
.day-text { grid-column: 1 / -1; grid-row: 2; margin-top: var(--space-3); }
.day-text > p + p, .ways dd > p + p { margin-top: var(--space-3); }
.calendar-link, .travel-links a { display: block; width: fit-content; min-height: var(--touch-target); padding-block: var(--space-3); font-size: var(--sheet-label); font-weight: var(--sheet-bold); letter-spacing: .14em; text-transform: uppercase; }
.calendar-link { margin-top: var(--space-8); }
.calendar-link::after, .travel-links a::after { content: '\00a0→'; letter-spacing: 0; }
.plate-skistallet { margin-inline-end: calc(-1 * var(--sheet-margin)); padding-bottom: var(--space-12); }
.plate-skistallet .plate-art { stroke-width: 5.4; }

.travel-intro { margin-top: var(--space-6); }
.ways { display: grid; gap: var(--space-6); margin-top: var(--space-8); }
.ways dt { color: var(--palette-ink); font-size: var(--sheet-way); font-weight: var(--sheet-heavy); font-stretch: 125%; line-height: var(--sheet-leading-display); text-transform: uppercase; }
.ways dd { margin-top: var(--space-2); }
.travel-links { display: flex; flex-direction: column; align-items: flex-start; margin-top: var(--space-6); }
.plate-vagen { width: 135%; margin-left: calc(-35% - var(--sheet-margin)); padding-bottom: var(--space-8); }
.plate-vagen .plate-art { stroke-width: 4.6; }

.practical-list { margin-top: var(--space-6); text-align: right; }
.practical-list summary { display: block; padding-block: var(--space-2); cursor: pointer; list-style: none; font-size: var(--sheet-list); font-weight: var(--sheet-hairline); line-height: var(--leading-display); text-transform: uppercase; }
.practical-list summary::-webkit-details-marker { display: none; }
.practical-list summary::before { content: '+'; display: inline-block; width: 1em; color: var(--palette-ink); font-weight: var(--sheet-regular); text-align: left; }
.practical-list details[open] > summary::before { content: '−'; }
.practical-list details > p { padding-block: var(--space-1) var(--space-4); }
.plate-torkrummet { width: 150%; padding-bottom: var(--space-12); }
.plate-torkrummet .plate-art { transform: scaleX(-1); stroke-width: 6; }

.closing { display: grid; justify-items: center; max-width: var(--sheet-width); margin-inline: auto; padding-bottom: var(--space-12); text-align: center; }
.finish { justify-self: start; width: calc(50% - var(--sheet-lane-centre)); height: var(--space-24); margin-left: var(--sheet-lane-centre); }
.closing-from-right .finish { justify-self: end; margin-left: 0; margin-right: var(--sheet-lane-centre); transform: scaleX(-1); }
.closing-photo { display: block; width: min(72%, 26rem); height: auto; aspect-ratio: 4 / 5; object-fit: cover; margin-top: var(--space-2); }
.contact-message { max-width: 22rem; margin: var(--space-8) var(--sheet-margin) 0; font-size: var(--sheet-lead); line-height: var(--sheet-leading-lead); }
.contact-links { display: flex; flex-direction: column; align-items: center; margin-top: var(--space-3); }
.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-3); max-width: var(--sheet-width); margin-inline: auto; padding: var(--space-6) var(--sheet-margin) var(--space-8); border-top: 1px solid var(--sheet-hairline-rule); font-size: var(--sheet-label); }
.site-footer nav { display: flex; flex-wrap: wrap; align-items: 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; }
.site-footer small { width: 100%; font-size: var(--sheet-label); }
.link-button { min-height: var(--touch-target); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: .24em; cursor: pointer; }

@media (min-width: 600px) {
  .turn-narrow { display: none; }
  .turn-wide { display: block; stroke-width: 2.6; }
}

@media (min-width: 960px) {
  .turn-wide { stroke-width: 2.2; }
  .leg-body { grid-template-columns: var(--sheet-lane) minmax(0, var(--sheet-column)) minmax(0, 1fr); padding-inline-end: 0; }
  .leg-right .leg-body { grid-template-columns: minmax(0, 1fr) minmax(0, var(--sheet-column)) var(--sheet-lane); padding-inline: 0; }
  .leg-right .leg-text { grid-column: 2; }
  .leg-right .lane { grid-column: 3; }
  .leg-text > h2:first-child { margin-top: calc(-.09 * (100cqi - 2 * var(--sheet-lane-centre))); }
  .plate, .leg-right .plate { grid-row: 1 / span 2; align-self: start; }
  .plate { grid-column: 3; margin-top: -12%; margin-inline-end: var(--sheet-bleed); }
  .leg-right .plate { grid-column: 1; margin-inline: var(--sheet-bleed) 0; }
  .plate-skistallet, .plate-torkrummet { width: auto; padding-bottom: 0; }
  .plate-vagen { width: auto; margin-left: var(--sheet-bleed); }
  .plate-fjallet .plate-art { width: 100%; margin-left: 0; stroke-width: 3.2; }
  .plate-skistallet .plate-art { stroke-width: 4; }
  .plate-vagen .plate-art { stroke-width: 3.6; }
  .plate-torkrummet .plate-art { stroke-width: 3.6; }
}

@keyframes sheet-pen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sheet-pen-window { from { stroke-dashoffset: .62; } 90% { stroke-dashoffset: .17; } to { stroke-dashoffset: 0; } }
@keyframes sheet-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cover-settle { from { scale: 1.06; } }
@keyframes sheet-flutter { from { transform: skewY(-2deg) scaleX(.97); } to { transform: skewY(2.5deg) scaleX(1); } }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .cover-photo { animation: cover-settle 2.4s cubic-bezier(.33, 1, .68, 1) both; }
  .pennant-cloth { animation: sheet-flutter 2.4s ease-in-out infinite alternate; }
}
@supports (animation-timeline: view()) {
  @media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .lane .track, .start .track, .turn, .plate, .finish .track { view-timeline: --pen block; view-timeline-inset: 0% 25%; }
    .lane .track, .start .track, .finish .track { animation: sheet-wipe linear both; animation-timeline: --pen; animation-range: entry 0% entry 100%; animation-range: entry-crossing 0% entry-crossing 100%; }
    .turn path, .plate-art path { animation: sheet-pen linear both; animation-timeline: --pen; animation-range: entry 0% entry 100%; animation-range: entry-crossing 0% entry-crossing 100%; }
  }
}