/* Code banner (black, lime label + pulsing lime code, soft shine) + floating glass nav. 2026-11-10.
   Loaded last in <head> on every public page so it wins over each page's inline .nav styles.
   Nav = 18px gap + 62px pill = 80px (phone 14 + 56 = 70). The home hero is pulled up under the
   nav by exactly that much (index.html .hero margin-top), so change both together or a white
   line appears under the banner. */
/* shared: banner shell + floating nav shell */
.promo{display:block;position:relative;z-index:51;text-decoration:none;overflow:hidden}
.promo .p-in{position:relative;max-width:1160px;margin:0 auto;min-height:40px;padding:8px 16px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;font:500 13.5px/1.3 Inter,system-ui,sans-serif;text-align:center;white-space:nowrap}
.promo .p-code{font:700 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}
body .nav,body .nav.scrolled{background:transparent;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding-top:18px;pointer-events:none}
body .nav .wrap{pointer-events:auto;margin:0 auto;box-sizing:border-box;transition:max-width .45s cubic-bezier(.2,.8,.2,1),height .35s,box-shadow .35s,background .35s}
@media (prefers-reduced-motion:reduce){.promo *,.promo *::before,.promo *::after{animation:none!important}body .nav .wrap{transition:none}}

/* banner: colours are variables so the whole strip can be re-themed in one place */
.promo{--pb:#E6FAB0;--pt:#1D2A10;--pl:#131A12;--plt:#D6F77A;--pc:#131A12;--pct:#D6F77A;--pr:rgba(19,26,18,.35);
  background:var(--pb);color:var(--pt);box-shadow:inset 0 -1px 0 rgba(19,26,18,.08)}
/* chosen 2026-11-10: black, faint lime/teal glow at the edges, light grain */
.promo::before{opacity:.18}.promo .p-code{box-shadow:none}.promo{--pb:#0E120D;--pt:#F2F5EE;--pl:#C7F24C;--plt:#141A0B;--pc:rgba(199,242,76,.10);--pct:#C7F24C;--pr:rgba(199,242,76,.45);background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22160%22%20height%3D%22160%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.9%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200%20.07%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E"),radial-gradient(40% 180% at 8% 50%,#1F2B12 0,transparent 70%),radial-gradient(38% 180% at 92% 50%,#10221E 0,transparent 70%),radial-gradient(30% 140% at 50% 50%,#151A14 0,transparent 75%),#0E120D;border-bottom:1px solid rgba(0,0,0,.05)}.promo .p-big em{box-shadow:0 2px 6px -2px rgba(199,242,76,.45)}.promo .p-code{box-shadow:0 3px 10px -4px rgba(0,0,0,.45)}
.promo .p-in{min-height:46px;gap:12px;font-size:14.5px;font-weight:600}
.promo::before{content:"";position:absolute;top:0;bottom:0;width:180px;left:-220px;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:sweep 5s ease-in-out infinite}
@keyframes sweep{0%,20%{left:-220px}60%,100%{left:calc(100% + 40px)}}
.promo .p-big{font-weight:800;font-size:15px;letter-spacing:.03em;text-transform:uppercase}
.promo .p-big em{font-style:normal;background:var(--pl);color:var(--plt);padding:3px 7px;border-radius:5px;margin-right:2px}
.promo .p-code{position:relative;color:var(--pct);background:var(--pc);padding:7px 11px;border-radius:7px;font-size:13.5px;
  outline:1px dashed currentColor;outline-offset:-4px}
.promo .p-code::after{content:"";position:absolute;inset:0;border-radius:7px;animation:ring 2s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 var(--pr)}80%,100%{box-shadow:0 0 0 10px transparent}}
.promo .p-go{font-weight:800;border-bottom:2px solid currentColor;padding-bottom:1px;transition:transform .2s}
.promo:hover .p-go{transform:translateX(3px)}
/* nav */
body .nav .wrap{max-width:1040px;width:calc(100% - 32px);height:62px;padding:0 8px 0 10px;border-radius:999px;
  background:rgba(255,255,255,.80);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(19,26,18,.06),0 14px 34px -16px rgba(19,26,18,.30)}
