/* Introduction (motion.css cascade): the head on load; each rail as it is reached, cards one after another. */
.pb-head{--kw-cascade-offset:.1s}.pb-rail{--kw-cascade-stagger:.08s}.pb-rail-wrap{--kw-cascade-stagger:.12s}
    .pb-head { max-width: 1120px; margin: 0 auto; padding: 56px 40px 4px; }
    .pb-eyebrow { display: block; font-family: var(--kw-font-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kw-label-3); margin: 0 0 14px; }
    .pb-title { font-family: var(--kw-font-serif); font-weight: 600; /* display serif — parchment law */ font-size: clamp(30px, 4.4vw, 44px); letter-spacing: -0.02em; line-height: 1.08; color: var(--kw-label); margin: 0 0 16px; }
    .pb-lede { font-family: var(--kw-font-ui); font-weight: 400; font-size: clamp(17px, 2vw, 20px); line-height: 1.5; color: var(--kw-label-2); max-width: 680px; margin: 0; }

    .pb-rail-wrap { max-width: 1120px; margin: 0 auto; padding: 18px 0 8px; }
    .pb-rail-title { font-family: var(--kw-font-ui); font-weight: 600; font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.015em; line-height: 1.1; color: var(--kw-label); margin: 0; padding: 14px 40px 2px; }
    @media (max-width: 640px) { .pb-rail-title { padding-left: 24px; padding-right: 24px; } }
    .pb-rail { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 40px 18px; scroll-padding-inline: 40px; -webkit-overflow-scrolling: touch; }
    .pb-rail::-webkit-scrollbar { display: none; }
    .pb-card { flex: 0 0 clamp(280px, 80vw, 342px); aspect-ratio: 3 / 4; scroll-snap-align: start; }
    /* 3D flip machinery lives ONLY on the card actually turning (.is-3d,
       added by flip-cards.js for the 0.6s of the animation, then removed).
       Resting perspective/preserve-3d/backface/rotateY across a whole deck
       promoted two GPU surfaces per card — the compositing load class that
       memory-killed iPhones on the .com shelf. Resting visibility is the
       opacity swap below. */
    .pb-card.is-3d { perspective: 1600px; }
    /* Symmetric easing so the geometric 90° lands at 50% of the turn (0.3s) —
       must match the face-swap delay below, or the card goes blank mid-flip. */
    .pb-flip { position: relative; width: 100%; height: 100%; }
    .pb-card.is-3d .pb-flip { transform-style: preserve-3d; transition: transform 0.6s ease-in-out; }
    .pb-card.is-3d .pb-flip.is-flipped { transform: rotateY(180deg); }
    /* Bulletproof flip: don't rely on backface-visibility (the coplanar faces
       z-fight and the front bleeds through + steals clicks). Hide the inactive
       face with opacity + pointer-events, swapped at the flip midpoint (delay =
       half the 0.6s turn, when the card is edge-on so the snap is unseen). */
    .pb-face { position: absolute; inset: 0; border-radius: 24px; opacity: 1; transition: opacity 0s linear 0.3s; }
    .pb-card.is-3d .pb-face { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
    .pb-face--back { opacity: 0; pointer-events: none; }
    .pb-flip.is-flipped .pb-face--front { opacity: 0; pointer-events: none; }
    .pb-flip.is-flipped .pb-face--back { opacity: 1; pointer-events: auto; }

    .pb-face--front { cursor: pointer; background: var(--kw-surface); border-radius: 24px; }
    .pb-face--front img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 24px; }
    .pb-face--front::after { content: ''; position: absolute; inset: 0; border-radius: 24px; background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.12) 30%, rgba(0,0,0,0) 56%); }
    .pb-card__text { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: 24px; }
    .pb-card__eyebrow { display: block; font-family: var(--kw-font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin: 0 0 8px; }
    .pb-card__title { display: block; font-family: var(--kw-font-ui); font-weight: 600; font-size: clamp(21px, 2vw, 26px); line-height: 1.12; letter-spacing: -0.01em; color: #fff; text-shadow: 0 1px 18px rgba(0,0,0,0.35); }
    .pb-card__plus { position: absolute; bottom: 18px; right: 18px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.92); color: #1C1408; display: flex; align-items: center; justify-content: center; }
    .pb-card__plus svg { width: 19px; height: 19px; }
    .pb-card:hover .pb-card__plus { background: #fff; }

    .pb-face--back { background: var(--kw-surface); color: var(--kw-label); }
    .pb-card.is-3d .pb-face--back { transform: rotateY(180deg); }
    .pb-reader { position: absolute; inset: 0; overflow-y: auto; padding: 28px 24px; -webkit-overflow-scrolling: touch; }
    .pb-reader::-webkit-scrollbar { width: 0; }
    .pb-reader__eyebrow { display: block; font-family: var(--kw-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kw-accent); margin: 0 0 10px; }
    .pb-reader__title { font-family: var(--kw-font-ui); font-weight: 600; font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; color: var(--kw-label); margin: 0 0 6px; }
    .pb-reader__ref { font-family: var(--kw-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kw-accent); margin: 0 0 16px; }
    .pb-reader__lead { font-family: var(--kw-font-ui); font-size: 16px; line-height: 1.55; color: var(--kw-label); margin: 0 0 16px; }
    .pb-reader__body { font-family: var(--kw-font-ui); font-size: 14.5px; line-height: 1.62; color: var(--kw-label-2); }
    .pb-reader__body h3 { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kw-label-3); margin: 18px 0 8px; }
    .pb-reader__body p { margin: 0 0 12px; }
    /* The parable itself, in Yeshua's own words: the serif verse face, a
       step up in size from the surrounding UI text, and gold verse numbers.
       Voice classes come from /assets/design/divine.css. */
    .pb-reader__passage { font-family: var(--kw-font-serif); font-size: 16px; line-height: 1.75; color: var(--kw-label); margin: 0 0 12px; text-wrap: pretty; }
    .pb-reader__passage .verse__num { font-family: var(--kw-font-ui); font-size: 0.58em; font-weight: 600; line-height: 0; color: var(--kw-accent); vertical-align: super; margin-right: 5px; letter-spacing: 0.04em; }
    .pb-reader__passage .verse + .verse::before { content: " "; }
    .pb-reader__echo { display: block; padding: 10px 0 10px 14px; border-left: 2px solid var(--kw-accent); margin: 0 0 10px; }
    .pb-reader__echo b { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kw-accent); margin-bottom: 3px; }
    .pb-reader__echo span { font-size: 14px; font-style: italic; color: var(--kw-label); }
    .pb-reader__echo b a { color: inherit; text-decoration: none; }
    .pb-reader__echo b a:hover { text-decoration: underline; }
    .pb-reader__read { display: inline-flex; align-items: center; margin-top: 20px; font-family: var(--kw-font-ui); font-size: 13px; font-weight: 600; color: var(--kw-accent); text-decoration: none; }
    .pb-reader__read::after { content: '\2192'; margin-left: 6px; transition: transform 0.2s var(--kw-ease, ease); }
    .pb-reader__read:hover { color: var(--kw-accent-hover); }
    .pb-reader__read:hover::after { transform: translateX(3px); }
    .pb-close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--kw-fill); color: var(--kw-label); display: flex; align-items: center; justify-content: center; cursor: pointer; }
    .pb-close:hover { background: var(--kw-separator); }
    .pb-share { position: absolute; top: 14px; right: 52px; z-index: 3; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--kw-fill); color: var(--kw-label-2); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s, color 0.15s; }
    .pb-share:hover { background: var(--kw-separator); color: var(--kw-label); }

    .pb-nav { display: flex; gap: 12px; justify-content: flex-end; padding: 8px 40px 0; }
    .pb-nav__btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--kw-separator); background: var(--kw-surface); color: var(--kw-label); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .2s, background .2s; }
    .pb-nav__btn:disabled { opacity: 0.35; cursor: default; }
    .pb-nav__btn svg { width: 20px; height: 20px; }
    @media (max-width: 640px) {
      .pb-head { padding: 48px 24px 4px; }
      .pb-rail { padding-left: 24px; padding-right: 24px; scroll-padding-inline: 24px; }
      .pb-nav { padding-left: 24px; padding-right: 24px; }
    }
    @media (prefers-reduced-motion: reduce) { .pb-flip, .pb-face { transition: none; } }