/* ==========================================================================
   MK LIFE — "Mercury" restyle
   A drop-in override sheet. Loaded AFTER each page's original inline <style>,
   so it wins the cascade without a single line of page content changing.

   Reference system: mercury.com (via refero.design)
   North star: "alpine banking at blue hour"
     - near-black Onyx canvas (#171721); cards lift one step to Graphite (#1e1e2a)
     - Ivory (#ededf3) text, Ash (#c3c3cc) muted — never pure white for body copy
     - ONE chromatic note: Cobalt #5266eb, reserved for primary actions
     - pill controls (32px buttons / 40px nav+tags), 12px cards, 4px structural
     - NO shadows, NO gradients, NO coloured section bands.
       Separation comes from value contrast alone.
     - intermediate display weight (~480 → 500 here): never bold, never thin
     - 72px section rhythm, 1200px max width
   ========================================================================== */

:root{
  /* --- remap the site's existing tokens so every inline var() follows too --- */
  --ink:#ededf3;          /* Ivory   - primary text                           */
  --green:#ededf3;        /* was brand green: now ivory (accent text on dark) */
  --green-dark:#ededf3;   /* link colour on sub-pages                         */
  --gold:#cdddff;         /* pale cobalt tint - tags, badges, accents on dark */
  --cream:#171721;        /* Onyx    - canvas                                 */
  --grey:#c3c3cc;         /* Ash     - muted copy                             */
  --line:#2c2c3a;         /* quiet dark divider                               */
  --max:1200px;
  --r:12px;

  /* --- new tokens --- */
  --onyx:#171721;
  --graphite:#1e1e2a;
  --obsidian:#272735;
  --ivory:#ededf3;
  --ash:#c3c3cc;
  --slate:#70707d;
  --mist:#e2e3ed;
  --cobalt:#5266eb;
  --cobalt-hover:#6376f0;
  --pale:#cdddff;
  --r-btn:32px;
  --r-pill:40px;
  --r-sharp:4px;
  --ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --display:'Archivo','Inter',Helvetica,Arial,sans-serif;
}

/* ---------- Base ---------------------------------------------------------- */
html{scroll-behavior:smooth;background:var(--onyx)}
body{
  font-family:var(--ui);
  background:var(--onyx);
  color:var(--ivory);
  font-size:16px;line-height:1.5;font-weight:400;letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;   /* long emails and links wrap instead of widening phones */
}
img{max-width:100%;display:block}
.article li,.article p{overflow-wrap:anywhere}   /* grid lists ignore break-word */
::selection{background:var(--cobalt);color:#fff}

/* wide-set, architectural headings at an intermediate weight — never bold */
h1,h2,h3,h4,h5{
  font-family:var(--display);color:var(--ivory);
  font-weight:500;font-stretch:106%;
}
h1{font-size:clamp(2.1rem,4.6vw,4.05rem);line-height:1.1;letter-spacing:0}
h2{line-height:1.15;letter-spacing:.012em}
h3{line-height:1.2;letter-spacing:.015em}
h4,h5{line-height:1.25;letter-spacing:.015em}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
section{padding:72px 0}

.lead{font-size:1.125rem;font-weight:400;color:var(--ash);line-height:1.35;max-width:64ch}

/* in-copy links: ivory, underlined. Cobalt is never decorative. */
.lead a:not(.btn),.about-text a:not(.btn),#about-mklife a:not(.btn),
.faq-item a:not(.btn),.ads-foot a:not(.btn),.news-credit a:not(.btn),
.article a:not(.btn),.disc a:not(.btn){
  color:var(--ivory);font-weight:400;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:var(--slate);transition:text-decoration-color .18s;
}
.lead a:not(.btn):hover,.about-text a:not(.btn):hover,#about-mklife a:not(.btn):hover,
.faq-item a:not(.btn):hover,.ads-foot a:not(.btn):hover,
.article a:not(.btn):hover{text-decoration-color:var(--pale)}

/* ---------- Eyebrow / caption label --------------------------------------- */
.eyebrow,.card .num,.free .when,.ad .cat,.meta,.more-card .tag,
.club .cat,.charity .cat,.biz .cat,.venue .cat,.gig .cat,.ftag{
  font-family:var(--ui);
  font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ash);
}
.eyebrow{display:block;margin-bottom:20px}
.hero .eyebrow,.cta-band .eyebrow{color:var(--pale)}

/* ---------- Header: frosted glass over onyx ------------------------------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(23,23,33,.72);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
}
nav{height:76px}
/* the green wordmark reads as ivory on the onyx canvas */
.brand-logo,.brand img,.ebrand-mk{filter:brightness(0) invert(1)}
.brand-logo,.brand img{height:32px}
.navlinks{gap:2px;align-items:center}
.navlinks > a,.navtop{
  color:var(--ivory);font-family:var(--ui);font-size:1rem;font-weight:400;letter-spacing:0;
  padding:10px 20px;border-radius:var(--r-pill);transition:background .18s;
}
.navlinks > a:hover,.hasmenu:hover .navtop,.hasmenu:focus-within .navtop{
  color:var(--ivory);background:var(--obsidian);text-decoration:none;
}
.submenu{
  background:var(--graphite);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:none;padding:8px;
}
.submenu a{color:var(--ivory);font-weight:400;border-radius:var(--r-pill);padding:9px 16px}
.submenu a:hover{background:var(--obsidian);color:var(--ivory);text-decoration:none}
.menu-btn{color:var(--ivory)}
.navlinks.open{background:var(--graphite)!important;border-bottom:1px solid var(--line);box-shadow:none}
.navlinks.open .submenu{background:none}

