/* Small October details throughout the site; purely decorative and never interactive. */
:root {
  --oct-pumpkin: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2080%22%20fill%3D%22none%22%20stroke%3D%22%23d89b68%22%20stroke-width%3D%221.6%22%3E%3Cpath%20d%3D%22M40%2024c-9-11-28-4-27%2016s13%2027%2027%2021c14%206%2027-1%2027-21S49%2013%2040%2024Z%22%2F%3E%3Cellipse%20cx%3D%2240%22%20cy%3D%2243%22%20rx%3D%2213%22%20ry%3D%2221%22%2F%3E%3Cpath%20d%3D%22M40%2023c-2-10%205-15%2012-14M24%2037l9%204-9%204m32-8-9%204%209%204M28%2052l7%204%205-4%205%204%207-4%22%2F%3E%3C%2Fsvg%3E");
  --oct-bat: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20110%2050%22%3E%3Cpath%20fill%3D%22%23c29172%22%20d%3D%22m55%2017-5-9-4%2010C32%2012%2018%203%200%200c4%2016%2011%2026%2018%2032%205-9%2014-8%2020%200%206-7%2010-3%2017%2017%207-20%2011-24%2017-17%206-8%2015-9%2020%200%207-6%2014-16%2018-32-18%203-32%2012-46%2018l-4-10Z%22%2F%3E%3C%2Fsvg%3E");
  --oct-web: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%20stroke%3D%22%23bc957b%22%20stroke-width%3D%22.8%22%3E%3Cpath%20d%3D%22M100%200%200%20100M100%200%2025%20100M100%200%2060%20100M100%200%200%2060M100%200%200%2025M100%200v100M0%200h100M75%200q0%2010%207%2018t18%207M50%200q0%2020%2014%2036t36%2014M25%200q0%2030%2022%2054t53%2021M0%200q0%2040%2029%2072t71%2028%22%2F%3E%3C%2Fsvg%3E");
  --oct-moon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2080%22%20fill%3D%22none%22%20stroke%3D%22%23d7b48b%22%20stroke-width%3D%221.4%22%3E%3Cpath%20d%3D%22M53%2012a29%2029%200%201%200%2015%2046A28%2028%200%200%201%2053%2012Z%22%2F%3E%3Cpath%20d%3D%22m61%2026%202-6%202%206%206%202-6%202-2%206-2-6-6-2ZM34%2010v7m-3-4h6%22%2F%3E%3C%2Fsvg%3E");
}
html[data-season="halloween"] main section:not(.mala-hero) { position: relative; }
html[data-season="halloween"] main section:not(.mala-hero)::after {
 content: ""; position: absolute; right: clamp(16px, 4vw, 60px); bottom: 12px;
 width: 48px; height: 48px; background: var(--oct-pumpkin) center / contain no-repeat;
 opacity: .55; pointer-events: none; z-index: 5;
}
html[data-season="halloween"] main section:not(.mala-hero):nth-of-type(3n+2)::after {
 background-image: var(--oct-bat); width: 52px; height: 30px; right: auto; left: 22px; bottom: 20px; transform: rotate(-12deg);
}
html[data-season="halloween"] main section:not(.mala-hero):nth-of-type(3n)::after { background-image: var(--oct-moon); }
html[data-season="halloween"] main h2::after {
 content: ""; display: inline-block; vertical-align: middle; margin-left: 12px;
 width: 25px; height: 25px; background: var(--oct-moon) center / contain no-repeat;
 opacity: .65; pointer-events: none;
}
html[data-season="halloween"] main section:nth-of-type(even) h2::after { background-image: var(--oct-pumpkin); }
html[data-season="halloween"] main article { position: relative; }
html[data-season="halloween"] main article::after {
 content: ""; position: absolute; right: 16px; top: 15px; width: 30px; height: 18px;
 background: var(--oct-bat) center / contain no-repeat; opacity: .5; pointer-events: none;
}
html[data-season="halloween"] footer { position: relative; }
html[data-season="halloween"] footer::before {
 content: ""; position: absolute; top: 0; right: 0; width: 100px; height: 100px;
 background: var(--oct-web) top right / contain no-repeat; opacity: .35; pointer-events: none;
}
html[data-season="halloween"] .section-divider {
 height: 30px; width: 110px; background: var(--oct-bat) center / 32px auto no-repeat;
 border: 0; opacity: .7;
}
html[data-season="halloween"] main details { border-color: #b97d4740; }
html[data-season="halloween"] main details[open] summary { color: #e1b18c; }
@media (hover: hover) {
 html[data-season="halloween"] main article:hover { box-shadow: 0 0 28px #bd743b12; }
}
@media (max-width: 640px) {
 html[data-season="halloween"] main section:not(.mala-hero)::after { width: 34px; height: 34px; bottom: 6px; }
 html[data-season="halloween"] main h2::after { width: 21px; height: 21px; margin-left: 8px; }
 html[data-season="halloween"] footer::before { width: 65px; height: 65px; }
}