/* xf-club.css: the club page template (/manchester/, /liverpool/, /merryhill/) and the R4 header (.xfh).
   Brand Guide 2.2: monochrome plus one green, Anybody XC for the shout, Inter for everything read, 8px scale, 1200px container,
   40px gutters (20px mobile), section padding 96px (48px mobile), buttons 52px (48px mobile), radius 4px controls and 8px cards,
   focus 2px grey-200 on dark and grey-400 on light, never green. Values are the RATIFIED XF web tokens v1.0
   (_release-2026-10-24-tokens/xf-web-tokens.css, Nova 24 Oct 2026), copied here under local names because that file is staged,
   not published; when it ships, swap these values for its --xfw-* properties.
   Club pages release, 24 Oct 2026. The strip comes from xf-chrome.css and the footer from xf-footer.css; nothing here restyles them. */
:root{
  --xf-black:#0A0A0A;--xf-white:#FFFFFF;--xf-off-white:#F5F5F3;
  --grey-100:#E9E9E7;--grey-200:#C7C7C5;--grey-300:#8E8E8C;--grey-400:#55554F;--grey-500:#1C1C1A;
  --xf-green:#00B62E;--xf-green-hover:#009E28;--xf-green-press:#009526;
  --hairline-dark:rgba(255,255,255,.12);--hairline-light:rgba(10,10,10,.10);
  /* names xf-chrome.css (.ann) reads */
  --green:var(--xf-green);--off:var(--xf-off-white);--g500:var(--grey-500);--g200:var(--grey-200);--white:var(--xf-white);--black:var(--xf-black);
  --font-display:'Anybody XC','Arial Narrow',sans-serif;
  --font-text:'InterV','Inter','Helvetica Neue',-apple-system,sans-serif;
  --fs-h1:clamp(48px,calc(3.81vw + 33.14px),88px);
  --fs-h2:clamp(27px,calc(3.04vw + 15.6px),46px);
  --display-lh:.92;--track-display:.004em;
  --body-size:17px;--body-lh:1.7;--lede-size:clamp(17px,calc(1.4vw + 12px),20px);--small-size:14px;
  --track-label:.08em;--track-meta:.06em;--track-eyebrow:.11em;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-6:24px;--s-8:32px;--s-12:48px;--s-16:64px;--s-24:96px;
  --section-y:96px;--container:1200px;--gutter:40px;--measure:66ch;
  --radius:4px;--radius-card:8px;
  --header-h:64px;
  --btn-h:52px;--btn-pad-x:32px;--btn-size:15px;--btn-compact-h:48px;
  --focus-ring-dark:2px solid var(--grey-200);--focus-ring-light:2px solid var(--grey-400);--focus-offset:2px;
  --ease:cubic-bezier(.4,0,.2,1);--t:200ms;
}
@media (max-width:819.98px){:root{--body-size:16px;--gutter:20px;--section-y:64px;--btn-h:48px;--btn-compact-h:44px;--header-h:56px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.xfc{margin:0;background:var(--xf-black);color:var(--xf-white);font-family:var(--font-text);font-size:var(--body-size);font-weight:400;line-height:var(--body-lh);-webkit-font-smoothing:antialiased}
.xfc img,.xfc video{display:block;max-width:100%}
.xfc p{margin:0}
.xfc h1,.xfc h2,.xfc h3{margin:0}
.xfc :focus-visible{outline:var(--focus-ring-dark);outline-offset:var(--focus-offset)}
.xfc .xfc-l :focus-visible{outline:var(--focus-ring-light)}
.xfc .xfc-skip{position:absolute;left:-9999px;top:0;z-index:400;padding:12px 16px;background:var(--xf-white);color:var(--xf-black);font-weight:600}
.xfc .xfc-skip:focus{left:16px;top:16px}

/* ---- Header, R4 form (brandrow): black band, hairline, sticky, wordmark 30px, logo links home, Join 44px ---- */
.xfh{position:sticky;top:0;z-index:100;background:var(--xf-black);border-bottom:1px solid var(--hairline-dark)}
.xfh-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);max-width:var(--container);height:var(--header-h);margin:0 auto;padding:0 var(--gutter)}
.xfh-home{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:var(--xf-white)}
.xfh-home .wm{display:block;height:30px;width:auto}
.xfh-join{display:inline-flex;align-items:center;justify-content:center;min-height:var(--btn-compact-h);padding:0 24px;border-radius:var(--radius);background:var(--xf-green);color:var(--xf-black);font-size:var(--btn-size);font-weight:600;line-height:1;letter-spacing:var(--track-label);text-transform:uppercase;text-decoration:none}
.xfh-join:hover{background:var(--xf-green-hover)}
.xfh-join:active{background:var(--xf-green-press)}

