/* Winter touches, built by assets/js/winter.js. Nothing shows until the snowflake is on. */
.winter-btn{padding:8px 11px}
.winter-btn svg{width:13px;height:13px;display:block;opacity:.55;transition:opacity .2s,transform .5s}
.winter-btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--pg)}
.winter-btn[aria-pressed="true"]:hover{color:var(--pg)}
.winter-btn[aria-pressed="true"] svg{opacity:1;transform:rotate(60deg)}
/* Room for a fourth button on phones without wrapping MENU onto two lines. */
@media (max-width:640px){
  .head-tools:has(.winter-btn){gap:6px}
  .head-tools:has(.winter-btn) .hamburger{white-space:nowrap}
  .winter-btn{padding:8px}
}
@media (max-width:350px){.winter-btn{display:none}}

/* z-index -1: in front of the page colour, behind every word and box. */
.wt-snow,.wt-drift{position:absolute;left:0;z-index:-1;pointer-events:none}
[data-winter="on"] .foot{position:relative;z-index:0}
.wt-foot{position:absolute;left:0;top:0;z-index:-1;pointer-events:none}

.wt-icicles{position:absolute;left:0;right:0;top:100%;overflow:hidden;pointer-events:none}
.wt-icicles svg{display:block}
.wt-icicles path{fill:#d7e5f4;stroke:rgba(120,150,190,.35);stroke-width:.6}
.wt-drip{position:absolute;width:3px;height:4px;border-radius:50%;background:#a9c3e0;animation:wt-drip 1.4s ease-in forwards}
@keyframes wt-drip{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(16px);opacity:0}}

.wt-flake{display:inline-block;width:.36em;height:.36em;margin-left:.04em;vertical-align:-.02em;animation:wt-spin 24s linear infinite}
@keyframes wt-spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .wt-flake,.winter-btn svg{animation:none;transition:none}
}