/* ---------- Buttons ------------------------------------------------------- */
/* Cobalt is the single chromatic action: nav CTA, hero primary, form submits. */
.btn,.nav-cta,.modal .submit,.field .btn{
  display:inline-block;
  background:var(--cobalt);color:#fff;
  font-family:var(--ui);font-size:1rem;font-weight:400;letter-spacing:0;
  padding:13px 24px;border:0;border-radius:var(--r-btn);
  box-shadow:none;cursor:pointer;transition:background .18s;
}
.btn:hover,.nav-cta:hover,.modal .submit:hover,.field .btn:hover{
  background:var(--cobalt-hover);color:#fff;transform:none;text-decoration:none;
}
.nav-cta{padding:11px 20px}

/* ghost outline — every secondary action */
.btn-ghost,.btn.ghost,.btn-gold{
  background:transparent;color:var(--ivory);
  border:1px solid var(--mist);border-radius:var(--r-pill);
}
.btn-ghost:hover,.btn.ghost:hover,.btn-gold:hover{
  background:var(--ivory);color:var(--onyx);border-color:var(--ivory);transform:none;
}

/* repeated, list-level actions stay neutral so Cobalt keeps its meaning */
.contact-btn,.ad .contact-btn,.adslot .btn,.weblink{
  background:var(--obsidian);color:var(--ivory);
  border:1px solid var(--line);border-radius:var(--r-btn);
  font-family:var(--ui);font-size:.9375rem;font-weight:400;
  padding:11px 20px;box-shadow:none;transition:background .18s;
}
.contact-btn:hover,.ad .contact-btn:hover,.adslot .btn:hover{
  background:#31313f;color:var(--ivory);text-decoration:none;
}
.weblink{display:inline-block;margin-top:12px}

/* ---------- Homepage hero: full-bleed photograph, centred stack ----------- */
.hero{
  background:var(--onyx);color:var(--ivory);
  padding:132px 0 108px;text-align:center;
}
.hero-bg{transform:none;background-position:center 32%}
.hero-bg::after{
  background:linear-gradient(180deg,rgba(23,23,33,.72) 0%,rgba(23,23,33,.84) 60%,rgba(23,23,33,.96) 100%);
}
.hero .wrap > *{margin-left:auto;margin-right:auto}
.hero h1{
  font-family:var(--display);font-weight:500;font-stretch:106%;
  font-size:clamp(2.1rem,4.9vw,4.05rem);line-height:1.1;letter-spacing:0;
  max-width:18ch;color:var(--ivory);text-shadow:none;
}
.hero p{
  color:var(--ivory);font-size:1.125rem;font-weight:500;line-height:1.35;
  max-width:52ch;margin:22px auto 34px;
}
.hero-logo{width:min(260px,52%);margin:0 auto 28px;filter:none}
.hero-cta{gap:12px;justify-content:center}
/* only the first hero action is Cobalt; the rest recede to ghost */
.hero-cta .btn:not(:first-child){
  background:transparent;color:var(--ivory);border:1px solid var(--mist);border-radius:var(--r-pill);
}
.hero-cta .btn:not(:first-child):hover{background:var(--ivory);color:var(--onyx);border-color:var(--ivory)}
.hero-stats{
  border-top:1px solid var(--line);margin-top:72px;padding-top:36px;
  gap:56px;justify-content:center;
}
.hero-stats .num{
  font-family:var(--display);font-weight:500;font-stretch:106%;
  font-size:2.6rem;letter-spacing:0;color:var(--ivory);
}
.hero-stats .lbl{
  font-family:var(--ui);font-size:.75rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ash);margin-top:8px;
}

/* ---------- Section headings ---------------------------------------------- */
.section-head{margin-bottom:44px;max-width:68ch}
.section-head h2{
  font-family:var(--display);font-weight:500;font-stretch:106%;
  font-size:clamp(1.75rem,3.2vw,2.6rem);line-height:1.15;letter-spacing:.012em;
}
.section-head .lead{margin-top:18px}

/* every surface is Onyx or Graphite — no coloured bands, ever */
#explore,#gallery,#events,#news,#classifieds,#free,#contact,#faq,
#about,#about-mklife,#visit,.content,.related{background:var(--onyx)!important}
[style*="background:var(--cream)"],[style*="background:#fff"]{
  background:var(--graphite)!important;border-color:var(--line)!important;
}

