/* «Zwei Wege, ein Weg» – split-screen design of the INMORA personal pages (docs/29). */
.scp-paths { --ground-r: #efe6dc; --split: 0.5; --k: 0; --fill: 0; --band: 17.5vw; position: relative; }

/* Fixed grounds split at --split, the line on top. */
.pa-ground { position: fixed; top: 0; bottom: 0; z-index: 0; }
.pa-ground--l { left: 0; width: calc(var(--split) * 100%); background: var(--sc-canvas); }
.pa-ground--r { right: 0; left: calc(var(--split) * 100%); background: var(--ground-r); }
.pa-line { position: fixed; top: 0; bottom: 0; left: calc(var(--split) * 100%); width: 1px; z-index: 40; background: color-mix(in srgb, var(--sc-ink) 22%, transparent); pointer-events: none; }
.pa-fill { position: absolute; left: -1px; top: 0; width: 3px; height: 100%; background: var(--sc-accent); transform-origin: top; transform: scaleY(var(--fill)); }
.pa-tag { position: absolute; top: 5.2rem; white-space: nowrap; font-family: var(--sc-mono); font-size: var(--sc-xs); text-transform: uppercase; letter-spacing: 0.08em; padding: 0.25rem 0.7rem; border-radius: 999px; opacity: calc(1 - var(--k) * 2); }
.pa-tag--l { right: 0.8rem; background: var(--sc-canvas); color: var(--sc-ink); box-shadow: var(--sc-e1); }
.pa-tag--r { left: 0.8rem; background: var(--sc-accent); color: var(--sc-accent-ink); }
.pa-notch { position: absolute; left: 0; display: flex; align-items: center; gap: 0.45rem; white-space: nowrap; font-family: var(--sc-mono); font-size: var(--sc-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--sc-ink-soft); transform: translate(calc(-100% + 4.5px), -50%); transition: transform 420ms var(--sc-ease), color 240ms; opacity: calc(1 - var(--k) * 2); }
.pa-notch i { order: 2; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--sc-canvas); border: 1.5px solid var(--sc-ink-soft); }
.pa-notch.is-over { flex-direction: row-reverse; transform: translate(-4.5px, -50%); color: var(--sc-accent); }
.pa-notch.is-over i { background: var(--sc-accent); border-color: var(--sc-accent); }
.pa-object { position: fixed; z-index: 30; left: 0; top: 0; width: min(13vw, 220px); pointer-events: none; filter: drop-shadow(0 18px 18px hsl(var(--sc-shadow) / 0.22)) drop-shadow(0 4px 6px hsl(var(--sc-shadow) / 0.2)); opacity: 0; will-change: transform, opacity; }
.pa-track { display: none; }

.scp-paths main,
.scp-paths .sc-footer { position: relative; z-index: 10; }
.pa-split { display: grid; grid-template-columns: 50vw 1fr; }
.pa-half { padding-inline: var(--sc-gutter) calc(var(--band) * 0.5 + 1rem); }
.pa-half + .pa-half { padding-inline: calc(var(--band) * 0.5 + 1rem) var(--sc-gutter); }
.pa-half h2 { font-size: var(--sc-xl); margin: 0.3rem 0 1.2rem; }
.pa-rows { margin: 0; border-top: 2px solid var(--sc-ink); }
.pa-rows > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid color-mix(in srgb, var(--sc-ink) 14%, transparent); }
.pa-rows dd { margin: 0; }
.pa-traits { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-family: var(--sc-display); font-size: var(--sc-lg); }
.pa-soft { color: var(--sc-ink-soft); }
.pa-spacer { height: 40svh; }