body .nav.is-scrolled .wrap{max-width:900px;background:rgba(255,255,255,.92)}
body nav.links a{position:relative;background:none!important}
body nav.links a::after{content:"";position:absolute;left:50%;bottom:2px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#7FB314;transform:scale(0);transition:transform .2s}
body nav.links a:hover::after,body nav.links a[aria-current]::after{transform:scale(1)}
body .nav .btn{background:#131A12;color:#fff;border-color:#131A12;border-radius:999px}
body .nav .btn:hover{background:#26311F}
body .nav .btn::after{content:" →";color:#C7F24C}

@media (max-width:560px){.promo .p-in{font-size:13px;gap:8px;padding:8px 10px;min-height:44px}.promo .p-big{font-size:13.5px}.promo .p-txt,.promo .p-go{display:none}
 body .nav{padding-top:14px} body .nav .wrap{width:calc(100% - 24px);height:56px;padding:0 6px 0 8px}}

/* ===== 2026-11-11: banner is now a GOLD TICKET (his ref: golden ticket, scalloped edges), ~half the nav width.
   Banner strip is transparent, so the page shows behind it; home hero is pulled up under it (index.html .hero -144px). ===== */
.promo{background:transparent!important;border:0!important;box-shadow:none!important;padding:12px 12px 0;overflow:visible;
  filter:drop-shadow(0 10px 16px rgba(110,72,8,.22)) drop-shadow(0 1px 1px rgba(110,72,8,.25));
  --pt:#2E2004;--pl:#2E2004;--plt:#F7E6A6;--pc:rgba(255,255,255,.42);--pct:#2E2004;--pr:rgba(120,80,10,.35)}
.promo::before{display:none}
.promo .p-in{max-width:540px;height:52px;min-height:52px;padding:0 34px;gap:12px;overflow:hidden;color:var(--pt);
  background:linear-gradient(105deg,#D6A436 0%,#F5E2A0 26%,#E6BC53 46%,#F6DA86 68%,#D7A53A 100%);
  -webkit-mask:radial-gradient(circle 5px at 0 50%,#0000 96%,#000) 0 0/51% 13px repeat-y,radial-gradient(circle 5px at 100% 50%,#0000 96%,#000) 100% 0/51% 13px repeat-y;
          mask:radial-gradient(circle 5px at 0 50%,#0000 96%,#000) 0 0/51% 13px repeat-y,radial-gradient(circle 5px at 100% 50%,#0000 96%,#000) 100% 0/51% 13px repeat-y}
.promo .p-in::after{content:"";position:absolute;inset:5px 12px;border:1px solid rgba(110,70,10,.38);border-radius:7px;pointer-events:none}
.promo .p-in::before{content:"";position:absolute;top:0;bottom:0;width:110px;left:-160px;transform:skewX(-20deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:tsweep 5s ease-in-out infinite}
@keyframes tsweep{0%,25%{left:-160px}65%,100%{left:calc(100% + 60px)}}
.promo .p-big em{box-shadow:none}
.promo .p-code{box-shadow:none;outline-color:rgba(46,32,4,.55)}
.promo .p-go{position:relative;border-bottom:0;margin-left:6px;padding-left:20px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.promo .p-go::before{content:"";position:absolute;left:0;top:-16px;bottom:-16px;border-left:1.5px dashed rgba(90,58,8,.5)}
@media (max-width:560px){.promo .p-in{padding:0 22px;gap:9px}.promo .p-go{display:inline;padding-left:12px;margin-left:2px;font-size:12.5px}}
/* 11-11: phone ticket smaller than the nav pill, smaller text */
@media (max-width:560px){
  .promo{padding:10px 12px 0}
  .promo .p-in{max-width:310px;height:42px;min-height:42px;padding:0 20px;gap:7px;font-size:12px}
  .promo .p-in::after{inset:4px 10px;border-radius:6px}
  .promo .p-big{font-size:12px}
  .promo .p-big em{padding:2px 6px;border-radius:4px}
  .promo .p-code{font-size:11.5px;padding:5px 8px;outline-offset:-3px}
  .promo .p-go{font-size:11.5px;padding-left:10px;margin-left:1px}
  .promo .p-go::before{top:-13px;bottom:-13px}
}
/* 11-11 (2): ticket smaller everywhere, shorter on phone */
.promo .p-in{max-width:460px;height:44px;min-height:44px;padding:0 28px;gap:10px;font-size:13px;
  -webkit-mask:radial-gradient(circle 4.5px at 0 50%,#0000 96%,#000) 0 0/51% 11px repeat-y,radial-gradient(circle 4.5px at 100% 50%,#0000 96%,#000) 100% 0/51% 11px repeat-y;
          mask:radial-gradient(circle 4.5px at 0 50%,#0000 96%,#000) 0 0/51% 11px repeat-y,radial-gradient(circle 4.5px at 100% 50%,#0000 96%,#000) 100% 0/51% 11px repeat-y}
.promo .p-in::after{inset:4px 11px;border-radius:6px}
.promo .p-big{font-size:13.5px}
.promo .p-big em{padding:2px 6px;border-radius:4px}
.promo .p-code{font-size:12.5px;padding:5px 9px}
.promo .p-go{font-size:13px;padding-left:16px}
.promo .p-go::before{top:-14px;bottom:-14px}
@media (max-width:560px){
  .promo{padding:9px 12px 0}
  .promo .p-in{max-width:272px;height:36px;min-height:36px;padding:0 15px;gap:6px;font-size:11px;
    -webkit-mask:radial-gradient(circle 3.5px at 0 50%,#0000 96%,#000) 0 0/51% 9px repeat-y,radial-gradient(circle 3.5px at 100% 50%,#0000 96%,#000) 100% 0/51% 9px repeat-y;
            mask:radial-gradient(circle 3.5px at 0 50%,#0000 96%,#000) 0 0/51% 9px repeat-y,radial-gradient(circle 3.5px at 100% 50%,#0000 96%,#000) 100% 0/51% 9px repeat-y}
  .promo .p-in::after{inset:3px 8px;border-radius:5px}
  .promo .p-big{font-size:11px}
  .promo .p-big em{padding:1px 5px}
  .promo .p-code{font-size:10.5px;padding:3px 6px;outline-offset:-2.5px}
  .promo .p-go{font-size:10.5px;padding-left:8px}
  .promo .p-go::before{top:-11px;bottom:-11px}
}