@font-face{font-family:'Monsieur La Doulaise';src:url('assets/fonts/monsieur-la-doulaise.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}

:root{--paper:#f4eee7;--wine:#b5222b;--ink:#292a24;--green:#183b2e}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:none}header{height:var(--header-height);padding:var(--space-32) var(--page-gutter);display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:2}.brand{text-decoration:none;color:var(--wine);display:flex;flex-direction:column;align-items:center}.brand span{font-family:'Instrument Serif',Georgia,serif;font-size:64px;line-height:1}.brand small{font-family:'Instrument Serif',serif;letter-spacing:5px;font-size:12px;margin-top:var(--space-4)}.pill{border:0;border-radius:var(--radius-pill);background:var(--wine);color:#fff8ec;padding:var(--space-16) var(--space-24);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);font-family:'Instrument Serif',Georgia,serif;font-size:21px;transition:background .2s,transform .2s}.pill:hover{background:#cc3038;transform:translateY(-2px)}main{height:calc(100svh - 200px);min-height:350px;display:grid;place-items:center;overflow:hidden}.scene{width:min(1300px,94vw,calc((100svh - 180px)*2.3));aspect-ratio:1586/670;position:relative;isolation:isolate;perspective:1000px}.scene img{width:100%;position:absolute;top:-30.3%;left:0;user-select:none;mix-blend-mode:multiply;clip-path:inset(23% 0 0 0)}#windows{position:absolute;inset:0}.window{position:absolute;padding:0;border:1px solid #8b7651;background:#25362a;color:#f5e5bc;box-shadow:inset 0 0 10px #101c15,0 0 4px #fff0c1;font-family:'Instrument Serif',serif;font-size:clamp(11px,1.3vw,21px);transform-style:preserve-3d;transform-origin:left;transition:transform .6s,box-shadow .3s;display:grid;place-items:center}.window:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 22%,#080e0830 23% 24%);pointer-events:none}.window:hover{box-shadow:0 0 15px 5px #ffda8a;transform:rotateY(-22deg);z-index:3}.window.opened{background:#b5823b;color:white;box-shadow:0 0 15px #e7ba66}.window.watched:after{content:'✓';position:absolute;right:2px;bottom:1px;font:10px Manrope}.window.opening{transform:rotateY(-100deg);box-shadow:0 0 25px #ffdc8a}footer{height:60px;display:flex;justify-content:space-between;align-items:center;padding:0 var(--page-gutter);font-size:10px;letter-spacing:1px;color:#827568}footer button{border:0;background:none;color:#776459;font-size:11px}.demo{font-size:9px}dialog{border:1px solid #dbcbb4;border-radius:16px;padding:0;background:#faf5ec;color:var(--ink);box-shadow:0 30px 120px #21190f40;max-height:88svh;overscroll-behavior:contain}dialog::backdrop{background:#211c1960;backdrop-filter:blur(7px)}.close{position:absolute;right:var(--space-16);top:var(--space-16);width:var(--space-40);height:var(--space-40);border:0;background:#faf5ece8;border-radius:50%;font-size:27px;z-index:2;color:var(--wine)}#movie-dialog{width:min(760px,92vw)}#movie-dialog[open]{display:grid;grid-template-columns:40% 60%}.movie-visual{min-height:440px;background:radial-gradient(ellipse at bottom,#bc9063,#294135 75%);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.movie-visual:before{content:'✧  ·  ✦  ·  ✧';position:absolute;top:24%;color:#ecd6a9;font-size:27px;letter-spacing:15px}.movie-visual #movie-emoji{font-size:100px;filter:drop-shadow(0 8px 15px #0005)}.movie-visual small{position:absolute;bottom:var(--space-32);color:#f8e4be;letter-spacing:5px;font-size:11px}.movie-copy{padding:var(--space-48) var(--space-32) var(--space-32)}.eyebrow{font-size:9px;letter-spacing:2.2px;color:var(--wine)}h2{font-family:'Instrument Serif',Georgia,serif;font-weight:500;font-size:43px;line-height:1.03;margin:var(--space-16) 0}.muted{font-size:11px;color:#827567}.movie-copy>p:not(.eyebrow):not(.muted):not(.availability){font-family:'Instrument Serif',Georgia,serif;font-size:20px;line-height:1.5}.provider-title{margin-top:var(--space-32)}.provider{color:var(--wine);font-size:13px;text-underline-offset:var(--space-4)}.availability{font-size:10px;color:#85776b;margin-top:var(--space-16)}.actions{display:flex;gap:var(--space-8);margin-top:var(--space-24);flex-wrap:wrap}.actions .pill{font:12px Manrope;padding:var(--space-12) var(--space-16)}.secondary{border:1px solid #cbbca7;border-radius:var(--radius-pill);background:transparent;padding:var(--space-12) var(--space-16);font-size:12px;color:var(--wine)}#calendar-dialog{width:min(760px,94vw);padding:var(--space-40)}#calendar-dialog h2{font-size:45px}h2 em{color:var(--wine);font-weight:400}.tabs{display:flex;border-bottom:1px solid #ddcfbc;gap:var(--space-24);margin:var(--space-24) 0 var(--space-16)}.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:var(--space-12) 0;font-size:12px;color:#7a6c60}.tabs button.active{border-color:var(--wine);color:var(--wine)}#film-list{max-height:43svh;overflow:auto}.film-row{width:100%;display:flex;align-items:center;text-align:left;gap:var(--space-16);padding:var(--space-12) var(--space-4);border:0;border-bottom:1px solid #e6dccd;background:none;color:var(--ink)}.film-row:hover{background:#eee5d7}.film-row .day{font:25px 'Instrument Serif',serif;color:var(--wine);width:30px}.film-row .name{flex:1;font:21px 'Instrument Serif',serif}.film-row small{display:block;font:10px Manrope;color:#8b7d70;margin-top:var(--space-4)}.film-row .state{font-size:12px;color:var(--green)}.empty{padding:var(--space-32) 0;color:#817568;font-size:13px}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--green);color:#fff4df;padding:var(--space-12) var(--space-24);border-radius:var(--radius-pill);font-size:12px;transition:.2s;z-index:20}#toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:600px){header{height:var(--header-height);padding:var(--space-24) var(--page-gutter)}.brand span{font-size:47px}.brand small{font-size:9px;letter-spacing:3px}.pill{font-size:17px;padding:var(--space-12) var(--space-16)}main{height:calc(100svh - 210px);min-height:300px}.scene{width:150vw;flex-shrink:0;transform:scale(.85)}footer{height:90px;padding:var(--space-12) 6%;flex-wrap:wrap;gap:var(--space-16)}.demo{width:100%;text-align:center}#movie-dialog[open]{grid-template-columns:1fr}.movie-visual{min-height:140px}.movie-visual #movie-emoji{font-size:65px}.movie-visual:before{top:20%;font-size:17px}.movie-visual small{bottom:15px}.movie-copy{padding:var(--space-24)}h2{font-size:36px}.movie-copy>p:not(.eyebrow):not(.muted):not(.availability){font-size:18px}#calendar-dialog{padding:var(--space-32) var(--space-24)}.film-row .name{font-size:19px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Blend the photographic canvas into the page without a rectangular edge. */
.scene img{mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent 20%,#000 29%,#000 85%,transparent 98%);mask-composite:intersect}
@media(min-width:601px) and (max-width:850px){.scene{width:110vw}.brand span{font-size:58px}}
.three-main{position:relative;height:calc(100svh - 200px);min-height:416px;display:flex;flex-direction:column;overflow:hidden}.scene.scene-3d{width:100%;height:100%;aspect-ratio:auto;transform:none;perspective:none;touch-action:none;flex:1;min-height:0;cursor:grab}.scene.scene-3d:active{cursor:grabbing}#three-stage{position:absolute;inset:0}#three-stage canvas{display:block;width:100%;height:100%}.scene-3d #windows{pointer-events:none}.day-3d{position:absolute;transform:translate(-50%,-50%);width:32px;height:40px;padding:0;border:0;background:transparent;color:#f6e3b3;font:19px 'Instrument Serif',Georgia,serif;pointer-events:auto;cursor:pointer;text-shadow:0 1px 3px #0008;border-radius:3px;transition:background .15s}.day-3d:hover{background:transparent;box-shadow:none;text-shadow:0 0 8px #ffdc88,0 1px 3px #0008}.day-3d.is-open{color:#fff6dc;background:transparent}.day-3d.is-watched:after{content:'✓';position:absolute;bottom:-3px;right:2px;font:10px Manrope}.day-3d[hidden]{display:none}.orbit-tools{display:flex;align-items:center;justify-content:center;gap:var(--space-16);padding:var(--space-8) 0 var(--space-12);color:#897669;font-size:10px;letter-spacing:.5px}.orbit-tools button{border:1px solid #d4c7b8;background:transparent;color:#705647;padding:var(--space-8) var(--space-12);border-radius:var(--radius-pill);font-size:10px}.orbit-tools button:hover{background:#e9dfd2}#three-error{position:absolute;top:40%;left:20%;width:60%;padding:var(--space-24);background:var(--paper);text-align:center;font-size:14px}@media(max-width:600px){.three-main{height:calc(100svh - 210px);min-height:368px}.day-3d{width:24px;height:32px;font-size:15px}.orbit-tools{gap:var(--space-8)}.orbit-tools span{font-size:9px}}
.cinema-active{cursor:default!important}header button:disabled{opacity:.5;cursor:default}

/* A collectible ceramic ornament for each film, cropped from the collection atlas. */
.movie-visual{isolation:isolate;background:#514a36}
.movie-visual:before{content:'';inset:-30%;top:-30%;background-image:url('assets/movie-ornaments.webp');background-size:600% 400%;background-position:var(--ornament-x) var(--ornament-y);filter:blur(35px) brightness(.68) saturate(.65);z-index:-1}
.movie-visual #movie-emoji{display:block;width:100%;aspect-ratio:1;flex-shrink:0;background-image:url('assets/movie-ornaments.webp');background-repeat:no-repeat;background-size:600% 400%;background-position:var(--ornament-x) var(--ornament-y);font-size:0;filter:none;mask-image:radial-gradient(ellipse 75% 85% at 50% 50%,#000 48%,transparent 78%)}
.movie-visual small{z-index:1;color:#f6e7c5;text-shadow:none}
@media(max-width:600px){.movie-visual{min-height:240px;max-height:280px}.movie-visual #movie-emoji{width:240px;max-width:80%}.movie-visual small{bottom:var(--space-12)}}

.movie-visual.single-ornament{background:radial-gradient(ellipse at 50% 78%,#85704b 0%,#233d30 75%)}
.movie-visual.single-ornament:before{display:none}
.movie-visual.single-ornament #movie-emoji{width:90%;height:78%;aspect-ratio:auto;background-image:var(--single-ornament-image,url('assets/elf-buddy-ornament.webp'));background-size:contain;background-position:center;background-repeat:no-repeat;mask-image:none;filter:drop-shadow(0 15px 16px #071c1855)}
@media(max-width:600px){.movie-visual.single-ornament #movie-emoji{height:210px;width:80%}}

/* A hanging ceramic ornament: thread, branch and a gentle pendulum. */
.hanging-ornament{display:contents}.ornament-branch{display:none}.ornament-thread{display:none}
.movie-visual.single-ornament .ornament-branch{display:block;position:absolute;left:-5%;top:calc(-1 * var(--space-16));width:110%;height:auto;aspect-ratio:3/1;object-fit:contain;object-position:center;z-index:2;filter:drop-shadow(0 5px 5px #071b1666);pointer-events:none}
.movie-visual.single-ornament .hanging-ornament{display:flex;align-items:center;justify-content:center;position:absolute;top:var(--space-56);bottom:var(--space-56);left:5%;width:90%;transform-origin:50% 0;animation:ornament-sway 4.8s ease-in-out infinite}
.movie-visual.single-ornament .ornament-thread{display:block;position:absolute;left:calc(50% - .5px);top:0;width:1px;height:40px;background:linear-gradient(90deg,#9a783d,#ebd595,#937337);box-shadow:1px 0 2px #0003;z-index:1}
.movie-visual.single-ornament #movie-emoji{display:block;position:absolute;inset:var(--space-32) 0 0;width:100%;height:auto;max-width:none;aspect-ratio:auto;background-image:var(--single-ornament-image,url('assets/elf-buddy-ornament.webp'));background-size:contain;background-repeat:no-repeat;background-position:top center;mask-image:none;filter:none;font-size:0}
.movie-visual.single-ornament .hanging-ornament:hover{animation-play-state:paused}
@keyframes ornament-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@media(max-width:600px){.movie-visual.single-ornament{min-height:288px;max-height:312px}.movie-visual.single-ornament .ornament-branch{height:auto;top:calc(-1 * var(--space-24))}.movie-visual.single-ornament .hanging-ornament{top:var(--space-32);bottom:var(--space-32);left:10%;width:80%}.movie-visual.single-ornament #movie-emoji{inset:var(--space-24) 0 0}.movie-visual.single-ornament .ornament-thread{height:var(--space-32)}}
@media(prefers-reduced-motion:reduce){.movie-visual.single-ornament .hanging-ornament{animation:none;transform:none}}

/* Lift the house and its projected window controls together. */
.scene.scene-3d{transform:translateY(-5%)}

/* Blue hour: the visited windows become the calendar's progress lights. */
body{background:#09251f;background:radial-gradient(ellipse at 50% 38%,#143a2e 0%,#09251f 58%,#061b17 100%);background-attachment:fixed;color:#f2e6d1}
header .brand{color:#f1e1bd}
header .pill{background:var(--wine);color:#fff1d4;box-shadow:inset 0 0 0 1px #e6b98e24}
footer,footer button{color:#b3afa3}
.orbit-tools{color:#a9b4b7}.orbit-tools button{border-color:#80919a66;color:#e3dbcc}.orbit-tools button:hover{background:#ffffff0c}
.day-3d{color:#d0c9ae;text-shadow:0 1px 4px #000}
.day-3d.is-open{color:#fff0c0;background:transparent;text-shadow:0 0 9px #ffd88b66,0 1px 3px #000}
.intro{background:#09251f}.intro h1{color:#f1e1bd}.skip{color:#bdc3bc}
#three-error{background:#152630;color:#f1e1bd}

.scene-3d:focus-visible{outline:none}

#snowfall{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}#snow-toggle{border:0;background:none;color:inherit;font:10px Manrope,Arial,sans-serif;cursor:pointer;padding:var(--space-8) var(--space-8)}#snow-toggle[aria-pressed="false"]{opacity:.65}footer{position:relative;z-index:2}
/* One footer bar: every label shares its vertical centre. */
:root{--footer-height:64px}
footer{height:var(--footer-height);min-height:var(--footer-height);padding:0 var(--page-gutter);display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;align-content:center;gap:var(--space-24)}
footer>span,footer>button{display:inline-flex;align-items:center;justify-content:center;align-self:center;height:100%;min-height:0;margin:0;padding-block:0;line-height:16px;white-space:nowrap}
footer>button,#snow-toggle{padding-block:0;min-height:0}
footer>#snow-toggle{padding-inline:0;justify-content:flex-end}
.three-main{height:calc(100svh - var(--header-height) - var(--footer-height))}
@media(max-width:600px){
 footer{padding:0 var(--page-gutter);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr 1fr;gap:0 var(--space-12)}
 footer>#snow-toggle{grid-area:1/2;justify-self:end}
 footer>#progress{grid-area:2/1;justify-self:start;font-size:9px;letter-spacing:.3px;white-space:normal}
 footer>.demo{grid-area:2/2;justify-self:end;width:auto;font-size:8px;letter-spacing:.3px}
 .three-main{height:calc(100svh - var(--header-height) - var(--footer-height))}
}

/* Instrument Serif for display, Manrope for interface and reading. */
:root{--font-display:'Instrument Serif',Georgia,serif;--font-ui:'Manrope',Arial,sans-serif}
body{font-family:var(--font-ui)}
.brand span{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:60px}
.brand small{font-family:var(--font-ui);font-size:10px;letter-spacing:3.6px}
h2,.film-row .name,.intro h1{font-family:var(--font-display);font-weight:400}
.intro h1{font-style:italic}
.pill{font-family:var(--font-ui);font-size:14px;font-weight:500}
.movie-copy>p:not(.eyebrow):not(.muted):not(.availability){font-family:var(--font-ui);font-size:14px;line-height:1.7}
.eyebrow{font-weight:500}.muted{line-height:1.6}
@media(max-width:600px){.brand span{font-size:46px}.brand small{font-size:8px;letter-spacing:2.4px}.pill{font-size:12px}.movie-copy>p:not(.eyebrow):not(.muted):not(.availability){font-size:13px}}

/* Tall cinematic capitals crossed by a flowing script, inspired by the reference. */
header .brand{--logo-unit:.8px;position:relative;display:block;width:calc(228 * var(--logo-unit));height:calc(105 * var(--logo-unit));flex:none;color:#f1e1bd}
header .brand span{position:absolute;display:block;margin:0;white-space:nowrap;font-weight:400;line-height:1}
header .brand .brand-kicker{font-family:'Bodoni Moda',Didot,'Times New Roman',serif;font-style:normal;font-weight:500;font-size:calc(77 * var(--logo-unit));letter-spacing:calc(-4 * var(--logo-unit));right:0;top:calc(-8 * var(--logo-unit));transform:scaleX(.86);transform-origin:right center}
header .brand .brand-base{font-family:'Monsieur La Doulaise','Great Vibes',cursive;font-style:normal;font-weight:400;font-size:calc(82 * var(--logo-unit));letter-spacing:0;left:0;top:calc(26 * var(--logo-unit));transform:rotate(-3deg);transform-origin:50% 50%;z-index:1}
@media(max-width:600px){header .brand{--logo-unit:.62px}}
@media(max-width:380px){header .brand{--logo-unit:.52px}}
header .pill:hover{background:#cc3038}

/* A gold-foil sleigh writes the Christmas cinema invitation across the night. */
.intro{position:fixed;inset:0;z-index:50;overflow:hidden;isolation:isolate;display:grid;place-items:center;background:radial-gradient(ellipse at 48% 49%,#173d30 0%,#0a261f 52%,#061b17 100%);transition:opacity .6s,visibility .6s}
.intro.done{opacity:0;visibility:hidden;pointer-events:none}
.intro-stars,#intro-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.intro-stars{opacity:.7}
.intro-art{position:relative;width:min(1100px,86vw);z-index:1;transform:translateY(-32px);text-align:center;pointer-events:none}
.intro h1{margin:0;color:#f4e3bd;font-family:'Monsieur La Doulaise','Great Vibes',cursive;font-weight:400;font-style:normal;font-size:clamp(60px,11vw,150px);line-height:1;letter-spacing:0;white-space:nowrap;opacity:var(--title-visible,0);clip-path:inset(-45% calc(100% - var(--title-reveal,0%)) -45% -30%);padding:0;text-shadow:0 2px 28px #e2c48312}
.intro h1 span{display:inline;font-size:1em;margin:0;padding:0}
.santa-flight{position:absolute;left:0;top:0;width:clamp(350px,45vw,590px);will-change:transform;pointer-events:none;opacity:0;z-index:2;filter:drop-shadow(0 1px 7px #e0c99c18)}
.santa-illustration{display:block;width:100%;height:auto;overflow:visible}
.intro.is-playing .deer-pair>g,.intro.is-playing .deer-pair>use{animation:reindeer-bound .78s var(--gallop-delay,0s) ease-in-out infinite}
.intro.is-playing .deer-hind{transform-box:fill-box;transform-origin:80% 0;animation:deer-kick .78s ease-in-out infinite}
.intro.is-playing .deer-front{transform-box:fill-box;transform-origin:0 0;animation:deer-reach .78s ease-in-out infinite}
.intro.is-playing .sleigh-bob{animation:sleigh-drift 1.5s ease-in-out infinite}
@keyframes reindeer-bound{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@keyframes deer-kick{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(12deg)}}
@keyframes deer-reach{0%,100%{transform:rotate(7deg)}50%{transform:rotate(-9deg)}}
@keyframes sleigh-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(max-width:600px){.intro-art{width:88vw;transform:translateY(-25px)}.intro h1{font-size:clamp(60px,15vw,94px);line-height:1;padding:0}.intro h1 span{margin:0;padding:0}.santa-flight{width:350px}}
@media(prefers-reduced-motion:reduce){.intro{transition:none}.santa-flight,#intro-dust{display:none}.intro h1{opacity:1;clip-path:none}.intro .santa-illustration *{animation:none!important}}

.intro-wait{position:absolute;bottom:calc(var(--space-24) + env(safe-area-inset-bottom,0px));left:var(--page-gutter);right:var(--page-gutter);margin:0;text-align:center;color:#d3c7ad;font:400 11px/16px var(--font-ui);letter-spacing:1px}
#house-loading{position:absolute;top:48%;left:0;width:100%;margin:0;text-align:center;color:#d3c7ad;font:13px var(--font-ui);letter-spacing:.5px}
#house-loading[hidden],.intro-wait[hidden]{display:none}

/* Preserve the reference layout and type sizes; refine spacing and icons only. */
#movie-dialog .movie-copy{padding:var(--space-48) var(--space-32) var(--space-32)}
#movie-dialog .movie-copy>.eyebrow{font-size:9px;line-height:16px;font-weight:500;letter-spacing:2.2px}
#movie-title{font:400 43px/48px var(--font-display);letter-spacing:-.3px;margin:var(--space-16) 0 var(--space-8);text-wrap:balance;overflow-wrap:anywhere}
#movie-meta{font:400 11px/16px var(--font-ui);color:#827567;margin:0 0 var(--space-16)}
#movie-dialog #movie-description{font:400 14px/24px var(--font-ui);margin:0 0 var(--space-24);color:var(--ink)}
#movie-dialog .actions{display:flex;flex-wrap:wrap;gap:var(--space-8);margin:var(--space-32) 0 0}
#movie-dialog .actions>button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);min-height:var(--control-height);padding:var(--space-12) var(--space-16);font:400 12px/16px var(--font-ui);white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
#movie-dialog .actions .pill:hover{transform:none}
#movie-dialog #save[aria-pressed=true]{background:#971b24}
#movie-dialog #watched[aria-pressed=true]{background:#e7eee6;border-color:#b1c1af;color:#214d36}
.button-icon{display:block;flex:none;transform-origin:center;transform-box:fill-box}
.close{display:grid;place-items:center;padding:0}
.close .button-icon{width:var(--icon-small);height:var(--icon-small)}
#calendar.pill{gap:var(--space-8);min-height:var(--control-height);padding:var(--space-12) var(--space-24);font:500 14px/24px var(--font-ui)}
.film-row .state{display:inline-flex;align-items:center;gap:var(--space-4)}
.film-row .state .button-icon{width:14px;height:14px}
#save:is(:hover,:focus-visible) .icon-heart{animation:heart-beat 1.4s ease-in-out infinite}
#calendar:is(:hover,:focus-visible) .calendar-date{animation:calendar-date-in .4s both}
#calendar .calendar-date:nth-of-type(2){animation-delay:0s}
#calendar .calendar-date:nth-of-type(3){animation-delay:.05s}
#calendar .calendar-date:nth-of-type(4){animation-delay:.1s}
#calendar .calendar-date:nth-of-type(5){animation-delay:.15s}
#calendar .calendar-date:nth-of-type(6){animation-delay:.2s}
#calendar .calendar-date:nth-of-type(7){animation-delay:.25s}
@keyframes heart-beat{0%,60%,100%{transform:scale(1)}14%{transform:scale(1.16)}28%{transform:scale(1)}42%{transform:scale(1.1)}}
@keyframes calendar-date-in{from{opacity:0}to{opacity:1}}
@media(max-width:600px){
 #movie-dialog .movie-copy{padding:var(--space-24)}
 #movie-title{font-size:36px;line-height:40px}
 #movie-meta{margin-bottom:var(--space-16)}
 #movie-dialog #movie-description{font-size:13px;line-height:24px;margin-bottom:var(--space-24)}
 #movie-dialog .actions{margin-top:var(--space-24)}
 #calendar.pill{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
 #save .icon-heart,#calendar .calendar-date{animation:none!important}
 #movie-dialog .actions>button{transition:none}
}
/* My tree is a second destination beside the film calendar. */
.tree-link{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);min-height:var(--control-height);padding:var(--space-12) var(--space-24);border:1px solid #f1e1bd55;border-radius:var(--radius-pill);text-decoration:none;color:#f1e1bd;font:500 14px/24px var(--font-ui);white-space:nowrap}
.tree-link:hover{background:#f1e1bd12;border-color:#f1e1bd99}
.tree-link svg{flex:none;width:var(--icon-large);height:var(--icon-large)}
.tree-count{display:inline-flex;align-items:center;justify-content:center;min-width:var(--space-24);height:var(--space-24);padding:0 var(--space-4);border-radius:50%;background:#f1e1bd;color:#14392b;font:600 10px/16px var(--font-ui)}
.tree-count[hidden]{display:none}
@media(max-width:600px){.header-actions .tree-link{width:var(--space-48);padding:var(--space-12);position:relative}.tree-link>span:not(.tree-count){display:none}.tree-link .tree-count{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;font-size:8px}.header-actions{gap:var(--space-8)}}

/* The home-page tree link uses the same hover/focus feedback as Calendar. */
.tree-link svg{overflow:visible}.tree-button-fir{transform-box:fill-box;transform-origin:50% 100%}
.tree-button-light{fill:#b5222b;opacity:0;transform-box:fill-box;transform-origin:center}
.tree-link:is(:hover,:focus-visible) .tree-button-fir{animation:tree-link-sway .8s ease-out both}
.tree-link:is(:hover,:focus-visible) .tree-button-light{animation:tree-link-light .55s both}
.tree-link .tree-button-light:nth-of-type(2){animation-delay:.08s}.tree-link .tree-button-light:nth-of-type(3){animation-delay:.16s}.tree-link .tree-button-light:nth-of-type(4){animation-delay:.24s}.tree-link .tree-button-light:nth-of-type(5){animation-delay:.32s}
@keyframes tree-link-sway{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}60%{transform:rotate(5deg)}}
@keyframes tree-link-light{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.25)}100%{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.tree-link .tree-button-fir,.tree-link .tree-button-light{animation:none!important}.tree-link:is(:hover,:focus-visible) .tree-button-light{opacity:1}}


/* An advent postcard: shared typography and corner artwork for facts and riddles. */
#waiting-dialog{width:min(760px,calc(100vw - 32px));padding:0;background:#faf5eb url('assets/calendar-paper.svg');color:#302d26;border:1px solid #d9c7a9;border-radius:12px;max-height:calc(100svh - 32px);overflow:auto}
#waiting-dialog[open]{display:grid;grid-template-columns:240px minmax(0,1fr)}
#waiting-dialog .close{top:8px;right:8px;width:48px;height:48px;background:none;padding:16px}
#waiting-dialog .close svg{width:16px;height:16px}
.waiting-accessible-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.waiting-postcard-date{position:relative;isolation:isolate;overflow:hidden;background:#a8212c;color:#f5e6bf;padding:40px 24px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border-right:1px dashed #e0b590}
.waiting-handwritten{font:400 48px/40px 'Monsieur La Doulaise',cursive;margin:0 0 32px;transform:rotate(-7deg);white-space:nowrap}
.waiting-date-block{display:flex;flex-direction:column;align-items:center}
#waiting-date-number{display:block;font:400 128px/112px var(--font-display);letter-spacing:-.04em}
.waiting-date-month{font:400 28px/40px var(--font-display)}
#waiting-countdown{font:400 16px/24px var(--font-ui);color:#f1d1b0;margin:24px 0 0;max-width:20ch}
.waiting-seal{width:56px;height:56px;display:grid;place-items:center;border:1px solid #e3c59b99;border-radius:50%;margin-top:32px;transform:rotate(-8deg)}
.waiting-gift{display:block;width:24px;height:24px;color:#f5e6bf}
.waiting-celebration{position:absolute;inset:0;pointer-events:none;z-index:-1;color:#ffe6ad}
.waiting-celebration svg{position:absolute;width:16px;height:16px;opacity:0}
.waiting-celebration svg:nth-child(1){left:12%;top:22%}.waiting-celebration svg:nth-child(2){right:12%;top:14%}.waiting-celebration svg:nth-child(3){left:9%;top:58%;width:12px}.waiting-celebration svg:nth-child(4){right:13%;top:64%;width:12px}.waiting-celebration svg:nth-child(5){right:20%;bottom:13%}
.is-solved .waiting-celebration svg{animation:waiting-little-win .9s ease-out both}
.is-solved .waiting-celebration svg:nth-child(2){animation-delay:.08s}.is-solved .waiting-celebration svg:nth-child(3){animation-delay:.16s}.is-solved .waiting-celebration svg:nth-child(4){animation-delay:.24s}.is-solved .waiting-celebration svg:nth-child(5){animation-delay:.32s}
@keyframes waiting-little-win{0%{opacity:0;transform:translateY(8px) scale(.4) rotate(-20deg)}40%{opacity:1;transform:translateY(-6px) scale(1.15) rotate(10deg)}100%{opacity:0;transform:translateY(-20px) scale(.7) rotate(25deg)}}
.waiting-postcard-play{display:flex;flex-direction:column;min-width:0;min-height:528px;padding:40px 32px 32px}
.waiting-play-title,#waiting-fact-title{font:400 56px/56px var(--font-display);letter-spacing:-.025em;text-wrap:balance;margin:0 24px 24px 0;color:#253c30;overflow-wrap:break-word}
.waiting-play-title em,#waiting-fact-title em{font-weight:400;color:#a8212c}
#waiting-fact-title em{display:block}
.is-fact .waiting-play-title{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#waiting-question,#waiting-fact-text{font:400 16px/24px var(--font-ui);margin:0 0 24px;color:#50483e}
#waiting-fact-text{margin-bottom:0}
#waiting-answers{display:flex;flex-direction:column;gap:8px}
#waiting-answers button{display:flex;align-items:center;gap:16px;min-height:48px;padding:8px 16px;text-align:left;border:1px solid #d4c6b1;border-radius:8px;background:transparent;color:#493f34;font:500 16px/24px var(--font-ui);transition:background .18s,border-color .18s}
.waiting-choice-letter{display:grid;place-items:center;width:32px;height:32px;border:1px solid #d4c6b1;border-radius:50%;font:400 16px/24px var(--font-display);color:#8b7660;flex:none}
@media(hover:hover){
 #waiting-answers button:not(:disabled):not(.is-wrong):hover{background:transparent;border-color:#31573e}
 #waiting-answers button:not(:disabled):not(.is-wrong):hover .waiting-choice-letter{background:#31573e;border-color:#31573e;color:#fff8ec}
}
#waiting-answers .is-correct{background:#244a37;border-color:#244a37;color:#fff8ec}
#waiting-answers .is-correct .waiting-choice-letter{background:#fff8ec;color:#244a37;border-color:#fff8ec}
#waiting-answers .is-wrong{background:transparent;border-color:#c75c64;color:#a8212c}
#waiting-answers .is-wrong .waiting-choice-letter{color:#a8212c;border-color:#c75c64}
#waiting-answers button:disabled{cursor:default;opacity:1}
.is-solved #waiting-answers button:not(.is-correct){background:transparent;border-color:#d4c6b1;color:#756b60}
.is-solved #waiting-answers button:not(.is-correct) .waiting-choice-letter{background:transparent;border-color:#d4c6b1;color:#8b7660}
.waiting-card-footer{display:grid;grid-template-columns:minmax(0,1fr) 120px;align-items:end;gap:16px;margin-top:auto;padding-top:24px;min-width:0}
#waiting-feedback{grid-column:1;grid-row:1;display:grid;grid-template-columns:16px minmax(0,1fr);align-items:start;gap:8px;margin:0;color:#a8212c}
#waiting-feedback[hidden]{display:none}
#waiting-feedback[data-result="correct"]{color:#244a37}
.waiting-feedback-icon{width:16px;height:16px;margin-top:8px}
.waiting-feedback-copy{display:flex;flex-direction:column;gap:8px;min-width:0}
.waiting-feedback-title{font:italic 400 28px/32px var(--font-display);text-wrap:balance}
.waiting-feedback-detail{font:400 16px/24px var(--font-ui);color:#50483e}
#waiting-fact-source{grid-column:1;grid-row:1;font:500 16px/24px var(--font-ui);color:#76634e;text-underline-offset:4px;margin-bottom:8px}
#waiting-fact-source[hidden]{display:none}
.waiting-illustration{grid-column:2;grid-row:1;width:120px;height:120px;margin-left:auto;flex:none;overflow:hidden}
.waiting-illustration img{display:block;width:100%;height:100%;object-fit:contain}
.waiting-illustration img.is-fact-sprite{width:400%;height:400%;max-width:none;object-fit:fill;transform:translate(calc(var(--fact-column)*-25%),calc(var(--fact-row)*-25%))}
@media(max-width:600px){
 #waiting-dialog[open]{grid-template-columns:1fr}
 .waiting-postcard-date{display:grid;grid-template-columns:80px minmax(0,1fr);gap:8px 24px;justify-content:initial;padding:24px;border-right:0;border-bottom:1px dashed #e0b590;text-align:left}
 .waiting-date-block{grid-column:1;grid-row:1/3}
 #waiting-date-number{font-size:80px;line-height:72px}
 .waiting-date-month{font-size:20px;line-height:24px}
 .waiting-handwritten{grid-column:2;grid-row:1;font-size:36px;line-height:32px;transform:rotate(-4deg);margin:0}
 #waiting-countdown{grid-column:2;grid-row:2;font-size:16px;line-height:24px;max-width:24ch;margin:0}
 .waiting-seal{display:none}
 .waiting-postcard-play{padding:32px 24px 24px;min-height:0}
 .waiting-play-title,#waiting-fact-title{font-size:40px;line-height:40px;letter-spacing:-.02em;margin-right:0}
 #waiting-dialog .close{color:#f5e6bf;top:0;right:0}
 .waiting-card-footer{grid-template-columns:minmax(0,1fr) 96px}
 .waiting-illustration{width:96px;height:96px}
}
@media(max-width:360px){.waiting-handwritten{font-size:28px}.waiting-postcard-date{column-gap:16px}}
@media(prefers-reduced-motion:reduce){.waiting-celebration svg{animation:none!important}}

#watch-link{display:inline-flex;align-items:center;gap:var(--space-8);font:400 13px/24px var(--font-ui);text-decoration-thickness:1px;text-underline-offset:var(--space-4)}
/* Country and destination stay together; choosing a language never changes the region. */
.watch-options{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-top:24px}
.watch-options #watch-link{margin:0;flex:none}
.watch-country-control{min-width:0;max-width:100%}
.watch-country-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.watch-country-picker{position:relative;max-width:100%;color:var(--wine)}
#watch-country{appearance:none;-webkit-appearance:none;display:block;width:160px;max-width:100%;height:40px;padding:8px 32px 8px 12px;border:1px solid #cbbca7;border-radius:9999px;background:transparent;color:inherit;font:400 12px/24px var(--font-ui);cursor:pointer;text-overflow:ellipsis}
.watch-country-picker svg{position:absolute;right:12px;top:12px;width:16px;height:16px;pointer-events:none}
#watch-country:focus-visible{outline:2px solid var(--wine);outline-offset:2px}
.watch-options #watch-link[aria-disabled="true"]{color:var(--ink);cursor:default;border-color:transparent;text-decoration:none}
.watch-options .watch-service{color:var(--wine);font:400 13px/24px var(--font-ui);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:var(--space-4)}
.watch-options .watch-dot{color:#a39a8c;font:400 13px/24px var(--font-ui)}
.watch-options [hidden]{display:none!important}
/* Phones: keep the film card, watch link and both actions on one screen. */
@media(max-width:600px) and (max-height:860px){
 .movie-visual.single-ornament{min-height:216px;max-height:232px}
 .movie-visual.single-ornament .hanging-ornament{top:var(--space-24);bottom:var(--space-24)}
 #movie-dialog .movie-copy{padding-top:var(--space-24)}
 #movie-dialog #movie-description{margin-bottom:0}
 .watch-options{margin-top:var(--space-16)}
 #movie-dialog .actions{margin-top:var(--space-16)}
}

/* Feedback 2026-11-10: a very fine dark-only grain, so the background has texture without light specks. */
body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -.9 0 0 0 .5'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23b)'/%3E%3C/svg%3E"),radial-gradient(ellipse at 50% 38%,#173f32 0%,#0a2821 58%,#061b17 100%);background-size:160px 160px,auto;background-attachment:fixed,fixed}
.intro{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -.9 0 0 0 .5'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23b)'/%3E%3C/svg%3E"),radial-gradient(ellipse at 48% 49%,#1a4133 0%,#0b2922 52%,#061b17 100%);background-size:160px 160px,auto}
@media(max-width:600px){body{background-size:80px 80px,auto}.intro{background-size:80px 80px,auto}}
/* No check marks on the house windows: the numbers stay clean (watched days are still in the calendar). */
.day-3d.is-watched:after{content:none}
#waiting-countdown{white-space:pre-line}
#waiting-dialog p,#waiting-feedback,#movie-dialog p{text-wrap:pretty}#waiting-feedback,#waiting-countdown{text-wrap:balance}
/* Phones: the thread starts at the branch stem, so no gold line pokes out above the needles. */
@media(max-width:600px){.movie-visual.single-ornament .ornament-thread{top:22px;height:26px}}
/* Taller phones (760–860px): more room for the branch, the ornament and the date under it. */
@media(max-width:600px) and (min-height:680px) and (max-height:860px){
 .movie-visual.single-ornament{min-height:292px;max-height:300px}
 .movie-visual.single-ornament .hanging-ornament{top:var(--space-24);bottom:44px}
}
@media(max-width:600px) and (min-height:861px){.movie-visual.single-ornament .hanging-ornament{bottom:44px}}
@media(max-width:600px) and (min-height:680px) and (max-height:759px){.movie-visual.single-ornament{min-height:276px;max-height:280px}}