/* ==== Nov 3 (NA, shared with NB): "Back to East Weston" ====
   One button for the pages that stand apart from the main site (the Collective application and the booking page).
   Markup (copy exactly; the wordmark svg is the one the home page uses):

   <a class="ew-back" href="/" aria-label="Back to East Weston, the main website" data-ew-back>
     <svg class="ew-back__arrow" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>
     <span class="ew-back__txt">Back to</span>
     <svg class="wordmark-svg ew-back__wm" aria-hidden="true" focusable="false" viewBox="0 0 2689 183" fill="currentColor">...</svg>
   </a>

   It follows the colours of whatever it sits in (currentColor, --fg, --bg), so it works in the light and the dark theme.
   Keep it in a bar that stays on screen (position: fixed or sticky) so it shows on every step, on a phone and on a computer. ==== */
.ew-back { display: inline-flex; align-items: center; gap: .75em; min-height: 44px; padding: 0 18px 0 13px; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: 999px; color: inherit; font: 500 .68rem/1 var(--sans, system-ui, sans-serif); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background .35s ease, color .35s ease, border-color .35s ease; }
.ew-back__arrow { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s ease; }
.ew-back__txt { opacity: .8; }
.ew-back__wm { display: block; width: 108px; height: auto; flex: none; }
.ew-back:hover, .ew-back:focus-visible { background: var(--fg, currentColor); color: var(--bg, #fff); border-color: var(--fg, currentColor); }
.ew-back:hover .ew-back__arrow, .ew-back:focus-visible .ew-back__arrow { transform: translateX(-3px); }
.ew-back:focus-visible { outline: 2px solid var(--oxblood, #4a0000); outline-offset: 3px; }
@media (max-width: 767px) { .ew-back { gap: .6em; padding: 0 13px 0 10px; font-size: .6rem; letter-spacing: .16em; } .ew-back__wm { width: 82px; } }
@media (prefers-reduced-motion: reduce) { .ew-back, .ew-back__arrow { transition: none; } }