@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Barlow:wght@500;700&display=swap');

/**
    Halloween
    Black board, pumpkin orange heading with a drip, purple shadows, cobwebs in the top corners.
*/

body {
    background: #0a0710;
}

.holidayHalloween {
    --accent: #ff8c1a;      /* pumpkin: prices */
    --purple: #8a4fff;
    --ink: #f7efe3;
    background: #0a0710;
    color: var(--ink);
}

.holidayHalloween .hw-board {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--mb-footer, 0px);
    display: flex;
    padding: 5vmin 5vmin 3.5vmin;
    background:
        radial-gradient(ellipse at 50% 120%, rgba(255, 140, 26, .18), transparent 60%),
        radial-gradient(ellipse at 15% 0%, rgba(138, 79, 255, .18), transparent 55%),
        linear-gradient(180deg, #140b1d 0%, #0a0710 70%);
}

.holidayHalloween .hw-web {
    position: absolute;
    top: 0;
    width: 26vmin;
    height: 26vmin;
    fill: none;
    stroke: rgba(247, 239, 227, .28);
    stroke-width: .8;
    pointer-events: none;
}

.holidayHalloween .hw-web-l { left: 0; }
.holidayHalloween .hw-web-r { right: 0; }

.holidayHalloween .hw-main {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.holidayHalloween .mb-heading {
    margin: 0;
    font-family: 'Creepster', cursive;
    font-weight: 400;
    font-size: 11vmin;
    line-height: 1.05;
    letter-spacing: .02em;
    color: var(--accent);
    text-shadow: 0 0 2.5vmin rgba(255, 140, 26, .55), .4vmin .5vmin 0 rgba(138, 79, 255, .55);
}

/* orange drip under the heading */
.holidayHalloween .hw-drip {
    height: 2.2vmin;
    margin: .4vmin 0 2.2vmin;
    background:
        radial-gradient(circle at 6% 0, var(--accent) 0 1vmin, transparent 1.05vmin),
        radial-gradient(circle at 20% 0, var(--accent) 0 .7vmin, transparent .75vmin),
        radial-gradient(circle at 34% 0, var(--accent) 0 1.3vmin, transparent 1.35vmin),
        radial-gradient(circle at 48% 0, var(--accent) 0 .6vmin, transparent .65vmin),
        linear-gradient(var(--accent), var(--accent)) top/100% .5vmin no-repeat;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 1vmin rgba(255, 140, 26, .45));
}

.holidayHalloween .mb-list {
    flex: 1 1 auto;
    font-family: 'Barlow', sans-serif;
    font-weight: 500;
    --mb-gap: 5vmin;
}

.holidayHalloween .mb-item {
    padding: .26em 0;
    border-bottom: 1px solid rgba(247, 239, 227, .12);
}

.holidayHalloween .mb-name {
    font-weight: 700;
}

.holidayHalloween .mb-dots {
    border-bottom: .09em dotted rgba(138, 79, 255, .5);
    transform: translateY(-.3em);
}

.holidayHalloween .mb-price {
    font-weight: 700;
    color: var(--accent);
}

.holidayHalloween .mb-suffix {
    font-size: .6em;
    opacity: .85;
}

.holidayHalloween .mb-desc {
    font-size: .6em;
    color: #c9b8dd;
}

.holidayHalloween .mb-ph {
    color: var(--purple);
    font-weight: 700;
    text-transform: uppercase;
}

.holidayHalloween .mb-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2.4vmin;
    font-family: 'Creepster', cursive;
    font-size: 4vmin;
    letter-spacing: .04em;
    color: var(--accent);
}

.holidayHalloween.mb-nometa .mb-meta {
    display: none;
}

.holidayHalloween .mb-logo {
    height: 9vmin;
    max-width: 38%;
    object-fit: contain;
    margin-left: auto;
    padding: .6vmin;
    border-radius: .7vmin;
    background: rgba(247, 239, 227, .85);
}

.holidayHalloween .hw-side {
    flex: 0 0 36%;
    min-width: 0;
    min-height: 0;
    margin-left: 4.5vmin;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.holidayHalloween .hw-frame {
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 70%;
    overflow: hidden;
    border: .6vmin solid var(--purple);
    border-radius: 1vmin;
    box-shadow: 0 0 3vmin rgba(138, 79, 255, .45);
    transform: rotate(1.4deg);
}

.holidayHalloween .hw-frame video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.85) contrast(1.05);
}

.holidayHalloween .hw-bats {
    margin-top: 2vmin;
    text-align: center;
    font-size: 4vmin;
    filter: grayscale(1) brightness(1.6);
    opacity: .75;
}

.holidayHalloween.mb-novideo .hw-side {
    display: none;
}

.holidayHalloween .mb-pager {
    right: 4vmin;
    bottom: 1.5vmin;
    color: var(--accent);
}

.holidayHalloween.mb-portrait .hw-board {
    flex-direction: column;
}

.holidayHalloween.mb-portrait .hw-side {
    order: -1;
    flex: 0 0 24%;
    margin: 0 0 3vmin;
}

.holidayHalloween.mb-portrait .hw-frame {
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
}

.holidayHalloween.mb-portrait .hw-bats {
    display: none;
}

.mb-footer-holidayHalloween {
    background: #8a4fff;
    color: #0a0710;
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
}

/* ---- tall screen: its own layout - video strip across the top, one long list under it ---- */
.holidayHalloween .hw-tall { flex-direction: column; }
.holidayHalloween .hw-strip { flex: 0 0 23%; min-height: 0; margin-bottom: 3.5vmin; overflow: hidden; }
.holidayHalloween .hw-tall .hw-frame { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; }
.holidayHalloween .hw-tall .hw-main { flex: 1 1 auto; min-height: 0; }
.holidayHalloween .hw-tall .mb-heading { font-size: 8.5vmin; }
.holidayHalloween .hw-tall .mb-meta { margin-top: 2.5vmin; }
.holidayHalloween.mb-novideo .hw-strip { display: none; }
/* Creepster's descenders sit low: keep the drip clear of the heading on a tall board */
.holidayHalloween .hw-tall .mb-heading { margin-bottom: 1.4vmin; }