html { scroll-padding-top: var(--header); }
.site-header { background: #fff; }
.app-section { --app-pad: 32px; --phone-max-height: calc(100svh - var(--header) - var(--app-pad) * 2 - 54px); padding-block: var(--app-pad); scroll-margin-top: 0; }
.app-section:focus { outline: none; }
.app-layout { gap: 48px; }
.phone-device { width: min(360px, calc((var(--phone-max-height) - 14px) * .459954 + 14px)); user-select: none; }
.phone-device input,.phone-description { user-select: text; }
.phone-stage { gap: 18px; }
.main-nav a[aria-current=location]::after { content: ''; position: absolute; bottom: 3px; height: 2px; left: 0; right: 0; background: var(--accent); }
.journey-row { --journey-width: 200px; --event-card-width: var(--journey-width); gap: 14px; }
.journey-row .event-card { flex-basis: var(--journey-width); width: var(--journey-width); }
.return-anchor { position: relative; }
.return-marker { position: absolute; left: 0; bottom: -4px; width: 48px; height: 2px; background: var(--accent); transform-origin: left; pointer-events: none; }
.card-copy .return-marker { bottom: 0; }

@view-transition { navigation: auto; }
html[data-journey]::view-transition-group(*) { animation-duration: 420ms; animation-timing-function: var(--motion-ease); }
html[data-journey]::view-transition-group(klubb-header) { z-index: 5; animation: none; }
html[data-journey]::view-transition-new(klubb-header),html[data-journey]::view-transition-old(klubb-header) { animation: none; mix-blend-mode: normal; }
html[data-journey]::view-transition-old(klubb-intro) { animation: journey-out 200ms ease both; }
html[data-journey]::view-transition-new(klubb-search) { animation: journey-in 320ms var(--motion-ease) both; }
html[data-journey]::view-transition-old(klubb-search) { animation: journey-out 180ms ease both; }
html[data-journey]::view-transition-new(klubb-intro) { animation: journey-in 320ms var(--motion-ease) both; }
@keyframes journey-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes journey-out { to { opacity: 0; transform: translateY(-10px); } }
@media (min-width:1700px) { .journey-row { --journey-width: 225px; } }
@media (min-width:801px) and (max-height:760px) {
  .app-section { --app-pad: 16px; }
  .app-layout { align-items: start; }
  .app-copy h2 { font-size: 34px; margin-block: 12px; }
  .app-copy > p { font-size: 14px; line-height: 1.6; }
  .app-chapters { margin: 16px 0 20px; }
  .app-chapters button { min-height: 44px; }
}
@media (max-width:800px) {
  .app-layout { gap: 36px; }
  .phone-stage { grid-row: 1; }
  .app-copy { grid-row: 2; }
  .journey-row { --journey-width: 170px; }
}
@media (max-width:480px) { .journey-row { --journey-width: 148px; gap: 10px; } }
@media (prefers-reduced-motion:reduce) {
  @view-transition { navigation: none; }
  html[data-journey]::view-transition-group(*),html[data-journey]::view-transition-new(*),html[data-journey]::view-transition-old(*) { animation: none !important; }
}