/* Elf Watch site theme: the Elf Tracker's night sky on every website page (CEO, 27 Oct 2026:
   the tracker "looks better and more Christmassy", so the website now matches it).
   One file, loaded LAST in each page's <head> (after the page's own CSS), with the tracker's falling snow
   (/js/tracker-new/snow.js). To switch the theme off, remove those two lines from a page; nothing else changed.
   What it does:
     - the painted night sky with the moon and Santa's sleigh (/img/tracker/night-sky-*.jpg) behind every page,
       and the tracker's snow canvas in front of it
     - the Christmas garland across the top, with the approved logo hanging from it as a bauble
       (the logo itself is untouched: img/logo.png on its own sky colour #B8D2FC, no filter; check-logo.py)
     - every block of words sits on a panel (cream with navy words, or navy with white words), never straight
       on the picture, so contrast is 4.5:1 or better wherever the sky scrolls under it
     - legal pages: plain dark words on a cream sheet inside a candy-cane frame
   Colours from the tracker (css/tracker-new.css): night #0B1D4D, gold #F5C24A, cream #FFF8E8, red #D9283E. */

:root{--ewn-night:#0B1D4D;--ewn-night2:#14306F;--ewn-gold:#F5C24A;--ewn-cream:#FFF8E8;--ewn-red:#D9283E;--ewn-ink:#16296A;
  --ewn-glass:rgba(8,20,58,.86);--ewn-pale:#DCE6FF;--ewn-r:26px;
  --ewn-cane:repeating-linear-gradient(45deg,#D9283E 0 14px,#fff 14px 28px);
  --ewn-cap:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='36' viewBox='0 0 260 36'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='36' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.42' stop-color='%23fff'/%3E%3Cstop offset='.62' stop-color='%23E4EEFC'/%3E%3Cstop offset='1' stop-color='%23B9D0F2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 8 C10 8 14 3 26 3 C38 3 42 9 54 9 C64 9 70 1 86 1 C102 1 106 8 118 8 C128 8 134 4 146 4 C158 4 162 10 174 10 C184 10 190 2 204 2 C218 2 222 8 234 8 C244 8 250 8 260 8 L260 18 C255.0 18.6 253.0 18.4 250.0 19 C248.8 24.4 247.8 28.0 246.0 28.0 C244.2 28.0 243.2 24.4 242.0 19 C235.0 18.6 231.0 18.4 228.0 19 C226.8 23.2 225.8 26.0 224.0 26.0 C222.2 26.0 221.2 23.2 220.0 19 C208.2 18.6 199.5 18.4 196.5 19 C195.2 25.6 194.0 30.0 192.0 30.0 C190.0 30.0 188.8 25.6 187.5 19 C175.5 18.6 166.5 18.4 163.5 19 C162.4 22.6 161.6 25.0 160.0 25.0 C158.4 25.0 157.6 22.6 156.5 19 C146.2 18.6 139.0 18.4 136.0 19 C134.5 28.0 133.2 34.0 131.0 34.0 C128.8 34.0 127.5 28.0 126.0 19 C114.0 18.6 105.0 18.4 102.0 19 C100.8 25.0 99.8 29.0 98.0 29.0 C96.2 29.0 95.2 25.0 94.0 19 C81.8 18.6 72.5 18.4 69.5 19 C68.5 22.0 67.6 24.0 66.0 24.0 C64.4 24.0 63.5 22.0 62.5 19 C56.5 18.6 53.5 18.4 50.5 19 C49.1 26.2 48.0 31.0 46.0 31.0 C44.0 31.0 42.9 26.2 41.5 19 C31.2 18.6 24.0 18.4 21.0 19 C19.8 23.2 18.8 26.0 17.0 26.0 C15.2 26.0 14.2 23.2 13.0 19 C6.5 18.4 4 18.6 0 18 Z' fill='url(%23g)'/%3E%3C/svg%3E")}

/* ---------- the night sky (as on the tracker) ---------- */
html{background:#0B1D4D!important}
body{background:transparent!important}
body::before{content:""!important;display:block!important;position:fixed!important;inset:0!important;z-index:-2!important;pointer-events:none!important;
  opacity:1!important;animation:none!important;transform:none!important;
  background:#0B1D4D url(/img/tracker/night-sky-wide.jpg) center top/cover no-repeat!important}
@media (max-aspect-ratio:1/1){body::before{background:#0B1D4D url(/img/tracker/night-sky-tall.jpg) center top/cover no-repeat!important}}
/* the old daytime sky layers and snow are replaced by the tracker's snow canvas */
body::after{content:none!important;display:none!important}
body>.snow,body>.falling-snow,body>.sky,.snowdots,.xspark{display:none!important}
/* the tracker's falling snow (js/tracker-new/snow.js): in front of the sky, behind every panel, never clickable */
canvas.tn-snow{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}

/* ---------- header: the garland across the top, the logo as a bauble hanging from it ---------- */
header.ew-header{background:transparent!important;isolation:isolate}
header.ew-header::before{content:""!important;display:block!important;position:absolute;left:0;right:0;top:-18px;height:96px;z-index:0;pointer-events:none;
  background:url(/img/garland-strip.png) repeat-x center top/auto 96px;
  background-image:image-set(url(/img/site/garland-strip.webp) type("image/webp"),url(/img/garland-strip.png) type("image/png"));
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.ew-header .ew-header__in{position:relative;z-index:1;padding-top:64px!important;padding-bottom:14px!important;min-height:0!important}
/* the bauble: the approved logo on its own sky colour, no filter on the logo */
.ew-header a.ew-header__logo{position:relative;width:124px;height:124px;border-radius:50%!important;padding:0!important;display:flex!important;align-items:center;justify-content:center;
  background:radial-gradient(circle at 33% 26%,#FFFFFF 0,#E3EEFF 14%,#B8D2FC 38%,#B8D2FC 66%,#8FB2EC 100%)!important;
  box-shadow:0 16px 30px rgba(0,0,0,.45),inset 0 -10px 22px rgba(40,70,150,.28),inset 0 6px 14px rgba(255,255,255,.6);
  transform-origin:50% -46px;animation:ewnSwing 5s ease-in-out infinite}
.ew-header a.ew-header__logo::before{content:"";position:absolute;top:-14px;left:50%;width:34px;height:18px;margin-left:-17px;border-radius:5px 5px 3px 3px;
  background:linear-gradient(90deg,#9A6B1F,#F7DC8C 45%,#C9963A 70%,#9A6B1F);box-shadow:0 2px 3px rgba(0,0,0,.3)}
.ew-header a.ew-header__logo::after{content:"";position:absolute;top:-58px;left:50%;width:2px;height:46px;margin-left:-1px;background:linear-gradient(#C9963A,#F7DC8C)}
header.ew-header a.ew-header__logo img.ew-logo{position:relative;z-index:1;width:102px!important;height:auto!important}
@keyframes ewnSwing{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.ew-header a.ew-header__logo:focus-visible{outline:3px solid var(--ewn-gold);outline-offset:4px}
/* the menu: white words on a navy glass bar */
.ew-header nav.ew-nav{flex:0 1 auto!important;margin:0 auto!important;padding:5px!important;border-radius:999px!important;background:rgba(8,20,58,.72)!important;
  border:1px solid rgba(255,255,255,.18)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ew-header nav.ew-nav a{color:#fff!important}
.ew-header nav.ew-nav a:hover{color:#0B1D4D!important;background:var(--ewn-cream)!important}
.ew-header nav.ew-nav a[aria-current="page"]{color:#0B1D4D!important;background:var(--ewn-cream)!important;box-shadow:inset 0 0 0 2px var(--ewn-gold)}
.ew-header a:focus-visible,.ew-header button:focus-visible{outline:3px solid var(--ewn-gold)!important}
.ew-header a.ew-header__cta{background:var(--ewn-red)!important;box-shadow:0 5px 0 #9F1D2B,0 12px 24px rgba(0,0,0,.35)!important}
.ew-header a.ew-header__cta:hover{background:#B81F33!important}
.ew-header button.ew-header__toggle{background:rgba(8,20,58,.72)!important;border-color:rgba(255,255,255,.5)!important;color:#fff!important}
@media(max-width:960px){
  header.ew-header::before{top:-14px;height:70px;background-size:auto 70px}
  .ew-header .ew-header__in{padding-top:48px!important;padding-bottom:10px!important;align-items:center}
  .ew-header a.ew-header__logo{width:92px;height:92px;transform-origin:50% -40px}
  .ew-header a.ew-header__logo::after{top:-50px;height:38px}
  header.ew-header a.ew-header__logo img.ew-logo{width:76px!important;height:auto!important}
  .ew-header nav.ew-nav{margin:4px 0 0!important;padding:10px!important;border-radius:20px!important;background:rgba(8,20,58,.97)!important;border:2px solid rgba(245,194,74,.6)!important;
    box-shadow:0 18px 40px rgba(0,0,0,.5)!important}
  .ew-header nav.ew-nav a:hover{background:rgba(255,255,255,.12)!important;color:#fff!important}
  .ew-header nav.ew-nav a[aria-current="page"]{background:var(--ewn-cream)!important;color:#0B1D4D!important}
}
@media(max-width:340px){header.ew-header a.ew-header__logo{width:80px;height:80px}header.ew-header a.ew-header__logo img.ew-logo{width:66px!important}}
@media(prefers-reduced-motion:reduce){.ew-header a.ew-header__logo{animation:none}}

/* ---------- footer: a navy glass panel with a snow cap, gold accents ---------- */
footer.ew-footer{background:rgba(8,20,58,.92)!important;color:var(--ewn-pale)!important;border-top:0!important;border-radius:28px 28px 0 0;margin-top:48px!important;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
footer.ew-footer::after{content:""!important;display:block!important;position:absolute;left:0;right:0;top:-13px;height:36px;z-index:2;pointer-events:none;animation:none!important;
  background:var(--ewn-cap) repeat-x left top/260px 36px!important;border-radius:16px 16px 0 0;filter:drop-shadow(0 2px 2px rgba(10,22,56,.28))}
.ew-footer a.ew-footer__logo{background:#B8D2FC!important;border-radius:20px;padding:8px 14px!important;box-shadow:0 10px 24px rgba(0,0,0,.35)}
footer.ew-footer img.ew-logo{height:68px!important}
.ew-footer p.ew-footer__tag{color:#fff!important}
.ew-footer nav.ew-footer__links a{color:#fff!important}
.ew-footer nav.ew-footer__links a:hover{color:#0B1D4D!important;background:var(--ewn-cream)!important}
.ew-footer .ew-footer__bottom{border-top-color:rgba(255,255,255,.18)!important}
.ew-footer .ew-footer__bottom p,.ew-footer p.ew-footer__music{color:var(--ewn-pale)!important}
.ew-footer .ew-footer__bottom a,.ew-footer p.ew-footer__music a{color:#fff!important}
.ew-footer a:focus-visible{outline:3px solid var(--ewn-gold)!important}
@media(max-width:760px){footer.ew-footer img.ew-logo{height:58px!important}footer.ew-footer{border-radius:22px 22px 0 0}}

/* ---------- panels: the shared look for every block of words ---------- */
/* cream panel: navy words; used by the legal sheets, guides, FAQ and most homepage sections */
.ewn-cream,
main section.legal>.legal__wrap{position:relative;background:var(--ewn-cream)!important;color:var(--ewn-ink);border-radius:var(--ewn-r);box-shadow:0 18px 40px rgba(0,0,0,.4)}

/* ---------- the legal and guide pages (main > section.legal > .legal__wrap) ---------- */
main section.legal{background:transparent!important;padding-left:12px!important;padding-right:12px!important}
main section.legal>.legal__wrap{border:10px solid transparent;background:linear-gradient(var(--ewn-cream),var(--ewn-cream)) padding-box,var(--ewn-cane) border-box!important;
  padding:clamp(22px,4vw,48px) clamp(18px,4vw,52px)!important;margin-top:18px!important;margin-bottom:18px!important;box-sizing:border-box}
main section.legal>.legal__wrap::after{content:"";position:absolute;left:-16px;right:-16px;top:-25px;height:36px;z-index:2;pointer-events:none;
  background:var(--ewn-cap) repeat-x left top/260px 36px;border-radius:16px 16px 6px 6px;filter:drop-shadow(0 2px 2px rgba(10,22,56,.28))}
@media(max-width:600px){main section.legal{padding-left:8px!important;padding-right:8px!important}main section.legal>.legal__wrap{border-width:7px}
  main section.legal>.legal__wrap::after{left:-12px;right:-12px;top:-22px}}

/* ---------- the homepage: each section is a panel on the night sky ---------- */
main>section:is(.tracker-welcome,.reveal-band,.opening-cinema,.christmas-journey,.magic-workshop,.reaction,.proof,.shop,.faq-section,.final-cta){
  position:relative;box-sizing:border-box;width:auto!important;max-width:1200px!important;margin:44px auto!important;border-radius:var(--ewn-r)!important;box-shadow:0 18px 40px rgba(0,0,0,.4)}
main>section:is(.tracker-welcome,.opening-cinema,.christmas-journey,.magic-workshop,.reaction,.shop,.faq-section){background:var(--ewn-cream)!important}
/* the snow cap on the cream panels (as on the tracker's cards) */
main>section:is(.tracker-welcome,.reveal-band,.opening-cinema,.christmas-journey,.magic-workshop,.reaction,.shop,.faq-section)::after{content:"";position:absolute;left:-6px;right:-6px;top:-15px;height:36px;z-index:3;pointer-events:none;
  background:var(--ewn-cap) repeat-x left top/260px 36px;border-radius:16px 16px 6px 6px;filter:drop-shadow(0 2px 2px rgba(10,22,56,.28))}
main>section.tracker-welcome{margin-top:20px!important}
/* navy panels with a gold edge: the "free in November" band and the numbers */
main>section.reveal-band{background:linear-gradient(180deg,#14306F,#0F2459)!important;border:2px solid rgba(245,194,74,.7)}
main>section.reveal-band h2{color:#fff!important}
main>section.reveal-band h2 em{color:var(--ewn-gold)!important}
main>section.reveal-band p{color:var(--ewn-pale)!important}
main>section.reveal-band a{color:#fff!important}
main>section.proof{border:2px solid rgba(245,194,74,.7);background:linear-gradient(180deg,#14306F,#0F2459)!important}
/* the last call to action: cream inside a candy-cane frame */
main>section.final-cta{border:10px solid transparent!important;background:linear-gradient(var(--ewn-cream),var(--ewn-cream)) padding-box,var(--ewn-cane) border-box!important}
@media(max-width:760px){
  main>section:is(.tracker-welcome,.reveal-band,.opening-cinema,.christmas-journey,.magic-workshop,.reaction,.proof,.shop,.faq-section,.final-cta){margin:36px 10px!important;--ewn-r:22px}
  main>section.tracker-welcome{margin-top:16px!important}
}
/* header.css paints #reaction see-through with an id selector; the panel wins here */
main>section#reaction.reaction{background:var(--ewn-cream)!important}

/* ---------- partners and influencers (.page > main > .hero / .band .card) ---------- */
.page>main>section.hero>.wrap{position:relative;box-sizing:border-box;max-width:1040px;margin:12px auto 0;padding:34px 32px;border-radius:var(--ewn-r);
  background:var(--ewn-cream)!important;box-shadow:0 18px 40px rgba(0,0,0,.4)}
.page>main>section.band .card{position:relative;background:var(--ewn-cream)!important;box-shadow:0 18px 40px rgba(0,0,0,.4)!important}
.page>main>section.hero>.wrap::after,.page>main>section.band .card::after{content:"";position:absolute;left:-6px;right:-6px;top:-15px;height:36px;z-index:3;pointer-events:none;
  background:var(--ewn-cap) repeat-x left top/260px 36px;border-radius:16px 16px 6px 6px;filter:drop-shadow(0 2px 2px rgba(10,22,56,.28))}
.page>main>section.band{padding-block:28px}
@media(max-width:760px){.page>main>section.hero>.wrap{margin:8px 16px 0;padding:22px 16px}}

/* ---------- the "open the app" page (app/open.html: body > nav.nav + main) ---------- */
body>nav.nav{background:transparent!important;position:relative}
body>nav.nav::before{content:""!important;display:block!important;position:absolute;left:0;right:0;top:-14px;height:70px;z-index:0;pointer-events:none;animation:none!important;
  background:url(/img/garland-strip.png) repeat-x center top/auto 70px;
  background-image:image-set(url(/img/site/garland-strip.webp) type("image/webp"),url(/img/garland-strip.png) type("image/png"));
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
body>nav.nav .nav__in{position:relative;z-index:1;justify-content:center!important;min-height:0!important;padding-top:48px!important}
body>nav.nav a.nav__home{position:relative;width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 33% 26%,#FFFFFF 0,#E3EEFF 14%,#B8D2FC 38%,#B8D2FC 66%,#8FB2EC 100%);
  box-shadow:0 16px 30px rgba(0,0,0,.45),inset 0 -10px 22px rgba(40,70,150,.28),inset 0 6px 14px rgba(255,255,255,.6)}
body>nav.nav a.nav__home::before{content:"";position:absolute;top:-13px;left:50%;width:30px;height:16px;margin-left:-15px;border-radius:5px 5px 3px 3px;background:linear-gradient(90deg,#9A6B1F,#F7DC8C 45%,#C9963A 70%,#9A6B1F)}
body>nav.nav a.nav__home::after{content:"";position:absolute;top:-52px;left:50%;width:2px;height:40px;margin-left:-1px;background:linear-gradient(#C9963A,#F7DC8C)}
body>nav.nav a.nav__home img{position:relative;z-index:1;width:80px!important;height:auto!important}
body>nav.nav~main{position:relative;box-sizing:border-box;margin:30px auto 40px!important;width:calc(100% - 24px);background:var(--ewn-cream);border-radius:var(--ewn-r);
  padding:30px 20px 26px!important;box-shadow:0 18px 40px rgba(0,0,0,.4)}
body>nav.nav~main::after{content:"";position:absolute;left:-6px;right:-6px;top:-15px;height:36px;z-index:3;pointer-events:none;
  background:var(--ewn-cap) repeat-x left top/260px 36px;border-radius:16px 16px 6px 6px;filter:drop-shadow(0 2px 2px rgba(10,22,56,.28))}

/* ---------- "The Elf Tracker is free" (owner, 27 Oct 2026: free must be obvious by every tracker button) ---------- */
.ewn-free{display:flex;width:fit-content;max-width:100%;box-sizing:border-box;align-items:center;gap:8px;margin:12px 0 0;padding:7px 16px 7px 12px;border-radius:999px;
  background:#FFE7A3;border:2px solid #F5C24A;color:#0B1D4D!important;font:800 15px/1.3 'Plus Jakarta Sans','Inter',sans-serif;letter-spacing:0;text-transform:none;text-align:left}
.ewn-free::before{content:"\2605";color:#A3122A;font-size:15px;line-height:1}
:is(.final-cta) .ewn-free{margin-left:auto;margin-right:auto}
.chapter-meta .ewn-free{margin:10px 0 0;font-size:14px}
.final-cta .ewn-free{margin-top:16px}
.g-cta p.ewn-free{margin:12px 0 0;color:#0B1D4D!important}
p.g-meta.ewn-free{margin:14px 0 0;font-size:15px}
/* the header button: "free" in a gold tag */
.ew-header a.ew-header__cta .ewn-free-tag{display:inline-block;margin-left:2px;padding:3px 8px 4px;border-radius:999px;background:#FFE7A3;color:#7A0E1E;font-weight:800;line-height:1}

/* ---------- contrast on the cream panels (measured 4.5:1 or better) ---------- */
main section.legal .eyebrow{color:#B3122A!important}
main section.legal :is(.g-meta,.g-need,figcaption){color:#4A5B7D!important}
main section.legal .g-cta p a{color:#fff!important}
.cinema-free strong,.cinema-free strong a,.chapter-secondary a{color:#B3122A!important}
/* the store badges before the app is out: still readable on the cream panel */
body>nav.nav~main .badge[aria-disabled="true"]{opacity:.85}
/* labels printed over photos: a soft shadow so they hold on the light parts of the picture */
.chapter-camera-label span,.nightly-label{text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 8px rgba(0,0,0,.6)}