/* CHRISTMAS THEME (subtle snow + holly). Inert unless <html class="xmas">, which assets/js/xmas.js sets only
   from 00:00 Tue 3 Nov 2026 to 23:59 Sun 27 Dec 2026 (UK time). Removed by remove_christmas.py */
html.xmas .brand{position:relative}
/* =====  sparse slow snowfall + holly sprig by the logo ===== */
.xmas::after{content:"";position:fixed;left:0;right:0;top:-420px;height:calc(100% + 420px);z-index:50;pointer-events:none;opacity:.55;
  background-image:radial-gradient(circle at 40px 30px,rgba(255,255,255,0.85) 0 1.8px,transparent 2.6px),radial-gradient(circle at 180px 110px,rgba(255,255,255,0.85) 0 1.8px,transparent 2.6px),radial-gradient(circle at 310px 60px,rgba(255,255,255,0.85) 0 1.8px,transparent 2.6px),radial-gradient(circle at 90px 190px,rgba(255,255,255,0.85) 0 1.8px,transparent 2.6px),radial-gradient(circle at 250px 260px,rgba(255,255,255,0.85) 0 1.8px,transparent 2.6px),radial-gradient(circle at 370px 330px,rgba(255,255,255,0.85) 0 1.8px,transparent 2.6px),radial-gradient(circle at 140px 380px,rgba(255,255,255,0.85) 0 1.8px,transparent 2.6px),radial-gradient(circle at 30px 80px,rgba(255,255,255,0.6) 0 1.2px,transparent 2.0px),radial-gradient(circle at 120px 230px,rgba(255,255,255,0.6) 0 1.2px,transparent 2.0px),radial-gradient(circle at 210px 20px,rgba(255,255,255,0.6) 0 1.2px,transparent 2.0px),radial-gradient(circle at 60px 340px,rgba(255,255,255,0.6) 0 1.2px,transparent 2.0px),radial-gradient(circle at 200px 300px,rgba(255,255,255,0.6) 0 1.2px,transparent 2.0px);background-size:420px 420px,280px 420px;will-change:transform;animation:xm-fall 45s linear infinite}
@keyframes xm-fall{to{transform:translateY(420px)}}
.xmas .brand::after{content:"";position:absolute;right:-10px;bottom:-4px;width:26px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='20' viewBox='0 0 26 20'%3E%3Cpath d='M13 12C9 12 3 11 1 5c6-1 11 1 12 7z' fill='%232f9e5b'/%3E%3Cpath d='M13 12c4 0 10-1 12-7-6-1-11 1-12 7z' fill='%23238a4c'/%3E%3Ccircle cx='11' cy='13' r='2.6' fill='%23d8313a'/%3E%3Ccircle cx='15' cy='13.5' r='2.6' fill='%23e5484d'/%3E%3Ccircle cx='13' cy='16.5' r='2.6' fill='%23c0262d'/%3E%3C/svg%3E") no-repeat center/contain;pointer-events:none}
@media (max-width:640px){.xmas::after{opacity:.4}.xmas .brand::after{width:22px;height:17px;right:-8px}}
@media (prefers-reduced-motion:reduce){.xmas::after{display:none}}
@media print{.xmas::after,.xmas .brand::after{display:none}}
/* CHRISTMAS RED ACCENT: only applies when <html class="xmas xmas-red">, both set by assets/js/xmas.js in the same date window. Removed by remove_christmas.py */
.xmas-red{--xm-red:#A4161A;--xm-red-bright:#e0353a;--xm-red-text:#ff9fa2}
/* thin deep-red line under the header */
.xmas-red .site-header{border-bottom:2px solid var(--xm-red)}
/* section eyebrow labels: soft festive red (AA contrast on the navy) and red dashes */
.xmas-red .eyebrow{color:var(--xm-red-text)}
.xmas-red .eyebrow::before{background:repeating-linear-gradient(90deg,var(--xm-red-bright) 0 10px,transparent 10px 15px)}
/* short red rule under section titles; headings themselves stay white for readability */
.xmas-red .section-head h2::after{content:"";display:block;width:64px;height:4px;border-radius:3px;margin-top:.45em;background:linear-gradient(90deg,var(--xm-red),var(--xm-red-bright))}
.xmas-red .section-head.center h2::after{margin-inline:auto}
/* hero eyebrow keeps its brand yellow so the page still reads as blue/white/yellow */
.xmas-red .hero .eyebrow{color:var(--yellow)}
.xmas-red .hero .eyebrow::before{background:repeating-linear-gradient(90deg,var(--yellow) 0 10px,transparent 10px 15px)}
/* footer: red top rule */
.xmas-red .site-footer{border-top:2px solid var(--xm-red)}