/* 1 Hero: two portrait plates, the title split over the line. */
.pa-plate { position: absolute; top: 0; height: 100%; width: 50vw; overflow: hidden; }
.pa-plate--l { left: 0; }
.pa-plate--r { left: 50vw; }
.pa-plate img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(calc(var(--sc-p, 0) * -1.5vw + var(--mx, 0) * -6px), calc(var(--my, 0) * -4px), 0) scale(calc(1.06 + var(--sc-p, 0) * 0.06)); }
.pa-plate--r img { transform: translate3d(calc(var(--sc-p, 0) * 1.5vw + var(--mx, 0) * -6px), calc(var(--my, 0) * -4px), 0) scale(calc(1.06 + var(--sc-p, 0) * 0.06)); }
.pa-veil { position: absolute; left: 0; bottom: 0; width: 50%; height: 55%; background: linear-gradient(transparent, color-mix(in srgb, var(--sc-canvas) 92%, transparent)); pointer-events: none; }
.pa-title { position: absolute; inset: auto 0 34svh 0; display: grid; grid-template-columns: 1fr 1fr; font-weight: 800; font-size: clamp(3.2rem, 1rem + 5.4vw, 7rem); letter-spacing: -0.05em; line-height: 0.92; transform: translateY(calc(var(--sc-p, 0) * -5svh)); pointer-events: none; }
.pa-title-l { justify-self: end; padding-right: 1.2rem; color: var(--sc-ink); text-shadow: 0 2px 30px color-mix(in srgb, var(--sc-canvas) 70%, transparent); }
.pa-title-r { padding-left: 1.2rem; color: #fff; text-shadow: 0 2px 30px rgb(0 0 0 / 0.25); }
.pa-title-r em { color: inherit; }
.pa-hero-sub { position: absolute; left: var(--sc-gutter); bottom: 9svh; width: min(36ch, 40vw); color: var(--sc-ink); }
.pa-badge { position: absolute; right: var(--sc-gutter); bottom: 9svh; background: var(--sc-surface); color: var(--sc-ink); font-family: var(--sc-mono); font-size: var(--sc-xs); text-transform: uppercase; letter-spacing: 0.08em; padding: 0.5rem 0.9rem; border-radius: 999px; box-shadow: var(--sc-e1); }

/* 4 Guests: the RSVP box ticks itself, then the guests light up. */
.pa-guests-stage { align-content: center; }
.pa-form { background: var(--sc-surface); border-radius: var(--sc-r2); box-shadow: var(--sc-e3); padding: 1.4rem; display: grid; gap: 1rem; max-width: 26rem; }
.pa-form label { display: flex; align-items: center; gap: 0.7rem; font-weight: 600; }
.pa-form input { position: absolute; opacity: 0; pointer-events: none; }
.pa-tick { width: 1.4rem; height: 1.4rem; border-radius: 6px; border: 1.5px solid var(--sc-ink); display: grid; place-items: center; }
.pa-tick::after { content: "✓"; color: var(--sc-accent-ink); font-size: 0.9rem; transform: scale(0.4); opacity: 0; transition: transform 240ms var(--sc-ease), opacity 160ms; }
.pa-form input:checked + .pa-tick { background: var(--sc-accent); border-color: var(--sc-accent); }
.pa-form input:checked + .pa-tick::after { transform: scale(1); opacity: 1; }
.pa-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pa-chips span { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: color-mix(in srgb, var(--sc-ink) 12%, transparent); transition: background 240ms; }
.pa-chips span.is-on { background: var(--sc-accent); }

/* 5 Programme. */
.pa-program { list-style: none; margin: 0; display: grid; border-top: 2px solid var(--sc-ink); }
.pa-program li { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid color-mix(in srgb, var(--sc-ink) 14%, transparent); }
.pa-program small { color: var(--sc-ink-soft); }

/* 6 Calm: one sentence over the line. */
.pa-calm { padding: 26svh 0 24svh; font-family: var(--sc-display); font-size: var(--sc-3xl); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.pa-calm-l { text-align: right; padding-right: 1.4rem; }
.pa-calm-r { padding-left: 1.4rem; color: var(--sc-accent); }

/* 7 Finale: the line sweeps to the left edge, «together» fills the page. */
.pa-finale-stage { background: transparent; }
.pa-together { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 0 calc(var(--split) * 100%)); transform: scale(calc(1.08 - var(--k) * 0.08)); }
.pa-together--empty { background: linear-gradient(135deg, var(--sc-accent), color-mix(in srgb, var(--sc-accent) 40%, var(--sc-ink))); }
.pa-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--sc-ink) 70%, transparent), transparent 70%); -webkit-mask: linear-gradient(90deg, #000 30%, transparent 75%); mask: linear-gradient(90deg, #000 30%, transparent 75%); opacity: var(--k); }
.pa-left-word { position: absolute; left: var(--sc-gutter); top: 45svh; width: calc(var(--split) * 100% - var(--sc-gutter) * 2); font-family: var(--sc-display); font-size: var(--sc-xl); opacity: calc(1 - var(--k) * 2.4); }
.pa-close { position: absolute; left: calc(var(--split) * 100% + var(--sc-gutter)); top: 34svh; max-width: 34rem; color: #fff; }
.pa-close h2 { font-size: clamp(3rem, 1rem + 5vw, 6.4rem); font-weight: 800; letter-spacing: -0.05em; }
.pa-close .sc-pill--glass { background: #fff; color: var(--sc-ink); }

@media (max-width: 900px) {
  /* «The line lies down»: no grounds, line or flying objects; a fixed track under the monogram. */
  .pa-ground, .pa-line, .scp .pa-object { display: none; }
  .pa-track { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem; position: fixed; z-index: 55; top: 3.9rem; left: var(--sc-gutter); right: var(--sc-gutter); padding: 0.35rem 0.8rem; border-radius: 999px; background: color-mix(in srgb, var(--sc-surface) 80%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--sc-e1); font-family: var(--sc-mono); font-size: var(--sc-xs); text-transform: uppercase; transform: translateY(calc(var(--k) * -8rem)); }
  .pa-track span:last-child { color: var(--sc-accent); }
  .pa-track-bar { height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--sc-ink) 12%, transparent); overflow: hidden; }
  .pa-track-bar i { display: block; height: 100%; background: var(--sc-accent); transform-origin: left; transform: scaleX(var(--fill)); }
  .pa-split { grid-template-columns: 1fr; }
  .pa-plate { width: 100vw; height: 50%; }
  .pa-plate--r { left: 0; top: 50%; }
  .pa-half, .pa-half + .pa-half { padding-inline: var(--sc-gutter); }
  .pa-half + .pa-half { background: var(--ground-r); padding-top: 2rem; padding-bottom: 2rem; }
  .pa-title { grid-template-columns: 1fr; inset: 38svh 0 auto 0; text-align: center; }
  .pa-title-l, .pa-title-r { justify-self: center; padding: 0; }
  .pa-veil { width: 100%; }
  .pa-hero-sub { width: auto; right: var(--sc-gutter); bottom: 6svh; }
  .pa-badge { display: none; }
  .scp-paths .pa-guests { height: auto !important; }
  .pa-guests-stage { position: relative; height: auto; padding-block: var(--sc-section); }
  .pa-calm { font-size: var(--sc-2xl); }
  .pa-calm-l, .pa-calm-r { text-align: center; padding: 0; }
  .pa-together { clip-path: inset(calc(var(--split) * 100%) 0 0 0); }
  .pa-close { left: var(--sc-gutter); right: var(--sc-gutter); top: auto; bottom: 8svh; color: var(--sc-ink); background: var(--sc-surface); border-radius: var(--sc-r2); padding: 1.4rem; box-shadow: var(--sc-e3); }
  .pa-close .sc-pill--glass { background: var(--sc-canvas); }
  .pa-scrim, .pa-left-word { display: none; }
}

html.sc-reduced .pa-plate img,
html.sc-reduced .pa-title { transform: none; }