/* The Muskoka Parcel · living room homepage (draft) */
@import url("/assets/fonts/fonts.css");
:root{
  --navy:#14233A; --cream:#F7F1E6; --paper:#FBF8F2; --amber:#E9A23B; --ember:#F3B65A; --slate:#5B7189;
  --ink:#1a120d; --wood:#4a2f1d;
  --serif:"EB Garamond", Garamond, "Times New Roman", serif;
  --sans:Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pill:980px; --ease:cubic-bezier(.22,.61,.36,1);
  --fire:.6; --snow:0; --frost:0; --day:.5; --floor:76%;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.55;letter-spacing:-.011em;color:var(--cream);background:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.06;letter-spacing:-.015em;margin:0 0 .4em}
h2{font-size:clamp(2.1rem,4.2vw,3.1rem)}
h3{font-size:1.6rem;line-height:1.15;letter-spacing:0}
p{margin:0 0 1em}
button{font:inherit;color:inherit}
.eyebrow{font:500 .78rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#d9b88a;margin:0 0 .9rem;display:block}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--cream);color:var(--ink);padding:10px 16px;border-radius:var(--pill);z-index:200}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 22px;border-radius:var(--pill);font:500 1rem/1 var(--sans);text-decoration:none;border:1px solid var(--amber);background:var(--amber);color:#21160e;cursor:pointer;transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px -10px rgba(243,182,90,.7)}
.btn--ghost{background:rgba(20,12,8,.25);color:var(--cream);border-color:rgba(247,241,230,.55)}
.btn--light{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.btn--ghost-light{background:transparent;color:var(--cream);border-color:rgba(247,241,230,.5)}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btns--center{justify-content:center}
.link{color:#f3c47a;font-weight:500;text-underline-offset:4px}

/* header */
.announce{background:#0f0a07;color:#cdb79a;font-size:.8rem;text-align:center;padding:6px 12px;letter-spacing:.01em}
.announce span{margin:0 .6em;opacity:.5}
.hdr{background:#1a120d;border-bottom:1px solid rgba(255,220,170,.08);position:relative;z-index:30}
.hdr__in{display:flex;align-items:center;gap:20px;height:58px;width:min(1400px,100% - 32px);margin-inline:auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:500 1.2rem/1 var(--serif);letter-spacing:0;margin-right:auto}
.brand img{width:36px;height:36px;border-radius:8px}
.nav{display:flex;align-items:center;gap:22px;font-size:.95rem}
.nav a{text-decoration:none;opacity:.85}.nav a:hover{opacity:1;color:#f3c47a}
.nav__cart{border:1px solid rgba(243,196,122,.5);padding:8px 14px;border-radius:var(--pill);opacity:1!important;color:#f3c47a}
.menu-btn{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.menu-btn span{display:block;width:22px;height:2px;background:var(--cream);border-radius:2px}
@media (max-width:860px){
  .menu-btn{display:flex}
  .nav{position:absolute;top:58px;left:0;right:0;background:#1a120d;flex-direction:column;align-items:flex-start;padding:10px 20px 20px;gap:4px;display:none;border-bottom:1px solid rgba(255,220,170,.1)}
  .nav.open{display:flex}.nav a{padding:10px 0;font-size:1.05rem;width:100%}
  .nav__cart{width:auto!important;padding:10px 16px!important;margin-top:8px}
  .announce{font-size:.72rem}.announce .a3,.announce span:nth-of-type(2){display:none}
}

/* ============ the room ============ */
.room{position:relative;height:calc(100svh - 88px);min-height:560px;max-height:1100px;overflow:hidden;isolation:isolate;background:#2a1a10}
.room__wall{position:absolute;inset:0 0 auto 0;height:var(--floor);
  background:
   radial-gradient(ellipse 60% 70% at 50% 40%,rgba(255,170,90,.10),transparent 70%),
   repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 2px,transparent 2px 64px),
   repeating-linear-gradient(90deg,transparent 0 17px,rgba(255,220,170,.035) 17px 19px,transparent 19px 41px,rgba(0,0,0,.05) 41px 44px,transparent 44px 64px),
   linear-gradient(180deg,#3a2414,#5a3820 40%,#4d301b);}
.room__wall::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;background:linear-gradient(#2b1a0f,#20130b);box-shadow:0 -1px 0 rgba(255,210,160,.12)}
.room__floor{position:absolute;left:0;right:0;bottom:0;top:var(--floor);
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.4) 0 2px,transparent 2px 38px),
   repeating-linear-gradient(90deg,transparent 0 230px,rgba(0,0,0,.25) 230px 232px,transparent 232px 470px),
   linear-gradient(180deg,#3a2415,#2a190e)}
.stage{position:absolute;left:0;top:0;width:1600px;height:900px;transform-origin:0 0}
.stage>*{position:absolute}
.beam{left:-400px;right:-400px;top:0;height:36px;background:linear-gradient(#20140c,#2f1d10);box-shadow:0 6px 16px rgba(0,0,0,.35)}
.vignette{position:absolute;inset:0;pointer-events:none;z-index:5;background:radial-gradient(ellipse 85% 85% at 50% 45%,transparent 45%,rgba(8,4,2,.55) 100%);transition:background 1s}
body.lamp-off .vignette{background:radial-gradient(ellipse 70% 75% at 60% 60%,transparent 25%,rgba(5,2,1,.75) 100%)}

/* frames */
.frame{display:block;padding:10px;background:#3d2817;box-shadow:inset 0 0 0 1px rgba(255,220,170,.15),0 14px 24px -8px rgba(0,0,0,.6),0 3px 6px rgba(0,0,0,.35);transition:transform .5s var(--ease),box-shadow .5s;transform:rotate(var(--r,0deg));text-decoration:none}
.frame img{width:100%;height:auto;filter:brightness(.9) sepia(.12)}
.frame:hover,.frame:focus-visible{transform:rotate(0) translateY(-3px) scale(1.02);box-shadow:inset 0 0 0 1px rgba(255,220,170,.25),0 22px 34px -10px rgba(0,0,0,.7),0 0 0 3px rgba(243,182,90,.35)}
.wood-walnut{background:linear-gradient(135deg,#4a2f1b,#2e1c10)!important}
.wood-oak{background:linear-gradient(135deg,#b3864f,#8a6236)!important}
.wood-black{background:linear-gradient(135deg,#262220,#141110)!important}
.plaque{position:absolute;left:50%;top:100%;transform:translate(-50%,8px);white-space:nowrap;font:500 13px/1 var(--sans);letter-spacing:.06em;background:#c9a467;color:#2a1a0e;padding:6px 10px;border-radius:3px;opacity:0;transition:opacity .3s;pointer-events:none;box-shadow:0 4px 10px rgba(0,0,0,.4)}
.frame:hover .plaque,.frame:focus-visible .plaque{opacity:1}
@media (hover:none){.plaque{opacity:.92}}
.f1{left:56px;top:88px;width:180px;--r:-.6deg}
.f2{left:268px;top:92px;width:120px;--r:.8deg}
.f3{left:274px;top:280px;width:112px;--r:-.4deg}
.f4{left:100px;top:360px;width:96px;--r:.5deg}

/* window */
.rod{left:420px;top:52px;width:660px;height:8px;border-radius:4px;background:linear-gradient(#5b4026,#2b1c10);box-shadow:0 3px 6px rgba(0,0,0,.4);z-index:2}
.rod::before,.rod::after{content:"";position:absolute;top:-4px;width:16px;height:16px;border-radius:50%;background:#3b2716}.rod::before{left:-8px}.rod::after{right:-8px}
.win{left:480px;top:70px;width:540px;height:480px;padding:22px;border:0;cursor:pointer;background:linear-gradient(135deg,#4a2f1a,#2c1a0e);box-shadow:inset 0 0 0 2px rgba(255,220,170,.12),0 18px 40px -12px rgba(0,0,0,.7);border-radius:4px}
.win__view{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:#0d1626;box-shadow:inset 0 0 18px rgba(0,0,0,.6)}
.win canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.glass{position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.07),transparent 30%,transparent 62%,rgba(255,255,255,.04) 70%,transparent 78%),radial-gradient(ellipse 30% 22% at 82% 86%,rgba(255,170,80,.14),transparent 70%);pointer-events:none}
.frost{position:absolute;inset:0;pointer-events:none;opacity:var(--frost);background:radial-gradient(ellipse 30% 26% at 0 100%,rgba(235,244,252,.75),transparent 70%),radial-gradient(ellipse 26% 22% at 100% 100%,rgba(235,244,252,.7),transparent 70%),radial-gradient(ellipse 18% 16% at 0 0,rgba(235,244,252,.5),transparent 70%),radial-gradient(ellipse 18% 14% at 100% 0,rgba(235,244,252,.45),transparent 70%);filter:blur(2px)}
.muntins{position:absolute;inset:22px;pointer-events:none}
.muntins i{position:absolute;background:linear-gradient(90deg,#3a2414,#4d311c,#3a2414);box-shadow:0 0 6px rgba(0,0,0,.45)}
.muntins .v1{left:calc(33.3% - 5px);top:0;bottom:0;width:10px}.muntins .v2{left:calc(66.6% - 5px);top:0;bottom:0;width:10px}
.muntins .h1{top:calc(50% - 5px);left:0;right:0;height:10px;background:linear-gradient(#3a2414,#4d311c,#3a2414)}
.win:hover .win__view{box-shadow:inset 0 0 18px rgba(0,0,0,.6),inset 0 0 0 2px rgba(243,182,90,.3)}
.curtain{top:56px;width:74px;height:560px;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.25) 0 6px,transparent 6px 18px),
   repeating-linear-gradient(0deg,rgba(40,10,10,.45) 0 9px,transparent 9px 26px),repeating-linear-gradient(90deg,rgba(40,10,10,.45) 0 9px,transparent 9px 26px),
   linear-gradient(90deg,#7a2a22,#94352a 50%,#6d241d);box-shadow:0 10px 24px rgba(0,0,0,.45)}
.curtain--l{left:432px;clip-path:polygon(0 0,100% 0,72% 52%,96% 100%,0 100%)}
.curtain--r{left:994px;clip-path:polygon(0 0,100% 0,100% 100%,4% 100%,28% 52%)}
.sill{left:458px;top:548px;width:584px;height:30px;z-index:4;background:linear-gradient(#6a4528,#3f2716);border-radius:3px;box-shadow:0 10px 18px -6px rgba(0,0,0,.6)}
.sill::after{content:"";position:absolute;left:10px;right:10px;top:100%;height:14px;background:linear-gradient(#2c1b0f,transparent)}
.sill svg{position:absolute;bottom:100%;overflow:visible}
.mug{left:60px;width:48px;height:56px;margin-bottom:-4px}
.sill-item{right:64px;display:none}
.sill-item--flowers{width:64px;height:88px}.sill-item--fall{width:74px;height:58px}.sill-item--winter{width:70px;height:70px}
.stage[data-sill="flowers"] .sill-item--flowers,.stage[data-sill="fall"] .sill-item--fall,.stage[data-sill="winter"] .sill-item--winter{display:block}
.steam path,.ksteam path{fill:none;stroke:rgba(255,255,255,.35);stroke-width:2;stroke-linecap:round;animation:steam 4s ease-in-out infinite;opacity:0}
.steam path:nth-child(2),.ksteam path:nth-child(2){animation-delay:2s}
@keyframes steam{0%{opacity:0;transform:translateY(6px)}40%{opacity:.8}100%{opacity:0;transform:translateY(-10px)}}
.candle-flame{transform-origin:45px 43px;animation:flick 1.6s ease-in-out infinite alternate}
@keyframes flick{0%{transform:scale(1,1)}50%{transform:scale(.9,1.12) skewX(3deg)}100%{transform:scale(1.05,.95) skewX(-2deg)}}

/* calendar */
.cal{left:1076px;top:100px;width:108px;height:178px;border:0;padding:22px 8px 8px;cursor:pointer;background:linear-gradient(#f4ecdc,#e8dcc4);color:#3b2a1a;border-radius:2px;box-shadow:0 10px 18px -6px rgba(0,0,0,.6);display:flex;flex-direction:column;align-items:center;transform:rotate(1.4deg);transition:transform .4s var(--ease)}
.cal:hover,.cal:focus-visible{transform:rotate(0) translateY(-2px)}
.cal__nail{position:absolute;top:-20px;left:50%;width:2px;height:22px;background:linear-gradient(transparent,rgba(30,20,10,.7))}
.cal__nail::before{content:"";position:absolute;top:-4px;left:-3px;width:8px;height:8px;border-radius:50%;background:#8b8478}
.cal::before{content:"";position:absolute;top:8px;left:12px;right:12px;height:6px;background:repeating-linear-gradient(90deg,#5a4a3a 0 3px,transparent 3px 9px);opacity:.6}
.cal__pic{display:block;width:44px;height:44px;border-radius:4px;overflow:hidden;margin-bottom:6px}
.cal__pic img{width:100%;height:100%}
.cal__m{font:600 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#9b2a22;margin-top:2px}
.cal__d{font:500 50px/1 var(--serif);margin:4px 0 2px}
.cal__s{font:italic 12px/1.1 var(--serif);color:#6b5a40;text-align:center}

/* stove */
.pipe{left:1352px;top:0;width:36px;height:420px;background:linear-gradient(90deg,#0f0d0c,#2f2a27 40%,#151211);box-shadow:6px 0 14px rgba(0,0,0,.35)}
.pipe i{position:absolute;left:-4px;right:-4px;top:150px;height:10px;background:#262120;border-radius:2px}
.hearth{left:1226px;top:722px;width:290px;height:62px;border-radius:4px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 2px,transparent 2px 58px),linear-gradient(#5d5650,#3b3632);box-shadow:0 8px 16px rgba(0,0,0,.45)}
.stove{left:1260px;top:362px;width:220px;height:400px;border:0;padding:0;background:none;cursor:pointer}
.stove svg{width:100%;height:100%;display:block;overflow:visible}
.fire{position:absolute;left:19.5%;top:26.5%;width:61%;height:36.5%;border-radius:6px}
.stove__glass{position:absolute;left:19.5%;top:26.5%;width:61%;height:36.5%;border-radius:6px;background:linear-gradient(120deg,rgba(255,255,255,.08),transparent 40%);box-shadow:inset 0 0 0 1px rgba(255,200,120,.08)}
.stove:hover .stove__glass,.stove:focus-visible .stove__glass{box-shadow:inset 0 0 0 2px rgba(243,182,90,.45)}
.stove .kettle{transform-origin:164px 52px}
.stove.stoked .kettle{animation:rattle .25s 3}
@keyframes rattle{50%{transform:rotate(-2deg)}}
.basket{left:1494px;top:648px;width:100px;height:120px}

/* side table */
.table{left:1040px;top:560px;width:180px;height:160px}
.lamp{left:1086px;top:356px;width:100px;height:205px;border:0;padding:0;background:none;cursor:pointer}
.lamp svg{width:100%;height:100%}
body.lamp-off .lamp .s1{stop-color:#7d6a52}body.lamp-off .lamp .s2{stop-color:#5e4b36}
.book{border:0;padding:0;background:none;cursor:pointer}
.book--story{left:1044px;top:516px;width:90px;height:46px}.book--story svg{width:100%;height:100%;display:block}
.book--faq{left:1050px;top:522px;width:78px;height:20px;z-index:2}
.book:hover,.book:focus-visible{filter:brightness(1.2)}
.letter{left:1146px;top:512px;width:64px;height:46px;border:0;padding:0;background:none;cursor:pointer;transform:rotate(-9deg);transition:transform .4s var(--ease)}
.letter svg{width:100%;height:100%;filter:drop-shadow(0 4px 4px rgba(0,0,0,.45))}
.letter:hover,.letter:focus-visible{transform:rotate(-3deg) translateY(-6px)}
.rug{left:430px;top:735px;width:700px;height:150px;border-radius:50%;opacity:.92;
  background:repeating-radial-gradient(ellipse at center,#7d2c22 0 9px,#c9a46c 9px 13px,#3b4b5c 13px 22px,#d8c6a2 22px 25px,#6b3a22 25px 34px);box-shadow:0 10px 30px rgba(0,0,0,.5);filter:brightness(.75) saturate(.85)}

/* light */
.glow{pointer-events:none;border-radius:50%;mix-blend-mode:screen;z-index:6}
.glow--lamp{left:880px;top:200px;width:520px;height:560px;background:radial-gradient(closest-side,rgba(255,190,110,.42),rgba(255,160,80,.12) 55%,transparent);transition:opacity .8s}
body.lamp-off .glow--lamp{opacity:0}
.glow--fire{left:1060px;top:300px;width:620px;height:640px;background:radial-gradient(closest-side,rgba(255,130,40,.55),rgba(255,110,30,.15) 55%,transparent);opacity:var(--fire)}
.glow--win{left:430px;top:500px;width:640px;height:320px;background:radial-gradient(closest-side,rgba(140,170,220,.10),transparent);opacity:calc(.4 + var(--snow)*.8)}
.whisper{left:0;top:0;width:280px;margin:0;z-index:8;background:rgba(247,241,230,.95);color:#2a1a0e;font:italic 19px/1.3 var(--serif);padding:12px 16px;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.45);opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s;pointer-events:none}
.whisper.on{opacity:1;transform:none}

/* copy over the room */
.copy{position:absolute;z-index:7;isolation:isolate;width:min(440px,40vw);left:var(--copy-x,48px);bottom:var(--copy-b,40px);text-shadow:0 2px 14px rgba(0,0,0,.6)}
.copy::before{content:"";position:absolute;inset:-60px -80px -50px -70px;z-index:-1;background:radial-gradient(ellipse at 40% 55%,rgba(18,10,6,.8),rgba(18,10,6,.55) 45%,transparent 72%);pointer-events:none}
.copy h1{font-size:clamp(2rem,3.1vw,2.9rem);margin-bottom:.35em}
.tonight{font:italic 1.2rem/1.35 var(--serif);color:#f1dcb9;margin-bottom:1.1em}
.tonight #tonight-name{font-style:normal;color:#f3c47a}
.hint{font-size:.85rem;color:#c6ad8c;margin:14px 0 0}

.controls{position:absolute;right:16px;bottom:14px;z-index:9;display:flex;gap:8px}
.ctl{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 14px;border-radius:var(--pill);border:1px solid rgba(247,241,230,.25);background:rgba(20,12,8,.6);backdrop-filter:blur(6px);color:var(--cream);cursor:pointer;font-size:.85rem}
.ctl svg{width:18px;height:18px}
.ctl:hover{border-color:rgba(243,196,122,.7)}
#snd .wave{display:none}#snd[aria-pressed="true"] .wave{display:inline}#snd[aria-pressed="true"] .mute{display:none}
.year{position:absolute;z-index:10;left:50%;bottom:66px;transform:translateX(-50%);width:min(620px,calc(100% - 24px));background:rgba(20,12,8,.82);backdrop-filter:blur(8px);border:1px solid rgba(247,241,230,.18);border-radius:16px;padding:12px 14px 6px}
.year__row{display:flex;align-items:center;gap:8px}
.year input[type=range]{flex:1;accent-color:var(--amber);min-width:0}
.year__lbl{margin:6px 2px 4px;font-size:.85rem;color:#e7d2b1;text-align:center}
.ctl--x{padding:8px 12px;font-size:1.1rem}

/* ===== portrait / phone layout (stage 800 × 1150) ===== */
.room.is-portrait{height:auto;min-height:0;max-height:none}
.is-portrait .stage{width:800px;height:1150px}
.is-portrait .f1{left:600px;top:300px;width:150px}
.is-portrait .f2,.is-portrait .f3,.is-portrait .f4{display:none}
.is-portrait .rod{left:20px;top:44px;width:560px}
.is-portrait .win{left:60px;top:62px;width:480px;height:436px;padding:18px}
.is-portrait .muntins{inset:18px}
.is-portrait .curtain{top:48px;height:500px;width:60px}
.is-portrait .curtain--l{left:24px}.is-portrait .curtain--r{left:516px}
.is-portrait .sill{left:36px;top:496px;width:528px}
.is-portrait .mug{left:40px}.is-portrait .sill-item{right:40px}
.is-portrait .cal{left:606px;top:66px;width:140px;height:212px;padding-top:24px}
.is-portrait .cal__d{font-size:70px}.is-portrait .cal__m{font-size:14px}.is-portrait .cal__s{font-size:17px}
.is-portrait .pipe{left:622px;top:540px;width:36px;height:70px}
.is-portrait .pipe i{top:-16px;left:-14px;right:-14px;height:34px;border-radius:50%;background:radial-gradient(#3a3330,#1c1816)}
.is-portrait .stove{left:530px;top:590px;width:220px;height:400px}
.is-portrait .hearth{left:494px;top:950px;width:290px}
.is-portrait .basket{left:378px;top:870px;width:100px}
.is-portrait .table{left:46px;top:800px}
.is-portrait .lamp{left:92px;top:596px}
.is-portrait .book--story{left:50px;top:756px}.is-portrait .book--faq{left:56px;top:762px}
.is-portrait .letter{left:150px;top:752px}
.is-portrait .rug{left:90px;top:990px;width:520px;height:140px}
.is-portrait .glow--lamp{left:-120px;top:440px;width:520px;height:560px}
.is-portrait .glow--fire{left:330px;top:540px;width:620px;height:600px}
.is-portrait .glow--win{left:0;top:440px;width:600px;height:300px}
.is-portrait .whisper{font-size:26px;width:420px}
.is-portrait .beam{height:30px}
.room.is-portrait .copy{position:relative;left:auto;bottom:auto;width:auto;padding:26px 20px 22px;background:linear-gradient(#22150c,#1a120d);text-shadow:none}
.room.is-portrait .copy::before{display:none}
.room.is-portrait{padding-top:var(--stage-h)}
.room.is-portrait .controls{top:calc(var(--stage-h) - 52px);bottom:auto;right:10px}
.room.is-portrait .year{top:calc(var(--stage-h) - 150px);bottom:auto}
@media (max-width:520px){.ctl span{display:none}.ctl{padding:8px 11px}.copy h1{font-size:2.05rem}}

/* ============ below the room ============ */
.lakes{position:relative;padding:90px 0 80px;background:
   repeating-linear-gradient(90deg,rgba(0,0,0,.3) 0 2px,transparent 2px 64px),
   linear-gradient(180deg,#2a190e,#4a2f1b 18%,#4a2f1b 82%,#2a190e)}
.sec-head{max-width:720px;margin:0 auto 46px;text-align:center}
.lede{font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.5;color:#e2cfb3}
.gwall{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:46px 34px}
.gframe{display:block;text-decoration:none;text-align:center;transform:rotate(var(--tilt));transition:transform .6s var(--ease)}
.gframe__pic{display:block;padding:9px;box-shadow:0 18px 30px -12px rgba(0,0,0,.75),0 3px 6px rgba(0,0,0,.4);transition:box-shadow .5s}
.gframe img{width:100%;aspect-ratio:480/620;object-fit:cover;filter:brightness(.92) sepia(.1)}
.gframe__name{display:block;margin-top:14px;font:500 1.15rem/1.1 var(--serif)}
.gframe__where{display:block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#c6ad8c;margin-top:4px}
.gframe:hover,.gframe:focus-visible{transform:rotate(0) translateY(-4px)}
.gframe:hover .gframe__pic{box-shadow:0 26px 40px -14px rgba(0,0,0,.85),0 0 0 3px rgba(243,182,90,.4)}
.facts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:56px 0 24px;padding:0}
.facts span{border:1px solid rgba(247,241,230,.2);border-radius:var(--pill);padding:7px 14px;font-size:.88rem;color:#ead9bf}
@media (max-width:1000px){.gwall{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.gwall{grid-template-columns:repeat(2,1fr);gap:34px 22px}.lakes{padding:60px 0}}

.hearthside{padding:80px 0;background:#1a120d}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.note{background:linear-gradient(#f6eedf,#efe3cc);color:#2a1a0e;border-radius:6px;padding:30px 28px;box-shadow:0 20px 40px -18px rgba(0,0,0,.8);position:relative}
.note:nth-child(1){transform:rotate(-.6deg)}.note:nth-child(3){transform:rotate(.5deg)}
.note .eyebrow{color:#9b2a22}.note p,.plain{color:#4c3a28;font-size:1rem}
.note .link{color:#8a3a1a}
.plain{padding-left:1.1em;margin:0 0 1em}.plain li{margin-bottom:.35em}
.signup{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.signup input[type=email]{flex:1 1 200px;min-height:46px;border-radius:var(--pill);border:1px solid #c7b392;background:#fffaf0;padding:0 16px;font:inherit;color:#2a1a0e}
@media (max-width:900px){.trio{grid-template-columns:1fr}.note{transform:none!important}}

.foot{background:#0f0a07;padding:60px 0 30px;color:#cdb79a}
.foot__grid{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.4fr;gap:30px}
.foot h4{font-size:1.2rem;color:var(--cream)}
.foot ul{list-style:none;margin:0;padding:0}.foot li{margin:.4em 0}.foot a{text-decoration:none}.foot a:hover{color:#f3c47a}
.foot__logo{width:110px;border-radius:14px}
.foot__legal{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,220,170,.1);font-size:.8rem;opacity:.75}
.draft-tag{color:#f3c47a}
@media (max-width:760px){.foot__grid{grid-template-columns:1fr 1fr}}

/* dialogs */
.dlg{max-width:520px;width:calc(100% - 32px);border:0;border-radius:10px;padding:34px 30px 28px;background:linear-gradient(#f8f1e3,#efe3cc);color:#2a1a0e;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.dlg::backdrop{background:rgba(10,6,3,.6);backdrop-filter:blur(3px)}
.dlg .eyebrow{color:#9b2a22}.dlg h2{font-size:2.1rem}.dlg p,.dlg dd{color:#4c3a28}
.dlg__x{position:absolute;top:10px;right:10px}.dlg__x button{border:0;background:none;font-size:1.8rem;line-height:1;width:44px;height:44px;cursor:pointer;color:#6b5a40}
.qa dt{font:500 1.2rem/1.2 var(--serif);margin-top:12px}.qa dd{margin:4px 0 0}
.sig{font:italic 1.2rem var(--serif);margin:18px 0 0}
.dlg .btn{margin-top:10px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .steam path,.ksteam path{opacity:.4}
}

.copy::before{content:'';position:absolute;z-index:-1;inset:-60px -90px -40px -80px;background:radial-gradient(closest-side,rgba(20,12,7,.72),rgba(20,12,7,0));pointer-events:none}
.room.is-portrait .copy::before{display:none}
.is-portrait .book--story,.is-portrait .letter{transform:scale(1.35);transform-origin:left bottom}
.is-portrait .book--faq{transform:scale(1.35);transform-origin:-6px 40px}
.table,.basket,.rug,.hearth,.pipe,.vignette,.glow,.beam,.rod,.curtain{pointer-events:none}
.year .ctl span{display:inline!important}.year .ctl{padding:6px 12px;width:auto}

/* ===== Outside the cabin (landing view) + walk-in ===== */
main{position:relative}
.outside{display:none;position:relative;height:calc(100svh - 88px);min-height:560px;max-height:1100px;overflow:hidden;background:#0b1527;cursor:pointer}
.mode-outside .outside{display:block}
.mode-outside .room{display:none}
.walking .room{display:block}
.walking .outside{position:absolute;top:0;left:0;right:0;z-index:25}
.outside canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#ext-parts{pointer-events:none}#ext-fx{pointer-events:none}
.outside__hit{position:absolute;z-index:3;background:transparent;border:0;border-radius:18px;cursor:pointer;padding:0}
.outside__hit:focus-visible{outline:2px dashed rgba(243,196,122,.9);outline-offset:6px}
.door-tag{position:absolute;z-index:4;transform:translate(-50%,0);padding:7px 15px;border-radius:var(--pill);border:1px solid rgba(243,196,122,.75);background:rgba(28,16,9,.72);backdrop-filter:blur(4px);color:#ffe2b0;font:500 .86rem/1 var(--sans);letter-spacing:.04em;cursor:pointer;animation:tagpulse 2.4s var(--ease) infinite;box-shadow:0 0 0 0 rgba(233,162,59,.5)}
.door-tag::before{content:"";position:absolute;left:50%;top:-6px;width:10px;height:10px;transform:translateX(-50%) rotate(45deg);background:inherit;border-left:1px solid rgba(243,196,122,.75);border-top:1px solid rgba(243,196,122,.75)}
@keyframes tagpulse{0%{box-shadow:0 0 0 0 rgba(233,162,59,.45)}70%{box-shadow:0 0 0 14px rgba(233,162,59,0)}100%{box-shadow:0 0 0 0 rgba(233,162,59,0)}}
.outside__warm{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 60%,#ffd28c 0%,#e98a3a 45%,#7a2e12 100%)}
.outside__copy{position:absolute;z-index:5;left:clamp(20px,5vw,72px);bottom:clamp(28px,7vh,80px);max-width:30rem;color:var(--cream);cursor:auto}
.outside__copy::before{content:"";position:absolute;inset:-60px -90px -50px -80px;z-index:-1;background:radial-gradient(closest-side,rgba(6,10,20,.62),rgba(6,10,20,0));pointer-events:none}
.outside__title{font:500 clamp(2.1rem,3.6vw,3.3rem)/1.05 var(--serif);margin:0 0 .7rem;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.outside__sub{font-size:1.05rem;color:rgba(247,241,230,.88);margin:0 0 1.2rem;max-width:26rem}
.outside__cta{display:flex;flex-wrap:wrap;gap:10px}
.outside__tonight{margin:1rem 0 0;font:.8rem/1.3 var(--sans);letter-spacing:.06em;color:rgba(247,241,230,.62)}
.walk-skip{position:absolute;z-index:30;right:18px;bottom:16px;padding:8px 16px;border-radius:var(--pill);border:1px solid rgba(247,241,230,.4);background:rgba(20,12,8,.55);color:var(--cream);font:500 .85rem/1 var(--sans);cursor:pointer}
.walk-skip[hidden]{display:none}
.walking .outside__copy,.walking .door-tag{opacity:0;transition:opacity .35s ease;pointer-events:none}
.walking .door-tag{animation:none}
.walking .outside{cursor:default}
.outside.arrive{animation:arrive .9s var(--ease) both}
@keyframes arrive{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
#step-out svg{width:18px;height:18px}
@media (max-width:760px),(max-aspect-ratio:9/10){
  .outside__copy{left:0;right:0;bottom:0;max-width:none;padding:70px 20px 22px;background:linear-gradient(to top,rgba(6,10,20,.92) 0%,rgba(6,10,20,.78) 55%,rgba(6,10,20,0) 100%)}
  .outside__copy::before{display:none}
  .outside__title{font-size:clamp(1.85rem,8vw,2.6rem)}
  .outside__sub{font-size:.98rem;margin-bottom:1rem}
  .outside__cta .btn{flex:1 1 auto;min-height:44px;padding:11px 16px}
  .walk-skip{top:14px;bottom:auto}
}
@media (prefers-reduced-motion:reduce){.door-tag{animation:none}.outside.arrive{animation:fade .5s ease both}@keyframes fade{from{opacity:0}to{opacity:1}}}
@media (max-width:520px){.outside .eyebrow{font-size:.68rem;letter-spacing:.1em;margin-bottom:.6rem}}
@media (prefers-reduced-motion:reduce){.walking #outside,.walking #room{transition:opacity .6s ease!important}.outside.arrive{animation:fade .5s ease both!important}}

/* ===== Holiday layer (date-driven; classes set by room.js from MPSeason.holiday) ===== */
.hol{display:none;pointer-events:none}
.room.hol-tree .hol--tree{display:block}
.room.hol-halloween .hol--hw{display:block}
.stage>.xtree{left:830px;top:396px;width:150px;height:375px;z-index:5;filter:drop-shadow(0 12px 14px rgba(0,0,0,.5))}
.stage>.glow--tree{position:absolute;left:750px;top:360px;width:310px;height:420px;z-index:4;border-radius:50%;background:radial-gradient(closest-side,rgba(255,196,110,.28),rgba(255,170,80,0));mix-blend-mode:screen}
.stage>.parcel{left:806px;top:700px;width:176px;height:72px;z-index:6;filter:drop-shadow(0 6px 6px rgba(0,0,0,.45))}
.parcel .gift-xmas{display:none}.room.hol-xmas .parcel .gift-xmas{display:inline}
.stage>.garland{left:428px;top:44px;width:644px;height:66px;z-index:4}
.stage>.stockings{left:1404px;top:196px;width:170px;height:142px;z-index:2;filter:drop-shadow(0 6px 8px rgba(0,0,0,.45))}
.tw{animation:tw 2.8s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:1}50%{opacity:.45}}
.tw-g{filter:drop-shadow(0 0 3px rgba(255,214,140,.95))}
.tw-star{filter:drop-shadow(0 0 6px rgba(255,214,140,.9))}
.sill .sill-jack{left:auto;right:150px;width:64px;height:56px}
.sill .sill-candy{left:150px;width:78px;height:43px}
.room.hol-halloween .sill-item--fall{display:none!important}
.jack-face{animation:jack 1.6s ease-in-out infinite;filter:drop-shadow(0 0 4px rgba(255,190,80,.9))}
@keyframes jack{0%,100%{opacity:1}40%{opacity:.78}60%{opacity:.92}}
.hol-line{margin:-.2rem 0 1rem;font:500 1.12rem/1.3 var(--serif);font-style:italic;color:#f3c46a}
.hol-line[hidden]{display:none}
.is-portrait .stage>.xtree{left:236px;top:540px;width:136px;height:340px}
.is-portrait .stage>.glow--tree{left:170px;top:500px;width:270px;height:400px}
.is-portrait .stage>.parcel{left:270px;top:830px;width:150px;height:62px}
.is-portrait .stage>.garland{left:22px;top:38px;width:556px;height:60px}
.is-portrait .stage>.stockings{left:392px;top:520px;width:130px;height:108px}
.preview-note{margin:.6rem 0 0;font-size:.9rem;color:#b5651d}.preview-note:empty{display:none}

/* ===== v2: holiday tiers (Nov greenery -> Dec tree -> Dec 25 fully loaded) and daylight ===== */
.room.hol-t1 .hol--t1{display:block}
.garland .tw-g{display:none}.room.hol-t2 .garland .tw-g{display:inline}
.sill .sill-candle{left:96px;width:30px;height:68px}
.sill-candle .flame{transform-origin:20px 28px;animation:flame 1.3s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(255,200,110,.95))}
@keyframes flame{0%,100%{transform:scale(1,1)}40%{transform:scale(.92,1.06)}70%{transform:scale(1.04,.95)}}
.parcel .gift-xmas{display:none}.room.hol-gifts2 .parcel .gift-xmas{display:inline}
.room.hol-gifts3 .hol--heap{display:block}
.stage>.gift-heap{position:absolute;left:700px;top:706px;width:400px;height:70px;z-index:6;filter:drop-shadow(0 6px 6px rgba(0,0,0,.45))}
.is-portrait .stage>.gift-heap{left:176px;top:838px;width:300px;height:52px}
.room.hol-t3 .glow--tree{background:radial-gradient(closest-side,rgba(255,200,120,.4),rgba(255,170,80,0))}
.daylight{position:absolute;left:380px;top:70px;width:760px;height:830px;z-index:3;pointer-events:none;opacity:calc(var(--sun,0)*.85);mix-blend-mode:screen;
  background:linear-gradient(172deg,rgba(255,246,226,.34),rgba(255,240,215,.12) 55%,rgba(255,240,215,0) 85%);clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);transition:opacity 1.2s}
.is-portrait .daylight{left:0;top:60px;width:600px;height:1090px}
.room::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:6;background:rgba(255,240,222,.11);mix-blend-mode:screen;opacity:var(--sun,0);transition:opacity 1.2s}
.vignette{opacity:calc(1 - var(--sun,0)*.45)}
@media (prefers-reduced-motion:reduce){.sill-candle .flame,.tw,.jack-face{animation:none}}

/* Store: cart badge in the home nav */
.cart-n{display:inline-grid;place-items:center;min-width:1.45em;height:1.45em;padding:0 .35em;margin-left:.45em;border-radius:980px;background:#f3c47a;color:#1a120d;font:600 .78rem/1 Inter,system-ui,sans-serif}
.cart-n[hidden]{display:none}

/* Store hotspot: hat hooks with toques (links to /store/) */
.hooks{position:absolute;left:1196px;top:104px;width:150px;height:216px;z-index:3;display:block;text-decoration:none;filter:drop-shadow(0 10px 12px rgba(0,0,0,.45))}
.hooks svg{width:100%;height:100%;display:block;overflow:visible}
.hooks .hk{transform-box:view-box;transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.hooks .hk--1{transform-origin:26px 24px}.hooks .hk--2{transform-origin:80px 26px}.hooks .hk--3{transform-origin:134px 26px}
.hooks:hover .hk--1,.hooks:focus-visible .hk--1{transform:rotate(-5deg)}
.hooks:hover .hk--2,.hooks:focus-visible .hk--2{transform:rotate(4deg)}
.hooks:hover .hk--3,.hooks:focus-visible .hk--3{transform:rotate(-2deg)}
.hooks:hover .plaque,.hooks:focus-visible .plaque{opacity:1}
.hooks .plaque{top:auto;bottom:-6px}
.hooks:focus-visible{outline:2px solid #f3c47a;outline-offset:6px;border-radius:6px}
.is-portrait .hooks{left:372px;top:626px;width:150px;height:216px}
.is-portrait .hooks .plaque{bottom:-10px}
@media (prefers-reduced-motion:reduce){.hooks .hk{transition:none}}