:root{
  --wood-dark:#3b2414; --wood:#6b4226; --wood-light:#a0683b;
  --plaid-red:#b22222; --plaid-dark:#5a0f0f; --denim:#2f4a6d; --denim-light:#5b7aa3;
  --cream:#f6ead2; --paper:#fbf3e2; --ink:#2a1a0e; --mustard:#e0a526;
  --western: "Rockwell Extra Bold","Rockwell","Clarendon","Bookman Old Style","Roboto Slab","Georgia","Cambria","Times New Roman",serif;
  --body: "Trebuchet MS","Segoe UI","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
[hidden]{display:none !important}
body{
  font-family:var(--body); color:var(--ink); line-height:1.5;
  background-color:var(--wood);
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 120px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 3px, transparent 3px 23px),
    linear-gradient(180deg, var(--wood-light), var(--wood) 30%, var(--wood-dark));
  min-height:100vh;
}
body.gated{overflow:hidden}

/* language toggle */
.lang-toggle{position:fixed;top:12px;right:12px;z-index:1000;display:flex;border:3px solid var(--wood-dark);border-radius:8px;overflow:hidden;box-shadow:0 3px 0 var(--wood-dark)}
.lang-toggle button{font:700 15px/1 var(--western);padding:9px 13px;border:0;cursor:pointer;background:var(--cream);color:var(--wood-dark);letter-spacing:.05em}
.lang-toggle button+button{border-left:3px solid var(--wood-dark)}
.lang-toggle button[aria-pressed="true"]{background:var(--plaid-red);color:#fff}
.lang-toggle button:focus-visible{outline:3px solid var(--mustard);outline-offset:-3px}

/* plaid pattern */
.gate,.site-footer,.hero::before{
  background-color:var(--plaid-red);
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 18px, transparent 18px 36px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 18px, transparent 18px 36px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 6px);
}

