/* PlugServices prototype — shared styles */
:root{
  --ink:#1a1230;--plum:#2d1b52;--grape:#4c2a86;--amber:#f5a623;--flame:#c93f1c;
  --terra:#e6532c;--cream:#fff8f0;--paper:#fff;--muted:#6b6280;--line:#ece5f2;--green:#1f9d6b;
  --radius:16px;--shadow:0 10px 30px rgba(35,18,70,.10);--shadow-lg:0 20px 50px rgba(35,18,70,.18);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);background:var(--cream);line-height:1.5;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.pill{display:inline-block;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.3px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font-family:var(--font);font-weight:700;border-radius:999px;padding:12px 22px;font-size:15px;transition:.15s;text-align:center}
.btn-flame{background:var(--flame);color:#fff}.btn-flame:hover{background:#a83415}
.btn-ghost{background:transparent;border:2px solid rgba(255,255,255,.55);color:#fff}.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:#000}
.btn-outline{background:#fff;border:2px solid var(--grape);color:var(--grape)}.btn-outline:hover{background:var(--grape);color:#fff}
.btn-sm{padding:9px 16px;font-size:13px}
.btn-lg{padding:15px 30px;font-size:17px}
.center{text-align:center}

/* NAV */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,248,240,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:22px;height:80px;position:relative}
.logo{display:flex;align-items:center;gap:12px;font-weight:900;font-size:27px;letter-spacing:-.5px}
.logo img{width:48px;height:48px;border-radius:11px;object-fit:cover}
.logo b{color:var(--grape)}
.logo .wordmark{white-space:nowrap;letter-spacing:-.5px}
.logo .wordmark b{margin:0;padding:0}
.nav-links{display:flex;flex-wrap:nowrap;white-space:nowrap;min-width:0;gap:20px;margin-left:6px;font-weight:600;font-size:15px;color:var(--plum)}
/* FR (Google Translate) — keep menu on one line: shrink text/gaps when page is translated */
@media(min-width:901px){
  html.translated-ltr .nav-in{gap:14px}
  html.translated-ltr .nav-links{gap:11px;font-size:13px}
  html.translated-ltr .listbtn{padding:8px 12px;font-size:12.5px}
  html.translated-ltr .logo{font-size:23px}
}
@media(min-width:901px) and (max-width:1200px){
  html.translated-ltr .nav-links{gap:9px;font-size:12px}
  html.translated-ltr .listbtn .ll-full{display:none}
  html.translated-ltr .listbtn .ll-short{display:inline}
}
.nav-links a:hover,.nav-links a.active{color:var(--flame)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.lang{font-weight:800;font-size:13px;color:var(--muted);white-space:nowrap}
.lang a{color:var(--muted);padding:0 1px}
.lang a.on,.lang a:hover{color:var(--flame)}
.hamb{display:none;background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--grape)}
.listbtn .ll-short{display:none}
#google_translate_element{position:fixed;left:-9999px;top:0}
.cartbtn{position:relative;font-size:20px;cursor:pointer}
.cartbtn .count{position:absolute;top:-8px;right:-10px;background:var(--flame);color:#fff;font-size:11px;font-weight:800;border-radius:999px;padding:1px 6px}
@media(max-width:900px){
  .hamb{display:block}
  .logo{font-size:25px}
  .logo img{width:48px;height:48px}
  .nav-links{position:absolute;top:100%;left:0;right:0;background:var(--cream);flex-direction:column;gap:0;padding:6px 22px 14px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 2px;border-bottom:1px solid var(--line);font-size:16px}
  .nav-links a:last-child{border-bottom:0}
  .listbtn{display:inline-flex;padding:8px 12px;font-size:13px}
  .listbtn .ll-full{display:none}
  .listbtn .ll-short{display:inline}
  .logo{font-size:24px;gap:9px}
  .logo img{width:48px;height:48px}
  .nav-right{gap:9px}
}

/* HERO */
.hero{position:relative;isolation:isolate;color:#fff;overflow:hidden;background:
  radial-gradient(1200px 500px at 80% -10%,rgba(245,166,35,.35),transparent 60%),
  radial-gradient(900px 500px at 0% 120%,rgba(240,86,46,.45),transparent 55%),
  linear-gradient(135deg,#2d1b52 0%,#1a1230 60%,#3a1a3f 100%)}
/* v186: the stripes were painted OVER the hero's contents (an absolute ::after
   comes after static children). isolation + z-index:-1 keeps them above the
   hero background but behind everything in it. */
.hero:after{content:"";position:absolute;inset:0;z-index:-1;opacity:.09;background-image:repeating-linear-gradient(45deg,#fff 0 2px,transparent 2px 14px);pointer-events:none}
.hero-in{position:relative;padding:64px 0 30px}
.kente{height:8px;width:100%;background:linear-gradient(90deg,var(--flame) 0 20%,var(--amber) 20% 40%,var(--green) 40% 60%,var(--grape) 60% 80%,var(--terra) 80% 100%)}
.hero h1{font-size:52px;line-height:1.05;letter-spacing:-1.5px;max-width:820px;font-weight:900}
.hero h1 span{color:var(--amber)}
.hero p.sub{margin-top:16px;font-size:19px;max-width:620px;color:#f3ecff;opacity:.92}
.hero .tags{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.hero .tags .pill{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.22)}
@media(max-width:760px){.hero h1{font-size:34px}}

/* SEARCH */
.searchbar{margin-top:28px;background:#fff;border-radius:999px;box-shadow:var(--shadow-lg);display:flex;align-items:center;padding:8px 8px 8px 22px;max-width:900px}
.searchbar .field{display:flex;flex-direction:column;padding:6px 18px;border-right:1px solid var(--line);flex:1}
.searchbar .field.lastfield{border-right:0}
.searchbar label{font-size:11px;font-weight:800;letter-spacing:.5px;color:var(--muted);text-transform:uppercase}
.searchbar input,.searchbar select{border:0;outline:0;font-family:var(--font);font-size:15px;font-weight:600;color:var(--ink);background:transparent;padding:2px 0}
.searchbar .go{margin-left:auto}
@media(max-width:760px){.searchbar{flex-direction:column;border-radius:22px;align-items:stretch;padding:10px}.searchbar .field{border-right:0;border-bottom:1px solid var(--line);padding:12px}.searchbar .go{margin:10px 0 4px}}

/* v187: the "Almost gone" filter (site.js v129, #evGone) borrowed .chip, which is
   white-on-glass for DARK backgrounds. On /events the filter row sits on the
   light page, so it read as white on near-white. It now matches the Any date /
   Any price selects beside it, on every page; active = flame, like .chips-light. */
#evGone{background:#fff;color:var(--ink);border:1px solid #e4d9f5;border-radius:12px;min-height:45px;padding:11px 16px}
#evGone.active{background:var(--flame);color:#fff;border-color:var(--flame)}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.chip{padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;font-weight:700;font-size:14px;cursor:pointer;transition:.15s}
.chip:hover,.chip.active{background:var(--amber);color:var(--ink);border-color:var(--amber)}
/* light chips (on cream) */
.chips-light .chip{background:#fff;border:1px solid var(--line);color:var(--plum)}
.chips-light .chip:hover,.chips-light .chip.active{background:var(--flame);color:#fff;border-color:var(--flame)}

section{padding:52px 0}
.sec-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:22px;gap:16px;flex-wrap:wrap}
.sec-head h2{font-size:28px;letter-spacing:-.6px;font-weight:900}
.sec-head a{color:var(--flame);font-weight:800;font-size:14px}
.eyebrow{color:var(--flame);font-weight:800;letter-spacing:.5px;text-transform:uppercase;font-size:13px}

/* CATEGORY TILES */
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.cat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 12px;text-align:center;cursor:pointer;transition:.15s}
.cat:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
.cat .emo{font-size:28px}.cat .nm{margin-top:8px;font-weight:800;font-size:14px}.cat .ct{font-size:12px;color:var(--muted)}
@media(max-width:860px){.cats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.cats{grid-template-columns:repeat(2,1fr)}}

/* EVENT CARDS */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.grid.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.grid,.grid.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid,.grid.g3{grid-template-columns:1fr}}
.card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:.18s;border:1px solid var(--line);display:block}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.card .thumb{height:170px;position:relative;overflow:hidden;background:#2d1b52}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .datebadge{position:absolute;top:12px;left:12px;background:#fff;border-radius:10px;text-align:center;width:52px;padding:6px 0;box-shadow:var(--shadow);line-height:1}
.card .datebadge .m{font-size:11px;font-weight:800;text-transform:uppercase;color:var(--flame)}
.card .datebadge .d{font-size:20px;font-weight:900;color:var(--ink)}
.card .fav{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;font-size:16px}
.card .body{padding:14px 16px 18px}
.card .catlab{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--flame)}
.card h3{font-size:17px;margin:6px 0;letter-spacing:-.3px;font-weight:800;line-height:1.2;color:var(--ink)}
.card .meta{font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
.card .foot{display:flex;align-items:center;justify-content:space-between}
.card .price{font-weight:900}.card .price small{color:var(--muted);font-weight:600;font-size:12px}

/* ORGANIZER BAND */
.band{background:linear-gradient(135deg,#2d1b52,#1a1230);color:#fff;border-radius:24px;padding:44px;position:relative;overflow:hidden}
.band:before{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(245,166,35,.4),transparent 70%)}
.band h2{font-size:30px;font-weight:900;letter-spacing:-.6px;position:relative}
.band p{margin-top:10px;color:#e9e1ff;max-width:560px;position:relative}
.band .stats{display:flex;gap:34px;margin-top:22px;position:relative;flex-wrap:wrap}
.band .stats b{font-size:26px;color:var(--amber);display:block}.band .stats span{font-size:13px;color:#cfc4ea}

/* VALUES */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.value{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.value .emo{font-size:26px}.value h4{margin:10px 0 6px;font-size:17px;font-weight:800}.value p{font-size:14px;color:var(--muted)}
@media(max-width:760px){.values{grid-template-columns:1fr}}

/* PAGE HEADER (interior pages) */
.phead{background:linear-gradient(135deg,#2d1b52,#1a1230);color:#fff;padding:48px 0 40px;position:relative;overflow:hidden}
.phead:after{content:"";position:absolute;inset:0;opacity:.08;background-image:repeating-linear-gradient(45deg,#fff 0 2px,transparent 2px 14px)}
.phead h1{font-size:40px;font-weight:900;letter-spacing:-1px;position:relative;line-height:1.12}
@media(max-width:600px){.phead h1{font-size:30px}}
.phead p{margin-top:8px;color:#e9e1ff;max-width:640px;position:relative}
.crumb{font-size:13px;color:#cbbff0;margin-bottom:8px;position:relative}
.crumb a:hover{color:#fff}

/* PROSE */
.prose{max-width:820px}
.prose h2{font-size:24px;margin:26px 0 10px;color:var(--grape)}
.prose h3{font-size:18px;margin:20px 0 8px}
.prose p{margin-bottom:12px;color:#3a3350}
.prose ul{margin:0 0 14px 22px}.prose li{margin-bottom:6px;color:#3a3350}
.card-flat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}

/* EVENT DETAIL */
.evhero{display:grid;grid-template-columns:1.6fr 1fr;gap:26px;margin-top:26px}
@media(max-width:900px){.evhero{grid-template-columns:1fr}}
.evmain img.cover{display:block;width:auto;max-width:100%;max-height:560px;margin:0 auto;object-fit:contain;background:#f4eefb;border-radius:var(--radius);border:1px solid var(--line)}
.ticketbox{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;position:sticky;top:88px}
.tier{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.tier .n{font-weight:800}.tier .p{color:var(--muted);font-size:13px}
.qty{display:flex;align-items:center;gap:10px}
.qty button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#fff;font-size:18px;cursor:pointer;font-weight:800}
.qty span{min-width:20px;text-align:center;font-weight:800}
.totrow{display:flex;justify-content:space-between;font-weight:900;font-size:18px;margin:14px 0}

/* GALLERY */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery img{width:100%;height:200px;object-fit:cover;object-position:50% 18%;background:#F3EADF;border-radius:12px;display:block}
@media(max-width:900px){.gallery{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.gallery{grid-template-columns:repeat(2,1fr)}.gallery img{height:150px}}
.gallery img{cursor:pointer;transition:.15s}
.gallery img:hover{transform:scale(1.02);box-shadow:var(--shadow)}
.lightbox{position:fixed;inset:0;background:rgba(15,8,30,.88);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.lightbox.open{display:flex}
.lightbox img{max-width:90%;max-height:86vh;border-radius:12px}
.lightbox .x{position:absolute;top:18px;right:24px;color:#fff;font-size:34px;cursor:pointer;font-weight:300}

/* PARTNERS */
.plogos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:800px){.plogos{grid-template-columns:repeat(2,1fr)}}
.plogo{background:#fff;border:1px solid var(--line);border-radius:var(--radius);height:170px;display:grid;place-items:center;text-align:center;padding:14px;transition:.15s}
.plogo:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.plogo .ph{width:64px;height:64px;border-radius:14px;background:linear-gradient(135deg,var(--grape),var(--flame));display:grid;place-items:center;color:#fff;font-weight:900;font-size:22px;margin:0 auto 8px}
.plogo .pn{font-weight:800;font-size:14px}.plogo .pt{font-size:12px;color:var(--muted)}
.plogo-img{display:none;max-width:94%;max-height:135px;object-fit:contain;margin:0 auto}

/* FORMS */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;max-width:760px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.form .row{grid-template-columns:1fr}}
.form label{display:block;font-weight:700;font-size:14px;margin:14px 0 6px}
.form input,.form select,.form textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-family:var(--font);font-size:15px;background:var(--cream)}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--amber);background:#fff}
.form textarea{min-height:110px;resize:vertical}
.hint{font-size:13px;color:var(--muted);margin-top:4px}
.ok{background:#e9f9f1;border:1px solid var(--green);color:#0d6b45;border-radius:12px;padding:14px 16px;margin-top:16px;display:none}
.ok.show{display:block}

/* CHECKOUT */
.cols{display:grid;grid-template-columns:1.4fr 1fr;gap:26px;margin-top:26px}
@media(max-width:900px){.cols{grid-template-columns:1fr}}
.summary{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;position:sticky;top:88px}
.summary .li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--line);font-size:14px}
.demoflag{background:#fff4e0;border:1px dashed var(--amber);border-radius:12px;padding:12px 16px;font-size:13px;color:#7a5a12;margin:16px 0}
.explain{background:#f3eefc;border:1px solid #e0d3f5;border-radius:var(--radius);padding:22px;margin-top:20px}
.explain h3{color:var(--grape);margin-bottom:8px}
.explain ol{margin-left:20px}.explain li{margin-bottom:8px}

/* FOOTER */
footer.site{background:var(--ink);color:#cfc4ea;padding:50px 0 26px;margin-top:20px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:24px}
footer.site h5{color:#fff;font-size:14px;margin-bottom:12px;letter-spacing:.4px}
footer.site a{display:block;font-size:14px;padding:4px 0;color:#b7abd6}
footer.site a:hover{color:var(--amber)}
.fbrand{max-width:290px}.fbrand p{font-size:14px;margin-top:10px;color:#a99fc9}
.fbot{border-top:1px solid rgba(255,255,255,.1);margin-top:30px;padding-top:18px;font-size:13px;color:#8f85ad;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.fbot a{color:#8f85ad}.fbot a:hover{color:var(--amber)}
@media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr}.fbrand{grid-column:1 / -1;max-width:none;text-align:center}.fbrand .logo{justify-content:center}.fbrand a[href*="whatsapp.com"]:not(.wa){margin:14px auto 4px}}

.note{background:#fff4e0;border:1px dashed var(--amber);border-radius:14px;padding:13px 18px;font-size:13px;color:#7a5a12}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--ink);color:#fff;padding:14px 22px;border-radius:999px;font-weight:700;box-shadow:var(--shadow-lg);transition:.3s;z-index:200}
.toast.show{transform:translateX(-50%) translateY(0)}

/* sample tag on cards */
.sampletag{position:absolute;top:12px;right:12px;background:var(--grape);color:#fff;font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:4px 8px;border-radius:8px;z-index:2}
.card .fav{cursor:pointer;z-index:3;user-select:none;transition:.15s}
.card .fav.on{background:#fff}
@media(max-width:640px){.card .fav{width:40px;height:40px;font-size:18px}}
.card .sampletag + .fav{display:none}

/* FAQ accordion */
.faqwrap{max-width:860px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;cursor:pointer;font-weight:800;font-size:16px}
.faq-q .ico{color:var(--flame);font-size:22px;transition:.2s;flex:0 0 auto}
.faq-item.open .faq-q .ico{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;padding:0 20px}
.faq-item.open .faq-a{max-height:400px;padding:0 20px 18px}
.faq-a p{color:#3a3350;font-size:15px}
.faqtabs{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}

/* footer legal one line */
.flegal{white-space:nowrap}
.flegal a{display:inline}

/* Google Translate widget cleanup */
.goog-te-banner-frame,.skiptranslate iframe{display:none!important}
body{top:0!important}
.goog-te-gadget{font-size:0!important;color:transparent}
.goog-tooltip,.goog-te-balloon-frame{display:none!important}
font.goog-text-highlight{background:none!important;box-shadow:none!important}

/* ---- v5: mobile header fixes (EN/FR overlap) ---- */
.logo{flex-shrink:0}
.nav-right{flex-shrink:0}
@media(max-width:640px){
  .nav-in{gap:10px;height:64px}
  .logo img{width:48px;height:48px}
  .wordmark{font-size:22px;letter-spacing:-.4px}
  .nav-right{gap:8px}
  .lang{font-size:11px;background:#f6eee3;border:1px solid var(--line);border-radius:999px;padding:4px 9px;line-height:1}
  .listbtn{padding:9px 11px;font-size:13px}
  .hamb{font-size:24px}
}
@media(max-width:380px){
  .wordmark{font-size:19px;letter-spacing:-.3px}
  .logo{gap:6px}
  .logo img{width:30px;height:30px}
  .lang{padding:3px 6px;font-size:10px}
  .listbtn{padding:8px 9px;font-size:12px}
  .nav-in{gap:7px}
}
/* ---- v5: past events ---- */
#pastWrap .card .btn{background:var(--grape)}
#pastWrap .card{opacity:.85}
/* ---- v5: gallery page ---- */
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gal-grid img{width:100%;height:210px;object-fit:cover;object-position:50% 25%;border-radius:12px;cursor:pointer;display:block;background:#F3EADF}
@media(max-width:900px){.gal-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.gal-grid{grid-template-columns:repeat(2,1fr)}.gal-grid img{height:160px}}
.consent{display:flex;gap:8px;align-items:flex-start;margin-top:14px;font-weight:500;font-size:14px}
.consent input{width:auto;margin-top:4px}
.privacy-clause{font-size:12.5px;color:var(--muted);margin-top:14px;line-height:1.55}

/* ---- v9: header cart button ---- */
.cartbtn2{position:relative;font-size:20px;line-height:1;display:inline-flex;align-items:center;padding:4px}
.cartbtn2 .count{position:absolute;top:-7px;right:-9px;background:var(--flame);color:#fff;font-size:10px;font-weight:800;border-radius:999px;padding:1px 5px;line-height:1.4}
@media(max-width:380px){.cartbtn2{font-size:18px}}

/* ---- v10: mobile hero — breathing room + centered ---- */
@media(max-width:640px){
  .hero-in{padding:44px 8px 26px;text-align:center}
  .hero h1{margin-left:auto;margin-right:auto}
  .hero p.sub{margin-left:auto;margin-right:auto}
  .hero .tags{justify-content:center}
  .chips{justify-content:center}
  .searchbar{margin-left:auto;margin-right:auto}
}

/* FR translate: Google strips spaces around notranslate spans — restore breathing room */
html.translated-ltr p [translate="no"],html.translated-ltr li [translate="no"],
html.translated-ltr h1 [translate="no"],html.translated-ltr h2 [translate="no"],
html.translated-ltr h3 [translate="no"],html.translated-ltr blockquote [translate="no"]{margin:0 .22em}
html.translated-ltr p [translate="no"]:first-child,html.translated-ltr li [translate="no"]:first-child{margin-left:0}

/* ================= v20: badges, discovery bar, organizer pages ================= */
.badgerow{position:absolute;left:10px;bottom:10px;display:flex;gap:6px;flex-wrap:wrap;z-index:3}
.ebadge{font-size:11px;font-weight:900;letter-spacing:.2px;padding:4px 9px;border-radius:999px;
  background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(26,18,48,.18);white-space:nowrap}
.ebadge.b-hot{background:var(--flame);color:#fff}
.ebadge.b-warm{background:var(--amber,#F5A623);color:#241a52}
.ebadge.b-new{background:var(--green,#1F9D6B);color:#fff}
.ebadge.b-out{background:#6b6480;color:#fff}
.orgline{font-size:12.5px;font-weight:700;color:var(--muted);margin:2px 0 6px;display:flex;align-items:center;gap:5px}
.vtick{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;
  background:var(--green,#1F9D6B);color:#fff;font-size:10px;font-weight:900;line-height:1}
.vtick.big{width:26px;height:26px;font-size:15px;vertical-align:middle}

/* discovery bar */
.discovery{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 6px}
.searchwrap{position:relative;flex:1 1 280px;min-width:220px}
.searchwrap input{width:100%;padding:11px 14px 11px 38px;border:1.5px solid #e4d9f5;border-radius:12px;
  font:inherit;font-size:14.5px;background:#fff;color:var(--ink)}
.searchwrap input:focus{outline:none;border-color:var(--flame);box-shadow:0 0 0 3px rgba(240,86,46,.14)}
.searchwrap .mag{position:absolute;left:13px;top:50%;transform:translateY(-50%);opacity:.5;font-size:15px}
.discovery select{padding:11px 12px;border:1.5px solid #e4d9f5;border-radius:12px;font:inherit;
  font-size:14px;background:#fff;color:var(--ink);font-weight:700}
.nearbtn{padding:11px 15px;border:1.5px solid var(--grape);background:#fff;color:var(--grape);
  border-radius:12px;font:inherit;font-size:14px;font-weight:800;cursor:pointer;white-space:nowrap}
.nearbtn:hover{background:var(--grape);color:#fff}
.nearbtn.busy{opacity:.6;pointer-events:none}
.resultbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 0}
.resultbar .cnt{font-weight:800;color:var(--muted);font-size:13.5px}
.resultbar .clr{background:none;border:none;color:var(--flame);font-weight:800;font-size:13.5px;cursor:pointer;font-family:inherit}

/* trust strip */
.trustbar{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:12px;
  font-size:12px;font-weight:700;color:var(--muted)}
.trustbar span{display:flex;align-items:center;gap:5px}

/* email capture */
.subscribe{background:linear-gradient(135deg,var(--grape),#2c1a52);border-radius:20px;padding:30px 26px;color:#fff;
  display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.subscribe h3{color:#fff;font-size:22px;margin:0 0 6px;letter-spacing:-.4px}
.subscribe p{color:#e2d8ff;margin:0;font-size:14.5px;max-width:520px}
.subform{display:flex;gap:8px;flex-wrap:wrap}
.subform input,.subform select{padding:12px 14px;border:0;border-radius:11px;font:inherit;font-size:14.5px;min-width:180px}
.subform button{white-space:nowrap}
.subok{display:none;background:rgba(255,255,255,.16);border-radius:11px;padding:11px 14px;font-weight:700;font-size:14px}
.subok.show{display:block}

/* organizer page */
.orghero{background:linear-gradient(135deg,var(--grape),#2c1a52);color:#fff;padding:34px 0 32px}
.orgtop{display:flex;gap:22px;align-items:center;margin-top:12px;flex-wrap:wrap}
.orgavatar{width:96px;height:96px;border-radius:24px;overflow:hidden;background:rgba(255,255,255,.14);
  display:grid;place-items:center;flex:0 0 auto;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.orgavatar img{width:100%;height:100%;object-fit:cover}
.orgavatar span{font-size:34px;font-weight:900;color:#fff}
.orghero h1{color:#fff;font-size:32px;letter-spacing:-1px;margin:0 0 6px}
.orghero p{color:#e2d8ff;font-weight:600;margin:0}
.orgstats{display:flex;gap:24px;margin-top:14px;flex-wrap:wrap}
.orgstats b{display:block;font-size:22px;color:var(--amber,#F5A623)}
.orgstats span{font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:#d9ceff}
@media(max-width:680px){
  .orghero h1{font-size:24px}.orgavatar{width:70px;height:70px;border-radius:18px}
  .orgavatar span{font-size:24px}.subscribe{padding:22px 18px}
  .discovery{gap:8px}.discovery select,.nearbtn{flex:1 1 46%}
}

/* v23: single hero search (city/type/date moved down to the results filters) */
.herosearch{max-width:760px}
.herosearch .field{flex:1 1 auto;min-width:0}
.herosearch input{width:100%}
.herohint{margin:10px 0 0;font-size:13px;color:#e2d8ff;font-weight:600}
@media(max-width:680px){ .herohint{font-size:12.5px} }

/* v24: Organizer Login link in the main nav */
.nav-links a.orglogin{
  color:var(--grape);font-weight:800;border:1.5px solid #e4d9f5;border-radius:999px;
  padding:6px 14px;margin-left:6px;white-space:nowrap;
}
.nav-links a.orglogin:hover{background:var(--grape);color:#fff;border-color:var(--grape)}
@media(max-width:1024px){ .nav-links a.orglogin{border:0;padding:0;margin-left:0;border-radius:0} }

/* v25: centered login bar under the main menu */
.loginbar{background:#fff;border-top:1px solid #f3eefc;border-bottom:1px solid #eee}
.loginbar-in{display:flex;justify-content:center;gap:14px;padding:8px 0}
.lbtn{font-weight:800;font-size:13.5px;border-radius:999px;padding:7px 18px;white-space:nowrap;border:1.5px solid transparent}
.lbtn-org{color:var(--grape);border-color:#e4d9f5;background:#faf8fd}
.lbtn-org:hover{background:var(--grape);color:#fff}
.lbtn-guest{color:var(--green,#1F9D6B);border-color:#cdeadd;background:#f4fbf8}
.lbtn-guest:hover{background:var(--green,#1F9D6B);color:#fff}
@media(max-width:480px){.loginbar-in{gap:8px}.lbtn{font-size:12.5px;padding:6px 13px}}

/* ================= v56: MOBILE SAFETY — nothing off-screen, comfortable gutters ================= */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}

/* The header row used to overflow the viewport, pushing ☰ off-screen. */
@media(max-width:900px){
  .wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
  .nav-in{min-width:0;gap:8px}
  .logo{min-width:0;flex-shrink:1;overflow:hidden}
  .logo .wordmark{overflow:hidden;text-overflow:ellipsis;min-width:0}
  .nav-right{min-width:0;flex-shrink:0;gap:6px}
  /* 44x44 minimum tap targets (Apple HIG) */
  .hamb{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;font-size:25px;padding:0;flex-shrink:0}
  .cartbtn2{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;flex-shrink:0}
  .nav-links a{padding:15px 2px}
  .loginbar-in{padding-left:0;padding-right:0}
}
/* "List your event" is already in the drawer menu — drop the duplicate button. */
@media(max-width:620px){ .nav-right .listbtn{display:none} }
@media(max-width:420px){
  .wrap{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .nav-in{gap:6px}
  .lang{padding:4px 7px;font-size:10.5px}
}
/* Wide children must never push the page sideways. */
@media(max-width:900px){
  .chips,.tags,.cats,.grid,.plogos,.gal-grid,.gallery,.fgrid,.cols,.values{max-width:100%}
  .chips,.tags{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .chips::-webkit-scrollbar,.tags::-webkit-scrollbar{display:none}
  table{display:block;overflow-x:auto;max-width:100%}
  pre,code{white-space:pre-wrap;word-break:break-word}
  .prose a{word-break:break-word}
}
/* Breathing room between stacked call-to-action buttons on phones. */
@media(max-width:640px){
  .btn+.btn{margin-top:10px}
  .btn-lg{padding:16px 26px}
}



/* ================= v57: honest empty state (replaces fake "sample" listings) ================= */
.emptystate{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:38px 28px;text-align:center;box-shadow:var(--shadow)}
.emptystate .es-ico{font-size:38px;line-height:1;margin-bottom:12px}
.emptystate h3{font-size:21px;font-weight:800;color:var(--ink);margin:0}
.emptystate p{color:var(--muted);font-size:15px}
.es-notify{margin:24px auto 0;max-width:470px;text-align:left}
.es-notify label{display:block;font-weight:700;font-size:14.5px;color:var(--ink);margin-bottom:9px;text-align:center}
.es-row{display:flex;gap:10px}
.es-row input{flex:1;min-width:0;border:1px solid var(--line);border-radius:999px;padding:14px 18px;font-size:16px;font-family:var(--font);background:#fff}
.es-row input:focus{outline:2px solid var(--grape);outline-offset:1px}
.es-row .btn{flex-shrink:0}
.es-msg{margin:10px 0 0;font-size:13.5px;text-align:center;min-height:19px}
.es-msg.ok{color:var(--green);font-weight:700}
.es-msg.err{color:var(--flame);font-weight:700}
.es-org{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:14.5px}
.es-org a{color:var(--flame);font-weight:800}
@media(max-width:520px){
  .emptystate{padding:30px 18px}
  .es-row{flex-direction:column}
  .es-row .btn{width:100%}
}

/* ---- v57: buyer guarantee + trust strip ---- */
.guarantee{display:flex;gap:12px;align-items:flex-start;background:#F3FBF7;border:1px solid #CBEBDC;border-radius:14px;padding:15px 17px;margin:16px 0}
.guarantee .g-ico{font-size:22px;line-height:1.2;flex-shrink:0}
.guarantee b{display:block;font-size:14.5px;color:#14724F;margin-bottom:3px}
.guarantee span{font-size:13.5px;color:#276B52;line-height:1.55}
.guarantee a{color:#14724F;font-weight:800;text-decoration:underline}
.evfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:18px 0}
.evfact{background:#fff;border:1px solid var(--line);border-radius:13px;padding:14px 16px}
.evfact .k{font-size:11.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)}
.evfact .v{font-size:15px;font-weight:700;color:var(--ink);margin-top:4px;line-height:1.4}

/* ================= v60: FOLLOW US — real brand tiles =================
   The v56 version lost a specificity fight with `footer.site a{color:#b7abd6}`
   and rendered washed-out lavender on a near-black footer. Everything below is
   scoped under `footer.site` so it wins, and uses each platform's own colour so
   the icons are recognisable at a glance on desktop and phone. */
footer.site .fsoc-h{
  display:block;font-size:11.5px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--amber);margin:22px 0 12px;padding:0}
/* v65: STACKED TILES. The previous pill layout used flex:1 1 0 with
   text-overflow:ellipsis, so in a narrow footer column the three labels
   truncated to "Facel" / "Insta" / "What". Nothing here constrains width or
   clips text, so the words render in full at every viewport, on one line. */
footer.site .fsocial{
  display:flex;flex-wrap:nowrap;gap:20px;margin:0;
  align-items:flex-start;justify-content:flex-start}
footer.site .fsocial a{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:9px;flex:0 0 auto;min-width:52px;padding:0 2px;
  background:none;border:0;border-radius:12px;
  font-size:11.5px;font-weight:800;letter-spacing:.2px;line-height:1.2;
  color:rgba(255,255,255,.84);text-decoration:none;text-align:center;white-space:nowrap;
  transition:transform .15s,color .15s}
footer.site .fsocial a:hover,footer.site .fsocial a:focus-visible{color:#fff;transform:translateY(-2px)}
footer.site .fsocial a:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
/* the coloured tile that carries the glyph */
footer.site .fsocial .ficon{
  width:46px;height:46px;flex:0 0 46px;border-radius:999px;margin:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.28);transition:box-shadow .15s,transform .15s}
footer.site .fsocial a:hover .ficon{box-shadow:0 8px 20px rgba(0,0,0,.42)}
footer.site .fsocial .ficon svg{width:22px;height:22px;display:block;fill:#fff}
footer.site .fsocial .fb .ficon{background:#1877F2}
footer.site .fsocial .ig .ficon{
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
footer.site .fsocial .wa .ficon{background:#25D366}
@media(max-width:760px){
  footer.site .fsocial{justify-content:center;gap:26px}
  footer.site .fsoc-h{text-align:center}
}
@media(max-width:360px){
  footer.site .fsocial{gap:18px}
}

/* ================= v60: mobile comfort pass =================
   Measured before this block, at 375px: gutters 16px, 28-34 controls per page
   below the 44px minimum, and EVERY form input under 16px (which makes iOS zoom
   the whole page the moment a buyer taps a field). */
@media(max-width:900px){
  /* More breathing room at the edges than the 16-20px we had. */
  .wrap{padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
  /* 16px is the threshold below which iOS Safari zooms on focus. */
  input:not([type=checkbox]):not([type=radio]),select,textarea,
  .searchbar input,.searchbar select,#evSearch,#evWhen,#evSort,.form input,.form select,.form textarea{
    font-size:16px!important}
  input:not([type=checkbox]):not([type=radio]),select,textarea{min-height:48px}
  /* EN / FR was 16x14px - not tappable. */
  .lang{padding:0}
  .lang a{display:inline-block;min-width:34px;min-height:34px;line-height:34px;text-align:center;padding:0 2px}
  .cartbtn2{width:44px;height:44px}
  .fav{width:44px;height:44px}
}
@media(max-width:420px){
  .wrap{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
}
/* Visible focus ring everywhere - keyboard users could not see where they were. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.chip:focus-visible{
  outline:3px solid var(--grape);outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ===== v60.1: measured follow-ups =====
   contact.html: .form measured 362px wide inside a 356px viewport (right edge
   380) — it overflowed by 24px because nothing capped it at the parent width. */
@media(max-width:900px){
  .form,.card-flat,.band,.prose,.cols,.values,.evhero{
    max-width:100%!important;width:100%!important;box-sizing:border-box}
  .form{padding-left:18px!important;padding-right:18px!important}
  .card-flat{padding-left:18px!important;padding-right:18px!important}
  .form .row,.cols,.values{grid-template-columns:1fr!important}
  .form .row > *,.cols > *,.values > *{min-width:0}
}
/* A touch more air at the smallest sizes than the 18px we had. */
@media(max-width:420px){
  .wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
}



/* ===== v64: sweep corrections (measured at 375px) =====
   1. Social row: anchors measured 66/66/48px tall, so the third dropped out of
      line (tops 10422/10422/10436) even though the row was nowrap. A rigid
      3-cell grid makes them identical and guarantees one line.
   2. EN/FR toggle measured 34x34 — still under the 44px minimum.
   3. Main-site gutters are 20px; portals were 16px. Unify at 20px. */


@media(max-width:900px){
  .lang a{min-width:44px!important;min-height:44px!important;line-height:44px!important}
  .lang{display:inline-flex;align-items:center;gap:2px}
}

/* ===== v65: the wordmark must never be clipped =====
   Measured at 375px: .logo .wordmark clientWidth 96 vs scrollWidth 113 — the
   v56 ellipsis guard was cutting "PlugServices" on every page, and the fixed
   22px / 19px steps clipped it again at 414 and 320. The guard stays (it is
   what keeps the ☰ on screen); the type is now fluid so it fits at every
   width, and below 350px the mark stands alone rather than showing a
   half-word. Verified 320 → 1280: zero clipping, zero page overflow,
   44x44 hamburger throughout. */
@media(max-width:900px){
  .logo .wordmark{text-overflow:clip}
  .wordmark{font-size:clamp(13px,4.35vw,24px)!important;letter-spacing:-.4px!important}
}
@media(max-width:430px){
  .logo img{width:34px!important;height:34px!important}
}
@media(max-width:400px){
  .lang a{min-width:36px!important;padding:0 2px}
  .wordmark{letter-spacing:-.55px!important}
}
@media(max-width:349px){
  .logo .wordmark{display:none}
  .logo img{width:38px!important;height:38px!important}
}


/* ===== v89 (Stage 9 accessibility): visible focus, skip link, reduced motion ===== */
.skip-link{position:absolute;left:12px;top:-60px;z-index:1000;background:var(--grape,#4C2A86);color:#fff;font-weight:800;padding:10px 16px;border-radius:0 0 12px 12px;text-decoration:none}
.skip-link:focus{top:0;outline:3px solid #F5A623;outline-offset:2px}
.chip:focus-visible,.card:focus-visible,.btn:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #F5A623;outline-offset:2px;border-radius:8px}
.card:focus-visible{outline-offset:4px;border-radius:18px}
#allEvents:focus{outline:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ===== v91 (Stage 9a UX): "Venue to be announced" on cards; events.html newsletter heading is an h2 ===== */
.venue-tba{font-style:italic;color:var(--muted,#6b6b7b);border-bottom:1px dashed currentColor}
.subscribe h2{color:#fff;font-size:22px;margin:0 0 6px;letter-spacing:-.4px}

/* ===== v131 (SEO): the internal link rail on the 16 city/category landing pages =====
   Measured before this block: the raw HTML of https://plugservices.ca/events/calgary
   contained exactly one internal href — /styles.css. The header, footer and the
   footer's city row are all built by site.js at runtime, so the first thing a
   crawler reads is a page with no way out. The rail is written into the HTML at
   build time (docs/tools/build-landing-inventory.mjs) and sits between the event
   grid and the newsletter box. */
.xlinks{margin-top:40px;padding:20px 22px;background:var(--cream,#fff8f0);border:1px solid var(--line,#ece5f2);border-radius:var(--radius,16px)}
.xl-row{font-size:13.5px;line-height:2.1}
.xl-row+.xl-row{margin-top:8px;padding-top:8px;border-top:1px solid var(--line,#ece5f2)}
.xl-lab{display:inline-block;min-width:210px;font-weight:800;color:var(--plum,#2d1b52);padding-right:10px}
.xlinks a{color:var(--grape,#4c2a86);text-decoration:none;border-bottom:1px solid rgba(76,42,134,.28)}
.xlinks a:hover{color:var(--flame,#c93f1c);border-bottom-color:currentColor}
.xl-sep{opacity:.4;padding:0 7px;user-select:none}
@media (max-width:700px){.xl-lab{display:block;min-width:0;margin-bottom:2px}.xlinks{padding:16px 16px}}

/* v242 (20 Oct 2026) — home-page end-of-year feature slot. Written into
   index.html by docs/tools/build-eoy-page.mjs while the campaign runs (to
   31 Jan 2027); the slot is empty afterwards, so these rules then match nothing. */
.eoy-home{padding:22px 0 0}
.eoy-home-in{display:grid;gap:4px;padding:18px 22px;border-radius:var(--radius,16px);background:linear-gradient(120deg,#2d1b52,#4c2a86 60%,#c93f1c);color:#fff;text-decoration:none;box-shadow:0 8px 24px rgba(45,27,82,.18)}
.eoy-home-tag{font-size:12.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#ffd9a8}
.eoy-home-t{font-size:22px;font-weight:900;line-height:1.2}
.eoy-home-s{font-size:14.5px;color:rgba(255,255,255,.9)}
.eoy-home-go{margin-top:6px;font-weight:800;color:#ffd9a8}
.eoy-home-in:hover .eoy-home-go{text-decoration:underline}
@media (max-width:700px){.eoy-home-in{padding:16px}.eoy-home-t{font-size:19px}}
/* v242: the v131 link rail could not wrap on a phone — its links and "·"
   separators are joined with no whitespace, so the row had no break
   opportunity and ran to 662px inside a 375px viewport on every landing page
   (clipped by the overflow guard: "Festivals", "Film", "Galas"… unreachable).
   Atomic inlines may break between each other; nothing else changes. */
.xlinks a,.xl-sep{display:inline-block}

/* =====================================================================
 * v276 (4 Nov 2026) — PHASE 3 OF THE PREMIUM UI UPGRADE: design tokens,
 * the whole-poster event card, the /events filter row, the shorter home.
 * Spec: docs/design/ui-design-system.md (Hermann's ten decisions, 4 Nov).
 * ADDITIONS ONLY. Every token is --ds-*; nothing above this line changed.
 * The runtime half (buttons that must beat v74c's !important, the header
 * row, the footer accordions, the card transform) is site.js v276.
 * ===================================================================== */
:root{
  --ds-ink:#1a1230; --ds-ink-2:#2d1b52; --ds-brand:#4c2a86;
  --ds-accent:#c93f1c; --ds-accent-hot:#F0562E; --ds-accent-press:#a83415;
  --ds-gold:#f5a623; --ds-muted:#5c5470; --ds-success:#137a54; --ds-success-fill:#1f9d6b;
  --ds-bg:#fff8f0; --ds-surface:#fff; --ds-line:#ece5f2; --ds-line-strong:#c9bfdb;
  --ds-on-dark:#fff; --ds-on-dark-2:#cfc4ea;
  --ds-t-xs:13px; --ds-t-sm:15px; --ds-t-md:17px; --ds-t-lg:24px; --ds-t-xl:clamp(34px,6vw,52px);
  --ds-s1:4px; --ds-s2:8px; --ds-s3:12px; --ds-s4:16px; --ds-s5:24px; --ds-s6:32px; --ds-s7:48px;
  --ds-r-sm:8px; --ds-r-md:16px; --ds-r-pill:999px;
  --ds-shadow:0 10px 30px rgba(35,18,70,.10); --ds-shadow-lg:0 20px 50px rgba(35,18,70,.18);
  --ds-gutter:28px;
}
@media(max-width:760px){:root{--ds-t-lg:22px;--ds-gutter:16px}}

/* focus ring: gold + 1 px ink so the indicator reaches 3:1 on every surface */
:where(a,button,input,select,summary,[tabindex]):focus-visible{outline:3px solid var(--ds-gold);outline-offset:2px;box-shadow:0 0 0 1px var(--ds-ink)}

/* sprite icons (/icons.svg): UI controls only; emoji stay inside sentences */
.i{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-5px;display:inline-block}
.i-sm{width:16px;height:16px;vertical-align:-3px}
.i-lg{width:24px;height:24px}

/* ---- buttons: ONE height (44 px), pill, 15 px, four looks (decision 1) ---- */
.btn{min-height:44px;padding:10px 24px;font-size:15px;line-height:1.2}
.btn-sm{padding:10px 16px;font-size:15px}
.btn-lg{padding:12px 30px;font-size:17px}
.btn-flame{background:var(--ds-accent)}.btn-flame:hover{background:var(--ds-accent-press)}
.btn-outline{border-width:2px}

/* ---- chips: 40 px desktop / 44 px phones; active = gold with ink text ---- */
.chip{min-height:40px;display:inline-flex;align-items:center;gap:6px;padding:0 16px;font-size:15px;line-height:1.2}
.chips-light .chip{border-color:var(--ds-line-strong);color:var(--ds-ink-2)}
.chip.active,.chip:hover,.chips-light .chip.active{background:var(--ds-gold);color:var(--ds-ink);border-color:var(--ds-gold)}
.chips-light .chip:hover:not(.active){background:#fff;color:var(--ds-ink-2);border-color:var(--ds-brand)}
#likedChip{background:#fff;border:1px solid var(--ds-line-strong);color:var(--ds-ink-2);font-family:var(--font);cursor:pointer;min-height:40px;margin:0!important;white-space:nowrap}
#likedChip.active{background:var(--ds-gold);color:var(--ds-ink);border-color:var(--ds-gold)}
.typerow{display:flex;gap:8px;align-items:flex-start;margin-top:0}
.typerow .chips{flex:1 1 0;min-width:0;margin-top:0}
.chiplab{margin:14px 0 6px;font-weight:800;color:var(--ds-ink-2);font-size:13px;text-transform:uppercase;letter-spacing:.5px}
@media(max-width:760px){
  .chip,#likedChip{min-height:44px}
  .chips.ds-scroll{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;margin-right:calc(-1 * var(--ds-gutter));padding-right:var(--ds-gutter);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
  .chips.ds-scroll::-webkit-scrollbar{display:none}
}

/* ---- discovery row (filters.html): every control 44 px ---- */
.discovery{gap:8px;margin:0 0 8px}
.searchwrap{flex:1 1 260px}
.searchwrap input{height:44px;padding:0 12px 0 40px;border:1px solid var(--ds-line-strong);border-radius:var(--ds-r-sm);font:600 15px var(--font);color:var(--ds-ink)}
.searchwrap input::placeholder{color:var(--ds-muted)}
.searchwrap input:focus{border-color:var(--ds-brand);box-shadow:none}
.searchwrap .mag{opacity:1;color:var(--ds-muted);display:grid;left:12px;font-size:0}
.discovery select{height:44px;padding:0 36px 0 12px;border:1px solid var(--ds-line-strong);border-radius:var(--ds-r-sm);font:600 15px var(--font);color:var(--ds-ink);appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d1b52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/18px}
.nearbtn{min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 16px;border:2px solid var(--ds-brand);border-radius:var(--ds-r-pill);font:700 15px var(--font);color:var(--ds-brand);background:#fff}
@media(max-width:760px){
  .discovery{display:grid;grid-template-columns:1fr 1fr}
  .searchwrap,.discovery .nearbtn{grid-column:1 / -1}
  .discovery select{width:100%;min-width:0}
}
.resultbar{margin-top:16px;padding-top:12px;border-top:1px solid var(--ds-line)}
.resultbar .cnt{color:var(--ds-ink-2);font-size:15px}
.resultbar .clr{min-height:44px;padding:0 16px;border-radius:var(--ds-r-pill);color:var(--ds-ink-2);font-size:15px}
.resultbar .clr:hover{background:rgba(45,27,82,.08)}

/* ---- the event card (decision 2): the WHOLE poster in a fixed frame ----
   Frame 220 px on phones, 240 px on desktop, over a blurred copy of the
   poster (site-portal.js v264 precedent). The height is fixed so the
   prerendered card and the live card are the same size and the feed swap
   no longer shifts the page (audit findings 1, 2, 12). */
.card .thumb{height:220px;background:var(--ds-ink-2);isolation:isolate}
@media(min-width:761px){.card .thumb{height:240px}}
.card .thumb img.blur{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.15);filter:blur(18px) brightness(.6);z-index:0}
.card .thumb img.poster{position:relative;z-index:1;width:100%;height:100%;object-fit:contain}
.card .datebadge{border-radius:var(--ds-r-sm);z-index:2}
.card .datebadge .m{color:var(--ds-accent)}
.card .fav{width:44px;height:44px;background:rgba(255,255,255,.92);color:var(--ds-ink);font-size:0;z-index:3}
.card .fav::before{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-7.5-4.6-7.5-10A4.2 4.2 0 0 1 12 8a4.2 4.2 0 0 1 7.5 2.5c0 5.4-7.5 10-7.5 10z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-7.5-4.6-7.5-10A4.2 4.2 0 0 1 12 8a4.2 4.2 0 0 1 7.5 2.5c0 5.4-7.5 10-7.5 10z'/%3E%3C/svg%3E") center/contain no-repeat}
.card .fav.on{color:var(--ds-accent)}
.card .fav.on::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 20.5s-7.5-4.6-7.5-10A4.2 4.2 0 0 1 12 8a4.2 4.2 0 0 1 7.5 2.5c0 5.4-7.5 10-7.5 10z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 20.5s-7.5-4.6-7.5-10A4.2 4.2 0 0 1 12 8a4.2 4.2 0 0 1 7.5 2.5c0 5.4-7.5 10-7.5 10z'/%3E%3C/svg%3E")}
.card .body{padding:16px;display:flex;flex-direction:column;gap:8px}
.card .catlab{font-size:13px;color:var(--ds-accent)}
.card h3{margin:0;line-height:1.3;color:var(--ds-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{margin-bottom:0;gap:4px;font-weight:600;color:var(--ds-muted)}
.card .meta span{display:flex;align-items:center;gap:6px;min-height:20px}
.card .orgline{min-height:44px;display:flex;align-items:center;flex-wrap:wrap;gap:0 6px;margin:0 -4px;font-size:13px;color:var(--ds-ink-2)}
.card .orgline .v195org{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-weight:700;color:var(--ds-ink-2)}
.card .orgline .vtick{color:var(--ds-success)}
.card .v255rec{color:var(--ds-muted);opacity:1}
.card .foot{margin-top:auto;gap:8px}
.card .price{font-size:17px;color:var(--ds-ink);line-height:1.2}
.card .price small{font-size:13px;color:var(--ds-muted)}
.card .price.free{color:var(--ds-success)}
.card .foot .btn{padding:10px 16px;font-size:15px;min-height:44px}
.skel-card{min-height:480px}
@media(prefers-reduced-motion:reduce){.card,.btn,.chip{transition:none}.card:hover{transform:none}}

/* ---- homepage (decision 8): merge and shorten, keep every block ---- */
.sec-head h2{font-size:var(--ds-t-lg);letter-spacing:-.5px;color:var(--ds-ink)}
.sec-head a{min-height:44px;display:inline-flex;align-items:center;color:var(--ds-accent)}
.hero .btn-flame.go{min-height:44px}
.herohint{color:#f3ecff}
/* the season banner, slim: one row, the long line hidden on phones */
.eoy-home{padding:16px 0 0}
.eoy-home-in{grid-template-columns:1fr auto;grid-template-areas:"tag go" "t go" "s go";align-items:center;gap:2px 16px;padding:12px 16px}
.eoy-home-tag{grid-area:tag}.eoy-home-t{grid-area:t;font-size:17px;line-height:1.25}.eoy-home-s{grid-area:s;font-size:13px}.eoy-home-go{grid-area:go;margin:0;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
@media(max-width:760px){.eoy-home-s{display:none}.eoy-home-in{padding:10px 14px}.eoy-home-t{font-size:15px}}
/* "Why PlugServices" + "Hosting" as ONE row on desktop */
.home-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.home-row .sec-head{margin-bottom:12px}
.home-row .values{grid-template-columns:1fr;gap:8px}
.home-row .value{display:flex;gap:12px;align-items:flex-start;padding:14px 16px}
.home-row .value .emo{font-size:0;color:var(--ds-accent);width:24px;height:24px;flex:0 0 auto;margin-top:2px}
.home-row .value h4{margin:0 0 2px;color:var(--ds-ink)}
.home-row .value p{margin:0}
.home-row .band{padding:28px;border-radius:var(--ds-r-md)}
.home-row .band h2{font-size:var(--ds-t-lg)}
.home-row .band .stats{gap:18px 26px;margin-top:16px}
.home-row .band .stats b{font-size:22px}
@media(max-width:960px){.home-row{grid-template-columns:1fr;gap:20px}}
/* value tiles everywhere: headings in ink (audit finding 4, white-on-white) */
.value h4,.value .emo{color:var(--ds-ink)}
/* gallery teaser as a scroll strip on phones */
@media(max-width:760px){
  .hm-grid{display:flex;overflow-x:auto;gap:8px;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:calc(-1 * var(--ds-gutter));padding-right:var(--ds-gutter)}
  .hm-grid::-webkit-scrollbar{display:none}
  .hm-tile{flex:0 0 150px;scroll-snap-align:start}
  .hm-more{display:flex;overflow-x:auto;gap:10px;scrollbar-width:none;margin-right:calc(-1 * var(--ds-gutter));padding-right:var(--ds-gutter)}
  .hm-more::-webkit-scrollbar{display:none}
  .hm-more a{flex:0 0 220px}
}
.hm-head a{min-height:44px;display:inline-flex;align-items:center;color:var(--ds-accent);font-weight:800}
/* audit finding 4: other white-on-white rules */
.eoy-btns .btn-outline{background:transparent}
.gx-orgform .gx-sub,.gx-orgform-wrap .gx-sub{color:var(--ds-muted)}