.day-numeral, .way-title { 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(--track-pen); }
.lane, .start, .finish { position: relative; }
.turn { stroke-width: 2.6; }

.teckningen main { position: relative; }
.skis { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; visibility: hidden; fill: var(--palette-ink); }
.skis.ready { visibility: visible; }

.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(--cover-ink); }
.cover::before { content: ''; position: absolute; inset: 0 0 45%; z-index: -1; background: linear-gradient(var(--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 .lockup { padding: var(--space-6) var(--page-margin) 0; }
.trail { position: relative; max-width: var(--page-width); height: var(--track-start); margin-inline: auto; }
.start { position: absolute; inset: 0 var(--track-lane-centre) 0 calc(50% + .2 * min(100%, 75svh)); }
.start .rails { stroke-width: calc(var(--track-gauge) + var(--track-pen)); stroke-linecap: butt; }
.start .rails-gap { stroke: var(--palette-paper); stroke-width: calc(var(--track-gauge) - var(--track-pen)); stroke-linecap: butt; }

.leg { container-type: inline-size; max-width: var(--page-width); margin-inline: auto; }
.turn { width: calc(100% - 2 * var(--track-lane-centre)); height: auto; margin-inline: var(--track-lane-centre); }
.turn-wide { display: none; }
.leg-body { display: grid; grid-template-columns: var(--track-lane) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--track-gutter); padding-inline-end: var(--page-margin); }
.leg-right .leg-body { grid-template-columns: minmax(0, 1fr) var(--track-lane); padding-inline: var(--page-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(--track-lane-centre))); }
.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(--text-lead); font-weight: var(--weight-bold); line-height: var(--leading-lead); }
.invitation-message { margin-top: var(--space-2); font-size: var(--text-lead); line-height: var(--leading-lead); }
.rsvp-link { display: flex; width: auto; justify-content: space-between; gap: var(--space-4); min-height: var(--space-16); margin-top: var(--space-8); font-size: var(--text-action); text-align: left; text-wrap: balance; }
.rsvp-link::after { content: '→'; font-weight: var(--weight-regular); }
.host-preview { margin-top: var(--space-8); }
.deadline { margin-top: var(--space-4); font-size: var(--text-label); font-weight: var(--weight-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(--page-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(--text-label); font-weight: var(--weight-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(--text-numeral); font-weight: var(--weight-heavy); font-stretch: 125%; line-height: var(--leading-display); letter-spacing: -.02em; }
.day-text { grid-column: 1 / -1; grid-row: 2; margin-top: var(--space-3); }
.day-text > 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(--text-label); font-weight: var(--weight-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(--page-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-2); margin-top: var(--space-8); }
.ways summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); min-height: var(--touch-target); padding-block: var(--space-2); color: var(--palette-ink); font-size: var(--text-way); font-weight: var(--weight-heavy); font-stretch: 125%; line-height: var(--leading-display); text-transform: uppercase; }
.ways summary::after { content: '+'; font-weight: var(--weight-regular); }
.ways details[open] > summary::after { content: '−'; }
.way-text { padding-block: var(--space-2) var(--space-6); }
.way-text > * + * { margin-top: var(--space-3); }
.way-text > * + h3 { margin-top: var(--space-6); }
.way-text > h3 + p { margin-top: var(--space-1); }
.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(--page-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(--text-list); font-weight: var(--weight-hairline); line-height: var(--leading-list); 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(--weight-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(--page-width); margin-inline: auto; padding-bottom: var(--space-12); text-align: center; }
.finish { justify-self: start; width: calc(50% - var(--track-lane-centre)); height: calc(2 * var(--space-24)); margin-left: var(--track-lane-centre); }
.closing-from-right .finish { justify-self: end; margin-left: 0; margin-right: var(--track-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(--page-margin) 0; font-size: var(--text-lead); line-height: var(--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); }


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

@media (min-width: 960px) {
  .turn-wide { stroke-width: 3.2; }
  .leg-body { grid-template-columns: var(--track-lane) minmax(0, var(--page-column)) minmax(0, 1fr); padding-inline-end: 0; }
  .leg-right .leg-body { grid-template-columns: minmax(0, 1fr) minmax(0, var(--page-column)) var(--track-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(--track-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(--page-bleed); }
  .leg-right .plate { grid-column: 1; margin-inline: var(--page-bleed) 0; }
  .plate-skistallet, .plate-torkrummet { width: auto; padding-bottom: 0; }
  .plate-vagen { width: auto; margin-left: var(--page-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 trail-pen {}
@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) {
    .teckningen main { view-timeline: --trail block; view-timeline-inset: 75svh 0; }
    .lane .track, .start .track, .finish .track, .turn path, .ski { animation: trail-pen linear both; animation-timeline: --trail; animation-range: exit-crossing 0% exit-crossing 100%; }
    .plate { view-timeline: --pen block; view-timeline-inset: 0% 25%; }
    .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%; }
  }
}