/* Advent doors: 17 families (.df-*) x palettes (.ds-*) = 100 styles.
   Markup comes from the `door` macro in templates/_door.html, ornaments and
   the 24 day icons from templates/illu/door_sprite.svg, the palettes from
   door_styles.py (served as /assets/door-palettes.css). Every size inside a
   door is in cqmin, so the same door works as a 40px picker swatch and as a
   full-screen calendar door.

   Colour flow: a palette sets --p0..3/--pf (door), --a0..3/--af (accent),
   --n0..3/--nf (number). Each door picks its slot by door-cN / door-final and
   exposes --pc, --ac, --nc. A customer's own colours (--cp*, set on an
   ancestor, see door_styles.door_color_vars) win over the palette. */

.door {
    position: relative;
    min-width: 0;
    min-height: 0;
    container-type: size;
    perspective: 900px;
    --door-r: 10px;
    --door-font: 'Fraunces', Georgia, serif;
    --pc: var(--cp0, var(--p0, #8b1a1a));
    --ac: var(--cpa, var(--a0, var(--fa, #e9c46a)));
    --nc: var(--cpn, var(--n0, var(--fn, #fff3dc)));
    --pc-l: color-mix(in srgb, var(--pc) 82%, #fff);
    --pc-d: color-mix(in srgb, var(--pc) 70%, #000);
}
.door.door-c1 {
    --pc: var(--cp1, var(--p1, var(--p0, #8b1a1a)));
    --ac: var(--cpa, var(--a1, var(--a0, var(--fa, #e9c46a))));
    --nc: var(--cpn, var(--n1, var(--n0, var(--fn, #fff3dc))));
}
.door.door-c2 {
    --pc: var(--cp2, var(--p2, var(--p0, #8b1a1a)));
    --ac: var(--cpa, var(--a2, var(--a0, var(--fa, #e9c46a))));
    --nc: var(--cpn, var(--n2, var(--n0, var(--fn, #fff3dc))));
}
.door.door-c3 {
    --pc: var(--cp3, var(--p3, var(--p0, #8b1a1a)));
    --ac: var(--cpa, var(--a3, var(--a0, var(--fa, #e9c46a))));
    --nc: var(--cpn, var(--n3, var(--n0, var(--fn, #fff3dc))));
}
.door.door-final {
    --pc: var(--cpf, var(--pf, var(--p0, #8b1a1a)));
    --ac: var(--cpa, var(--af, var(--a0, var(--fa, #e9c46a))));
    --nc: var(--cpn, var(--nf, var(--n0, var(--fn, #fff3dc))));
}

/* --- What waits behind the door: a different Christmas icon every day --- */
.door-behind {
    position: absolute;
    inset: 0;
    border-radius: var(--door-r);
    background: radial-gradient(ellipse at 50% 40%, #fffaf0 0%, #f8e6b8 50%, #d9a85a 100%);
    box-shadow: inset 0 0 0 1px rgba(120, 70, 20, .25), inset 0 0 14px rgba(120, 60, 10, .45);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2cqmin;
    opacity: 0;
    transition: opacity .35s ease .12s;
    overflow: hidden;
}
.door-behind .behind-icon {
    width: 62cqmin;
    height: 62cqmin;
    filter: drop-shadow(0 1.2cqmin 2cqmin rgba(110, 60, 10, .35));
}
.door-behind .behind-num {
    font: 800 12cqmin/1 var(--door-font);
    color: #7a4a14;
    letter-spacing: .02em;
}
.door.open .door-behind,
.door.opened .door-behind { opacity: 1; }

/* --- The hinged leaf --- */
.door-leaf {
    position: absolute;
    inset: 0;
    border-radius: var(--door-r);
    transform-origin: left center;
    transition: transform .85s cubic-bezier(.3, 0, .15, 1), box-shadow .3s ease, filter .3s ease;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(165deg, var(--pc-l), var(--pc-d));
    border: var(--door-border, 1.5px solid rgba(255, 255, 255, .3));
    box-shadow: var(--door-shadow, 0 3px 12px rgba(0, 0, 0, .4), inset 0 1px 1px rgba(255, 255, 255, .25));
}
.door:not(.door-locked):not(.open):not(.opened):not(.door-peek) .door-leaf:hover {
    transform: rotateY(-16deg);
    filter: brightness(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .5), 0 0 22px rgba(255, 230, 170, .35);
}
.door.open .door-leaf { transform: rotateY(-110deg); box-shadow: -8px 4px 24px rgba(0, 0, 0, .4); }
.door.opened .door-leaf { transform: rotateY(-100deg); box-shadow: -6px 3px 18px rgba(0, 0, 0, .35); }

/* Showcase doors open when the pointer rests on them (tap toggles .peek) */
.door-peek .door-leaf { cursor: default; }
.door-peek:hover .door-leaf,
.door-peek.peek .door-leaf { transform: rotateY(-105deg); box-shadow: -6px 3px 18px rgba(0, 0, 0, .35); }
.door-peek:hover .door-behind,
.door-peek.peek .door-behind { opacity: 1; transition-delay: .08s; }
/* The back of an open leaf is plain: hide number and ornaments once it has
   turned past 90deg, so nothing shows mirrored */
.door-leaf > * { transition: opacity .12s ease .12s; }
.door.opened .door-leaf > *,
.door-peek:hover .door-leaf > *,
.door-peek.peek .door-leaf > * { opacity: 0; }

.door-number {
    position: relative;
    z-index: 2;
    font-family: var(--door-font);
    font-weight: 800;
    font-size: var(--num-size, 40cqmin);
    line-height: 1;
    color: var(--nc);
    text-shadow: var(--num-shadow, 0 .6cqmin 2.5cqmin rgba(0, 0, 0, .4));
    font-variant-numeric: lining-nums;
}

.orn { position: absolute; pointer-events: none; z-index: 1; overflow: visible; }
.orn-pos-bow { top: 4%; left: 50%; width: 62cqmin; height: 37cqmin; transform: translateX(-50%); z-index: 3; }
.orn-pos-cap { top: -1px; left: -1px; width: calc(100% + 2px); height: 15cqmin; z-index: 3; }
.orn-pos-corner { right: 7%; bottom: 6%; width: 24cqmin; height: 24cqmin; }
.orn-pos-corner-lg { right: 5%; bottom: 4%; width: 34cqmin; height: 34cqmin; }
.orn-pos-corner-l { left: 6%; bottom: 5%; width: 34cqmin; height: 24cqmin; }
.orn-pos-top { top: 8%; left: 50%; width: 34cqmin; height: 34cqmin; transform: translateX(-50%); }
.orn-pos-top-sm { top: 9%; left: 50%; width: 20cqmin; height: 20cqmin; transform: translateX(-50%); }
.orn-pos-top-r { top: 7%; right: 8%; width: 26cqmin; height: 26cqmin; }
.orn-pos-strip { top: 9%; left: 50%; width: 44cqmin; height: 12cqmin; transform: translateX(-50%); }
.orn-pos-bottom { left: 0; bottom: 0; width: 100%; height: 34cqmin; }
.orn-pos-fill { inset: 0; width: 100%; height: 100%; }
.orn-pos-band-t { left: 0; top: 9%; width: 100%; height: 13cqmin; }
.orn-pos-band-b { left: 0; bottom: 9%; width: 100%; height: 13cqmin; }
.orn-pos-ball { top: 50%; left: 50%; width: 72cqmin; height: 84cqmin; transform: translate(-50%, -60%); }

/* Locked doors: muted and veiled, with a lock badge that sits outside the
   leaf so the filter does not dim it. Pressing one gives a short wiggle. */
.door-locked .door-leaf { filter: saturate(.4) brightness(.68) contrast(.92); }
/* The whole pointer becomes a red "no entry" sign, on every part of the door */
.door-locked,
.door-locked * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='12.5' fill='%23fff' fill-opacity='.85' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M7.2 7.2l17.6 17.6' stroke='%23fff' stroke-width='7' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='16' r='12.5' fill='none' stroke='%23c62828' stroke-width='3.5'/%3E%3Cpath d='M7.2 7.2l17.6 17.6' stroke='%23c62828' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") 16 16, not-allowed;
}
.door-veil {
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: var(--door-r);
    pointer-events: none;
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 3cqmin, transparent 3cqmin 7cqmin),
        linear-gradient(180deg, rgba(20, 12, 8, .12), rgba(20, 12, 8, .32));
}
.door-locked .door-number { opacity: .7; }
.door-lock {
    position: absolute;
    right: 6%;
    top: 5%;
    z-index: 6;
    width: 24cqmin;
    height: 24cqmin;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(28, 18, 12, .78);
    box-shadow: 0 0 0 .8cqmin rgba(255, 243, 220, .55), 0 1cqmin 3cqmin rgba(0, 0, 0, .4);
    color: #fff3dc;
}
.door-lock svg { width: 55%; height: 55%; }
.df-card .door-lock { background: rgba(70, 70, 70, .8); }
.door-locked:active .door-leaf,
.door-locked:active .door-veil { animation: doorLockedShake .4s ease; }
.door-locked:active .door-lock { animation: doorLockedPop .4s ease; }
@keyframes doorLockedShake {
    20%, 60% { transform: translateX(-3%); }
    40%, 80% { transform: translateX(3%); }
}
@keyframes doorLockedPop { 50% { transform: scale(1.25); } }

/* Today's door glows softly so the visitor knows where to click */
.door-today .door-leaf {
    box-shadow: 0 0 0 2px #f6dc8f, 0 0 26px 6px rgba(246, 220, 143, .7);
    animation: doorToday 2.4s ease-in-out infinite;
}
@keyframes doorToday {
    0%, 100% { box-shadow: 0 0 0 2px #f6dc8f, 0 0 18px 3px rgba(246, 220, 143, .5); }
    50% { box-shadow: 0 0 0 2px #fff1c4, 0 0 32px 9px rgba(246, 220, 143, .85); }
}
.door-final .door-leaf { outline: 2px solid rgba(232, 194, 106, .9); outline-offset: -1px; }

/* Sparkles thrown out when a door opens (spawned in JS) */
.door-spark {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18cqmin;
    height: 18cqmin;
    margin: -9cqmin 0 0 -9cqmin;
    z-index: 6;
    pointer-events: none;
    animation: doorSpark .9s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes doorSpark {
    0% { transform: translate(0, 0) scale(.2) rotate(0); opacity: 1; }
    70% { opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(160deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .door-leaf { transition: none; }
    .door-today .door-leaf, .door-spark,
    .door-locked:active .door-leaf, .door-locked:active .door-veil, .door-locked:active .door-lock { animation: none; }
}

/* =================================================================
   Families
   ================================================================= */

/* gift: wrapping paper with ribbon, bow and a round gift tag */
.df-gift { --door-r: 8px; --door-border: 1.5px solid rgba(60, 20, 10, .35); --ribbon: var(--ac); --fn: var(--tn, #7a1f14); }
.df-gift .door-leaf {
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .2) 0 1.6cqmin, transparent 1.9cqmin) 0 0 / 13cqmin 13cqmin,
        linear-gradient(160deg, var(--pc-l), var(--pc-d));
    align-items: flex-end;
    padding-bottom: 14%;
}
.df-gift.door-c1 .door-leaf {
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .1) 0 3cqmin, transparent 3cqmin 9cqmin), linear-gradient(160deg, var(--pc-l), var(--pc-d));
}
.df-gift .door-leaf::before,
.df-gift .door-leaf::after {
    content: '';
    position: absolute;
    background: var(--ac);
    box-shadow: inset 0 0 0 .8cqmin rgba(255, 255, 255, .18), 0 0 1.5cqmin rgba(0, 0, 0, .25);
}
.df-gift .door-leaf::before { top: 0; bottom: 0; left: 50%; width: 15cqmin; transform: translateX(-50%); }
.df-gift .door-leaf::after { left: 0; right: 0; top: 26%; height: 12cqmin; }
.df-gift .door-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46cqmin;
    height: 46cqmin;
    border-radius: 50%;
    /* the number sits on a tag, so it keeps the tag colour even with own door colours */
    color: var(--fn);
    background: #fff8ea;
    border: 1.2cqmin solid var(--ac);
    box-shadow: 0 1cqmin 3cqmin rgba(0, 0, 0, .3);
    font-size: 25cqmin;
    text-shadow: none;
}

/* frost: icy gradient, snow cap, snowflake */
.df-frost { --fn: #1d3557; --num-shadow: 0 .5cqmin 0 rgba(255, 255, 255, .6); --door-border: 1.5px solid rgba(255, 255, 255, .85); --flake: #fff; }
.df-frost .door-leaf { background: linear-gradient(170deg, color-mix(in srgb, var(--pc) 45%, #fff), var(--pc)); }
.df-frost .orn-pos-corner { filter: drop-shadow(0 0 1cqmin rgba(40, 80, 140, .5)); }

/* flat: flat colour blocks, one geometric cut, big sans number */
.df-flat { --door-r: 14px; --door-font: 'Inter', system-ui, sans-serif; --door-border: 0; --num-shadow: none; --num-size: 46cqmin; --fn: #fff; --door-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.df-flat .door-number { letter-spacing: -.05em; }
.df-flat .door-leaf { background: radial-gradient(circle at 100% 100%, rgba(255, 255, 255, .22) 0 40cqmin, transparent 40.5cqmin), var(--pc); }
.df-flat.door-c1 .door-leaf { background: radial-gradient(circle at 0 0, rgba(255, 255, 255, .18) 0 42cqmin, transparent 42.5cqmin), var(--pc); }
.df-flat.door-c2 .door-leaf { background: radial-gradient(circle at 100% 0, rgba(255, 255, 255, .3) 0 38cqmin, transparent 38.5cqmin), var(--pc); }
.df-flat.door-c3 .door-leaf { background: radial-gradient(circle at 0 100%, rgba(255, 255, 255, .14) 0 44cqmin, transparent 44.5cqmin), var(--pc); }

/* cabin: wooden planks, wreath, brass knob */
.df-cabin { --door-border: 1.5px solid rgba(40, 18, 6, .6); --fn: #fff1d6; }
.df-cabin .door-leaf {
    background: repeating-linear-gradient(90deg, rgba(40, 15, 0, .22) 0 .8cqmin, transparent .8cqmin 25%), linear-gradient(170deg, var(--pc-l), var(--pc-d));
    align-items: flex-end;
    padding-bottom: 12%;
}
.df-cabin .door-number { font-size: 32cqmin; }
.df-cabin .door-leaf::after {
    content: '';
    position: absolute;
    right: 9%;
    top: 55%;
    width: 7cqmin;
    height: 7cqmin;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff0b8, #c99a32 60%, #7a5514);
    box-shadow: 0 .6cqmin 1.2cqmin rgba(0, 0, 0, .5);
}

/* card: clean business card with a coloured top bar, logo friendly */
.df-card { --door-r: 8px; --door-font: 'Inter', system-ui, sans-serif; --door-border: 1px solid rgba(0, 0, 0, .08); --num-shadow: none; --num-size: 38cqmin; --door-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.df-card .door-leaf { background: linear-gradient(180deg, var(--pc), color-mix(in srgb, var(--pc) 95%, #000)); }
.df-card .door-number { font-weight: 700; letter-spacing: -.04em; }
.df-card .door-leaf::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 7cqmin; background: var(--ac); }
.df-card .door-leaf::after { content: ''; position: absolute; left: 50%; bottom: 14%; width: 22cqmin; height: .9cqmin; transform: translateX(-50%); background: var(--ac); opacity: .35; border-radius: 1cqmin; }
.df-card.door-final .door-leaf { background: var(--ac); }
.df-card.door-final .door-number { color: var(--pc); }
.df-card.door-final .door-leaf::before { background: rgba(255, 255, 255, .35); }
.df-card.door-final .door-leaf::after { background: var(--pc); }

/* snowfall: night sky with falling snow */
.df-snowfall { --fn: #fff; --door-border: 1.5px solid rgba(220, 235, 255, .45); }
.df-snowfall .door-leaf {
    background:
        radial-gradient(circle, rgba(255, 255, 255, .8) 0 .9cqmin, transparent 1.2cqmin) 0 0 / 16cqmin 16cqmin,
        radial-gradient(circle, rgba(255, 255, 255, .45) 0 .7cqmin, transparent 1cqmin) 8cqmin 9cqmin / 16cqmin 16cqmin,
        linear-gradient(170deg, var(--pc-l), var(--pc-d));
}

/* stripes: candy stripes, number on a round candy badge */
.df-stripes { --door-border: 1.5px solid rgba(120, 10, 20, .35); --fn: color-mix(in srgb, var(--ac) 85%, #000); }
.df-stripes .door-leaf { background: repeating-linear-gradient(-45deg, var(--ac) 0 9cqmin, var(--pc) 9cqmin 18cqmin); }
.df-stripes .door-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54cqmin;
    height: 54cqmin;
    border-radius: 50%;
    background: var(--pc);
    border: 1.6cqmin solid var(--ac);
    font-size: 28cqmin;
    text-shadow: none;
    box-shadow: 0 1cqmin 3cqmin rgba(0, 0, 0, .3);
}

/* forest: snowy fir trees and a little star */
.df-forest {
    --fn: #fff4dc;
    --door-border: 1.5px solid rgba(200, 235, 205, .35);
    --fir: color-mix(in srgb, var(--pc) 30%, #4f9a6a);
    --fir-2: color-mix(in srgb, var(--pc) 45%, #2f6b45);
}
.df-forest .door-leaf { background: linear-gradient(175deg, var(--pc-l), var(--pc-d)); align-items: flex-start; padding-top: 28%; }
.df-forest .door-number { font-size: 34cqmin; }

/* starlight: night sky with sparkles and a fine frame */
.df-starlight { --fa: #f3d27a; --fn: var(--ac); --spark: var(--ac); --door-border: 1.5px solid color-mix(in srgb, var(--ac) 50%, transparent); }
.df-starlight .door-leaf { background: radial-gradient(ellipse at 50% 30%, var(--pc-l), var(--pc-d)); }
.df-starlight .door-leaf::before { content: ''; position: absolute; inset: 7cqmin; border: .9cqmin solid color-mix(in srgb, var(--ac) 55%, transparent); border-radius: 4cqmin; }
.df-starlight .door-number { text-shadow: 0 0 4cqmin color-mix(in srgb, var(--ac) 60%, transparent); }

/* iced: baked dough with piped icing */
.df-iced { --door-r: 14px; --fa: #fffaf0; --fn: #fffaf0; --num-shadow: 0 .8cqmin 0 rgba(90, 40, 10, .55); --door-border: 1.5px solid rgba(70, 30, 5, .5); }
.df-iced .door-leaf { background: radial-gradient(ellipse at 40% 30%, var(--pc-l), var(--pc-d)); padding-top: 10%; }
.df-iced .door-leaf::before { content: ''; position: absolute; inset: 6cqmin; border: 2cqmin dotted var(--ac); border-radius: 9cqmin; }

/* linen: Nordic linen, Selbu rose, double frame */
.df-linen { --door-r: 6px; --fn: var(--ac); --accent: var(--ac); --rose-core: var(--pc); --num-shadow: none; --door-border: 1px solid rgba(80, 50, 20, .2); --door-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.df-linen .door-leaf { background: linear-gradient(170deg, color-mix(in srgb, var(--pc) 60%, #fff), color-mix(in srgb, var(--pc) 93%, #5a3a10)); align-items: flex-end; padding-bottom: 16%; }
.df-linen .door-leaf::before { content: ''; position: absolute; inset: 5cqmin; border: .9cqmin solid var(--ac); border-radius: 2cqmin; }
.df-linen .door-leaf::after { content: ''; position: absolute; inset: 8.5cqmin; border: .5cqmin solid var(--ac); border-radius: 1.5cqmin; opacity: .5; }
.df-linen .door-number { font-size: 32cqmin; }

/* lacquer: deep lacquer, metallic hairline, crescent moon */
.df-lacquer { --door-r: 6px; --fn: var(--ac); --moon: var(--ac); --star: var(--ac); --star-line: color-mix(in srgb, var(--ac) 60%, #000); --num-shadow: none; --door-border: 1px solid color-mix(in srgb, var(--ac) 35%, transparent); }
.df-lacquer .door-leaf { background: linear-gradient(170deg, var(--pc-l), color-mix(in srgb, var(--pc) 45%, #000)); }
.df-lacquer .door-number { font-style: italic; font-weight: 600; }
.df-lacquer .door-leaf::before { content: ''; position: absolute; inset: 6cqmin; border: .5cqmin solid color-mix(in srgb, var(--ac) 70%, transparent); border-radius: 1.5cqmin; }

/* plaid: woven tartan with a stitched name label */
.df-plaid { --door-r: 8px; --fn: color-mix(in srgb, var(--pc) 75%, #000); --door-border: 1.5px solid rgba(0, 0, 0, .3); }
.df-plaid .door-leaf {
    background:
        repeating-linear-gradient(90deg, transparent 0 9cqmin, var(--pl, #e9c46a) 9cqmin 10cqmin, transparent 10cqmin 24cqmin),
        repeating-linear-gradient(0deg, transparent 0 9cqmin, var(--pl, #e9c46a) 9cqmin 10cqmin, transparent 10cqmin 24cqmin),
        repeating-linear-gradient(90deg, transparent 0 14cqmin, color-mix(in srgb, var(--ac) 55%, transparent) 14cqmin 22cqmin, transparent 22cqmin 24cqmin),
        repeating-linear-gradient(0deg, transparent 0 14cqmin, color-mix(in srgb, var(--ac) 55%, transparent) 14cqmin 22cqmin, transparent 22cqmin 24cqmin),
        var(--pc);
}
.df-plaid .door-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54cqmin;
    height: 38cqmin;
    border-radius: 4cqmin;
    /* the number sits on a tag, so it keeps the tag colour even with own door colours */
    color: var(--fn);
    background: #fff8ea;
    outline: .7cqmin dashed color-mix(in srgb, var(--pc) 70%, transparent);
    outline-offset: -3cqmin;
    box-shadow: 0 1cqmin 3cqmin rgba(0, 0, 0, .35);
    font-size: 24cqmin;
    text-shadow: none;
}

/* knit: Christmas jumper with Fair Isle bands */
.df-knit { --door-r: 12px; --fa: #fff8ec; --fn: var(--ac); --knit: var(--ac); --door-border: 1.5px solid rgba(0, 0, 0, .25); --num-shadow: 0 .6cqmin 0 rgba(0, 0, 0, .25); }
.df-knit .door-leaf {
    background:
        repeating-linear-gradient(60deg, rgba(255, 255, 255, .07) 0 1.2cqmin, transparent 1.2cqmin 4cqmin),
        repeating-linear-gradient(-60deg, rgba(0, 0, 0, .08) 0 1.2cqmin, transparent 1.2cqmin 4cqmin),
        linear-gradient(170deg, var(--pc-l), var(--pc-d));
}
.df-knit .door-number { font-size: 34cqmin; }

/* window: a house wall with a warm lit window */
.df-window { --door-r: 6px; --fa: #f4ead8; --fn: #fff4dc; --door-border: 1.5px solid rgba(0, 0, 0, .3); }
.df-window .door-leaf {
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .07) 0 .6cqmin, transparent .6cqmin 9cqmin), linear-gradient(170deg, var(--pc-l), var(--pc-d));
    align-items: flex-end;
    padding-bottom: 6%;
}
.df-window .door-leaf::before,
.df-window .door-leaf::after {
    content: '';
    position: absolute;
    top: 19%;
    left: 50%;
    width: 52cqmin;
    height: 54cqmin;
    transform: translateX(-50%);
    border-radius: 26cqmin 26cqmin 3cqmin 3cqmin;
}
.df-window .door-leaf::before {
    background: radial-gradient(ellipse at 50% 75%, #fff6cf 0%, #f8cf62 55%, #e39a34 100%);
    border: 2.4cqmin solid var(--ac);
    box-shadow: 0 0 7cqmin rgba(255, 205, 110, .55), 0 1.5cqmin 0 -.5cqmin rgba(0, 0, 0, .25);
}
.df-window .door-leaf::after {
    background:
        linear-gradient(var(--ac), var(--ac)) 50% 0 / 1.8cqmin 100% no-repeat,
        linear-gradient(var(--ac), var(--ac)) 0 58% / 100% 1.8cqmin no-repeat;
}
.df-window .door-number { font-size: 22cqmin; }

/* bauble: one big Christmas bauble, number on the ball */
.df-bauble { --fa: #c8402f; --fn: #fff; --door-border: 1.5px solid rgba(255, 255, 255, .25); --num-shadow: 0 .6cqmin 1.5cqmin rgba(0, 0, 0, .35); }
.df-bauble .door-leaf {
    background:
        radial-gradient(circle, rgba(255, 255, 255, .22) 0 .8cqmin, transparent 1.1cqmin) 0 0 / 15cqmin 15cqmin,
        linear-gradient(170deg, var(--pc-l), var(--pc-d));
}
.df-bauble .door-number { font-size: 28cqmin; color: var(--cpo, var(--nc)); }

/* polka: polka dots and a round badge */
.df-polka { --door-r: 12px; --fa: #fffaf0; --fn: var(--pc-d); --door-border: 1.5px solid rgba(0, 0, 0, .18); }
.df-polka .door-leaf {
    background:
        radial-gradient(circle, var(--pl, rgba(255, 255, 255, .5)) 0 2.2cqmin, transparent 2.5cqmin) 0 0 / 14cqmin 14cqmin,
        radial-gradient(circle, var(--pl, rgba(255, 255, 255, .5)) 0 2.2cqmin, transparent 2.5cqmin) 7cqmin 7cqmin / 14cqmin 14cqmin,
        var(--pc);
}
.df-polka .door-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52cqmin;
    height: 52cqmin;
    border-radius: 50%;
    /* the number sits on a tag, so it keeps the tag colour even with own door colours */
    color: var(--fn);
    background: var(--ac);
    box-shadow: 0 0 0 1.4cqmin color-mix(in srgb, var(--ac) 45%, transparent), 0 1.2cqmin 3cqmin rgba(0, 0, 0, .3);
    font-size: 27cqmin;
    text-shadow: none;
}

/* =================================================================
   Door popup (homepage demo and public calendar share it)
   ================================================================= */
.dm-card {
    position: relative;
    width: 100%;
    max-width: 30rem;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 22px;
    background: #fffdf8;
    box-shadow: 0 30px 80px -10px rgba(20, 10, 5, .55), 0 0 0 1px rgba(255, 255, 255, .5);
    animation: dmPop .45s cubic-bezier(.2, 1.3, .4, 1);
}
@keyframes dmPop {
    from { transform: translateY(18px) scale(.92); opacity: 0; }
    to { transform: none; opacity: 1; }
}
.dm-head {
    position: relative;
    height: 7.5rem;
    background:
        radial-gradient(circle, rgba(255, 255, 255, .55) 0 1.5px, transparent 2px) 0 0 / 26px 26px,
        radial-gradient(circle, rgba(255, 255, 255, .3) 0 1px, transparent 1.5px) 13px 11px / 26px 26px,
        linear-gradient(160deg, color-mix(in srgb, var(--brand, #8b1a1a) 80%, #fff), color-mix(in srgb, var(--brand, #8b1a1a) 85%, #000));
}
.dm-head::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 22px;
    background: #fffdf8;
    -webkit-mask: radial-gradient(14px 12px at 14px 0, transparent 98%, #000) -14px 0 / 28px 22px repeat-x;
    mask: radial-gradient(14px 12px at 14px 0, transparent 98%, #000) -14px 0 / 28px 22px repeat-x;
}
.dm-medal {
    position: absolute;
    left: 50%;
    bottom: -3.4rem;
    z-index: 2;
    width: 7.5rem;
    height: 7.5rem;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, #fffaf0, #f6e2b0);
    box-shadow: 0 0 0 5px #fffdf8, 0 0 0 8px #e2b54a, 0 12px 28px rgba(80, 40, 5, .35);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dm-medal svg { width: 72%; height: 72%; animation: dmWiggle 1.1s ease .25s; }
@keyframes dmWiggle {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-9deg) scale(1.06); }
    55% { transform: rotate(7deg); }
    80% { transform: rotate(-3deg); }
}
.dm-num {
    position: absolute;
    right: -.4rem;
    bottom: .1rem;
    min-width: 2.4rem;
    height: 2.4rem;
    padding: 0 .4rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 800 1.05rem/1 'Fraunces', Georgia, serif;
    color: #fff;
    background: radial-gradient(circle at 35% 30%, #f0cd6a, #b8862b);
    box-shadow: 0 0 0 3px #fffdf8, 0 4px 10px rgba(0, 0, 0, .25);
}
.dm-close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 3;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, .22);
    transition: background .2s;
}
.dm-close:hover { background: rgba(0, 0, 0, .4); }
.dm-body { padding: 4.4rem 1.75rem 1.75rem; text-align: center; }
.dm-label {
    display: inline-block;
    padding: .2rem .75rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--brand, #8b1a1a) 85%, #000);
    background: color-mix(in srgb, var(--brand, #8b1a1a) 10%, #fff);
}
.dm-title { margin-top: .6rem; font: 700 1.5rem/1.25 'Fraunces', Georgia, serif; color: #2a1a12; }
.dm-text { margin-top: .75rem; color: #4b3d35; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) {
    .dm-card, .dm-medal svg { animation: none; }
}

/* =================================================================
   Door contents inside the popup (public calendar)
   ================================================================= */
.dx-body { margin-top: .75rem; color: #4b3d35; line-height: 1.6; }
.dx-body svg { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dx-text { margin-top: .75rem; white-space: pre-wrap; }
.dx-body > .dx-text:first-child { margin-top: 0; }
.dx-rich { text-align: left; }
.dx-rich p, .dx-rich ul, .dx-rich ol, .dx-rich blockquote { margin: .5rem 0; }
.dx-rich ul { list-style: disc; padding-left: 1.3rem; }
.dx-rich ol { list-style: decimal; padding-left: 1.3rem; }
.dx-rich h2, .dx-rich h3, .dx-rich h4 { margin: .8rem 0 .3rem; font: 700 1.15rem/1.3 'Fraunces', Georgia, serif; color: #2a1a12; }
.dx-rich a { color: var(--brand, #8b1a1a); font-weight: 600; text-decoration: underline; }
.dx-rich img { max-width: 100%; border-radius: 12px; margin: .5rem auto; }
.dx-rich blockquote { padding-left: .9rem; border-left: 3px solid #e2b54a; font-style: italic; }
.dx-rich strong, .dx-rich b { color: #2a1a12; }
.dx-media {
    display: block;
    width: 100%;
    max-height: 55vh;
    object-fit: contain;
    border-radius: 14px;
    background: #1c1917;
    box-shadow: 0 8px 22px -8px rgba(40, 20, 10, .45);
}
img.dx-media { background: #f3ede2; }
.dx-frame { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.dx-frame iframe { width: 100%; height: 100%; border: 0; }
.dx-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.1rem; }
.dx-actions:empty { display: none; }
.dx-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .75rem 1.3rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.2;
    color: #fff;
    background: var(--brand, #8b1a1a);
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand, #8b1a1a) 70%, transparent);
    transition: transform .2s, filter .2s;
}
.dx-btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
.dx-btn-sm { padding: .55rem .95rem; font-size: .88rem; }
.dx-btn-ghost { color: var(--brand, #8b1a1a); background: color-mix(in srgb, var(--brand, #8b1a1a) 9%, #fff); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand, #8b1a1a) 30%, #fff); }
.dx-note { margin-top: .6rem; font-size: .82rem; color: #8a7a70; }

.dx-coupon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.1rem;
    border: 2px dashed #d4a843;
    border-radius: 14px;
    background: #fdf6e3;
}
.dx-code { font: 800 1.4rem/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; color: #2a1a12; word-break: break-all; }

.dx-question { font: 700 1.15rem/1.4 'Fraunces', Georgia, serif; color: #2a1a12; white-space: pre-wrap; }
.dx-choices { display: grid; gap: .5rem; margin-top: 1rem; }
.dx-choice {
    padding: .75rem 1rem;
    border-radius: 12px;
    font-weight: 600;
    text-align: left;
    color: #2a1a12;
    background: #fff;
    border: 2px solid #ece3d3;
    transition: border-color .2s, background .2s, transform .15s;
}
.dx-choice:not(:disabled):hover { border-color: color-mix(in srgb, var(--brand, #8b1a1a) 45%, #fff); transform: translateY(-1px); }
.dx-choice:disabled { cursor: default; }
.dx-choice.right { color: #1d5b33; background: #dff1e4; border-color: #6fbf8a; }
.dx-choice.wrong { color: #9b2c2c; background: #fde8e8; border-color: #eba3a3; animation: dxShake .35s; }
@keyframes dxShake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.dx-feedback { margin-top: .7rem; min-height: 1.4em; font-weight: 700; }
.dx-feedback.ok { color: #1d5b33; }
.dx-feedback.no { color: #9b2c2c; }
.dx-reveal { margin-top: 1rem; }
.dx-reveal summary {
    display: inline-block;
    cursor: pointer;
    list-style: none;
    padding: .6rem 1.2rem;
    border-radius: 999px;
    font-weight: 700;
    color: var(--brand, #8b1a1a);
    background: color-mix(in srgb, var(--brand, #8b1a1a) 9%, #fff);
    border: 2px dashed color-mix(in srgb, var(--brand, #8b1a1a) 35%, #fff);
}
.dx-reveal summary::-webkit-details-marker { display: none; }
.dx-reveal[open] summary { display: none; }
.dx-reveal p { padding: .8rem 1rem; border-radius: 14px; font-weight: 700; color: #1d5b33; background: #dff1e4; animation: dmPop .4s cubic-bezier(.2, 1.3, .4, 1); }

.dx-product-img { aspect-ratio: 4 / 3; object-fit: cover; }
.dx-price {
    display: inline-block;
    margin-top: .9rem;
    padding: .3rem .9rem;
    border-radius: 999px;
    font: 800 1.15rem/1.3 'Fraunces', Georgia, serif;
    color: #6b4a08;
    background: linear-gradient(135deg, #f7e2a6, #e8c969);
}
.dx-body > .dx-price:first-child { margin-top: 0; }

.dx-facts { display: grid; gap: .45rem; padding: .9rem 1rem; border-radius: 14px; background: #f8f1e4; text-align: left; }
.dx-facts li { display: flex; align-items: center; gap: .6rem; font-weight: 600; color: #2a1a12; }
.dx-facts svg { color: var(--brand, #8b1a1a); }

.dx-prize {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    text-align: left;
    color: #6b4a08;
    background: linear-gradient(135deg, #fbecc4, #f1d47e);
}
.dx-prize svg { width: 2.2rem; height: 2.2rem; }
.dx-prize small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dx-prize strong { display: block; font: 700 1.2rem/1.3 'Fraunces', Georgia, serif; color: #2a1a12; }

.dx-file {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 1rem;
    padding: .7rem 1rem;
    border-radius: 12px;
    font-weight: 600;
    color: #2a1a12;
    background: #f8f1e4;
    word-break: break-all;
}
.dx-file svg { color: var(--brand, #8b1a1a); }

.dx-results { display: grid; gap: .5rem; margin-top: 1rem; }
.dx-results li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .7rem 1rem;
    border-radius: 12px;
    overflow: hidden;
    background: #f5efe5;
    text-align: left;
}
.dx-results li.mine { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand, #8b1a1a) 45%, #fff); }
.dx-bar { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--brand, #8b1a1a) 16%, #fff); transition: width .7s cubic-bezier(.2, .8, .3, 1); }
.dx-res-label, .dx-res-pct { position: relative; display: flex; align-items: center; gap: .4rem; font-weight: 600; color: #2a1a12; }
.dx-res-pct { font-variant-numeric: tabular-nums; }

.dx-audio {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .75rem 1rem;
    padding: 1rem;
    border-radius: 16px;
    text-align: left;
    color: #fff;
    background: radial-gradient(120% 120% at 20% 0%, color-mix(in srgb, var(--brand, #8b1a1a) 85%, #fff), color-mix(in srgb, var(--brand, #8b1a1a) 75%, #000));
}
.dx-audio-icon { display: flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border-radius: 12px; background: rgba(255, 255, 255, .16); }
.dx-audio-icon svg { width: 1.7rem; height: 1.7rem; }
.dx-audio-meta strong { display: block; font: 700 1.05rem/1.3 'Fraunces', Georgia, serif; }
.dx-audio-meta small { display: block; opacity: .8; }
.dx-audio audio { grid-column: 1 / -1; width: 100%; }
.dx-audio-frame { width: 100%; border: 0; border-radius: 14px; }
@media (prefers-reduced-motion: reduce) {
    .dx-choice.wrong, .dx-reveal p { animation: none; }
}