/* ==========================================================================
   Cheltenham Times — Halloween skin
   A seasonal overlay on theme.css. Everything is scoped to body.ctb-halloween
   so removing that one class (the visitor's "Spooky mode" toggle does exactly
   that) restores the ordinary BBC-style theme with no reload.

   Rules of the haunting:
   - layout is never changed, only colour, texture and decoration;
   - every decorative layer is aria-hidden and pointer-events: none;
   - text keeps WCAG AA contrast against its background;
   - all motion stops under prefers-reduced-motion.
   ========================================================================== */

body.ctb-halloween {
    /* The theme's own tokens, repainted. Custom properties inherit, so most of
       theme.css follows these without needing a selector of its own. */
    --ctb-red: #ff7518;
    --ctb-red-dark: #c94f06;
    --ctb-black: #06040a;
    --ctb-ink: #f3ecdf;
    --ctb-ink-soft: #cdc0b2;
    --ctb-meta: #a697bd;
    --ctb-rule: #4a3568;
    --ctb-rule-light: #2e2142;
    --ctb-panel: #150f22;
    --ctb-white: #0b0812;

    /* Halloween-only tokens. */
    --hw-void: #06040a;
    --hw-night: #0b0812;
    --hw-crypt: #150f22;
    --hw-slab: #1d1533;
    --hw-rule: #4a3568;
    --hw-bone: #f3ecdf;
    --hw-meta: #a697bd;
    --hw-pumpkin: #ff7518;
    --hw-pumpkin-deep: #c94f06;
    --hw-slime: #9dff4f;
    --hw-blood: #a3140f;
    --hw-ghost: #cfd8ff;
    --hw-display: "Creepster", "Chiller", Impact, var(--ctb-font);

    background-color: var(--hw-void);
    color: var(--hw-bone);
    /* Starfield + a sick green glow on the horizon + deep purple sky. */
    background-image:
        radial-gradient(1.5px 1.5px at 12% 8%, rgba(255, 255, 255, 0.75), transparent 60%),
        radial-gradient(1.5px 1.5px at 78% 14%, rgba(255, 255, 255, 0.6), transparent 60%),
        radial-gradient(1.5px 1.5px at 34% 22%, rgba(255, 255, 255, 0.5), transparent 60%),
        radial-gradient(1.5px 1.5px at 62% 5%, rgba(255, 255, 255, 0.65), transparent 60%),
        radial-gradient(2px 2px at 90% 30%, rgba(255, 255, 255, 0.45), transparent 60%),
        radial-gradient(1.5px 1.5px at 22% 40%, rgba(255, 255, 255, 0.35), transparent 60%),
        radial-gradient(120% 60% at 50% 100%, rgba(72, 148, 40, 0.18), transparent 70%),
        linear-gradient(180deg, #120b20 0%, #0b0812 45%, #06040a 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* The skin is a dark theme, so let form controls and scrollbars follow. */
body.ctb-halloween {
    color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Type: decorative display face for the furniture, plain sans for the news
   -------------------------------------------------------------------------- */

body.ctb-halloween .ctb-masthead-title,
body.ctb-halloween .ctb-section-heading,
body.ctb-halloween .ctb-panel-title,
body.ctb-halloween .ctb-article-kicker,
body.ctb-halloween .ctb-tags-label {
    font-family: var(--hw-display);
    letter-spacing: 0.02em;
    font-weight: 400;
}

body.ctb-halloween .ctb-masthead-title {
    font-size: 54px;
    color: var(--hw-pumpkin);
    text-shadow:
        0 0 10px rgba(255, 117, 24, 0.55),
        0 0 28px rgba(255, 117, 24, 0.3),
        0 2px 0 #2a0f00;
    animation: hw-flicker 5.5s infinite steps(1, end);
}

body.ctb-halloween .ctb-section-heading {
    font-size: 30px;
    color: var(--hw-bone);
    text-shadow: 0 0 12px rgba(157, 255, 79, 0.25);
}

body.ctb-halloween .ctb-article-kicker {
    font-size: 18px;
    letter-spacing: 0.12em;
    color: var(--hw-slime);
    text-shadow: 0 0 10px rgba(157, 255, 79, 0.4);
}

@keyframes hw-flicker {
    0%, 42%, 46%, 58%, 100% { opacity: 1; }
    44% { opacity: 0.55; }
    47% { opacity: 0.85; }
    57% { opacity: 0.4; }
}

/* --------------------------------------------------------------------------
   Links and focus
   -------------------------------------------------------------------------- */

body.ctb-halloween a:hover,
body.ctb-halloween a:focus-visible {
    color: var(--hw-slime);
    text-decoration-color: var(--hw-slime);
}

body.ctb-halloween :focus-visible {
    outline: 3px solid var(--hw-slime);
    outline-offset: 2px;
}

body.ctb-halloween .ctb-skip {
    background: var(--hw-pumpkin);
    color: #170700;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Service bar — black strip with a drip of blood along its bottom edge
   -------------------------------------------------------------------------- */

body.ctb-halloween .ctb-services {
    position: relative;
    background: linear-gradient(180deg, #0a0611, #05030a);
    border-bottom: 1px solid #2a1140;
}

body.ctb-halloween .ctb-services::after {
    /* Blood running down out of the service bar. */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 26px;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 26' preserveAspectRatio='none'%3E%3Cpath d='M0 0h240v5H0z' fill='rgb(140,10,8)'/%3E%3Cpath d='M12 5c0 6 4 7 4 12s-4 4-4 0zM38 5c0 9 5 11 5 16s-5 5-5 0zM70 5c0 4 3 6 3 9s-3 3-3 0zM104 5c0 12 6 13 6 18s-6 5-6 0zM140 5c0 6 4 8 4 12s-4 4-4 0zM176 5c0 9 5 10 5 15s-5 4-5 0zM206 5c0 5 3 7 3 10s-3 3-3 0zM228 5c0 11 5 12 5 17s-5 5-5 0z' fill='rgb(140,10,8)'/%3E%3C/svg%3E");
    background-size: 240px 26px;
    background-repeat: repeat-x;
    opacity: 0.9;
    z-index: 45;
}

body.ctb-halloween .ctb-wordmark-block {
    background: var(--hw-pumpkin);
    color: #170700;
    box-shadow: 0 0 12px rgba(255, 117, 24, 0.45);
}

body.ctb-halloween .ctb-wordmark:hover .ctb-wordmark-block {
    background: var(--hw-slime);
    color: #0a1400;
    box-shadow: 0 0 14px rgba(157, 255, 79, 0.5);
}

body.ctb-halloween .ctb-services-menu li {
    border-left-color: #35204f;
}

body.ctb-halloween .ctb-services-menu a {
    color: #ece4f6;
}

body.ctb-halloween .ctb-services-menu a:hover {
    background: #2a1140;
    color: var(--hw-slime);
}

body.ctb-halloween .ctb-search-toggle {
    background: #2a1140;
    color: #ece4f6;
}

body.ctb-halloween .ctb-search-toggle:hover {
    background: var(--hw-pumpkin);
    color: #170700;
}

body.ctb-halloween .ctb-search-panel {
    background: var(--hw-crypt);
    border-bottom: 1px solid var(--hw-rule);
}

body.ctb-halloween .ctb-searchform input[type="search"] {
    background: #0a0612;
    color: var(--hw-bone);
    border-color: var(--hw-pumpkin);
}

body.ctb-halloween .ctb-searchform input[type="search"]::placeholder {
    color: #7e6f95;
}

body.ctb-halloween .ctb-searchform button {
    background: var(--hw-pumpkin);
    color: #170700;
}

body.ctb-halloween .ctb-searchform button:hover {
    background: var(--hw-slime);
    color: #0a1400;
}

/* --------------------------------------------------------------------------
   Masthead and section nav
   -------------------------------------------------------------------------- */

body.ctb-halloween .ctb-masthead {
    position: relative;
    overflow: hidden;
}

body.ctb-halloween .ctb-masthead-inner {
    position: relative;
}

body.ctb-halloween .ctb-masthead-date {
    color: var(--hw-meta);
    /* Readable even where it crosses the moon. */
    text-shadow: 0 0 6px var(--hw-void), 0 0 3px var(--hw-void), 0 0 2px var(--hw-void);
}

body.ctb-halloween .ctb-masthead-date::after {
    content: " · a dark night in Cheltenham";
    color: var(--hw-pumpkin-deep);
}

body.ctb-halloween .ctb-masthead-logo img {
    filter: brightness(0) invert(1) sepia(1) saturate(6) hue-rotate(-18deg)
        drop-shadow(0 0 8px rgba(255, 117, 24, 0.6));
}

/* The sticky nav becomes a crypt lintel with a web in each corner. */
body.ctb-halloween .ctb-nav {
    position: sticky;
    background: linear-gradient(180deg, rgba(17, 11, 30, 0.97), rgba(10, 6, 18, 0.97));
    backdrop-filter: blur(2px);
    border-top: 1px solid var(--hw-rule);
    border-bottom: 3px solid var(--hw-pumpkin);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}

body.ctb-halloween .ctb-nav-inner {
    position: relative;
}

body.ctb-halloween .ctb-nav-toggle {
    color: var(--hw-bone);
}

body.ctb-halloween .ctb-nav-burger,
body.ctb-halloween .ctb-nav-burger::before,
body.ctb-halloween .ctb-nav-burger::after {
    background: var(--hw-pumpkin);
}

body.ctb-halloween .ctb-menu li a {
    color: var(--hw-bone);
}

body.ctb-halloween .ctb-menu li a:hover {
    color: var(--hw-slime);
    border-bottom-color: var(--hw-slime);
    text-shadow: 0 0 10px rgba(157, 255, 79, 0.45);
}

body.ctb-halloween .ctb-menu .current-menu-item > a,
body.ctb-halloween .ctb-menu li a.is-current {
    color: var(--hw-pumpkin);
    border-bottom-color: var(--hw-pumpkin);
}

/* JG Menu plugin: colour only, so its own layout and drawer keep working. */
body.ctb-halloween .ctb-nav .jgmn-nav,
body.ctb-halloween .ctb-nav [class*="jgmn-panel"],
body.ctb-halloween .ctb-nav [class*="jgmn-mega"],
body.ctb-halloween .ctb-nav [class*="jgmn-drawer"],
body.ctb-halloween .ctb-nav [class*="jgmn-sub"] {
    background-color: #120c20;
    color: var(--hw-bone);
    border-color: var(--hw-rule);
}

body.ctb-halloween .ctb-nav [class*="jgmn-"] a,
body.ctb-halloween .ctb-nav .jgmn-top-link,
body.ctb-halloween .ctb-nav .jgmn-col-heading {
    color: var(--hw-bone);
}

body.ctb-halloween .ctb-nav .jgmn-top-link:hover,
body.ctb-halloween .ctb-nav .jgmn-top-link:focus-visible {
    color: var(--hw-slime);
}

body.ctb-halloween .ctb-nav .jgmn-toggle {
    color: var(--hw-bone);
}

body.ctb-halloween .ctb-nav .jgmn-toggle-icon span {
    background: var(--hw-pumpkin);
}

/* --------------------------------------------------------------------------
   Cards, lists and section rules
   -------------------------------------------------------------------------- */

body.ctb-halloween .ctb-section-head {
    border-top: 4px solid var(--hw-pumpkin);
    box-shadow: 0 1px 14px rgba(255, 117, 24, 0.35);
    padding-left: 34px;
    background-repeat: no-repeat;
    background-position: 0 10px;
    background-size: 26px 26px;
    /* Jack-o'-lantern marker on every section rule. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 6c1-3 3-4 5-4-1 2-1 3-1 4z' fill='rgb(80,160,60)'/%3E%3Cellipse cx='16' cy='19' rx='13' ry='11' fill='rgb(255,117,24)'/%3E%3Cpath d='M8 15l5-3 1 4zM24 15l-5-3-1 4z' fill='rgb(26,8,0)'/%3E%3Cpath d='M9 23h14l-2 3-2-2-2 2-2-2-2 2z' fill='rgb(26,8,0)'/%3E%3C/svg%3E");
}

body.ctb-halloween .ctb-section-more {
    color: var(--hw-pumpkin);
}

body.ctb-halloween .ctb-section-more:hover {
    color: var(--hw-slime);
}

body.ctb-halloween .ctb-hero {
    border-bottom-color: var(--hw-rule);
}

body.ctb-halloween .ctb-lead-title,
body.ctb-halloween .ctb-card-title,
body.ctb-halloween .ctb-article-title,
body.ctb-halloween .ctb-event-title {
    color: var(--hw-bone);
}

body.ctb-halloween .ctb-lead-title a:hover,
body.ctb-halloween .ctb-card-title a:hover,
body.ctb-halloween .ctb-line a:hover,
body.ctb-halloween .ctb-most-read a:hover,
body.ctb-halloween .ctb-event-title a:hover {
    color: var(--hw-slime);
    text-shadow: 0 0 12px rgba(157, 255, 79, 0.45);
}

body.ctb-halloween .ctb-standfirst,
body.ctb-halloween .ctb-card-summary {
    color: var(--ctb-ink-soft);
}

body.ctb-halloween .ctb-meta {
    color: var(--hw-meta);
}

body.ctb-halloween .ctb-meta-kicker {
    color: var(--hw-pumpkin);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

body.ctb-halloween .ctb-card--medium .ctb-card-media,
body.ctb-halloween .ctb-lead-media,
body.ctb-halloween .ctb-article-media {
    position: relative;
}

/* Photographs: a cold moonlit grade, restored in full on hover/focus so
   nothing is permanently hidden behind a filter. */
body.ctb-halloween .ctb-card-media img,
body.ctb-halloween .ctb-lead-media img,
body.ctb-halloween .ctb-event-media img,
body.ctb-halloween .ctb-article-media img {
    filter: saturate(0.75) contrast(1.08) brightness(0.92) hue-rotate(-8deg);
    transition: filter 0.25s ease;
}

body.ctb-halloween a:hover .ctb-card-media img,
body.ctb-halloween a:focus-visible .ctb-card-media img,
body.ctb-halloween .ctb-card-media:hover img,
body.ctb-halloween .ctb-card-media:focus-visible img,
body.ctb-halloween .ctb-lead-media:hover img,
body.ctb-halloween .ctb-lead-media:focus-visible img,
body.ctb-halloween .ctb-event-media:hover img,
body.ctb-halloween .ctb-article-media:hover img {
    filter: none;
}

body.ctb-halloween .ctb-lines,
body.ctb-halloween .ctb-line,
body.ctb-halloween .ctb-most-read li,
body.ctb-halloween .ctb-widget li {
    border-color: var(--hw-rule);
}

body.ctb-halloween .ctb-most-read-rank {
    color: var(--hw-pumpkin-deep);
    text-shadow: 0 0 10px rgba(255, 117, 24, 0.25);
    font-family: var(--hw-display);
}

/* Picture-less placeholders become graveyard tints. */
body.ctb-halloween .ctb-placeholder {
    background: repeating-linear-gradient(135deg, #1a1228, #1a1228 10px, #221833 10px, #221833 20px);
}

body.ctb-halloween .ctb-placeholder--a { background: linear-gradient(135deg, #10202a, #2b4a52); }
body.ctb-halloween .ctb-placeholder--b { background: linear-gradient(135deg, #2b0f0f, #6a2410); }
body.ctb-halloween .ctb-placeholder--c { background: linear-gradient(135deg, #12230f, #325b24); }
body.ctb-halloween .ctb-placeholder--d { background: linear-gradient(135deg, #1d1636, #4a3a7a); }

body.ctb-halloween .ctb-ph-label {
    background: rgba(255, 117, 24, 0.85);
    color: #190700;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Events, panels, buttons
   -------------------------------------------------------------------------- */

body.ctb-halloween .ctb-events-feature,
body.ctb-halloween .ctb-panel {
    background:
        radial-gradient(90% 120% at 50% 0%, rgba(255, 117, 24, 0.1), transparent 70%),
        var(--hw-crypt);
    border: 1px solid var(--hw-rule);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6);
}

body.ctb-halloween .ctb-events-feature-head p,
body.ctb-halloween .ctb-panel p,
body.ctb-halloween .ctb-events-empty {
    color: var(--ctb-ink-soft);
}

body.ctb-halloween .ctb-event-card {
    background: var(--hw-slab);
    border: 1px solid var(--hw-rule);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.ctb-halloween .ctb-event-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(157, 255, 79, 0.18);
    border-color: var(--hw-slime);
}

body.ctb-halloween .ctb-event-date-pill {
    background: var(--hw-pumpkin);
    color: #170700;
    box-shadow: 0 0 14px rgba(255, 117, 24, 0.5);
}

body.ctb-halloween .ctb-event-meta {
    color: var(--hw-meta);
}

body.ctb-halloween .ctb-event-cost {
    background: #22163a;
    color: var(--hw-ghost);
}

body.ctb-halloween .ctb-event-cost-free {
    background: #16331a;
    color: var(--hw-slime);
}

body.ctb-halloween .ctb-button {
    background: var(--hw-pumpkin);
    color: #170700;
    box-shadow: 0 0 0 0 rgba(255, 117, 24, 0.6);
    transition: box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

body.ctb-halloween .ctb-button:hover {
    background: var(--hw-slime);
    color: #0a1400;
    box-shadow: 0 0 18px rgba(157, 255, 79, 0.55);
}

body.ctb-halloween .ctb-button--outline {
    background: transparent;
    color: var(--hw-bone);
    border: 2px solid var(--hw-pumpkin);
}

body.ctb-halloween .ctb-button--outline:hover {
    background: var(--hw-pumpkin);
    color: #170700;
    box-shadow: 0 0 18px rgba(255, 117, 24, 0.5);
}

/* --------------------------------------------------------------------------
   Article
   -------------------------------------------------------------------------- */

body.ctb-halloween .ctb-article-byline,
body.ctb-halloween .ctb-article .ctb-meta {
    border-color: var(--hw-rule);
}

body.ctb-halloween .ctb-byline-role,
body.ctb-halloween .ctb-article-media figcaption {
    color: var(--hw-meta);
}

body.ctb-halloween .ctb-article-body {
    color: #e9e1d4;
}

/* Drop cap, like something carved on a headstone. */
body.ctb-halloween .ctb-article-body > p:first-of-type::first-letter {
    float: left;
    font-family: var(--hw-display);
    font-size: 64px;
    line-height: 0.8;
    padding: 6px 10px 0 0;
    color: var(--hw-pumpkin);
    text-shadow: 0 0 14px rgba(255, 117, 24, 0.45);
}

body.ctb-halloween .ctb-article-body a {
    color: var(--hw-pumpkin);
}

body.ctb-halloween .ctb-article-body a:hover {
    color: var(--hw-slime);
}

body.ctb-halloween .ctb-article-body blockquote {
    border-left-color: var(--hw-slime);
    background: rgba(157, 255, 79, 0.06);
    padding: 12px 16px;
    color: #f0ead9;
}

body.ctb-halloween .ctb-article-body thead th {
    background: var(--hw-slab);
}

body.ctb-halloween .ctb-article-body th,
body.ctb-halloween .ctb-article-body td {
    border-bottom: 1px solid var(--hw-rule);
}

body.ctb-halloween .ctb-tags a {
    border-color: var(--hw-rule);
    color: var(--hw-bone);
}

body.ctb-halloween .ctb-tags a:hover {
    background: var(--hw-pumpkin);
    color: #170700;
    border-color: var(--hw-pumpkin);
}

body.ctb-halloween .ctb-pagination .page-numbers {
    border-color: var(--hw-rule);
    color: var(--hw-bone);
}

body.ctb-halloween .ctb-pagination .current {
    background: var(--hw-pumpkin);
    border-color: var(--hw-pumpkin);
    color: #170700;
}

body.ctb-halloween .ctb-archive-intro {
    border-bottom-color: var(--hw-rule);
    color: var(--ctb-ink-soft);
}

body.ctb-halloween .ctb-archive-intro a {
    color: var(--hw-pumpkin);
}

body.ctb-halloween .ctb-empty {
    color: var(--hw-meta);
}

/* --------------------------------------------------------------------------
   Adverts — kept plainly legible; a creative must never be hard to read
   -------------------------------------------------------------------------- */

body.ctb-halloween .ctb-ad {
    background: var(--hw-crypt);
    border-color: var(--hw-rule);
}

body.ctb-halloween .ctb-ad-label {
    color: var(--hw-meta);
}

body.ctb-halloween .ctb-ad--anchor {
    background: var(--hw-crypt);
    border-top: 1px solid var(--hw-pumpkin);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.8);
}

body.ctb-halloween .ctb-ad-close {
    color: var(--hw-bone);
}

body.ctb-halloween .ctb-ad-house-title {
    color: var(--hw-bone);
}

body.ctb-halloween .ctb-ad-house-copy {
    color: var(--ctb-ink-soft);
}

body.ctb-halloween .ctb-ad-house-size {
    color: var(--hw-meta);
}

/* --------------------------------------------------------------------------
   Footer — the crypt floor, with fog and drifting ghosts
   -------------------------------------------------------------------------- */

body.ctb-halloween .ctb-footer {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(90% 140% at 50% 0%, rgba(103, 60, 180, 0.3), transparent 70%),
        linear-gradient(180deg, #0a0612, #05030a);
    border-top: 3px solid var(--hw-pumpkin);
    color: var(--hw-bone);
}

body.ctb-halloween .ctb-footer > .ctb-shell {
    position: relative;
    z-index: 2;
}

body.ctb-halloween .ctb-footer::before {
    /* A row of leaning headstones along the top of the footer. */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 54px;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 54' preserveAspectRatio='none'%3E%3Cg fill='rgb(22,16,34)'%3E%3Cpath d='M18 54V24a10 10 0 0 1 20 0v30z'/%3E%3Cpath d='M64 54V30h18v24z' transform='rotate(-4 73 42)'/%3E%3Cpath d='M110 54V18a12 12 0 0 1 24 0v36z'/%3E%3Cpath d='M160 54V34h14v20z' transform='rotate(5 167 44)'/%3E%3Cpath d='M196 54V26a11 11 0 0 1 22 0v28z'/%3E%3Cpath d='M244 54V32h16v22z' transform='rotate(-3 252 43)'/%3E%3Cpath d='M274 54V22a9 9 0 0 1 18 0v32z'/%3E%3C/g%3E%3Cg fill='rgb(40,30,58)'%3E%3Cpath d='M26 30h4v12h-4zM25 34h6v3h-6z'/%3E%3Cpath d='M120 24h4v14h-4zM119 28h6v3h-6z'/%3E%3Cpath d='M205 32h4v12h-4zM204 36h6v3h-6z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 300px 54px;
    background-repeat: repeat-x;
    opacity: 0.95;
    z-index: 1;
}

body.ctb-halloween .ctb-footer-menu a:hover {
    color: var(--hw-slime);
}

body.ctb-halloween .ctb-footer-note {
    color: #9b8db2;
}

body.ctb-halloween .ctb-footer-note::after {
    content: " 🎃 Happy Halloween from the newsroom crypt.";
}

body.ctb-halloween .ctb-widget li {
    color: var(--ctb-ink-soft);
}

/* ==========================================================================
   Decoration layer (printed by inc/halloween.php, aria-hidden)
   ========================================================================== */

.ctb-hw-decor,
.ctb-hw-decor * {
    pointer-events: none;
}

.ctb-hw-decor {
    position: fixed;
    inset: 0;
    /* Behind every bit of page content, above the night sky. Nothing the
       decoration does can then obscure a headline, a menu or an advert. */
    z-index: -1;
    overflow: hidden;
}

body:not(.ctb-halloween) .ctb-hw-decor {
    display: none;
}

/* Moon -------------------------------------------------------------------
   In the sky at the top of the document rather than fixed to the viewport:
   a bright disc that scrolled along behind the headlines would ruin their
   contrast. It hangs in the masthead band and scrolls away with it. */

.ctb-hw-sky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 240px;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

body:not(.ctb-halloween) .ctb-hw-sky {
    display: none;
}

.ctb-hw-moon {
    position: absolute;
    top: 50px;
    right: 2vw;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 36% 32%, rgba(120, 100, 70, 0.35) 0 9px, transparent 10px),
        radial-gradient(circle at 62% 58%, rgba(120, 100, 70, 0.3) 0 6px, transparent 7px),
        radial-gradient(circle at 48% 74%, rgba(120, 100, 70, 0.25) 0 4px, transparent 5px),
        radial-gradient(circle at 42% 40%, #fff8e2, #e8d9a8 70%, #cdb87c 100%);
    box-shadow: 0 0 40px rgba(255, 244, 214, 0.4), 0 0 110px rgba(255, 200, 120, 0.22);
    opacity: 0.78;
}

/* Cobwebs ---------------------------------------------------------------- */

.ctb-hw-web {
    position: absolute;
    width: 190px;
    height: 190px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='silver' stroke-width='0.7'%3E%3Cpath d='M0 0 L100 0M0 0 L100 30M0 0 L88 62M0 0 L62 88M0 0 L30 100M0 0 L0 100'/%3E%3Cpath d='M26 0 Q19 19 0 26M48 0 Q34 34 0 48M68 0 Q48 48 0 68M86 0 Q61 61 0 86M100 4 Q74 74 4 100'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% 100%;
    opacity: 0.26;
}

.ctb-hw-web--tl { top: 0; left: 0; }
.ctb-hw-web--tr { top: 0; right: 0; transform: scaleX(-1); }
.ctb-hw-web--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.ctb-hw-web--br { bottom: 0; right: 0; transform: scale(-1); }

/* Bats ------------------------------------------------------------------- */

.ctb-hw-bat {
    position: absolute;
    top: var(--hw-top, 12%);
    left: -90px;
    width: var(--hw-size, 44px);
    height: calc(var(--hw-size, 44px) / 2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath d='M32 7c-4-4-10-5-14-2-4-3-11-4-16 2 4 0 6 3 6 7 0-3 3-4 6-2 3 2 5 6 6 10 2-3 7-4 12-1 5-3 10-2 12 1 1-4 3-8 6-10 3-2 6-1 6 2 0-4 2-7 6-7-5-6-12-5-16-2-4-3-10-2-14 2z' fill='rgb(14,9,20)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    filter: drop-shadow(0 0 4px rgba(255, 117, 24, 0.35));
    animation:
        hw-bat-fly var(--hw-dur, 16s) linear var(--hw-delay, 0s) infinite,
        hw-bat-flap 0.26s steps(2, end) infinite;
}

@keyframes hw-bat-fly {
    0%   { transform: translate(0, 0) scale(1); opacity: 0; }
    6%   { opacity: 1; }
    25%  { transform: translate(28vw, -40px) scale(1.05); }
    50%  { transform: translate(52vw, 36px) scale(0.95); }
    75%  { transform: translate(78vw, -26px) scale(1.04); }
    94%  { opacity: 1; }
    100% { transform: translate(108vw, 10px) scale(1); opacity: 0; }
}

@keyframes hw-bat-flap {
    from { height: calc(var(--hw-size, 44px) / 2); }
    to   { height: calc(var(--hw-size, 44px) / 3); }
}

/* Spider on a thread ------------------------------------------------------ */

.ctb-hw-spider {
    position: absolute;
    top: 0;
    right: 16vw;
    width: 2px;
    height: 150px;
    background: linear-gradient(180deg, rgba(220, 220, 220, 0.65), rgba(220, 220, 220, 0.15));
    transform-origin: top center;
    animation: hw-spider-drop 9s ease-in-out infinite;
}

.ctb-hw-spider::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -20px;
    width: 34px;
    height: 26px;
    transform: translateX(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26'%3E%3Cg stroke='rgb(16,12,22)' stroke-width='1.6' fill='none'%3E%3Cpath d='M15 13 L4 5M15 15 L2 12M15 17 L3 21M15 19 L6 25M19 13 L30 5M19 15 L32 12M19 17 L31 21M19 19 L28 25'/%3E%3C/g%3E%3Cellipse cx='17' cy='16' rx='7' ry='8' fill='rgb(16,12,22)'/%3E%3Ccircle cx='17' cy='8' r='4' fill='rgb(16,12,22)'/%3E%3Ccircle cx='15.4' cy='7' r='1.1' fill='rgb(255,60,40)'/%3E%3Ccircle cx='18.6' cy='7' r='1.1' fill='rgb(255,60,40)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

@keyframes hw-spider-drop {
    0%, 100% { height: 60px; }
    45%, 55% { height: 230px; }
}

/* Fog -------------------------------------------------------------------- */

.ctb-hw-fog {
    position: absolute;
    left: -10%;
    bottom: -40px;
    width: 220%;
    height: 180px;
    background:
        radial-gradient(60% 100% at 10% 80%, rgba(190, 200, 220, 0.16), transparent 70%),
        radial-gradient(50% 100% at 35% 70%, rgba(170, 190, 210, 0.13), transparent 70%),
        radial-gradient(60% 100% at 62% 85%, rgba(190, 200, 220, 0.15), transparent 70%),
        radial-gradient(50% 100% at 88% 72%, rgba(170, 190, 210, 0.12), transparent 70%);
    animation: hw-fog-drift 46s linear infinite;
}

@keyframes hw-fog-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Ghosts ----------------------------------------------------------------- */

.ctb-hw-ghost {
    position: absolute;
    bottom: 40px;
    left: var(--hw-left, 20%);
    width: 54px;
    height: 68px;
    opacity: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 68'%3E%3Cpath d='M27 2C14 2 7 12 7 26v34c4 0 5-5 8-5s4 5 7 5 4-5 7-5 4 5 7 5 3-5 8-5V26C47 12 40 2 27 2z' fill='rgba(207,216,255,0.75)'/%3E%3Ccircle cx='20' cy='26' r='3.4' fill='rgb(20,14,30)'/%3E%3Ccircle cx='34' cy='26' r='3.4' fill='rgb(20,14,30)'/%3E%3Cellipse cx='27' cy='38' rx='4' ry='5' fill='rgb(20,14,30)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    filter: drop-shadow(0 0 12px rgba(207, 216, 255, 0.5));
    animation: hw-ghost-rise var(--hw-dur, 22s) ease-in-out var(--hw-delay, 0s) infinite;
}

@keyframes hw-ghost-rise {
    0%   { transform: translate(0, 40px) scale(0.9); opacity: 0; }
    15%  { opacity: 0.85; }
    50%  { transform: translate(60px, -140px) scale(1); opacity: 0.7; }
    85%  { opacity: 0.2; }
    100% { transform: translate(-20px, -320px) scale(1.1); opacity: 0; }
}

/* Lightning (JS-triggered, deliberately gentle) --------------------------- */

.ctb-hw-flash {
    position: absolute;
    inset: 0;
    background: #cfd8ff;
    opacity: 0;
}

.ctb-hw-flash.is-striking {
    animation: hw-flash 1s ease-out 1;
}

/* The flash sits behind the page content with the rest of the decoration, so
   it lights the sky rather than washing over what is being read. */
@keyframes hw-flash {
    0%   { opacity: 0; }
    8%   { opacity: 0.22; }
    18%  { opacity: 0.04; }
    26%  { opacity: 0.16; }
    100% { opacity: 0; }
}

/* ==========================================================================
   Spooky mode toggle — unscoped on purpose, so the visitor can always find
   it, including after they have switched the haunting off.
   ========================================================================== */

.ctb-hw-toggle {
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 70;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 24px);
    padding: 7px 12px;
    opacity: 0.88;
    border: 2px solid #ff7518;
    border-radius: 999px;
    background: #110b1d;
    color: #f3ecdf;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.ctb-hw-toggle:hover,
.ctb-hw-toggle:focus-visible {
    background: #ff7518;
    color: #170700;
    opacity: 1;
    text-decoration: none;
}

.ctb-hw-toggle-icon {
    font-size: 15px;
    line-height: 1;
}

.ctb-hw-toggle[aria-pressed="false"] .ctb-hw-toggle-icon {
    filter: grayscale(1) opacity(0.65);
}

body.has-ctb-anchor .ctb-hw-toggle {
    bottom: 12px;
}

@media (max-width: 768px) {
    body.has-ctb-anchor .ctb-hw-toggle {
        /* Clear of the fixed anchor advert on small screens. */
        bottom: 76px;
    }

    body.ctb-halloween .ctb-masthead-title {
        font-size: 36px;
    }

    body.ctb-halloween .ctb-masthead-date::after {
        content: "";
    }

    .ctb-hw-moon {
        width: 58px;
        height: 58px;
        top: 10px;
    }

    .ctb-hw-web {
        width: 120px;
        height: 120px;
        opacity: 0.3;
    }

    .ctb-hw-spider {
        right: 8vw;
    }

    body.ctb-halloween .ctb-section-heading {
        font-size: 24px;
    }
}

/* ==========================================================================
   Accessibility: no motion, and a usable page if the skin is all the visitor
   gets. Decoration is dropped entirely rather than frozen mid-animation.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .ctb-hw-bat,
    .ctb-hw-ghost,
    .ctb-hw-spider,
    .ctb-hw-fog,
    .ctb-hw-flash {
        display: none;
    }

    body.ctb-halloween .ctb-masthead-title {
        animation: none;
    }

    body.ctb-halloween .ctb-event-card,
    body.ctb-halloween .ctb-card-media img,
    body.ctb-halloween .ctb-lead-media img,
    body.ctb-halloween .ctb-event-media img,
    body.ctb-halloween .ctb-article-media img {
        transition: none;
    }
}

@media print {
    .ctb-hw-decor,
    .ctb-hw-toggle {
        display: none !important;
    }

    body.ctb-halloween {
        background: #fff !important;
        color: #000 !important;
    }
}