/* ===== MGP brand foundation: self-hosted fonts + tokens + shared bits ===== */
@font-face{font-family:"Gravesend Inline";src:url("/assets/fonts/GravesendSans-Inline.woff2") format("woff2"),url("/assets/fonts/GravesendSans-Inline.woff") format("woff");font-display:swap}
@font-face{font-family:"Gravesend Cameo";src:url("/assets/fonts/GravesendSans-Cameo.woff2") format("woff2"),url("/assets/fonts/GravesendSans-Cameo.woff") format("woff");font-display:swap}
@font-face{font-family:"Gravesend Sans";font-weight:700;src:url("/assets/fonts/GravesendSans-Bold.woff2") format("woff2"),url("/assets/fonts/GravesendSans-Bold.woff") format("woff");font-display:swap}
@font-face{font-family:"Gravesend Sans";font-weight:500;src:url("/assets/fonts/GravesendSans-Medium.woff2") format("woff2"),url("/assets/fonts/GravesendSans-Medium.woff") format("woff");font-display:swap}
@font-face{font-family:"Inter";font-weight:400;src:url("/assets/fonts/Inter-Regular.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Inter";font-weight:400;font-style:italic;src:url("/assets/fonts/Inter-Italic.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Inter";font-weight:500;src:url("/assets/fonts/Inter-Medium.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Inter";font-weight:700;src:url("/assets/fonts/Inter-Bold.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Minion Pro";font-weight:400;src:url("/assets/fonts/MinionPro-Regular.woff2") format("woff2");font-display:swap}

:root{
  --dark:#0b0b0b; --card:#161616; --card2:#1f1f1f; --pagegreen:#11281B;
  /* OFFICIAL MGP palette — ONLY two greens site-wide: dark #11281B + light #289851.
     --chevron #1F4E34 is a THIRD green reserved for chevrons / edge borders ONLY. Orange = #F39200. */
  --forest:#11281B; --forest-2:#11281B; --teal:#11281B; --leaf:#289851; --chevron:#1F4E34;
  --orange:#F39200; --cream:#E4E4D8; --ink:#0b1f15;
  --line:rgba(228,228,216,.16); --line-2:rgba(228,228,216,.28);
  --disp:"Gravesend Sans",sans-serif; --inline:"Gravesend Inline",sans-serif;
  --cameo:"Gravesend Cameo",sans-serif;
  --body:"Inter",system-ui,sans-serif;
  --data:"Gravesend Sans",sans-serif; --serif:"Minion Pro",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--dark);color:var(--cream);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased}
body.pg-plain{background:var(--dark)}
/* Title stripes: GREEN everywhere, ORANGE only on the current-year (2026) section pages. */
body[data-section="y2026"] .opener i{background:var(--orange)}

.eyebrow{font-family:var(--data);letter-spacing:3px;text-transform:uppercase;color:var(--leaf);font-size:14px}
.kicker{font-family:var(--data);text-transform:uppercase;letter-spacing:2px;font-size:13px;color:var(--cream);opacity:.55}

/* ===== Shared type scale — use these instead of inventing per-page font-sizes =====
   .eyebrow / .kicker  — small caps label, 13–14px (e.g. "Where to watch", "The range")
   .sec-title          — section heading, clamp(30,5vw,46)px (e.g. "Course viewpoints", "Shop by category")
   .card-title         — item/product name, 20px (e.g. a viewpoint name like "Glen Helen", a product name) */
.sec-title{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(30px,5vw,46px);line-height:.95;color:var(--cream)}
.card-title{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:20px;color:var(--cream)}
.dash{height:0;border-top:2px dashed var(--leaf);opacity:.7;margin:16px 0 28px}
.btn{font-family:var(--data);font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:15px;background:var(--orange);color:var(--forest);border:0;padding:12px 20px;border-radius:24px;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.btn.ghost{background:transparent;color:var(--cream);border:1.5px solid var(--leaf)}

/* ===== Shared bottom-centre morphing menu (injected by /assets/js/menu.js) ===== */
.mgp-backdrop{position:fixed;inset:0;background:rgba(2,12,8,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .35s ease;z-index:90}
.mgp-backdrop.open{opacity:1;pointer-events:auto}
.mgp-menu{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%);width:230px;height:auto;max-height:60px;background:#000;border:0;border-radius:30px;z-index:100;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;box-shadow:inset 0 4px 10px rgba(0,0,0,.9),inset 0 -2px 6px rgba(255,255,255,.06),0 3px 14px rgba(0,0,0,.55);transition:width .55s cubic-bezier(.22,1,.36,1),max-height .55s cubic-bezier(.22,1,.36,1),border-radius .55s cubic-bezier(.22,1,.36,1),background-color .5s ease}
.mgp-menu.open{width:min(94vw,420px);max-height:min(90vh,calc(100svh - 118px));border-radius:24px}
.mgp-menu::before{display:none}
.mgp-body{position:relative;z-index:1;padding:22px 34px 20px;flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;opacity:0;transition:opacity .3s ease;scrollbar-width:thin;scrollbar-color:rgba(40,152,81,.45) transparent}
.mgp-body::-webkit-scrollbar{width:6px}
.mgp-body::-webkit-scrollbar-thumb{background:rgba(40,152,81,.45);border-radius:3px}
.mgp-body::-webkit-scrollbar-track{background:transparent}
.mgp-menu.open .mgp-body{opacity:1;transition-delay:.15s}
.mgp-logo{display:block;text-align:center;margin:0 0 8px}
/* social icons row — sits under the logo, breaking the old dashed divider (the line continues
   either side of a subtle pill). Deliberately quiet so it never competes with the logo. */
.mgp-socrow{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.mgp-socrow .sl{flex:1 1 0;height:0;border-top:1px dashed rgba(40,152,81,.35)}
.soc-pill{display:inline-flex;align-items:center;gap:13px;padding:6px 14px;border-radius:999px;background:rgba(40,152,81,.1);border:1px solid rgba(40,152,81,.28)}
.mgp-logo img{height:60px;width:auto;opacity:.95}
.mgp-link{display:block;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:42px;line-height:1.34;color:#fff;text-decoration:none;transition:color .2s ease}
.mgp-link.shop{color:#F39200}
.mgp-link:hover,.mgp-link.active,.mgp-link.shop:hover,.mgp-link.shop.active{color:var(--leaf)}
/* History expander sub-menu — smaller orange links, animated dots */
.mgp-hist .mgp-link{position:relative}
.mgp-hist .mgp-link::after{content:"";position:absolute;top:50%;right:6px;width:9px;height:9px;border-right:3px solid var(--leaf);border-bottom:3px solid var(--leaf);transform:translateY(-70%) rotate(45deg);transition:transform .3s ease;opacity:.85}
.mgp-hist.open .mgp-link::after{transform:translateY(-30%) rotate(-135deg)}
.mgp-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.4,0,.2,1)}
.mgp-hist.open .mgp-sub{grid-template-rows:1fr}
.mgp-sub-in{overflow:hidden;min-height:0;padding-left:4px}
.mgp-sub-in .mgp-sublink:first-child{margin-top:2px}
.mgp-sub-in .mgp-sublink:last-child{margin-bottom:8px}
.mgp-sublink{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:18px;line-height:1.55;color:#F39200;text-decoration:none;opacity:.9;transition:opacity .2s ease}
.mgp-sublink:hover,.mgp-sublink.active{opacity:1;color:var(--orange)}
.mgp-sublink .hdot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#fff;animation:hdotPulse 1.6s ease-in-out infinite}
.mgp-sublink:nth-child(2) .hdot{animation-delay:.25s}
.mgp-sublink:nth-child(3) .hdot{animation-delay:.5s}
.mgp-sublink:nth-child(4) .hdot{animation-delay:.75s}
.mgp-sublink.active .hdot{background:var(--leaf);box-shadow:0 0 0 3px rgba(40,152,81,.25)}
@keyframes hdotPulse{0%,100%{transform:scale(.65);opacity:.45}50%{transform:scale(1.25);opacity:1}}
/* Partners & Sponsors (left) + Press & Media (right) share one row, centre divider */
/* account/cart row — interrupts the dashed line under SHOP (same treatment as the social row):
   line — [person + ACCOUNT | cart(+count)] — line. This row IS the divider, so .mgp-endrow below
   it carries no border of its own. */
.mgp-acctrow{display:flex;align-items:center;gap:10px;margin-top:14px}
.mgp-acctrow .sl{flex:1 1 0;height:0;border-top:1px dashed rgba(40,152,81,.45)}
.acct-pill{display:inline-flex;align-items:center;gap:12px;padding:6px 14px;border-radius:999px;background:rgba(40,152,81,.1);border:1px solid rgba(40,152,81,.28)}
.acct-pill a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--orange);opacity:.9;transition:opacity .2s ease,color .2s ease}
.acct-pill a:hover{opacity:1;color:var(--leaf)}   /* orange like the floating mini pill; leaf on hover to match it too */
.acct-pill svg{width:17px;height:17px}
.ar-lbl{font-family:var(--data);font-weight:700;letter-spacing:.8px;text-transform:uppercase;font-size:12.5px;line-height:1}
.ar-div{flex:0 0 auto;width:1px;height:15px;background:rgba(40,152,81,.6)}
.ar-cartn{font-family:var(--data);font-weight:700;font-size:12.5px;letter-spacing:.3px;line-height:1}
.ar-cartn:empty{display:none}
.mgp-endrow{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.mgp-endrow-sep{flex:0 0 auto;width:1px;height:15px;background:rgba(40,152,81,.6)}
.mgp-pressmedia,.mgp-policies{min-width:0;padding:2px 0;text-decoration:none;font-family:var(--data);font-weight:700;letter-spacing:.3px;text-transform:uppercase;font-size:14px;white-space:nowrap;cursor:pointer;transition:color .2s ease,opacity .2s ease}
.mgp-pressmedia{color:#ffc400}
.mgp-pressmedia:hover,.mgp-pressmedia.active{color:#ffd84d}
/* Policies — silver, the third item on the end row (after the same green divider). */
.mgp-policies{color:#C3C9CE}
.mgp-policies:hover,.mgp-policies.active{color:#E4E9ED}
.mgp-contact{display:flex;align-items:center;gap:6px;text-decoration:none;font-family:var(--data);font-weight:700;letter-spacing:.3px;text-transform:uppercase;font-size:14px;color:var(--leaf);opacity:.9;transition:opacity .2s ease,color .2s ease}
.mgp-contact:hover{opacity:1}
.mgp-contact .ci{display:flex}
.mgp-contact .ci svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mgp-contact .ci.phone{transform-origin:60% 60%;animation:cphone 2.6s ease-in-out infinite}
.mgp-contact .ci.mail{animation:cmail 3s ease-in-out infinite}
@keyframes cphone{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-15deg)}82%{transform:rotate(13deg)}88%{transform:rotate(-8deg)}94%{transform:rotate(0)}}
@keyframes cmail{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}

.soc-link{display:flex;color:var(--cream);opacity:.7;transition:opacity .2s ease,color .2s ease}
.soc-link:hover{opacity:1;color:var(--leaf)}   /* fallback for any future network without its own colour */
.soc-link.youtube:hover{color:#FF0000}
.soc-link.facebook:hover{color:#1877F2}
.soc-link.x:hover{color:#fff}
.soc-link.instagram:hover{color:#833AB4}
.soc-link.tiktok:hover{color:#25F4EE}
.soc-link.threads:hover{color:#fff}
.soc-link svg{width:16px;height:16px}
/* Panel "Icons position: bottom" — the icon pill moves into the divider above Contact Us /
   Press & Media (the socrow line REPLACES the endrow's border), and the logo gets its plain
   dashed underline back. */
.mgp-menu.soc-bottom .mgp-logo{margin:0 0 10px;padding-bottom:10px;border-bottom:1px dashed rgba(40,152,81,.35)}
.mgp-menu.soc-bottom .mgp-socrow{margin:14px 0 0}
.mgp-menu.soc-bottom .mgp-socrow .sl{border-top-color:rgba(40,152,81,.45)}


/* ===== Countdown clock (split-flap style, centred under the social row) =====
   Now a two-face fading stage: the clock face ⇄ a random sponsor face (tier title in the same
   clock-label style + logo, from Site → Partners). menu.js drives the cycle; once the countdown
   hits zero only sponsors rotate. */
.mgp-clock{margin-top:18px;text-align:center}
.mgp-ck-stage{position:relative;display:grid}
.mgp-ck-face{grid-area:1/1;opacity:0;transition:opacity .85s ease;pointer-events:none}
.mgp-ck-face.on{opacity:1}
.mgp-ck-sp{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0}
.mgp-ck-logo{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;margin-top:2px}
.mgp-ck-tile{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:9px;padding:5px 12px;max-height:100%}
.mgp-ck-tile.dark{background:transparent;padding:0}   /* white-ink logos (Okell's) sit straight on the dark menu */
.mgp-ck-tile img{display:block;height:44px;max-height:100%;width:auto;max-width:200px;object-fit:contain}
.mgp-ck-tile.dark img{height:52px}
.mgp-clock-label{font-family:var(--inline);letter-spacing:1.5px;text-transform:uppercase;font-size:17px;color:var(--cream);opacity:.95;margin-bottom:3px}
.mgp-clock-row{display:flex;justify-content:center;gap:7px}
@media(prefers-reduced-motion:reduce){.mgp-ck-face{transition:none}.mgp-ck-sp{display:none}#ckCount{opacity:1}}
/* Short laptop viewports: compress the open menu so everything fits without scrolling.
   ⚠ MUST live AFTER the base .mgp-* rules above — same specificity, later wins (cascade order). */
@media (max-height:920px){
  .mgp-body{padding:14px 30px 12px}
  .mgp-logo{margin-bottom:8px;padding-bottom:8px}
  .mgp-logo img{height:42px}
  .mgp-link{font-size:32px;line-height:1.28}
  .mgp-sublink{font-size:16px;line-height:1.45}
  .mgp-acctrow{margin-top:10px}
  .mgp-endrow{margin-top:9px}
  .mgp-socrow{margin-bottom:8px}
  .mgp-clock{margin-top:9px}
  .mgp-clock-label{font-size:14px;margin-bottom:2px}
}
@media (max-height:790px){
  .mgp-logo img{height:36px}
  .mgp-link{font-size:27px;line-height:1.26}
  .mgp-sublink{font-size:15px;line-height:1.4}
}
.flap{background:#000;border:0;border-radius:7px;padding:7px 0 6px;width:46px;position:relative;box-shadow:inset 0 1px 4px rgba(0,0,0,.85),inset 0 -1px 0 rgba(255,255,255,.05)}
.flap::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.65)}
.flap .d{display:block;width:100%;font-family:var(--cameo);font-size:25px;line-height:1;color:var(--orange);text-align:center;letter-spacing:0}
.flap .u{display:block;font-family:var(--data);font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--leaf);opacity:.9;margin-top:5px;text-align:center}
.mgp-bar{position:relative;z-index:1;height:60px;flex:0 0 60px;display:flex;align-items:center;justify-content:center;gap:15px;padding:0 24px;cursor:pointer}
/* site-wide mini pill — My Account + cart — floats just above the MENU pill */
.mgp-minipill{position:fixed;left:50%;bottom:calc(164px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:95;display:flex;align-items:center;gap:2px;background:#000;border:1px solid rgba(40,152,81,.35);border-radius:999px;padding:4px 6px;box-shadow:inset 0 2px 6px rgba(0,0,0,.8),0 6px 20px rgba(0,0,0,.45);transition:opacity .3s ease,transform .3s ease}
.mgp-minipill.hidden{opacity:0;pointer-events:none;transform:translate(-50%,10px)}
/* Mobile (≤760px = where the Livestream page shows STACKED bars, not side-by-side pillars): the pills
   no longer need to clear pillar title bars, so drop them near the bottom edge — more thumb-reachable
   and it frees the big reserved zone at the foot of every page (see home.css padding). Desktop keeps
   the higher position for the real pillars. */
@media(max-width:760px){
  .mgp-menu{bottom:calc(14px + env(safe-area-inset-bottom))}
  .mgp-minipill{bottom:calc(78px + env(safe-area-inset-bottom))}
}
/* While an overlay is open (product modal / image lightbox / photos session pulldown) hide BOTH
   floating pills so they don't sit on top of its size/colour/add-to-cart controls or dropdown items.
   menu.js toggles .mgp-overlay-open on <body> for the specific overlay selectors (not the menu itself). */
body.mgp-overlay-open .mgp-menu,
body.mgp-overlay-open .mgp-minipill{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s ease}
.mgp-minipill .mp-btn{display:inline-flex;align-items:center;gap:5px;color:var(--orange);text-decoration:none;padding:6px 11px;border-radius:999px;transition:color .2s ease}
.mgp-minipill .mp-btn svg{width:20px;height:20px}
.mgp-minipill .mp-btn:hover{color:var(--leaf)}
.mgp-minipill .mp-div{width:1px;height:18px;background:rgba(40,152,81,.35)}
.mgp-minipill .mp-cartn{font-family:var(--data);font-weight:700;font-size:13px;letter-spacing:.3px;line-height:1;color:var(--orange)}
.mgp-minipill .mp-cartn:empty{display:none}
/* two equal, straight GREEN bars either side of MENU (no flare) */
.mgp-bar .ham{display:flex;flex-direction:column;gap:3px;width:22px}
.mgp-bar .ham i{display:block;height:3px;width:100%;background:var(--leaf);border-radius:.5px}
/* centre label crossfades between "MENU" and the MGP logo, back and forth */
.mgp-swap{position:relative;display:inline-flex;align-items:center;justify-content:center;height:30px;min-width:92px}
.mgp-swap .s-txt,.mgp-swap .s-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
/* Optical centring of the caps against the orange flares:
   – X: letter-spacing:2px leaves ~2px of trailing advance after the "U", so the visible ink
        sits ~2px left of the box centre → nudge the word right 2px to equalise the gaps.
   – Y: line-height:normal puts the caps' baseline ~3px below the box centre → lift 3px so the
        cap band is centred on the flares. */
.mgp-swap .s-txt{font-family:var(--data);font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:17px;color:#fff;white-space:nowrap;animation:mgpSwapTxt 6.5s ease-in-out infinite;transform:translate(calc(-50% + 2px),calc(-50% - 3px))}
.mgp-swap .s-logo{height:26px;width:auto;animation:mgpSwapLogo 6.5s ease-in-out infinite}
@keyframes mgpSwapTxt{0%,36%{opacity:1}47%,86%{opacity:0}97%,100%{opacity:1}}
@keyframes mgpSwapLogo{0%,36%{opacity:0}47%,86%{opacity:1}97%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.mgp-swap .s-txt{animation:none;opacity:1}.mgp-swap .s-logo{animation:none;opacity:0}}


/* ===== Shared page header + programme-style opener (bars+chevrons) + swipe transitions ===== */
/* Site logo — sits between the opener stripes and every page title (the old animated topbar
   header was removed site-wide 11 Jul 2026). Links home. */
.sitelogo{display:block;width:max-content;margin:20px auto 12px;transition:opacity .2s ease}
.sitelogo:hover{opacity:.8}
.sitelogo img{height:44px;width:auto;display:block;filter:drop-shadow(0 3px 12px rgba(0,0,0,.5))}

/* native hero background video (snippet 'hero-video'): cover the full-screen #bgVideo stage */
#bgVideo video,#bgVideo .herovid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;pointer-events:none}

.page-head{text-align:center;padding:0 22px 4px}   /* zero top — the stripes touch the browser frame */
.opener{display:flex;align-items:center;justify-content:center;gap:3px;height:auto}
.opener i{display:block;width:11px;height:82px;background:var(--leaf);border-radius:1px}
.pagetitle{font-family:var(--inline);font-size:clamp(56px,9.5vw,116px);line-height:.9;text-transform:uppercase;color:var(--cream);margin:4px 0 0;text-align:center;overflow-wrap:break-word}
.pagetitle-link{color:inherit;text-decoration:none;transition:opacity .2s ease}
.pagetitle-link:hover{opacity:.82}
/* Every page title is the SAME size site-wide. Hero pages (title over an image) get the identical
   clamp plus a legibility shadow — so home/race/where-to-watch/podcast/mmcc match the chrome pages. */
.v2hero h1.pagetitle,.vhero h1.pagetitle,.hero h1.pagetitle{font-size:clamp(56px,9.5vw,116px);line-height:.9;text-shadow:0 6px 40px rgba(0,0,0,.6)}
/* Phones: the 56px floor is wider than a phone can hold — a 10-char title like VIEWPOINTS/LIVESTREAM
   overflows by ~10px at 390px (40px at 360px), dropping its last letter to a second line. Scale the
   floor down and let it grow with the viewport (measured: clamp(40,12vw,56) fits every phone width
   with margin, e.g. VIEWPOINTS = 298px in a 346px-wide 390 phone). Still one shared size per viewport. */
@media(max-width:600px){
  .pagetitle,
  .v2hero h1.pagetitle,.vhero h1.pagetitle,.hero h1.pagetitle{font-size:clamp(40px,12vw,56px)}
}

@keyframes pageIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
.wrap{animation:pageIn .5s cubic-bezier(.33,.1,.2,1)}

/* opener bar entrance */
@keyframes barIn{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}
.opener i{transform-origin:bottom;animation:barIn .7s cubic-bezier(.2,.7,.3,1.1) both}
.opener i:nth-child(2){animation-delay:.12s}

@media(max-width:780px){
  .opener i{height:60px}
}

/* Small shop "Terms & Returns" policy link — Press&Media menu typography, but white. Used on shop / cart / order pages. */
.shoppolicy-link{display:inline-block;font-family:var(--data);font-weight:700;letter-spacing:.3px;text-transform:uppercase;font-size:14px;color:#fff;text-decoration:none;white-space:nowrap;transition:color .2s ease}
.shoppolicy-link:hover{color:var(--orange)}