@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700;800;900;1000&display=swap');
:root{font-family:'Nunito','Trebuchet MS',sans-serif;color:#51452e;background:#26321c;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}button:focus-visible,a:focus-visible{outline:4px solid #f3be4d;outline-offset:6px}.scene{position:relative;isolation:isolate;height:100svh;min-height:600px;overflow:hidden}.landscape,.shade{position:absolute;inset:0;z-index:-3}.landscape{background:url('assets/marais.webp') center 58%/cover no-repeat;animation:arrive 1.6s ease-out both}.shade{z-index:-2;background:linear-gradient(180deg,#0e1b1966,transparent 24%,transparent 48%,#15200e65 100%)}header{position:absolute;left:4%;right:4%;top:26px;display:flex;align-items:center;justify-content:space-between;color:#fff9df;text-shadow:0 2px 12px #18251280}.wordmark{font-weight:1000;font-size:36px;letter-spacing:-2px;transform:rotate(-5deg)}.dot{color:#ffd873}.location{font-size:13px;letter-spacing:1.6px;font-weight:700}.character{position:absolute;left:50%;bottom:24%;width:min(72vw,950px);aspect-ratio:2.32;transform:translateX(-50%);transition:width .55s cubic-bezier(.2,.8,.2,1),bottom .55s ease,aspect-ratio .55s ease;filter:drop-shadow(0 14px 9px #15200d55)}.pose{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom;transition:opacity .23s,transform .55s cubic-bezier(.2,.8,.2,1)}.pose-lying{animation:settle .9s .1s both}.pose-pointing{opacity:0;transform:translateY(30px) rotate(5deg)}.character.pointing{width:min(33vw,410px);aspect-ratio:.58;bottom:21%}.pointing .pose-lying{opacity:0;transform:translateY(30px)}.pointing .pose-pointing{opacity:1;transform:none}.youtube{position:absolute;right:-28%;top:-9%;display:flex;gap:12px;align-items:center;background:#fff9e9;color:#493d29;padding:16px 23px;border-radius:22px;text-decoration:none;font-size:20px;font-weight:900;white-space:nowrap;box-shadow:0 7px 0 #bdb28c,0 12px 30px #15230e44;opacity:0;visibility:hidden;transform:translateY(20px) rotate(5deg);transition:opacity .35s .3s,transform .35s .3s,visibility .35s}.youtube svg{width:32px;color:#ef3935}.pointing .youtube{opacity:1;visibility:visible;transform:rotate(5deg)}.youtube:hover{transform:translateY(-5px) rotate(1deg);background:#fff}.youtube:active{box-shadow:0 3px 0 #bdb28c}.dialogue{position:absolute;left:50%;bottom:7%;width:min(760px,88%);min-height:175px;transform:translateX(-50%) rotate(-1deg);background:#fff8e3;border-radius:48% 45% 40px 44px / 24px 28px 38px 35px;padding:35px 48px 18px;box-shadow:0 8px 0 #d8c9a9,0 16px 45px #101c1244;animation:bubble-in .65s .45s both}.dialogue:before{content:'';position:absolute;left:24%;top:-13px;width:34px;height:32px;background:#fff8e3;transform:rotate(40deg);border-radius:8px;z-index:-1}.name{position:absolute;top:-22px;left:30px;background:#e4aa49;color:#584020;font-weight:1000;padding:7px 26px;font-size:21px;transform:rotate(-6deg);border-radius:45% 42% 40% 35% / 35% 42% 35% 50%}#typed{font-size:clamp(21px,2.2vw,29px);font-weight:800;line-height:1.45;margin:0;min-height:2.9em;letter-spacing:.1px}#spoken{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.dialogue-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:2px;height:30px}.progress{display:flex;gap:7px}.progress i{width:6px;height:6px;background:#d4c6a6;border-radius:50%;transition:background .2s,transform .2s}.progress i.active{background:#967442;transform:scale(1.4)}#next{border:0;background:none;color:#857344;display:flex;align-items:center;gap:12px;cursor:pointer;padding:6px 0 6px 20px;min-height:44px;font-size:13px;font-weight:800}.arrow{font-size:27px;color:#b28a42;animation:nudge 1s ease-in-out infinite}.next-label{opacity:.8}footer{position:absolute;bottom:15px;left:4%;right:4%;display:flex;align-items:center;justify-content:space-between;color:#fff5dbb0;font-size:12px;font-weight:600}#restart{border:0;background:transparent;color:#fff5db;padding:10px;cursor:pointer}.fireflies{position:absolute;inset:0;pointer-events:none;z-index:-1}.firefly{position:absolute;width:4px;height:4px;background:#fff4a0;border-radius:50%;box-shadow:0 0 12px 3px #eddf7290;animation:drift var(--duration) ease-in-out infinite;animation-delay:var(--delay);opacity:0}@keyframes drift{0%,100%{opacity:0;transform:translate(0,0)}35%,65%{opacity:.8}50%{transform:translate(25px,-45px)}}@keyframes nudge{50%{transform:translateX(4px)}}@keyframes arrive{from{transform:scale(1.04);filter:brightness(.6)}to{transform:scale(1);filter:brightness(1)}}@keyframes settle{from{opacity:0;transform:translateY(35px) rotate(-4deg)}to{opacity:1;transform:none}}@keyframes bubble-in{from{opacity:0;translate:0 25px;scale:.9}to{opacity:1;translate:0 0;scale:1}}
.character.pointing{width:min(30vw,32vh);bottom:22%}
@media(min-width:1300px){.character.pointing{width:min(28vw,32vh);bottom:22%}}
@media(max-width:600px){.scene{min-height:580px}.landscape{background-position:49% center}header{top:18px;left:6%;right:6%}.wordmark{font-size:30px}.location{font-size:10px;letter-spacing:.4px;max-width:130px;text-align:right}.character{width:113vw;left:54%;bottom:33%;aspect-ratio:2.32}.character.pointing{width:min(60vw,260px);left:45%;bottom:29%}.youtube{right:-30%;top:-9%;padding:13px 16px;font-size:16px;gap:8px;border-radius:17px}.youtube svg{width:27px}.dialogue{width:89%;bottom:9%;padding:31px 25px 15px;min-height:182px;border-radius:35px 32px 33px 30px;transform:translateX(-50%) rotate(-1.5deg)}#typed{font-size:21px;line-height:1.4;min-height:3.9em}.name{font-size:19px;left:20px}footer{bottom:14px;font-size:10px;left:6%;right:4%}footer>span{max-width:175px}.next-label{font-size:12px}}
@media(max-height:650px) and (min-width:601px){.scene{min-height:440px}.character{width:58vw;bottom:29%}.character.pointing{width:190px;bottom:25%}.dialogue{bottom:8%;min-height:140px;padding-top:25px;width:620px}#typed{font-size:22px;min-height:2.5em}.youtube{font-size:16px;padding:12px;right:-65%}}
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}.landscape{transform:none}.arrow{transform:none}}

@media(max-width:600px){.character.lying{width:96vw;left:50%}}
@media(max-height:650px) and (min-width:601px){.character.pointing{width:145px;bottom:25%}.youtube{right:-65%;top:-4%}}

/* Keep the visitor and dialogue in proportion with the house. */
.character.lying{width:min(47vw,620px);bottom:23%}
.character.pointing{width:min(21vw,23vh);bottom:17%}
footer{justify-content:flex-end}
.pointing .pose-lying{animation:none;visibility:hidden}
.dialogue{width:min(550px,85%);min-height:140px;padding:27px 32px 12px;bottom:7%}
#typed{font-size:20px;min-height:2.9em}
.name{font-size:17px;padding:6px 21px;top:-20px}
.youtube{font-size:16px;padding:12px 17px;gap:9px;right:-36%;top:-12%;border-radius:18px}
.youtube svg{width:26px}
@media(max-width:600px){
  .character.lying{width:73vw;left:50%;bottom:31%}
  .character.pointing{width:min(43vw,185px);left:45%;bottom:23%}
  .dialogue{width:83%;bottom:9%;min-height:154px;padding:25px 22px 12px}
  #typed{font-size:17px;min-height:3.9em}
  .name{font-size:16px;left:18px}
  .youtube{font-size:14px;padding:11px 13px;right:-38%;top:-13%;gap:7px}
  .youtube svg{width:23px}
}
@media(max-height:650px) and (min-width:601px){
  .character.lying{width:40vw;bottom:32%}
  .character.pointing{width:120px;bottom:24%}
  .dialogue{width:480px;min-height:115px;padding:23px 28px 8px;bottom:8%}
  #typed{font-size:17px;min-height:2.5em}
  .youtube{right:-60%;top:-10%}
}

.wordmark{margin:0}
.instagram{margin-right:auto;display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;color:#fff8e3;background:#263c29d9;border:1px solid #fff8e34d;border-radius:15px;box-shadow:0 3px 10px #15200d30;transition:background .2s,transform .2s}
.instagram svg{width:23px;height:23px}
.instagram:hover{background:#356044;transform:translateY(-2px)}
.instagram:active{transform:translateY(0)}
.channels{position:absolute;right:-36%;bottom:calc(100% + 8px);display:flex;flex-direction:column;align-items:center;gap:14px}
.channels .youtube{position:relative;right:auto;top:auto;min-width:150px;justify-content:space-between}
.channels .youtube:first-child{rotate:-6deg}
@media(max-width:600px){.channels{right:-38%;bottom:calc(100% + 6px);gap:12px}.channels .youtube{min-width:135px}}
@media(max-height:650px) and (min-width:601px){.channels{right:-60%;gap:10px}.channels .youtube{padding:9px 13px}}