/* gate */
.gate{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:70px 18px 18px;overflow:auto}
.gate-card{position:relative;max-width:560px;width:100%;background:var(--paper);border:6px solid var(--wood-dark);border-radius:14px;padding:44px 32px 30px;text-align:center;box-shadow:0 12px 0 var(--wood-dark),0 20px 40px rgba(0,0,0,.5)}
.gate-badge{position:absolute;top:-34px;left:50%;transform:translateX(-50%) rotate(-6deg);background:var(--mustard);color:var(--wood-dark);font:900 28px/1 var(--western);width:78px;height:78px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:5px solid var(--wood-dark)}
.gate-card h1{font:900 clamp(30px,6vw,46px)/1.1 var(--western);margin:.3em 0 .4em;color:var(--plaid-dark);text-transform:uppercase;letter-spacing:.02em}
.gate-card p{font-size:clamp(17px,2.5vw,19px);margin:0 0 1.4em}
.gate-buttons{display:flex;flex-direction:column;gap:12px}
.btn{font:800 18px/1.2 var(--western);padding:15px 18px;border-radius:10px;cursor:pointer;border:4px solid var(--wood-dark);box-shadow:0 5px 0 var(--wood-dark);transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--wood-dark)}
.btn:focus-visible{outline:4px solid var(--mustard);outline-offset:3px}
.btn-yes{background:var(--denim);color:#fff}
.btn-yes:hover{background:var(--denim-light)}
.btn-no{background:var(--cream);color:var(--wood-dark)}
.btn-no:hover{background:#ecdcbc}
.noscript{color:var(--plaid-red);font-weight:700}

/* hero */
.hero{position:relative;text-align:center;padding:72px 20px 40px;color:var(--cream)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;border-bottom:8px solid var(--wood-dark)}
.hero{z-index:0}
.kicker{margin:0;font:700 clamp(14px,2vw,17px)/1.2 var(--western);text-transform:uppercase;letter-spacing:.2em;color:var(--mustard)}
.title{margin:.15em 0 .2em;font:900 clamp(40px,9vw,92px)/1 var(--western);text-transform:uppercase;letter-spacing:.01em;color:var(--cream);text-shadow:4px 4px 0 var(--wood-dark),7px 7px 0 rgba(0,0,0,.35)}
.subtitle{margin:0 auto;max-width:900px;font-size:clamp(16px,2.3vw,20px);font-weight:700;background:var(--denim);display:inline-block;padding:6px 16px;border-radius:6px;border:3px solid var(--wood-dark)}

main{max-width:1100px;margin:0 auto;padding:40px 20px 60px}

/* photo */
.photo-frame{margin:0 auto 48px;max-width:620px;background:var(--paper);padding:14px 14px 10px;border:8px solid var(--wood-dark);border-radius:6px;box-shadow:0 14px 30px rgba(0,0,0,.45);transform:rotate(-1.2deg)}
.photo-frame img{display:block;width:100%;height:auto;border:3px solid var(--wood)}
.photo-frame figcaption{text-align:center;font:700 italic 17px/1.3 var(--western);padding:10px 4px 2px;color:var(--wood-dark)}

/* sayings */
.sayings h2{text-align:center;font:900 clamp(28px,5vw,48px)/1.1 var(--western);color:var(--cream);text-transform:uppercase;text-shadow:3px 3px 0 var(--wood-dark);margin:0 0 28px}
.cards{display:flex;flex-wrap:wrap;justify-content:center;gap:30px 26px}
.cards .card{flex:1 1 300px;max-width:340px}
.card{position:relative;margin:0;background:var(--paper);border:5px solid var(--denim);border-radius:12px;padding:30px 24px 18px;box-shadow:0 8px 0 var(--wood-dark);
  background-image:repeating-linear-gradient(0deg, transparent 0 31px, rgba(47,74,109,.08) 31px 32px)}
.card:nth-child(odd){transform:rotate(-.6deg)}
.card:nth-child(even){transform:rotate(.6deg)}
.card .num{position:absolute;top:-20px;left:18px;width:42px;height:42px;border-radius:50%;background:var(--plaid-red);color:#fff;font:900 22px/1 var(--western);display:flex;align-items:center;justify-content:center;border:4px solid var(--wood-dark)}
.card p{margin:0 0 14px;font:700 clamp(18px,2.2vw,21px)/1.45 var(--western);color:var(--ink)}
.card footer{text-align:right;font-weight:700;color:var(--denim);font-style:italic}

.site-footer{text-align:center;color:var(--cream);padding:26px 20px;border-top:8px solid var(--wood-dark);font:700 17px/1.4 var(--western)}
.site-footer p{margin:0;text-shadow:2px 2px 0 var(--wood-dark)}

@media (max-width:560px){
  .gate-card{padding:44px 20px 24px}
  .cards .card{max-width:none}
  .card:nth-child(n){transform:none}
  .photo-frame{transform:none;border-width:6px;padding:8px 8px 6px}
  .hero{padding:66px 14px 30px}
  main{padding:30px 14px 46px}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}
.nowrap{white-space:nowrap}
@media (max-width:420px){.title{font-size:clamp(34px,10.5vw,44px)}}

/* gate step 2: suspicious Hank */
.gate-avatar{position:absolute;top:-62px;left:50%;transform:translateX(-50%) rotate(-5deg);width:116px;height:116px}
.gate-avatar img{width:116px;height:116px;border-radius:50%;object-fit:cover;border:5px solid var(--wood-dark);display:block;background:var(--cream)}
.gate-avatar .squint{display:none}
.gate-avatar .huh{position:absolute;right:-26px;top:-6px;background:var(--mustard);color:var(--wood-dark);font:900 22px/1 var(--western);padding:8px 9px;border-radius:50%;border:4px solid var(--wood-dark);transform:rotate(12deg)}
.gate-card-2{padding-top:70px;animation:shake .5s ease-in-out 1}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px) rotate(-1deg)}40%{transform:translateX(7px) rotate(1deg)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.gate-card-2{animation:none}}


/* ---- compact header above the scene ---- */
.hero{padding:16px 120px 14px}
.hero .kicker{font-size:clamp(11px,1.2vw,14px)}
.title{font-size:clamp(34px,4.6vw,60px);margin:.08em 0 .14em}
.subtitle{font-size:clamp(13px,1.4vw,16px);padding:4px 14px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- backyard scene ---- */
.yard{position:relative;width:min(100%, calc((100vh - 150px) * 16 / 9));width:min(100%, calc((100svh - 150px) * 16 / 9));min-width:min(100%,640px);margin:0 auto;border-bottom:8px solid var(--wood-dark);box-shadow:0 14px 30px rgba(0,0,0,.45)}
.scene{position:relative;aspect-ratio:16/9;overflow:hidden;background:#3b2414 url(../assets/yard/yard.jpg?v=y1) center/cover no-repeat;-webkit-user-select:none;user-select:none}
.layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;border:0}
.scene-still{z-index:1}
#yard-loop{z-index:2;background:transparent}
.gags{position:absolute;inset:0;z-index:3;pointer-events:none}
.gag{opacity:0;transition:opacity .22s ease;background:transparent}
.gag.on{opacity:1}
.scene video::-webkit-media-controls,.scene video::-webkit-media-controls-panel,.scene video::-webkit-media-controls-start-playback-button,.scene video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none}
.scene::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(30,15,5,.45) 100%),linear-gradient(180deg, transparent 62%, rgba(25,12,4,.6) 100%)}

