/* Puijon tornit 3D (/puijo3d/). Uses the site tokens from style.css only. */
/* Kuopio: the sights of the tour, above the Puijo show */
.kt { background: var(--paper); color: var(--slate-900); padding: var(--s-12) 0 var(--s-4); }
.kt-inner { width: min(1320px, 100% - 2 * var(--s-6)); margin: 0 auto; }
.kt-title { font: 300 var(--t-3xl, var(--t-2xl))/1.05 var(--font-serif); letter-spacing: -.01em; margin: 0 0 var(--s-4); text-wrap: balance; }
.kt-title em { font-style: italic; color: var(--highlight-600); }
.kt-lede { font: 400 var(--t-lg)/1.55 var(--font-sans); color: var(--slate-500); margin: 0 0 var(--s-6); max-width: 56ch; text-wrap: pretty; }
.kt-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); gap: var(--s-8) var(--s-12); align-items: start; margin-bottom: var(--s-10); }
.kt-nav { display: grid; gap: var(--s-2); max-width: 420px; }
.kt-nav a { display: flex; align-items: center; gap: var(--s-3); min-height: 52px; padding: var(--s-2) var(--s-4); border: 1px solid var(--slate-200); border-radius: var(--r-sm); font: 500 var(--t-sm)/1.25 var(--font-sans); color: var(--slate-900); text-decoration: none; transition: background .2s ease, border-color .2s ease; }
.kt-map { margin: 0; }
.kt-map-frame { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.kt-map img { display: block; width: 100%; height: auto; }
.kt-map figcaption { font: 400 var(--t-xs)/1.4 var(--font-sans); color: var(--slate-500); margin-top: var(--s-2); }
.kt-pin { position: absolute; display: flex; align-items: center; gap: 6px; transform: translate(-15px, -50%); text-decoration: none; color: var(--slate-900); font: 600 13px/1.2 var(--font-sans); white-space: nowrap; padding: 7px 0; }
.kt-pin-left { flex-direction: row; }
.kt-pin b { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--highlight-600); color: #fff; display: grid; place-items: center; font: 600 15px/1 var(--font-sans); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(15, 26, 44, .35); transition: transform .2s ease, background .2s ease; }
.kt-pin span { background: rgba(255, 255, 255, .9); padding: 3px 7px; border-radius: var(--r-sm); box-shadow: 0 1px 3px rgba(15, 26, 44, .18); }
.kt-pin:hover b { background: var(--highlight-700); transform: scale(1.12); }
.kt-pin:focus-visible { outline: 2px solid var(--highlight-600); outline-offset: 2px; border-radius: var(--r-sm); }
.kt-water { position: absolute; transform: translate(-50%, -50%); font: italic 400 15px/1 var(--font-serif); color: #5d7f9c; letter-spacing: .08em; pointer-events: none; }
.kt-scale { position: absolute; left: 4%; bottom: 3.5%; width: 12.54%; border: solid var(--slate-700); border-width: 0 1px 2px; padding-bottom: 3px; text-align: center; font: 500 11px/1 var(--font-sans); color: var(--slate-700); }
.kt-nav a:hover { background: var(--highlight-100); border-color: var(--highlight-300); }
.kt-nav a:focus-visible, .kt-link:focus-visible, .kt-next:focus-visible { outline: 2px solid var(--highlight-600); outline-offset: 2px; }
.kt-nav span { font: 400 var(--t-lg)/1 var(--font-serif); color: var(--highlight-600); }
.kt-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-8); }
.kt-item { display: flex; flex-direction: column; padding-top: var(--s-5); border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.kt-num { font: 600 var(--t-xs)/1.2 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--slate-500); margin: 0 0 var(--s-2); }
.kt-item h2 { font: 400 var(--t-xl)/1.2 var(--font-serif); margin: 0 0 var(--s-3); }
.kt-item > p { font: 400 var(--t-base)/1.6 var(--font-sans); margin: 0 0 var(--s-4); text-wrap: pretty; }
.kt-video { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin: auto 0 var(--s-4); }
.kt-video iframe { flex: 1 0 100%; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-sm); background: var(--slate-900); }
.kt .kt-play { font: 500 var(--t-sm)/1 var(--font-sans); color: #fff; background: var(--highlight-600); border: 1px solid var(--highlight-600); border-radius: var(--r-sm); min-height: 44px; padding: 0 var(--s-4); display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; transition: background .2s ease, transform .2s ease; }
.kt .kt-play:hover { background: var(--highlight-700); }
.kt .kt-play:active { transform: translateY(1px); }
.kt .kt-play:focus-visible { outline: 2px solid var(--highlight-600); outline-offset: 2px; }
.kt-play svg { width: 16px; height: 16px; fill: currentColor; }
.kt-link, .kt-next { font: 500 var(--t-sm)/1.4 var(--font-sans); color: var(--highlight-700); text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
.kt-credit { flex: 1 0 100%; font: 400 var(--t-xs)/1.4 var(--font-sans); color: var(--slate-500); margin: 0; }
.kt-next { color: var(--slate-500); }
.kt-sources { font: 400 var(--t-sm)/1.6 var(--font-sans); color: var(--slate-500); margin: var(--s-8) 0 0; max-width: 100ch; }
.kt-sources a { color: inherit; text-underline-offset: 2px; }
.pj { scroll-margin-top: 80px; }
@media (max-width: 900px) {
  .kt { padding-top: var(--s-8); }
  .kt-inner { width: calc(100% - 2 * var(--s-4)); }
  .kt-head { grid-template-columns: 1fr; gap: var(--s-6); margin-bottom: var(--s-8); }
  .kt-nav { max-width: none; }
  .kt-pin { font-size: 12px; }
  .kt-list { grid-template-columns: 1fr; gap: var(--s-6); }
}

.pj { background: var(--paper); color: var(--slate-900); padding: var(--s-12) 0 var(--s-16); }
.pj-layout { width: min(1320px, 100% - 2 * var(--s-6)); margin: 0 auto; display: grid; grid-template-columns: minmax(280px, 34fr) 66fr; gap: var(--s-8) var(--s-12); align-items: start; }
.pj-overline { font: 600 var(--t-xs)/1.2 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--slate-500); margin: 0 0 var(--s-3); }
.pj-title { font: 300 var(--t-2xl)/1.05 var(--font-serif); letter-spacing: -.01em; margin: 0 0 var(--s-4); text-wrap: balance; }
.pj-title em { font-style: italic; color: var(--highlight-600); }
.pj-lede { font: 400 var(--t-base)/1.6 var(--font-sans); color: var(--slate-500); margin: 0 0 var(--s-5); max-width: 44ch; text-wrap: pretty; }
.pj-year { display: none; font: 300 var(--t-2xl)/1 var(--font-serif); font-variant-numeric: tabular-nums; margin: 0 0 var(--s-2); }
.pj-js .pj-year { display: block; }
.pj-chapters { list-style: none; margin: 0; padding: 0; }
.pj-chapter { padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.pj-js .pj-chapter { border-top: 0; padding: 0; min-height: 19.5em; }
.pj-chapter h2 { font: 400 var(--t-xl)/1.2 var(--font-serif); margin: 0 0 var(--s-3); }
.pj-chapter p { font: 400 var(--t-base)/1.6 var(--font-sans); margin: 0; max-width: 46ch; text-wrap: pretty; }
.pj-chapter time { display: block; font: 600 var(--t-xs)/1.2 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--slate-500); margin-bottom: var(--s-2); }
.pj-photo { margin: var(--s-4) 0 0; max-width: 300px; }
.pj-photo img { display: block; width: 100%; height: auto; max-height: 132px; object-fit: cover; object-position: 50% 30%; border-radius: var(--r-sm); border: 1px solid var(--line); box-shadow: var(--shadow-sm); filter: sepia(.12); }
.pj-photo figcaption { font: 400 var(--t-xs)/1.4 var(--font-sans); color: var(--slate-500); margin-top: var(--s-2); }
.pj-nogl .pj-photo img, .pj:not(.pj-js) .pj-photo img { max-height: none; }
.pj-step { display: none; gap: var(--s-2); margin-top: var(--s-6); }
.pj-js .pj-step { display: flex; }

.pj-stage-wrap { position: relative; }
.pj-stage { position: relative; height: clamp(480px, calc(100vh - 300px), 780px); }
.pj-stage canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; border-radius: var(--r-lg); background: #c3d6e6; }
.pj-stage canvas.is-dragging { cursor: grabbing; }
.pj-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pj-leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pj-leaders path { fill: none; stroke: var(--slate-700); stroke-width: 1; }
.pj-leaders circle { fill: var(--slate-900); stroke: var(--paper); stroke-width: 1; }
.pj-label { position: absolute; left: 0; top: 0; white-space: nowrap; color: var(--slate-900); line-height: 1.2; text-shadow: 0 0 2px var(--paper), 0 0 4px var(--paper), 0 0 6px var(--paper), 0 0 10px var(--paper), 0 0 14px var(--paper); }
.pj-label-name { display: block; font-family: var(--font-serif); font-weight: 400; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: -.01em; }
.pj-label-sub { display: block; font: 500 12.5px/1.3 var(--font-sans); color: var(--slate-700); margin-top: 2px; font-variant-numeric: tabular-nums; }
.pj .pj-start { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; gap: var(--s-4); min-height: 72px; padding: var(--s-4) var(--s-8) var(--s-4) var(--s-6); background: var(--highlight-600); border-color: var(--highlight-600); color: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); text-align: left; font-size: var(--t-lg); font-family: var(--font-serif); font-weight: 400; }
.pj .pj-start:hover { background: var(--highlight-700); border-color: var(--highlight-700); }
.pj .pj-start:active { transform: translate(-50%, calc(-50% + 1px)); }
.pj .pj-start svg { width: 30px; height: 30px; fill: currentColor; stroke: none; }
.pj .pj-start small { display: block; font: 400 var(--t-sm)/1.3 var(--font-sans); opacity: .86; margin-top: 4px; }
.pj-ready.pj-idle .pj-start { display: inline-flex; }
.pj-ready.pj-idle .pj-stage canvas { filter: saturate(.9) brightness(.94); }
.pj-status { position: absolute; left: var(--s-4); bottom: var(--s-4); margin: 0; font: 400 var(--t-sm)/1.4 var(--font-sans); color: var(--slate-500); }
.pj-status:empty { display: none; }
.pj-view { position: absolute; right: var(--s-3); bottom: var(--s-2); display: none; gap: var(--s-1); }
.pj-ready .pj-view { display: flex; }
.pj-nogl .pj-stage-wrap, .pj-nogl .pj-rail, .pj-nogl .pj-step, .pj-nogl .pj-year { display: none; }
.pj-nogl .pj-chapter[hidden] { display: block; }
.pj-nogl .pj-chapter { min-height: 0; padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.pj-nogl .pj-layout { grid-template-columns: minmax(0, 60ch); }

.pj button { font: 500 var(--t-sm)/1 var(--font-sans); color: var(--slate-900); background: var(--paper); border: 1px solid var(--slate-200); border-radius: var(--r-sm); min-height: 44px; min-width: 44px; padding: 0 var(--s-4); display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.pj button:hover { background: var(--highlight-100); border-color: var(--highlight-300); }
.pj button:active { transform: translateY(1px); }
.pj button:focus-visible, .pj-range:focus-visible { outline: 2px solid var(--highlight-600); outline-offset: 2px; }
.pj button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pj button[data-pj="play"] { background: var(--highlight-600); border-color: var(--highlight-600); color: #fff; }
.pj button[data-pj="play"]:hover { background: var(--highlight-700); border-color: var(--highlight-700); }
.pj button[data-pj="play"] .pj-i-pause, .pj button[data-pj="play"][aria-pressed="true"] .pj-i-play { display: none; }
.pj button[data-pj="play"][aria-pressed="true"] .pj-i-pause { display: block; }
.pj button[data-pj="sound"] .pj-i-off, .pj button[data-pj="sound"][aria-pressed="true"] .pj-i-on { display: block; }
.pj button[data-pj="sound"] .pj-i-on, .pj button[data-pj="sound"][aria-pressed="true"] .pj-i-off { display: none; }
.pj button[data-pj="sound"][aria-pressed="false"] { color: var(--slate-500); }
.pj-view button { border-color: transparent; background: color-mix(in srgb, var(--paper) 82%, transparent); }

.pj-rail { display: none; grid-column: 1 / -1; grid-template-columns: auto auto 1fr; gap: var(--s-3) var(--s-5); align-items: center; padding-top: var(--s-5); border-top: 1px solid var(--line); }
.pj-js .pj-rail { display: grid; }
.pj-range { width: 100%; height: 44px; margin: 0; accent-color: var(--highlight-600); cursor: pointer; }
.pj-ticks { grid-column: 3; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-1); }
.pj .pj-tick { padding: 0; min-width: 0; border-color: transparent; background: none; color: var(--slate-500); font-variant-numeric: tabular-nums; font-size: var(--t-xs); }
.pj .pj-tick[aria-current="step"] { color: var(--highlight-700); border-color: var(--highlight-300); background: var(--highlight-100); font-weight: 600; }
.pj-notes { width: min(1320px, 100% - 2 * var(--s-6)); margin: var(--s-10) auto 0; font: 400 var(--t-sm)/1.6 var(--font-sans); color: var(--slate-500); }
.pj-notes p { margin: 0 0 var(--s-2); max-width: 90ch; }
.pj-notes a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pj-notes a:hover { color: var(--highlight-700); }

@media (max-width: 900px) {
  .pj { padding-top: var(--s-8); }
  .pj-layout { grid-template-columns: 1fr; gap: var(--s-5); width: calc(100% - 2 * var(--s-4)); }
  .pj-lede { margin-bottom: var(--s-2); }
  .pj-js .pj-text { display: contents; }
  .pj-js .pj-head { order: 0; }
  .pj-js .pj-stage-wrap { order: 1; }
  .pj-js .pj-rail { order: 2; grid-template-columns: 1fr 1fr; border-top: 0; padding-top: 0; }
  .pj-range { grid-column: 1 / -1; }
  .pj-stage-wrap { margin: 0 calc(var(--s-3) * -1); }
  .pj-js .pj-story { order: 3; }
  .pj-stage { height: min(60vh, 120vw, 520px); min-height: 320px; }
  .pj-label-name { font-size: 17px; }
  .pj-ticks { grid-column: 1 / -1; grid-template-columns: repeat(6, 1fr); }
  .pj-js .pj-chapter { min-height: 0; }
  .pj-chapter p { font-size: 1rem; }
  .pj-notes { width: calc(100% - 2 * var(--s-4)); }
}
@media (prefers-reduced-motion: reduce) {
  .pj *, .pj *::before, .pj *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}