/* Theme B — home hero (public page). Scoped to .bhero only; does not restyle the rest of the home page. */
@keyframes bfloat{from{transform:rotate(2.2deg) translateY(0)}to{transform:rotate(1.4deg) translateY(-8px)}}
@keyframes bdash{to{stroke-dashoffset:-26}}
.bhero{position:relative;height:100vh;min-height:640px;overflow:hidden;background:#e9dfcc;color:#2b2622}
.bhero>svg{position:absolute;inset:0;width:100%;height:100%;opacity:.95}
.bhero text{font-family:'Assistant',sans-serif;fill:#6c5c47;font-weight:600;font-size:13px;letter-spacing:.12em}
.bhero .route{stroke-dasharray:5 5;animation:bdash 3s linear infinite}
.bhero .postcard{position:absolute;margin:0;top:15vh;inset-inline-end:7vw;width:min(46vw,720px);background:#fbf8f2;padding:14px 14px 46px;box-shadow:0 30px 60px -28px #2b262299,0 2px 6px #2b262222;transform:rotate(2.2deg);animation:bfloat 14s ease-in-out infinite alternate}
.bhero .postcard img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;filter:sepia(.15) saturate(.85)}
.bhero .bh-t{position:absolute;inset-inline-start:7vw;bottom:12vh;max-width:540px}
.bhero .eyebrow{font:700 12px 'Assistant',sans-serif;letter-spacing:.3em;color:#8a5a3b;text-transform:none}
.bhero h1{font:400 clamp(64px,8vw,128px)/.95 'Frank Ruhl Libre',serif;margin:14px 0 12px}
.bhero h1 .he{display:block;font-size:.32em;color:#7a6f64;margin-top:10px}
.bhero .dates{font:400 22px/1.4 'Frank Ruhl Libre',serif;margin:0;color:#4d443b}
.bhero .go{display:inline-block;margin-top:26px;font:600 15px 'Assistant',sans-serif;color:#f6f2ea;background:#2b2622;padding:11px 24px;border-radius:30px;text-decoration:none}
@media (max-width:900px){.bhero .postcard{top:90px;inset-inline:18px;width:auto}.bhero .bh-t{bottom:6vh;inset-inline:22px}.bhero h1{font-size:60px}.bhero .dates{font-size:19px}}
@media (prefers-reduced-motion:reduce){.bhero *{animation:none!important}}

/* 28 Oct 2026: the hero photo moves. The loop is pre-registered to the still (same 4:3 crop, colours already include the
   still's sepia/saturate filter), so it lies exactly over the <img> and fades in only once it is actually playing.
   Reduced motion, autoplay refused or no video support: the still stays. */
.bhero .postcard video{position:absolute;left:14px;top:14px;width:calc(100% - 28px);height:auto;aspect-ratio:4/3;object-fit:cover;display:block;opacity:0;transition:opacity .9s ease;pointer-events:none;background:transparent}
.bhero .postcard video.on{opacity:1}
@media (prefers-reduced-motion:reduce){.bhero .postcard video{display:none}}