/* ---------- Cards: Graphite, 12px, 32px padding, no border, no shadow ----- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;border:0}
.card,.comm,.ad,.free,.more-card,.news-card,.lead-story,.news-list,.events-list,
.signup,.map-card,.notice,.info,.keyfacts,.rel,.fcard,.club,.charity,.biz,
.venue,.gig,.evt,.org,.vcard,.note,.rules-box,.callout,.empty,.side .block,
.events,blockquote,.pull,.tipbox,.box,.toc,.sidebar-card{
  background:var(--graphite)!important;
  border:0!important;border-radius:var(--r)!important;
  box-shadow:none!important;color:var(--ivory);
}
.card,.comm,.free,.info,.keyfacts,.signup,.content .card{padding:32px!important}
.ad,.more-card,.news-card,.rel,.fcard,.club,.charity,.biz,.venue,.gig,.evt{padding:24px!important}
.card:hover,.comm:hover,.ad:hover,.free:hover,.news-card:hover,.rel:hover,
.club:hover,.charity:hover,.biz:hover,.venue:hover,.gig:hover,.fcard:hover{
  background:var(--obsidian)!important;transform:none!important;box-shadow:none!important;
  text-decoration:none;
}
.card .ico,.licon,.travel .pin{
  background:transparent!important;color:var(--pale);border-radius:var(--r-sharp);
  width:36px;height:36px;margin-bottom:20px;place-items:start center;
}
.card .ico svg,.licon svg,.travel .pin svg{width:24px;height:24px;stroke-width:1.3}
.card h3,.comm h3,.free h4,.ad h4,.more-card h4,.club h3,.charity h3,.biz h3,
.venue h3,.gig h3,.fcard h3,.news-card h4,.rel h4{
  font-size:1.3125rem;font-weight:500;letter-spacing:.015em;margin:10px 0 8px;color:var(--ivory);
}
.card p,.comm p,.free p,.ad p,.more-card p,.club p,.charity p,.biz p,.fcard p,
.news-card .src,.lead-story p,.news-item p{color:var(--ash);font-weight:400}
.comm .stat{
  margin-top:20px;color:var(--ivory);font-weight:400;font-size:.9375rem;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:var(--slate);
}

/* ---------- Attraction tiles ---------------------------------------------- */
.feat{gap:16px}
.tile{border-radius:var(--r);border:0;min-height:330px;padding:32px;transition:none}
.tile::before{background:linear-gradient(180deg,rgba(23,23,33,.15) 15%,rgba(23,23,33,.92))}
.tile .tag{
  display:inline-block;background:transparent;color:var(--pale);
  border:1px solid rgba(205,221,255,.35);
  font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 12px;border-radius:var(--r-pill);margin-bottom:14px;
}
.tile h3{
  font-family:var(--display);font-weight:500;font-stretch:106%;
  font-size:1.5rem;letter-spacing:.015em;color:var(--ivory);margin:0 0 8px;
}
.tile p{color:var(--ash);font-weight:400}
.tile-more{
  color:var(--ivory);font-weight:400;font-size:.9375rem;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:var(--slate);
}
.tile:hover{transform:none}
.tile:hover .tile-more{text-decoration-color:var(--pale)}

/* ---------- More to explore ----------------------------------------------- */
.more-head{margin:56px 0 24px}
.more-head h3{font-size:1.75rem;font-weight:500;letter-spacing:.015em}
.more-head p{color:var(--ash)}
.more-grid{gap:16px}

/* ---------- About / split panel ------------------------------------------- */
.split{gap:56px}
.about-text h2{
  font-family:var(--display);font-weight:500;font-stretch:106%;
  font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.15;letter-spacing:.012em;margin-bottom:24px;
}
.about-text p{color:var(--ash)}
.panel{
  border-radius:var(--r);padding:32px;
  background-image:linear-gradient(180deg,rgba(23,23,33,.8),rgba(23,23,33,.94)),
    url('https://upload.wikimedia.org/wikipedia/commons/4/49/Marlborough_Roundabout_-_geograph.org.uk_-_820323.jpg');
  background-size:cover;background-position:center;
}
.panel h3{color:var(--ivory);font-size:1.5rem;font-weight:500;letter-spacing:.015em}
.facts .dot{background:var(--pale);width:6px;height:6px;margin-top:9px}
.facts li{color:var(--ash)}
.facts li b{color:var(--ivory);font-weight:500}

/* ---------- Gallery ------------------------------------------------------- */
.gal{gap:16px}
.gal figure{border-radius:var(--r);border:0;overflow:hidden}
.gal img{transition:none}
.gal figure:hover img{transform:none}
.gal figcaption{
  background:linear-gradient(transparent,rgba(23,23,33,.94));
  font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory);
}

/* ---------- Events list --------------------------------------------------- */
.events-list{overflow:hidden;gap:0}
.events-list .event{background:transparent;padding:26px 32px;border-bottom:1px solid var(--line)}
.events-list .event:last-child{border-bottom:0}
.events-list .event:hover{background:var(--obsidian)}
.events-list .event .date{
  font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);
}
.events-list .event .date span{
  font-family:var(--display);font-weight:500;font-stretch:106%;
  font-size:1.75rem;letter-spacing:.015em;text-transform:none;color:var(--ivory);
}
.events-list .event h4{font-size:1.3125rem;font-weight:500;letter-spacing:.015em}
.events-list .event p{color:var(--ash)}
.events-list .event .where{
  font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);
}

/* dated events list on What's On (.events / .ev) */
.events{overflow:hidden}
.ev{background:transparent;padding:24px 32px;border-bottom:1px solid var(--line)}
.ev:last-child{border-bottom:0}
.ev.feat{background:rgba(82,102,235,.1)}
.ev .when{
  font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);
}
.ev .when span{
  font-family:var(--display);font-weight:500;font-stretch:106%;
  font-size:1.6rem;letter-spacing:.015em;text-transform:none;color:var(--ivory);
}
.ev h3{font-size:1.1875rem;font-weight:500;letter-spacing:.015em;color:var(--ivory)}
.ev p{color:var(--ash)}
.ev .where{
  font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);
}
.ev .star{
  background:transparent;border:1px solid rgba(205,221,255,.35);color:var(--pale);
  border-radius:var(--r-pill);font-size:.625rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;padding:3px 10px;
}
.ev .more{
  color:var(--ivory);font-weight:400;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:var(--slate);
}

