:root{--ease:cubic-bezier(.25,.7,.2,1)}
/* ===== Round 5: the parked stamp logo (top right, exterior only) ===== */
.stamp-logo{position:fixed;z-index:70;top:clamp(12px,2vw,24px);right:clamp(12px,2vw,26px);width:104px;display:block;transform:rotate(-4deg);transform-origin:50% 50%;--hl-pre:drop-shadow(0 6px 9px rgba(0,0,0,.45));filter:var(--hl-pre);transition:opacity .6s var(--ease),visibility 0s}
.stamp-logo img{display:block;width:100%;height:auto}
.stamp-logo:hover{transform:rotate(-2deg) scale(1.04)}
.stamp-logo:focus-visible{outline:3px solid #ffd27a;outline-offset:4px}
@media (max-width:760px){.stamp-logo{width:64px}}
@media (max-height:520px){.stamp-logo{width:60px}}
.walking .stamp-logo{opacity:0;pointer-events:none}
.mode-inside .stamp-logo{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .9s var(--ease),visibility 0s linear .9s}
html.gate-on:not(.gate-reveal) .stamp-logo{opacity:0;visibility:hidden;transition:none}
html.gate-reveal .stamp-logo{opacity:1!important;visibility:visible!important;pointer-events:auto;transition:none}
html.gate-reveal .stamp-logo{transition:none}

/* ===== first-visit gate: parcel lowers onto the table (hands-free); open the stamp, dive into the box, land at the desk ===== */
.gate{display:none}
html.gate-on .gate{display:grid;place-items:center;position:fixed;inset:0;z-index:60;overflow:hidden;--B:clamp(180px,min(56vw,50vh),440px);background:#2b1b10}
html.gate-reveal .gate{z-index:1;pointer-events:none}
.gate__room{position:absolute;inset:0;background:
   radial-gradient(70% 55% at 50% 42%,rgba(255,206,140,.30),rgba(255,206,140,0) 70%),
   repeating-linear-gradient(90deg,rgba(0,0,0,0) 0 calc(var(--B)*.36 - 3px),rgba(20,10,4,.38) calc(var(--B)*.36 - 3px) calc(var(--B)*.36)),
   linear-gradient(#4a301c,#3a2414 60%,#2e1c10);transition:opacity .45s cubic-bezier(.25,.7,.2,1)}
.gate__table{position:absolute;left:0;right:0;bottom:0;top:calc(50% + var(--B)*.41);
  background:linear-gradient(rgba(255,226,170,.16),rgba(0,0,0,0) 12%),repeating-linear-gradient(178.6deg,rgba(60,32,14,0) 0 9px,rgba(60,32,14,.16) 9px 11px,rgba(60,32,14,0) 11px 23px),linear-gradient(#9a6436,#7d4e29 55%,#5e3a1e);
  box-shadow:0 -3px 0 #b07a46,0 -10px 22px rgba(0,0,0,.35)}
/* soft contact shadow: grows and sharpens as the parcel nears */
.gate__table::before{content:"";position:absolute;left:50%;top:calc(var(--B)*.1 - 14px);width:calc(var(--B)*.86);height:26px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(20,10,3,.55),rgba(20,10,3,0));
  animation:gateShadow 1.35s cubic-bezier(.22,.7,.25,1) both}
.gate__parcel{position:relative;width:var(--B);aspect-ratio:700/760;overflow:visible;
  animation:parcelIn 1.35s cubic-bezier(.22,.82,.28,1) both;transform-origin:50% 88%;will-change:transform}
.gate__parcel>svg,.gate__mouth,.gate__light,.gate__dust{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.gate__box{z-index:1}.gate__light{z-index:2}.gate__flaps{z-index:3}
.gate__mouth{inset:auto;left:18%;top:12%;width:64%;height:14%}
.gate__inner{opacity:0;transition:opacity .4s .12s cubic-bezier(.25,.7,.2,1)}
.gate__depth{opacity:0;transition:opacity .35s .1s}
.gate__light{inset:auto;left:5%;top:-30%;width:90%;height:60%;background:radial-gradient(50% 50% at 50% 80%,rgba(255,224,150,.95),rgba(255,190,90,.45) 45%,rgba(255,190,90,0) 72%);opacity:0;transform:scaleY(.4);transform-origin:50% 90%;transition:opacity .4s .18s,transform .55s .18s cubic-bezier(.2,.75,.25,1)}
.gate__flap{transition:transform .55s cubic-bezier(.3,.7,.2,1) .08s}
.gate__flap--l{transform-origin:90px 150px}.gate__flap--r{transform-origin:610px 150px}
.gate.is-open .gate__flap--l{transform:rotate(-118deg)}.gate.is-open .gate__flap--r{transform:rotate(118deg)}
.gate.is-open .gate__inner{opacity:1}.gate.is-open .gate__depth{opacity:1}.gate.is-open .gate__light{opacity:1;transform:scaleY(1)}
/* drop from above → gentle squash/recover */
@keyframes parcelIn{
  0%{transform:translateY(calc(-48vh - 8%)) scale(.985);filter:drop-shadow(0 28px 22px rgba(0,0,0,.08))}
  62%{transform:translateY(-6px) scale(1);filter:drop-shadow(0 14px 12px rgba(0,0,0,.18))}
  78%{transform:translateY(3px) scaleY(.978) scaleX(1.016);filter:drop-shadow(0 6px 6px rgba(0,0,0,.28))}
  88%{transform:translateY(-2px) scaleY(1.01) scaleX(.995);filter:drop-shadow(0 8px 8px rgba(0,0,0,.22))}
  100%{transform:none;filter:drop-shadow(0 10px 10px rgba(0,0,0,.2))}
}
@keyframes gateShadow{
  0%{opacity:0;transform:translateX(-50%) scale(.55);filter:blur(6px)}
  55%{opacity:.35;transform:translateX(-50%) scale(.78);filter:blur(3px)}
  78%{opacity:.9;transform:translateX(-50%) scale(1.06);filter:blur(0)}
  90%{opacity:1;transform:translateX(-50%) scale(.98);filter:blur(0)}
  100%{opacity:1;transform:translateX(-50%) scale(1);filter:blur(0)}
}
/* twine bow: one soft sway after landing */
.gate__bow{animation:bowSway .9s cubic-bezier(.34,.8,.4,1) 1.15s both}
@keyframes bowSway{
  0%{transform:rotate(0)}
  35%{transform:rotate(-7deg)}
  65%{transform:rotate(4deg)}
  100%{transform:rotate(0)}
}
/* faint dust puff on contact — subtle, not cartoonish */
.gate__dust{z-index:5;inset:auto;left:50%;bottom:6%;width:70%;height:18%;transform:translateX(-50%);
  background:
    radial-gradient(ellipse 40% 55% at 30% 60%,rgba(232,214,180,.35),transparent 70%),
    radial-gradient(ellipse 35% 50% at 70% 55%,rgba(232,214,180,.28),transparent 70%),
    radial-gradient(ellipse 50% 40% at 50% 70%,rgba(210,190,155,.22),transparent 72%);
  opacity:0;pointer-events:none;animation:dustPuff 1s cubic-bezier(.2,.7,.3,1) 1.05s both}
@keyframes dustPuff{
  0%{opacity:0;transform:translateX(-50%) scale(.7) translateY(4px)}
  25%{opacity:.55;transform:translateX(-50%) scale(1) translateY(0)}
  100%{opacity:0;transform:translateX(-50%) scale(1.35) translateY(-10px)}
}
.gate.is-landed .gate__parcel,.gate.is-landed .gate__table::before{animation:none;opacity:1;filter:none}
.gate.is-landed:not(.is-pushin) .gate__parcel,.gate.is-landed:not(.is-pushin) .gate__table::before{transform:none}
.gate.is-pushin .gate__parcel{animation:none!important;filter:none}
.gate.is-landed .gate__dust,.gate.is-landed .gate__bow{animation:none;opacity:0}
.gate.is-landed .gate__bow{opacity:1;transform:none}
.gate__stamp{position:absolute;z-index:4;left:30%;top:30.3%;width:40%;border:0;padding:0;margin:0;background:none;cursor:pointer;transform:rotate(-3deg);--hl-pre:drop-shadow(0 3px 2px rgba(40,22,8,.35)) drop-shadow(0 10px 14px rgba(40,22,8,.22));filter:var(--hl-pre);animation:stampWobble 3.2s ease-in-out 1.85s infinite;-webkit-tap-highlight-color:transparent;transition:transform .28s var(--ease),filter .28s ease}
.gate__stamp img,.gate__stamp svg{display:block;width:100%;height:auto;pointer-events:none}
/* desktop: strong hover highlight (hl.css glow + lift) */
@media (hover:hover){
  .gate__stamp:hover{animation-play-state:paused;transform:rotate(-1deg) scale(1.06);filter:var(--hl-pre) drop-shadow(0 0 5px rgba(255,200,84,.95)) drop-shadow(0 0 16px rgba(255,200,84,.65)) drop-shadow(0 12px 18px rgba(40,22,8,.3))}
}
.gate__stamp:focus-visible{outline:3px dashed #fff3d6;outline-offset:8px;border-radius:4px;filter:var(--hl-pre) drop-shadow(0 0 5px rgba(255,200,84,.95)) drop-shadow(0 0 16px rgba(255,200,84,.65))}
@keyframes stampWobble{0%,62%,100%{transform:rotate(-3deg)}70%{transform:rotate(-5.5deg) translateY(-2px)}78%{transform:rotate(-.8deg) translateY(-1px)}86%{transform:rotate(-4deg)}93%{transform:rotate(-2.4deg)}}
/* touch / no-hover: gentle idle glow pulse so the stamp reads as tappable */
@keyframes stampIdleGlow{
  0%,100%{filter:var(--hl-pre) drop-shadow(0 0 3px rgba(255,200,84,.35)) drop-shadow(0 0 10px rgba(255,200,84,.18))}
  50%{filter:var(--hl-pre) drop-shadow(0 0 7px rgba(255,200,84,.9)) drop-shadow(0 0 20px rgba(255,200,84,.55))}
}
@media (hover:none){
  .gate:not(.is-landed) .gate__stamp{
    animation:stampWobble 3.2s ease-in-out 1.85s infinite, stampIdleGlow 2.6s ease-in-out 2s infinite;
  }
}
/* slow camera push-in after stamp click */
.gate.is-pushin .gate__stamp{animation:none!important;pointer-events:none}
.gate.is-pushin .gate__parcel{will-change:transform}
.gate.is-pushin .gate__table::before{opacity:.55;transition:opacity .8s ease}
.gate__ghost{position:absolute;z-index:3;left:30%;top:30.3%;width:40%;aspect-ratio:320/400;transform:rotate(-3deg);opacity:0;border-radius:3px;
  background:rgba(70,44,18,.22);-webkit-mask:radial-gradient(circle at 50% 50%,#000 60%,transparent 61%) -6px -6px/12px 12px,linear-gradient(#000,#000) 7px 7px/calc(100% - 14px) calc(100% - 14px) no-repeat;mask:radial-gradient(circle at 50% 50%,#000 60%,transparent 61%) -6px -6px/12px 12px,linear-gradient(#000,#000) 7px 7px/calc(100% - 14px) calc(100% - 14px) no-repeat}
.gate__postmark{position:absolute;z-index:5;width:5.8%;top:22%;left:68%;color:rgba(55,65,90,.26);transform:rotate(-24deg);pointer-events:none;mix-blend-mode:multiply;opacity:.65}
.gate__portal{position:absolute;z-index:8;left:0;top:0;width:0;height:0;border-radius:50%;pointer-events:none;opacity:0;box-shadow:0 0 0 3px rgba(255,226,160,.95),0 0 26px 10px rgba(255,196,96,.8),0 0 70px 30px rgba(255,170,70,.35)}
.gate.is-portal{-webkit-mask-image:radial-gradient(circle at var(--px,50%) var(--py,50%),transparent calc(var(--pr,0px) - 1px),#000 var(--pr,0px));mask-image:radial-gradient(circle at var(--px,50%) var(--py,50%),transparent calc(var(--pr,0px) - 1px),#000 var(--pr,0px))}
.gate.is-portal .gate__portal{opacity:1}
.gate.is-dive .gate__room,.gate.is-dive .gate__table{opacity:0}
.gate.is-dive .gate__parcel{animation:diveIn .95s cubic-bezier(.25,.72,.2,1) forwards}
.gate.is-dive .gate__stamp,.gate.is-dive .gate__ghost,.gate.is-dive .gate__postmark,.gate.is-dive .gate__skip,.gate.is-dive .gate__dust{opacity:0;transition:opacity .2s}
@keyframes diveIn{
  0%{transform:scale(1) translateY(0);filter:brightness(1)}
  35%{transform:scale(1.45) translateY(6%);filter:brightness(1.15)}
  70%{transform:scale(2.4) translateY(18%);filter:brightness(1.35)}
  100%{transform:scale(3.6) translateY(32%);filter:brightness(1.55);opacity:0}
}
.gate__bit{position:absolute;z-index:7;width:7px;height:5px;background:#f4ead2;border-radius:1px;box-shadow:0 1px 1px rgba(0,0,0,.2);pointer-events:none}
.gate.is-tearing .gate__stamp{animation:stampTear .42s cubic-bezier(.3,.7,.3,1) forwards}
.gate.is-tearing .gate__ghost{opacity:1;transition:opacity .15s}
.gate.is-tearing .gate__postmark{opacity:.25;transition:opacity .25s}
@keyframes stampTear{0%{transform:rotate(-3deg)}18%{transform:rotate(-3deg) translate(2px,1px) skewX(-1deg)}32%{transform:rotate(-4deg) translate(-2px,-2px) skewY(1.2deg)}
  60%{transform:perspective(700px) rotateX(16deg) rotateZ(-6deg) translateY(-14px) scale(1.05);filter:drop-shadow(0 18px 18px rgba(40,22,8,.35))}
  100%{transform:perspective(700px) rotateX(8deg) rotateZ(-7deg) translateY(-22px) scale(1.07);filter:drop-shadow(0 26px 30px rgba(40,22,8,.4))}}
.gate__skip{position:absolute;z-index:12;right:max(12px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));min-height:44px;min-width:44px;padding:10px 16px;border-radius:999px;border:1px solid rgba(243,196,122,.45);background:rgba(20,12,8,.72);color:#F5F1E8;font:600 .95rem/1 Inter,system-ui,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gate__skip:hover,.gate__skip:focus-visible{background:rgba(40,24,14,.88);outline:2px solid #ffd27a;outline-offset:2px}
html.gate-reveal .gate__skip{display:none}
@media (prefers-reduced-motion:reduce){
  .gate__parcel,.gate__table::before,.gate__stamp,.gate__bow,.gate__dust{animation:none!important}
  .gate__dust{opacity:0}
  .gate__flap,.gate__inner,.gate__light,.gate__depth,.gate__room{transition:none}
  .gate.is-dive .gate__parcel{animation:none;opacity:0}
  .gate.is-pushin .gate__parcel{transform:none!important}
}

/* ===== Round 6: the pinned postcard (the old footer: contact, shipping, returns, fine print) ===== */
.postcard{position:absolute;z-index:3;left:1450px;top:200px;width:120px;height:82px;border:0;padding:0;background:none;cursor:pointer;transform:rotate(3deg);transform-origin:50% 0;transition:transform .4s var(--ease);filter:drop-shadow(0 8px 8px rgba(0,0,0,.45))}
.postcard svg{width:100%;height:100%;display:block}
.postcard .plaque{opacity:0;transition:opacity .25s}
.postcard:hover,.postcard:focus-visible{transform:rotate(-1deg) translateY(-3px)}
.postcard:hover .plaque,.postcard:focus-visible .plaque{opacity:1}
.postcard:focus-visible{outline:3px solid #ffd27a;outline-offset:4px}
.is-portrait .postcard{left:668px;top:508px;width:108px;height:74px}
@media (prefers-reduced-motion:reduce){.postcard{transition:none}}

/* ===== Camera zoom (Kyle, Oct 25): wall calendar <-> /calendar/, bookshelf -> Muskoka Oracle Deck ===== */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:.38s}
::view-transition-group(mp-cal){animation-duration:.38s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
.mode-inside .room .cal{view-transition-name:mp-cal}
@media (prefers-reduced-motion:reduce){.mode-inside .room .cal{view-transition-name:none}::view-transition-group(root){animation-duration:.3s}}
.cam{position:absolute;inset:0;transform-origin:0 0;backface-visibility:hidden}
.cam-busy .cam{will-change:transform}
/* fade the buttons while the camera moves */
.room .controls{transition:opacity .3s ease}
.cam-busy .room .controls,.cam-busy .room .year,
.cam-from-cal .room .controls{opacity:0;pointer-events:none}
.cam-from-cal .cam{transform:var(--cam0,none)}
.cam-from-cal .room .controls{transition:none}
.cam-fade .room{opacity:0;transition:opacity .25s ease}
.cam-fadein .room{animation:camFadeIn .45s ease both}
/* cottage overrides */
.mode-inside .stamp-logo{opacity:1;visibility:visible;pointer-events:auto}
.walking .stamp-logo{opacity:1;pointer-events:auto}
html.gate-on:not(.gate-reveal) .site-hdr,
html.gate-on:not(.gate-reveal) #main{visibility:hidden}
/* stamp-logo hidden after open — header brand is the one mark */

/* After open, only header Logo A shows */
html.shop-open .stamp-logo,
html.gate-reveal:not(.gate-on) .stamp-logo{opacity:0!important;visibility:hidden!important;pointer-events:none!important;width:0!important;height:0!important;overflow:hidden!important}

/* Archival handoff: kraft → navy paper */
html.shop-open body,
html.gate-reveal body{ background:#14233A; }