/* speech bubble */
.bubble{position:absolute;z-index:6;top:5%;left:50%;max-width:min(46%,520px);margin:0;padding:.55em .9em;transform:translateX(-50%);
  background:#fffdf5;color:#1d1209;border:4px solid #1d1209;border-radius:22px;font:900 clamp(15px,2.3vw,30px)/1.15 var(--western);text-align:center;text-transform:uppercase;
  box-shadow:5px 5px 0 rgba(0,0,0,.35);animation:bubble-pop .28s cubic-bezier(.2,1.6,.4,1)}
.bubble::after{content:"";position:absolute;bottom:-18px;left:46%;border:12px solid transparent;border-top:16px solid #1d1209;border-bottom:0}
.bubble::before{content:"";position:absolute;bottom:-11px;left:calc(46% + 4px);border:8px solid transparent;border-top:11px solid #fffdf5;border-bottom:0;z-index:1}
.bubble[data-who="outhouse"]{left:73%;top:4%}
.bubble[hidden]{display:none}
@keyframes bubble-pop{0%{transform:translateX(-50%) scale(.3);opacity:0}100%{transform:translateX(-50%) scale(1);opacity:1}}

/* sound toggle */
.sound-toggle{position:absolute;z-index:7;top:12px;left:12px;display:flex;align-items:center;gap:6px;font:800 clamp(12px,1.4vw,16px)/1 var(--western);padding:8px 12px;border-radius:999px;
  background:rgba(246,234,210,.92);color:var(--wood-dark);border:3px solid var(--wood-dark);box-shadow:0 3px 0 var(--wood-dark);cursor:pointer}
.sound-toggle[aria-pressed="true"]{background:var(--mustard)}
.sound-toggle:hover{filter:brightness(1.05)}
.sound-toggle:active{transform:translateY(3px);box-shadow:none}
.sound-toggle:focus-visible{outline:3px solid #fff;outline-offset:2px}
.st-icon{font-size:1.15em;line-height:1}

/* paw gag buttons, overlaid along the bottom of the scene */
.paws-bar{position:absolute;z-index:8;left:0;right:0;bottom:0;padding:0 1.5% 1.2%;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.paws-title{margin:0 0 4px;font:900 clamp(12px,1.4vw,17px)/1.2 var(--western);text-transform:uppercase;letter-spacing:.08em;color:var(--cream);text-shadow:0 2px 0 rgba(0,0,0,.8),0 0 8px rgba(0,0,0,.7)}
.paws{display:flex;justify-content:center;align-items:flex-end;gap:clamp(6px,2vw,28px);pointer-events:auto}
.paw{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;border:0;background:none;cursor:pointer;color:#5a3a1e;-webkit-tap-highlight-color:transparent;font:inherit}
.paw-print{position:relative;display:block;width:clamp(54px,7vw,96px);aspect-ratio:1/1;filter:drop-shadow(0 4px 0 rgba(30,15,5,.75)) drop-shadow(0 0 6px rgba(246,234,210,.35));transition:transform .12s ease,filter .12s ease,color .12s}
.paw:nth-child(odd) .paw-print{transform:rotate(-10deg)}
.paw:nth-child(even) .paw-print{transform:rotate(9deg)}
.paw-print svg{width:100%;height:100%;display:block;fill:currentColor}
.paw-icon{position:absolute;left:50%;top:68%;transform:translate(-50%,-50%);font-size:clamp(17px,2.4vw,32px);line-height:1;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.paw-label{display:block;max-width:clamp(70px,11vw,150px);padding:3px 7px;border-radius:6px;background:rgba(246,234,210,.95);color:var(--wood-dark);border:2px solid var(--wood-dark);font:800 clamp(10px,1.15vw,14px)/1.15 var(--western);text-align:center}
.paw:hover .paw-print{color:#7a4a22;transform:rotate(0) translateY(-5px) scale(1.07)}
.paw.stomp .paw-print{animation:stomp .32s ease-out}
.paw[aria-pressed="true"] .paw-print{color:var(--plaid-red);filter:drop-shadow(0 4px 0 var(--wood-dark)) drop-shadow(0 0 10px rgba(224,165,38,.95))}
.paw[aria-pressed="true"] .paw-label{background:var(--mustard)}
.paw:focus-visible{outline:none}
.paw:focus-visible .paw-label{outline:3px solid var(--mustard);outline-offset:2px}
.paw:focus-visible .paw-print{filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 8px var(--mustard))}
@keyframes stomp{0%{transform:translateY(-10px) scale(1.08)}45%{transform:translateY(3px) scale(.88,.8)}75%{transform:translateY(-2px) scale(1.04)}100%{transform:none}}

/* phones / narrow: paws sit just below the scene */
@media (max-width:760px){
  .hero{padding:58px 14px 14px}
  .yard{width:100%}
  .paws-bar{position:static;padding:10px 6px 14px;pointer-events:auto;
    background-color:var(--wood-dark);background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 2px, transparent 2px 60px)}
  .paws{gap:4px;width:100%;justify-content:space-around}
  .paw{flex:1 1 0;min-width:0}
  .paw-print{width:clamp(48px,14vw,64px)}
  .paw-label{max-width:100%;font-size:11px;padding:3px 4px}
  .sound-toggle{top:auto;bottom:8px;left:8px;padding:7px 9px}
  .sound-toggle .st-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .st-icon{font-size:20px}
  .bubble{max-width:62%;border-width:3px;border-radius:16px;padding:.45em .7em}
  .bubble[data-who="outhouse"]{left:70%}
}
@media (prefers-reduced-motion:reduce){.paw-print{transition:none}.paw.stomp .paw-print{animation:none}.bubble{animation:none}.gag{transition:none}}

/* surprise paw: hot red/orange, a little wild */
.paw-surprise .paw-print{color:#d9480f}
.paw-surprise .paw-print svg{fill:url(#surprise-grad)}
.paw-surprise:hover .paw-print{color:#f76707}
.paw-surprise .paw-label{background:#ffd8a8;border-color:#7a1f05;color:#7a1f05}
.paw-surprise[aria-pressed="true"] .paw-label{background:#ff922b;color:#2a0d02}
.paw-surprise[aria-pressed="true"] .paw-print{filter:drop-shadow(0 4px 0 var(--wood-dark)) drop-shadow(0 0 12px rgba(255,146,43,.95))}
.paw-surprise .paw-icon{font-size:clamp(15px,2vw,28px)}
.bubble[data-gag="surprise"]{max-width:min(54%,600px);font-size:clamp(14px,1.9vw,26px);background:#fff4e6;border-color:#7a1f05}
.bubble[data-gag="surprise"]::after{border-top-color:#7a1f05}
.bubble[data-gag="surprise"]::before{border-top-color:#fff4e6}
@media (max-width:760px){
  .paws{gap:2px}
  .paw-print{width:clamp(44px,12.5vw,60px)}
  .paw-label{font-size:10.5px;padding:3px 3px}
  .bubble[data-gag="surprise"]{max-width:76%;font-size:13px}
}