/* ---- Layout ---- */
.xfc-wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.xfc-sec{padding:var(--section-y) 0;border-top:1px solid var(--hairline-dark)}
.xfc-sec.xfc-l{background:var(--xf-off-white);color:var(--xf-black);border-top:0}
.xfc-head{max-width:var(--measure);margin-bottom:var(--s-8)}
.xfc-eb{display:flex;align-items:center;gap:10px;margin-bottom:var(--s-4);font-size:12px;font-weight:600;line-height:1.4;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--grey-200)}
.xfc-eb::before{content:'';flex:none;width:22px;height:2px;background:var(--xf-green)}
.xfc-l .xfc-eb{color:var(--grey-400)}
.xfc-h1,.xfc-h2{font-family:var(--font-display);font-weight:800;font-style:italic;text-transform:uppercase;line-height:var(--display-lh);letter-spacing:var(--track-display);padding-top:.14em;text-wrap:balance}
.xfc-h1{font-size:var(--fs-h1)}
.xfc-h2{font-size:var(--fs-h2)}
.xfc-stop{color:var(--xf-green)}
.xfc-lede{font-size:var(--lede-size);line-height:1.6;max-width:var(--measure)}
.xfc-p{max-width:var(--measure)}
.xfc-p + .xfc-p{margin-top:var(--s-4)}
.xfc-sub{color:var(--grey-200)}
.xfc-l .xfc-sub{color:var(--grey-400)}
.xfc-p a,.xfc-faq a,.xfc-offer a{color:var(--xf-off-white);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:currentColor}
.xfc-l .xfc-p a,.xfc-l .xfc-faq a,.xfc-l .xfc-offer a{color:var(--xf-black)}
.xfc-p a:hover,.xfc-faq a:hover,.xfc-offer a:hover,.xfc-p a:focus-visible,.xfc-faq a:focus-visible,.xfc-offer a:focus-visible{text-decoration-thickness:2px}

/* ---- Buttons (7.3) ---- */
.xfc-acts{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-8)}
.xfc-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--btn-h);padding:0 var(--btn-pad-x);border-radius:var(--radius);border:1px solid transparent;font-size:var(--btn-size);font-weight:600;line-height:1.2;letter-spacing:var(--track-label);text-transform:uppercase;text-align:center;text-decoration:none;cursor:pointer}
.xfc-btn--p{background:var(--xf-green);color:var(--xf-black)}
.xfc-btn--p:hover{background:var(--xf-green-hover)}
.xfc-btn--p:active{background:var(--xf-green-press)}
.xfc-btn--s{background:transparent;color:var(--xf-off-white);border-color:currentColor}
.xfc-btn--s:hover{box-shadow:inset 0 0 0 1px currentColor;background:rgba(245,245,243,.08)}
.xfc-l .xfc-btn--s{color:var(--xf-black)}
.xfc-l .xfc-btn--s:hover{background:rgba(10,10,10,.06)}
@media (max-width:519.98px){.xfc-acts .xfc-btn{flex:1 1 100%}}
@media (prefers-reduced-motion:no-preference){.xfc-btn,.xfh-join{transition:background var(--t) var(--ease),box-shadow var(--t) var(--ease)}}

/* ---- Hero: one arrival frame, the two-voice line, one green stop ---- */
.xfc-hero{padding:0 0 var(--section-y)}
.xfc-hero__media{margin:0;background:var(--grey-500)}
.xfc-hero__media img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.xfc-hero__text{padding-top:var(--s-8)}
.xfc-hero .xfc-h1{margin-bottom:var(--s-4)}
.xfc-facts{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6);margin-top:var(--s-6);padding:0;list-style:none;font-size:var(--small-size);color:var(--grey-200)}
.xfc-facts b{display:block;font-size:12px;font-weight:600;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--grey-300)}
@media (min-width:960px){
  .xfc-hero{padding-top:var(--s-12)}
  .xfc-hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-12);align-items:center;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
  .xfc-hero__grid > .xfc-hero__text{order:1;padding:0}
  .xfc-hero__grid > .xfc-hero__media{order:2}
  .xfc-hero__media img{aspect-ratio:16/10}
  .xfc-hero__grid .xfc-wrap{padding:0}
}

/* ---- At a glance ---- */
.xfc-glance{padding:0 0 var(--section-y)}
.xfc-glance .xfc-lede{padding-top:var(--s-8);border-top:1px solid var(--hairline-dark)}