/* success ticks: the one place a filled chromatic circle is right */
.done .tick,.modal .done .tick{background:var(--cobalt)!important;color:#fff}
.done .tick svg{stroke:#fff;stroke-width:2}

/* ---------- News ---------------------------------------------------------- */
.meta .date{color:var(--ash)}
.lead-story{overflow:hidden}
.lead-story .body{padding:32px}
.lead-story h3{font-size:1.5rem;font-weight:500;letter-spacing:.015em}
.news-list{overflow:hidden}
.news-item{padding:24px 32px;border-bottom:1px solid var(--line);background:transparent}
.news-item:last-child{border-bottom:0}
.news-item:hover{background:var(--obsidian)}
.news-item h4{font-size:1.125rem;font-weight:500;letter-spacing:.015em}
#newsFeed{gap:16px}
.news-card h4{font-size:1.0625rem;font-weight:500;letter-spacing:.015em;line-height:1.35}
.news-loading,.news-credit{color:var(--ash)}

/* ---------- Chips / filters ----------------------------------------------- */
.chips{gap:8px;margin-bottom:26px}
.chip{
  background:var(--obsidian);border:1px solid var(--line);color:var(--ivory);
  border-radius:var(--r-pill);padding:9px 18px;
  font-family:var(--ui);font-size:.875rem;font-weight:400;letter-spacing:0;
  transition:background .15s,color .15s;
}
.chip:hover{background:#31313f;color:var(--ivory);border-color:var(--slate)}
.chip.active{background:var(--ivory);color:var(--onyx);border-color:var(--ivory)}
.chip.sub{background:transparent;border-color:var(--line);color:var(--ash);font-size:.8125rem;padding:7px 15px}
.chip.sub:hover{background:var(--obsidian);color:var(--ivory)}
.chip.sub.active{background:var(--ivory);color:var(--onyx);border-color:var(--ivory)}

/* ---------- Classified ads ------------------------------------------------ */
.ads{gap:16px}
.ad .foot{border-top:1px solid var(--line);padding-top:16px;margin-top:20px}
.ad .price{font-weight:500;color:var(--ivory);font-size:1.0625rem}
.ad .loc{font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.ad .contact-btn{width:100%;margin-top:18px}
.report-link{
  font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ash);margin-top:14px;background:none;border:0;padding:0;
}
.report-link:hover{color:var(--ivory)}
.report-link svg{stroke:currentColor}

/* ---------- Free things --------------------------------------------------- */
.free-grid{gap:16px}
.badge{
  background:transparent;color:var(--pale);border:1px solid rgba(205,221,255,.35);
  border-radius:var(--r-pill);font-size:.6875rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 12px;top:28px;right:28px;
}
.free .loc{
  font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ash);margin-top:18px;
}
.free .loc svg{stroke:var(--pale);stroke-width:1.4}

/* ---------- Notices ------------------------------------------------------- */
.notice{border-left:0!important;padding:22px 28px!important;color:var(--ash)}
.notice b{color:var(--ivory);font-weight:500}
.notice svg{stroke:var(--pale);stroke-width:1.4}

/* ---------- FAQ ----------------------------------------------------------- */
.faq-item{border-bottom:1px solid var(--line)!important;padding:22px 0!important}
.faq-item summary{font-weight:500!important;font-size:1.125rem!important;color:var(--ivory);letter-spacing:.015em}
.faq-item p{color:var(--ash)}
.faq details{background:var(--graphite);border:0;border-radius:var(--r);padding:0 28px;margin-bottom:10px}
.faq summary{font-weight:500;font-size:1.0625rem;padding:22px 0;color:var(--ivory)}
.faq summary::after{color:var(--ash);font-weight:400}
.faq details p{color:var(--ash)}

/* ---------- CTA band ------------------------------------------------------ */
.cta-band{
  border-radius:var(--r);padding:96px 32px;
  background-image:none;background:var(--graphite);color:var(--ivory);
}
.cta-band h2{
  font-family:var(--display);font-weight:500;font-stretch:106%;
  font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.15;letter-spacing:.012em;
  color:var(--ivory);margin-bottom:18px;
}
.cta-band p{color:var(--ash)}

/* ---------- Visit / forms ------------------------------------------------- */
.map-card{overflow:hidden}
.map-card iframe{filter:invert(.92) hue-rotate(180deg) saturate(.5) brightness(.95)}
.visit-info h3{font-size:1.5rem;font-weight:500;letter-spacing:.015em}
.travel li{color:var(--ash)}
.travel b{color:var(--ivory);font-weight:500}
.signup h4{font-size:1.3125rem;font-weight:500;letter-spacing:.015em}
.signup p{color:var(--ash)}
.field input{
  background:transparent;border:1px solid var(--mist);border-radius:var(--r-btn);
  padding:13px 20px;font-family:var(--ui);font-size:1rem;color:var(--ivory);box-shadow:none;
}
.field input::placeholder{color:var(--ash)}
.field input:focus{outline:0;border-color:var(--cobalt)}
.form-ok{color:var(--pale);font-weight:400}

/* ---------- Modals -------------------------------------------------------- */
.modal-overlay{background:rgba(10,10,16,.78);backdrop-filter:blur(6px)}
.modal{background:var(--graphite);border:1px solid var(--line);border-radius:var(--r);box-shadow:none;padding:36px}
.modal h3{font-family:var(--display);font-size:1.5rem;font-weight:500;letter-spacing:.015em;color:var(--ivory)}
.modal .sub{color:var(--ash)}
.modal .article-meta{font-size:.6875rem;font-weight:500;letter-spacing:.12em;color:var(--ash)}
.modal label,label{
  font-family:var(--ui);font-size:.6875rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ash);
}
.modal input,.modal select,.modal textarea,
input[type=text],input[type=email],input[type=tel],input[type=url],select,textarea{
  background:var(--onyx);border:1px solid var(--line);border-radius:var(--r-sharp);
  font-family:var(--ui);font-size:1rem;color:var(--ivory);padding:13px 16px;
}
.modal input:focus,.modal select:focus,.modal textarea:focus,
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--cobalt)}
input::placeholder,textarea::placeholder{color:var(--ash)}
select option{background:var(--graphite);color:var(--ivory)}
.rules-box{color:var(--ash);padding:20px!important}
.rules-box b{color:var(--ivory);font-weight:500}
.consent{color:var(--ash)}
.modal .done .tick{background:var(--cobalt);color:#fff}
.modal .done .tick svg{stroke:#fff;stroke-width:2}
.modal .done h4{color:var(--ivory);font-weight:500}
.modal .done p{color:var(--ash)}
.modal .x{color:var(--ash);font-weight:400}
.modal .x:hover{color:var(--ivory)}

/* ---------- Footer -------------------------------------------------------- */
footer{
  background:var(--onyx);color:var(--ash);
  padding:80px 0 32px;border-top:1px solid var(--line);
}
footer h5{
  font-family:var(--ui);color:var(--ash);
  font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px;
}
footer a{color:var(--ivory);font-size:.9375rem;font-weight:400;padding:5px 0}
footer a:hover{color:var(--pale);text-decoration:none}
.foot-logo{height:32px}
.foot-brand p{color:var(--ash)}
.foot-bottom{
  border-top:1px solid var(--line);padding-top:26px;margin-top:48px;
  font-size:.75rem;color:var(--ash);letter-spacing:.01em;
}

/* ==========================================================================
   SUB-PAGES (clubs, charities, music, businesses, what's on, guides)
   ========================================================================== */

.phero{min-height:380px}
.phero-bg{transform:none}
.phero-bg::after{background:linear-gradient(180deg,rgba(23,23,33,.6) 15%,rgba(23,23,33,.94))}
.phero .inner{padding:52px 24px}
.phero h1{
  font-family:var(--display);font-weight:500;font-stretch:106%;
  font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.15;letter-spacing:.01em;
  text-shadow:none;color:var(--ivory);max-width:22ch;
}
.phero .intro{color:var(--ash);font-size:1.125rem;font-weight:400;line-height:1.35}
.crumb{font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.crumb a{color:var(--ash)}
.crumb a:hover{color:var(--ivory)}

.topbar p{color:var(--ash)}
.listings-wrap{gap:24px}

/* generic content sections (contact, terms, advertise) */
.content h2{font-family:var(--display);font-weight:500;letter-spacing:.015em;color:var(--ivory)}
.content > .wrap > h2{font-size:1.875rem}
.content .card h2{font-size:1.375rem;color:var(--ivory)}
.content .card h3,.content .card h4{font-size:1.125rem;font-weight:500;color:var(--ivory)}
.content .card p,.content .card li{color:var(--ash)}
.updated{font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.callout{background:var(--onyx)!important;border-left:0!important;padding:24px 28px!important}
th{background:var(--obsidian)!important;color:var(--ivory)}
td{border-color:var(--line)!important;color:var(--ash)}

.club .type,.charity .type,.biz .type{
  font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);
}
.club .meta,.charity .meta{
  font-size:.875rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ash);
}
.club .meta b,.charity .meta b{color:var(--ivory);font-weight:500}
.club .ex,.venue .ex{
  background:transparent;border:1px solid var(--line);color:var(--ash);
  border-radius:var(--r-pill);font-size:.625rem;font-weight:500;letter-spacing:.12em;
}
.fcard .link a{
  font-weight:400;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:var(--slate);
}

/* Legacy green-gradient blocks on the guide pages. Mercury allows no gradients
   and no coloured bands — flatten every one to a Graphite card. */
.cta,.qcard,.upcta,a[style*="linear-gradient"]{
  background-image:none!important;background-color:var(--graphite)!important;
  border-radius:var(--r)!important;
}
.cta h2,.cta h3,.qcard h3,.upcta strong,a[style*="linear-gradient"] h3{
  color:var(--ivory)!important;font-family:var(--display);font-weight:500;letter-spacing:.015em;
}
.cta p,.qcard p,.upcta span:not(.go),a[style*="linear-gradient"] p{
  color:var(--ash)!important;font-weight:400;
}
a[style*="linear-gradient"] > span:first-child{
  font-size:.6875rem!important;font-weight:500!important;
  letter-spacing:.12em!important;color:var(--pale)!important;
}
.qcard .arrow,.cta .arrow{
  color:var(--ivory);font-weight:400;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:var(--slate);
}
.qcard:hover{transform:none}
.upcta .go{
  background:var(--cobalt);color:#fff;font-weight:400;
  border-radius:var(--r-btn);padding:13px 24px;
}

/* sidebar ad slots */
.adslot{
  background:var(--graphite)!important;border:0!important;border-radius:var(--r)!important;
  box-shadow:none!important;overflow:hidden;
}
.adslot.ad-invite{border:1px dashed var(--line)!important;background:transparent!important}
.adslot .tag{font-size:.625rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.adslot h4{color:var(--ivory);font-weight:500}
.adslot p{color:var(--ash)}
.adslot .ad-foot{font-size:.625rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}

/* ==========================================================================
   ARTICLE PAGES
   ========================================================================== */
.crumbs{background:var(--onyx);border-bottom:1px solid var(--line)}
.crumbs a{font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.crumbs a:hover{color:var(--ivory)}
.crumbs .sep{color:var(--ash)}
.crumbs .here{font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory)}
.back{font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.back:hover{color:var(--ivory)}

/* article hero: flat Graphite band — no gradient, no colour */
.phero:not(:has(.phero-bg)){background:var(--graphite)!important}
.phero .wrap{padding:64px 24px 56px}
.phero .plogo img{height:34px}
.ptag{
  display:inline-block;background:transparent;border:1px solid rgba(205,221,255,.35);
  font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pale);padding:5px 12px;border-radius:var(--r-pill);margin-bottom:18px;
}
.phero .byline{font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}

.article{font-size:1.0625rem;line-height:1.7;color:var(--ash)}
.article h2{
  font-family:var(--display);font-size:1.625rem;font-weight:500;
  letter-spacing:.015em;line-height:1.2;margin:46px 0 16px;color:var(--ivory);
}
.article h3{font-weight:500;letter-spacing:.015em;color:var(--ivory)}
.article strong{font-weight:500;color:var(--ivory)}
.article li{color:var(--ash)}
blockquote{border-left:3px solid var(--cobalt)!important;padding:28px!important}
.keyfacts h3{font-size:1.125rem;font-weight:500}
.keyfacts dt{font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.keyfacts dd{color:var(--ivory)}

/* co-branded event box inside articles */
.article .event{
  background:var(--graphite)!important;border:0!important;border-left:0!important;
  border-radius:var(--r)!important;padding:32px!important;box-shadow:none!important;
}
.article .event .ebrand{border-bottom:1px solid var(--line)}
/* partner logos keep their own colours — give them a deliberate white plate
   rather than letting a baked-in white background float on the graphite card */
.ebrand-auk,.ebrand img:not(.ebrand-mk){
  background:#fff;border-radius:var(--r-sharp);padding:6px 10px;box-sizing:content-box;
}
.article .event .ebrand-div{background:var(--line)}
.article .event .etag{
  background:transparent;border:1px solid rgba(205,221,255,.35);color:var(--pale);
  border-radius:var(--r-pill);font-size:.6875rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 12px;
}
.article .event h3{font-family:var(--display);font-size:1.5rem;font-weight:500;letter-spacing:.015em}
.article .event .esub{color:var(--ash)}
.article .event .egrid{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.article .event .egrid dt{font-size:.625rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.article .event .egrid dd{color:var(--ivory);font-weight:500}
.article .event p{color:var(--ash)}
.article .event .econtact{color:var(--ash)}
.article .event .econtact strong{color:var(--ivory)}
.article .event .evideo{border-radius:var(--r);border:1px solid var(--line);background:var(--onyx)}

.related{border-top:1px solid var(--line)}
.related h2{font-family:var(--display);font-size:1.5rem;font-weight:500;letter-spacing:.015em}
.rel .ptag{color:var(--ash);border-color:var(--line)}
.disc{color:var(--ash);font-size:.75rem}

/* attraction pages */
.body-col h2{
  font-family:var(--display);font-size:1.625rem;font-weight:500;
  letter-spacing:.015em;margin:0 0 16px;color:var(--ivory);
}
.body-col p{color:var(--ash)}
.hl li{color:var(--ash)}
.hl svg{stroke:var(--pale);stroke-width:1.4}
.info h3{font-size:1.125rem;font-weight:500}
.info dt{font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.info dd{color:var(--ivory)}

/* ---------- Reveal -------------------------------------------------------- */
.reveal{transition:opacity .5s ease,transform .5s ease}

/* ---------- Responsive ---------------------------------------------------- */
@media(max-width:900px){
  .cards{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  section{padding:56px 0}
  .hero{padding:88px 0 64px}
  .hero-stats{gap:28px}
  .cards{grid-template-columns:1fr}
  .cta-band{padding:64px 24px}
  footer{padding:64px 0 24px}
  .card,.comm,.free,.info,.keyfacts,.signup,.content .card{padding:24px!important}
}

/* ==========================================================================
   WORKER-RENDERED PAGES
   /events /articles /classifieds /post-advert /submit-event /best-of are built
   in _worker.js and use their own class vocabulary. They share the same :root
   token block, so the remap reaches them — these rules cover the rest.
   ========================================================================== */
.ecard,.acard,.feat-band{
  background:var(--graphite)!important;border:0!important;
  border-radius:var(--r)!important;box-shadow:none!important;
}
.feat-band{background:transparent!important;border:1px solid var(--line)!important}
.ecard:hover,.acard:hover{background:var(--obsidian)!important;text-decoration:none}
.ecard h3,.acard h3{font-size:1.25rem;font-weight:500;letter-spacing:.015em;color:var(--ivory)}
.ecard p,.acard p,.desc,.ddesc,.dloc,.when,.where,.meta,.fine{color:var(--ash)}
.adate,.dcat,.report{
  font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);
}
.amore,.dvisit{
  color:var(--ivory);font-weight:400;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--slate);
}
.price,.dprice,.dtitle{color:var(--ivory)}
.dtitle{font-size:1.375rem;font-weight:500;letter-spacing:.015em}

/* image placeholders */
/* background-COLOR only: the shorthand would wipe the inline background-image
   that carries each advert photo */
.img,.img.ph,.dphoto{background-color:var(--onyx);border:1px solid var(--line)}

/* badges */
.badge.gold{background:var(--pale)!important;color:var(--onyx)!important;border:0!important}
.badge.cat{background:rgba(23,23,33,.78)!important;color:var(--ivory)!important}

/* the worker uses .on for the selected chip, not .active */
.chip.on{background:var(--ivory)!important;color:var(--onyx)!important;border-color:var(--ivory)!important}

/* worker form controls and submits */
.send,.dcontact.send,.submit{
  background:var(--cobalt)!important;color:#fff!important;border:0!important;
  border-radius:var(--r-btn)!important;font-family:var(--ui);font-weight:400;
  padding:13px 24px;box-shadow:none;
}
.send:hover,.dcontact.send:hover,.submit:hover{background:var(--cobalt-hover)!important}
.cancel{
  background:transparent!important;color:var(--ivory)!important;
  border:1px solid var(--mist)!important;border-radius:var(--r-pill)!important;
}
.cancel:hover{background:var(--ivory)!important;color:var(--onyx)!important}
input,select,textarea{
  background:var(--onyx);border:1px solid var(--line);
  color:var(--ivory);font-family:var(--ui);
}
.fine a,.notice a,.box a{color:var(--ivory);text-decoration:underline;text-decoration-color:var(--slate)}

/* .cardbtn is the full-card click wrapper on Marketplace, not a button surface */
.cardbtn{
  background:transparent!important;border:0!important;padding:0!important;
  text-align:left;width:100%;cursor:pointer;font-family:var(--ui);color:inherit;
}

/* legacy hardcoded brand colours inside worker page CSS (not tokenised) */
.card a,form a,.ebody a{color:var(--ivory)!important;text-decoration:underline;text-decoration-color:var(--slate)}
.ecard .cat,span.cat{background:var(--obsidian)!important;color:var(--ivory)!important;border:0!important}

/* the worker's hero action links carry no class — give them the ghost outline
   so they read as controls rather than blending into the graphite */
.phero .wrap > a:not(.plogo):not(.btn),.heroactions a:not(.btn){
  background:transparent!important;color:var(--ivory)!important;
  border:1px solid var(--mist)!important;border-radius:var(--r-pill)!important;
  text-decoration:none!important;
}
.phero .wrap > a:not(.plogo):not(.btn):hover,.heroactions a:not(.btn):hover{
  background:var(--ivory)!important;color:var(--onyx)!important;
}

/* the "no photo" placeholder builds a gradient from the old tokens — flatten it */
.img.ph{background-image:none!important;background-color:var(--onyx)!important}
.img.ph .phlogo{opacity:.32}

/* Worker pages use .modal as the full-screen overlay and .box as the panel
   (static pages use .modal-overlay / .modal). Keep the scrim dim and let the
   .box carry the graphite lift, or the panel edge disappears. */
.modal.on{
  background:rgba(10,10,16,.78)!important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:0!important;border-radius:0!important;padding:24px!important;
}
.modal.on .box{
  background:var(--graphite)!important;border:1px solid var(--line)!important;
  border-radius:var(--r)!important;padding:28px!important;
}
.modal.on .cancel{
  padding:10px 20px!important;font-size:.9375rem;text-decoration:none!important;
}

/* gig date chip on music.html (only renders once live gig data loads) */
.gig .date{background:var(--obsidian)!important;border-radius:var(--r-sharp);color:var(--ivory)}
.gig .date .d{
  font-family:var(--display);font-weight:500;font-stretch:106%;
  color:var(--ivory);letter-spacing:.015em;
}
.gig .date .m,.gig .date .yr{
  color:var(--ash);font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
}

/* ==========================================================================
   PARALLAX
   Mercury's imagery direction is "cinematic full-bleed photography", so the
   photographic surfaces are the ones that get depth.

   Big photos use background-attachment:fixed — the image locks to the viewport
   while the section scrolls over it. That is the parallax people actually
   recognise, it needs no transform (so no zoom, no edge-reveal maths), and it
   works in Firefox too. iOS Safari ignores it and shows a static photo, which
   is a clean fallback.

   Smaller framed images (gallery, tiles) can't use fixed — a viewport-sized
   background inside a small box crops badly — so those drift via transform.

   Everything is inside prefers-reduced-motion: no-preference.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* --- locked photographic heroes ------------------------------------- */
  .hero-bg,.phero-bg{
    background-attachment:fixed;
    background-position:center center;
    background-size:cover;
    transform:none;
    animation:none;
  }

  /* the scrim was tuned for a static photo; lift it a little so there is
     actually an image visible to perceive moving */
  .hero-bg::after{
    background:linear-gradient(180deg,rgba(23,23,33,.58) 0%,rgba(23,23,33,.74) 55%,rgba(23,23,33,.93) 100%);
  }
  .phero-bg::after{
    background:linear-gradient(180deg,rgba(23,23,33,.48) 10%,rgba(23,23,33,.9));
  }

  /* the big about-panel photo gets the same treatment */
  /* layer order is gradient, photo — only the photo should lock, or the dark
     overlay gets sized to the viewport and reads inconsistently */
  .panel{background-attachment:scroll,fixed;background-position:center center,center center}

  /* --- framed images drift instead ------------------------------------ */
  @supports (animation-timeline: view()) {
    .gal figure{view-timeline:--mk-gal block}
    .gal figure img{
      animation:mk-drift-gal linear both;
      animation-timeline:--mk-gal;
      animation-range:cover 0% cover 100%;
      will-change:transform;
    }
    @keyframes mk-drift-gal{
      from{transform:translate3d(0,-9%,0) scale(1.28)}
      to{transform:translate3d(0,9%,0) scale(1.28)}
    }

    /* a named timeline declared on an element is only visible to its DESCENDANTS,
       so the tile animates on its own bare view() timeline instead */
    .tile{
      background-position:center 50%;
      animation:mk-drift-tile linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    @keyframes mk-drift-tile{
      from{background-position:center 22%}
      to{background-position:center 78%}
    }
  }
}

/* --- photographic section: the image shows through behind Community ------- */
/* Layer order is scrim then photo. Only the photo is fixed, so it parallaxes
   while the scrim stays put. The scrim is deliberately heavy (.92 → .88): the
   graphite cards sit on top opaque, but the section heading and lead sit
   directly on the photo and have to stay above 4.5:1 over its brightest area. */
#community{
  background-color:var(--onyx)!important;
  background-image:
    linear-gradient(180deg,rgba(23,23,33,.74) 0%,rgba(23,23,33,.70) 45%,rgba(23,23,33,.86) 100%),
    url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Campbell_Park%2C_Milton_Keynes.jpg/1920px-Campbell_Park%2C_Milton_Keynes.jpg')!important;
  background-size:cover,cover;
  background-position:center center,center center;
  background-repeat:no-repeat,no-repeat;
}
@media (prefers-reduced-motion: no-preference){
  #community{background-attachment:scroll,fixed}
}

/* Text sitting directly on the Community photo can't rely on the automated
   contrast sweep (it skips anything over an image), so it is set by hand.
   Worst case is the photo's brightest area — a near-white sky — compositing
   through the .74 scrim to roughly #535353. Ash (#c3c3cc) lands at ~4.3:1
   there, under AA, so the copy on the photo goes brighter. Card interiors are
   opaque graphite and keep the normal Ash. */
#community > .wrap > .section-head .lead{color:var(--ivory)}
#community > .wrap > .section-head .eyebrow{color:var(--pale)}

/* --- Pop-ups built as an overlay holding a .box (classifieds, Best of MK) --
   Elsewhere .modal is the dialog itself, so only restyle .modal as a dialog
   when it does not wrap a .box; when it does, it is the dimmed overlay. */
.modal:has(> .box){
  background:rgba(10,10,16,.78)!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;padding:18px!important;
}
.modal .box{
  background:var(--graphite)!important;border:1px solid var(--line);border-radius:var(--r);
  color:var(--ivory);box-shadow:none;
}
.modal .box p{color:var(--ash)}

/* --- Best of MK (Worker-rendered: /best-of and each category) ------------- */
a.cat,.place{
  background:var(--graphite)!important;border:1px solid var(--line)!important;
  border-radius:var(--r)!important;box-shadow:none!important;color:var(--ivory);
}
a.cat:hover{background:var(--obsidian)!important;transform:none}
a.cat .cnt,.place .area{color:var(--ash)!important}
.place .blurb{color:var(--ivory)!important}
.place.win{border-color:var(--cobalt)!important;box-shadow:0 0 0 1px var(--cobalt)!important}
.rank{color:var(--pale)!important}
.pphoto{background:var(--obsidian)!important}

/* ---------- Shop (/shop, rendered by _worker.js) ---------------------------- */
.pcard,.soon,.support{
  background:var(--graphite)!important;border:0!important;
  border-radius:var(--r)!important;box-shadow:none!important;
}
.soon{border:1px dashed var(--slate)!important}
.pcard.featured{outline:1px solid var(--pale)}
.pcard .pimg{background:var(--obsidian);border-bottom:0}
.pcard h3,.soon h3,.support h2{font-size:1.125rem;font-weight:500;letter-spacing:.015em;color:var(--ivory)}
.pcard .desc,.soon p,.support p,.aff,.disclose,.crumbs{color:var(--ash)}
.support a,.crumbs a{color:var(--ivory);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--slate)}
.pcard .cat,.soon .cat{background:var(--obsidian);color:var(--ash)}
.pcard .star{background:var(--pale);color:var(--onyx)}
.buy{background:var(--cobalt)!important;color:#fff!important;font-weight:400;border-radius:var(--r-btn)}
.buy:hover{background:var(--cobalt-hover)!important}

/* ---------- Touch devices: no fixed backgrounds -----------------------------
   iPad and iPhone Safari do not support background-attachment:fixed. They size
   the photo to the whole page instead of the screen, so the hero shows little
   more than its dark overlay. On touch screens the photos scroll normally. */
@media (hover: none), (pointer: coarse) {
  .hero-bg,.phero-bg{background-attachment:scroll}
  .panel{background-attachment:scroll,scroll}
}
@supports (-webkit-touch-callout: none) {   /* iOS/iPadOS Safari, even with a trackpad */
  .hero-bg,.phero-bg{background-attachment:scroll}
  .panel{background-attachment:scroll,scroll}
}