/* ---- Lists of what is here (hairlines do the structure) ---- */
.xfc-list{display:grid;grid-template-columns:1fr;margin:0;padding:0;list-style:none;border-top:1px solid var(--hairline-dark)}
.xfc-l .xfc-list{border-top-color:var(--hairline-light)}
.xfc-list li{padding:var(--s-6) 0;border-bottom:1px solid var(--hairline-dark)}
.xfc-l .xfc-list li{border-bottom-color:var(--hairline-light)}
.xfc-list h3{font-size:20px;font-weight:600;line-height:1.3;margin-bottom:var(--s-1)}
.xfc-list p{color:var(--grey-200)}
.xfc-l .xfc-list p{color:var(--grey-400)}
@media (min-width:820px){
  .xfc-list{grid-template-columns:repeat(2,1fr);column-gap:var(--s-12)}
  .xfc-list--3{grid-template-columns:repeat(3,1fr)}
}

/* ---- Offer tag (7.4): 2px green border, filled OFFER label, nothing inside is green ---- */
.xfc-offer{position:relative;max-width:560px;margin-top:var(--s-8);padding:var(--s-8) var(--s-6) var(--s-6);border:2px solid var(--xf-green);border-radius:var(--radius)}
.xfc-offer__tag{position:absolute;top:-12px;left:var(--s-4);padding:2px var(--s-2);background:var(--xf-black);color:var(--xf-white);font-size:12px;font-weight:600;line-height:20px;letter-spacing:var(--track-label);text-transform:uppercase}
.xfc-offer__key{font-size:20px;font-weight:600;line-height:1.3;margin-bottom:var(--s-2)}
.xfc-offer__links{margin-top:var(--s-3)}
.xfc-offer__links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.xfc-offer__links span{padding:0 var(--s-2);color:var(--grey-400)}
.xfc-sec:not(.xfc-l) .xfc-offer__tag{background:var(--xf-white);color:var(--xf-black)}

/* ---- Ride Zone (monochrome on the club page; the campaign colour stays on /ride/) ---- */
.xfc-card{padding:var(--s-8) var(--s-6);border:1px solid var(--hairline-dark);border-radius:var(--radius-card);background:var(--grey-500)}
@media (min-width:820px){.xfc-card{padding:var(--s-12)}}

/* ---- Film ---- */
.xfc-film{margin:0}
.xfc-film video{width:100%;height:auto;aspect-ratio:16/9;background:var(--xf-black)}
.xfc-film figcaption{margin-top:var(--s-3);font-size:var(--small-size);color:var(--grey-200)}
.xfc-l .xfc-film figcaption{color:var(--grey-400)}

/* ---- Visit: hours, address, parking ---- */
.xfc-visit{display:grid;grid-template-columns:1fr;gap:var(--s-8)}
@media (min-width:820px){.xfc-visit{grid-template-columns:repeat(3,1fr);gap:var(--s-12)}}
.xfc-visit h3{margin-bottom:var(--s-3);font-size:12px;font-weight:600;line-height:1.4;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--grey-200)}
.xfc-l .xfc-visit h3{color:var(--grey-400)}
.xfc-hours{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--s-2) var(--s-6)}
.xfc-hours dt{font-weight:500}
.xfc-hours dd{margin:0;font-variant-numeric:tabular-nums}
.xfc-visit .xfc-btn{margin-top:var(--s-4)}

.xfc .xfc-q{margin-top:var(--s-8)}
.xfc .xfc-intro{margin-bottom:var(--s-6)}
.xfc .xfc-well{margin-top:var(--s-3);font-size:var(--small-size)}
.xfc-visit .xfc-h3-next{margin-top:var(--s-6)}

/* ---- FAQ (details/summary: no script) ---- */
.xfc-faq{max-width:840px;border-top:1px solid var(--hairline-dark)}
.xfc-l .xfc-faq{border-top-color:var(--hairline-light)}
.xfc-faq details{border-bottom:1px solid var(--hairline-dark)}
.xfc-l .xfc-faq details{border-bottom-color:var(--hairline-light)}
.xfc-faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:56px;padding:var(--s-3) 0;font-size:18px;font-weight:600;line-height:1.4;cursor:pointer;list-style:none}
.xfc-faq summary::-webkit-details-marker{display:none}
.xfc-faq summary::after{content:'+';flex:none;width:24px;text-align:center;font-size:24px;font-weight:400;line-height:1}
.xfc-faq details[open] summary::after{content:'\2212'}
.xfc-faq .xfc-faq__a{padding:0 0 var(--s-6);max-width:var(--measure);color:var(--grey-200)}
.xfc-l .xfc-faq .xfc-faq__a{color:var(--grey-400)}

@media (forced-colors:active){.xfc-btn,.xfh-join{border:1px solid ButtonText}.xfc-eb::before{background:CanvasText}}