/* ===== Magical hero: a cosy green room with a fire ===== */
.hx{position:relative;overflow:hidden;padding:0;color:#F7F0DE;
  background:
    radial-gradient(ellipse 62% 72% at 74% 80%,rgba(255,150,60,.20),transparent 62%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.11) 0 2px,transparent 2px 104px),
    linear-gradient(180deg,#1B3A2A 0%,#21463A 55%,#1A3226 100%)}
.hx::after{content:'';position:absolute;left:0;right:0;bottom:0;height:42px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,#2a3d31,#17261d);border-top:2px solid rgba(0,0,0,.35)}

/* string lights */
.hx-strings{position:absolute;top:0;left:0;width:100%;height:90px;z-index:3;pointer-events:none}
.hx-bulb{animation:hxTwinkle 2.8s ease-in-out infinite}
@keyframes hxTwinkle{0%,100%{opacity:.5}50%{opacity:1}}

/* warm glow that breathes, and grows when the fire is stoked */
.hx-glow{position:absolute;right:-8%;bottom:-12%;width:80%;height:100%;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 55% 72%,rgba(255,160,70,.55) 0%,rgba(255,130,40,.22) 38%,transparent 68%);
  animation:hxGlow 3.4s ease-in-out infinite;transition:transform .5s ease}
.hx.stoked .hx-glow{transform:scale(1.14)}
@keyframes hxGlow{0%,100%{opacity:.7}50%{opacity:1}}

.hx-inner{position:relative;z-index:2;max-width:1220px;margin:0 auto;padding:96px 36px 0;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:12px;align-items:end}

/* words */
.hx-copy{align-self:center;text-align:left;padding-bottom:86px}
.hx-kicker{font-family:var(--sans);font-size:12px;letter-spacing:4px;text-transform:uppercase;color:#E8C888;font-weight:600;margin:0 0 18px}
.hx-title{font-family:var(--display);font-weight:400;font-size:clamp(46px,6.4vw,88px);line-height:1;color:#FFF6DC;margin:0 0 20px;text-shadow:0 0 34px rgba(255,180,80,.35)}
.hx-title em{font-style:italic;color:#F2C45A}
.hx-sub{font-family:var(--display);font-style:italic;font-size:clamp(19px,2vw,24px);line-height:1.5;color:#D5E3CD;max-width:520px;margin:0 0 22px}
.hx-perks{font-family:var(--sans);font-size:14px;line-height:1.7;color:rgba(247,240,222,.8);margin:0 0 22px}
.hx-tag{display:inline-block;font-family:var(--sans);font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:500;color:#F2D58A;
  border:1px solid rgba(242,213,138,.5);background:rgba(242,213,138,.1);padding:9px 18px;border-radius:999px;margin-bottom:22px}
.hx-btns{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:18px}
.hx-btn{position:relative;display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:500;text-decoration:none;
  transition:transform .18s ease,box-shadow .25s ease}
.hx-btn:hover{transform:translateY(-3px)}
.hx-btn-gold{background:linear-gradient(160deg,#F7DE6B,#EFC53C);color:#3F3208;padding:14px 24px;border-radius:999px;font-size:15px;box-shadow:0 6px 22px rgba(240,200,60,.28)}
.hx-btn-gold:hover{box-shadow:0 10px 30px rgba(240,200,60,.5)}
.hx-btn-cream{background:#FAF3E0;color:#1F3B2C;padding:16px 30px;border-radius:12px;font-size:13px;letter-spacing:1.6px;text-transform:uppercase;box-shadow:0 6px 22px rgba(0,0,0,.25)}
.hx-btn-cream:hover{box-shadow:0 10px 30px rgba(255,236,170,.35)}
.hx-btn:focus-visible,.hx-alt a:focus-visible{outline:2px solid #E8C888;outline-offset:3px}
.hx-alt{font-family:var(--sans);font-size:13px;line-height:1.7;color:rgba(247,240,222,.8)}
.hx-alt a{color:#F7F0DE;text-decoration:underline;text-underline-offset:3px}

/* the scene */
.hx-scene{position:relative;z-index:2;width:100%;max-width:560px;margin-left:auto;aspect-ratio:1/1;--px:0;--py:0}
.hx-fireplace{position:absolute;inset:0;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;
  transform:translate(calc(var(--px)*-6px),calc(var(--py)*-4px));transition:transform .25s ease-out}
.hx-fireplace svg{display:block;width:100%;height:100%;overflow:visible}
.hx-fireplace:focus-visible{outline:2px dashed #E8C888;outline-offset:6px;border-radius:14px}
.hx-embers{position:absolute;left:30%;right:30%;bottom:11%;height:62%;pointer-events:none}
.ember{position:absolute;bottom:0;width:6px;height:6px;border-radius:50%;background:#FFC15E;box-shadow:0 0 9px 3px rgba(255,150,50,.85);opacity:0;
  animation:hxEmber var(--dur,1.8s) ease-out forwards}
@keyframes hxEmber{0%{opacity:0;transform:translate(0,0) scale(1)}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx,0px),-270px) scale(.25)}}

/* flames */
.hx-fire{transform-box:fill-box;transform-origin:50% 100%;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.hx-fireplace.stoked .hx-fire{transform:scale(1.16)}
.hx-fireplace.pop .hx-fire{transform:scale(1.32)}
.fl{transform-box:fill-box;transform-origin:50% 100%;animation:hxFlick 1.2s ease-in-out infinite}
.fl-a{animation-duration:1.15s}
.fl-b{animation-duration:.9s;animation-delay:-.3s}
.fl-c{animation-duration:.7s;animation-delay:-.15s}
.fl-l{animation-duration:1.05s;animation-delay:-.5s}
.fl-r{animation-duration:1.3s;animation-delay:-.8s}
.hx-fireplace.stoked .fl{animation-duration:.55s}
@keyframes hxFlick{0%,100%{transform:scale(1,1) skewX(0)}22%{transform:scale(1.05,1.09) skewX(-2.2deg)}48%{transform:scale(.95,.93) skewX(2deg)}74%{transform:scale(1.03,1.1) skewX(-1.2deg)}}
.hx-innerglow{transform-box:fill-box;transform-origin:50% 50%;animation:hxInner 2.6s ease-in-out infinite;transition:transform .5s ease}
.hx-fireplace.stoked .hx-innerglow{transform:scale(1.2)}
@keyframes hxInner{0%,100%{opacity:.75}50%{opacity:1}}

/* candle, steam, letters */
.hx-candleflame{transform-box:fill-box;transform-origin:50% 100%;animation:hxCandle 1.5s ease-in-out infinite}
.hx-candleflame2{animation-delay:-.45s}
@keyframes hxCandle{0%,100%{transform:scale(1,1) rotate(0)}30%{transform:scale(1.08,1.12) rotate(-2deg)}65%{transform:scale(.94,.92) rotate(2deg)}}
.hx-candleglow{animation:hxCandleGlow 2.2s ease-in-out infinite}
@keyframes hxCandleGlow{0%,100%{opacity:.6}50%{opacity:1}}
.hx-steam path{transform-box:fill-box}
.hx-steam1{animation:hxSteam 3.2s ease-in-out infinite}
.hx-steam2{animation:hxSteam 3.2s ease-in-out -1.4s infinite}
@keyframes hxSteam{0%{opacity:0;transform:translateY(8px)}35%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
.hx-letters{transform-box:fill-box;transform-origin:50% 100%;cursor:pointer;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.hx-letters:hover{transform:rotate(-3deg) translateY(-6px)}

/* Prickly */
.hx-prickly{position:absolute;z-index:2;left:1%;bottom:2.2%;width:33%;padding:0;margin:0;border:0;background:none;cursor:pointer;line-height:0;
  -webkit-tap-highlight-color:transparent;transform:translate(calc(var(--px)*10px),calc(var(--py)*5px));transition:transform .25s ease-out}
.hx-prickly:hover{box-shadow:none;transform:translate(calc(var(--px)*10px),calc(var(--py)*5px))}
.hx-prickly:focus-visible{outline:2px dashed #E8C888;outline-offset:6px;border-radius:14px}
.hx-prickly img{display:block;width:100%;height:auto;transform-origin:50% 100%;animation:hxBob 4.2s ease-in-out infinite;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.hx-prickly:hover img,.hx-prickly.wiggle img{animation:hxWiggle .7s ease-in-out}
@keyframes hxBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(.8deg)}}
@keyframes hxWiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-4deg) translateY(-6px)}45%{transform:rotate(4deg) translateY(-3px)}70%{transform:rotate(-2deg)}}
.hx-shadow{position:absolute;z-index:1;left:2%;bottom:1.2%;width:31%;height:4.2%;pointer-events:none;background:radial-gradient(ellipse,rgba(0,0,0,.5),transparent 70%)}
.hx-bubble{position:absolute;z-index:4;left:2%;bottom:71%;max-width:230px;background:#5C312D;color:#FFF6DC;border:1px solid rgba(232,200,136,.55);font-family:'Caveat',cursive;font-size:23px;line-height:1.15;
  padding:10px 16px;border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.35);opacity:0;pointer-events:none;
  transform:translateY(8px) scale(.9);transform-origin:20% 100%;transition:opacity .25s ease,transform .3s cubic-bezier(.34,1.56,.64,1)}
.hx-bubble.show{opacity:1;transform:translateY(0) scale(1)}
.hx-bubble::after{content:'';position:absolute;left:34px;bottom:-9px;border:9px solid transparent;border-top-color:#5C312D;border-bottom:0}
.hx-spark{position:absolute;z-index:3;color:#F7D97A;font-size:17px;pointer-events:none;text-shadow:0 0 8px rgba(255,220,110,.9);animation:hxSpark 1.4s ease-out forwards}
@keyframes hxSpark{0%{opacity:0;transform:translateY(0) scale(.5)}20%{opacity:1}100%{opacity:0;transform:translateY(-46px) scale(1.2) rotate(40deg)}}


/* gentle entrance: each line rises in; "backwards" means nothing can ever get stuck invisible */
.hx-copy>*{animation:hxRise .8s cubic-bezier(.2,.7,.2,1) backwards}
.hx-copy>:nth-child(1){animation-delay:.05s}
.hx-copy>:nth-child(2){animation-delay:.15s}
.hx-copy>:nth-child(3){animation-delay:.25s}
.hx-copy>:nth-child(4){animation-delay:.35s}
.hx-copy>:nth-child(5){animation-delay:.45s}
.hx-copy>:nth-child(6){animation-delay:.55s}
.hx-copy>:nth-child(7){animation-delay:.65s}
@keyframes hxRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hx-scene{animation:hxFadeIn 1.1s ease .2s backwards}
@keyframes hxFadeIn{from{opacity:0}to{opacity:1}}

/* the sparkle layer that drifts over the whole site: fireflies, cursor sparkle, click-lanterns */
#fxCanvas{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:40}

@media(max-width:900px){
  .hx{padding-left:0!important;padding-right:0!important}
  .hx-inner{grid-template-columns:1fr;padding:84px 20px 0;gap:0}
  .hx-copy{text-align:center;padding:6px 0 30px}
  .hx-sub{margin-left:auto;margin-right:auto}
  .hx-btns{justify-content:center}
  .hx-scene{max-width:430px;margin:0 auto}
  .hx-bubble{font-size:19px;max-width:190px}
  .hx::after{height:36px}
  .hx-glow{right:-30%;width:150%;bottom:-6%}
}
@media(max-width:480px){
  .hx-btn-cream{padding:15px 22px;font-size:12px}
  .hx-btn-gold{font-size:14px}
}

/* anyone who has asked their device for less motion gets a calm, still scene */
@media(prefers-reduced-motion:reduce){
  .hx *,.hx *::before,.hx *::after{animation:none!important;transition:none!important}
  .hx-bulb{opacity:.9}
  #fxCanvas{display:none}
}

/* =====================================================================
   HOME PAGE: every section is a room in Prickly's hedge, all of them dark and warm
   ===================================================================== */
body.home{background:var(--deep)}
.d-kick{font-family:var(--sans);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);font-weight:600;margin:0 0 14px}
.d-h2{font-family:var(--display);font-weight:400;font-size:clamp(32px,4.4vw,52px);line-height:1.1;color:#FFF6DC;margin:0 0 18px}
.d-h2 em{font-style:italic;color:var(--honey)}
.d-body{font-family:var(--sans);font-size:16px;line-height:1.85;color:var(--mist);margin:0 0 22px}
.d-center{text-align:center}
.d-sec{position:relative;overflow:hidden;padding:96px 40px}
.d-inner{position:relative;z-index:1;max-width:1100px;margin:0 auto}

/* tilt cards: lean toward the mouse. (.tilt is never put on the same element as .reveal) */
.tilt{--rot:0deg;transform:perspective(800px) rotate(var(--rot)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out,box-shadow .3s,border-color .3s}

/* ---------- woodland friends: the woods at night ---------- */
#woodlandFriends{background:
  radial-gradient(1.5px 1.5px at 12% 18%,rgba(255,240,200,.7),transparent),radial-gradient(1px 1px at 28% 62%,rgba(255,240,200,.5),transparent),
  radial-gradient(1.5px 1.5px at 47% 12%,rgba(255,240,200,.6),transparent),radial-gradient(1px 1px at 66% 44%,rgba(255,240,200,.5),transparent),
  radial-gradient(1.5px 1.5px at 83% 20%,rgba(255,240,200,.7),transparent),radial-gradient(1px 1px at 91% 70%,rgba(255,240,200,.45),transparent),
  linear-gradient(180deg,#0F2018 0%,#14291F 100%)!important}
#woodlandFriends>div>div:not([style*="dashed"]){transition:transform .3s,border-color .3s,box-shadow .3s}
#woodlandFriends>div>div:not([style*="dashed"]):hover{transform:translateY(-6px);border-color:rgba(232,200,136,.6)!important;box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 28px rgba(232,200,136,.15)}

/* ---------- subscribe: the post box, with three tickets ---------- */
.sec-sub{background:
  radial-gradient(ellipse 70% 55% at 50% 100%,rgba(255,150,60,.16),transparent 70%),
  linear-gradient(180deg,#183425 0%,#132A1F 100%)}
.sub-title{font-family:var(--display);font-weight:400;font-size:clamp(34px,5vw,60px);line-height:1.06;color:#FFF6DC;margin:0 0 16px;text-align:center}
.sub-title em{font-style:italic;color:var(--honey)}
.sub-lede{max-width:560px;margin:0 auto 46px;text-align:center;font-size:17px;line-height:1.8;color:var(--mist)}
.tickets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;align-items:stretch;max-width:1000px;margin:0 auto}
.ticket-wrap{display:flex}
.ticket{position:relative;display:flex;flex-direction:column;width:100%;padding:34px 28px 28px;text-align:center;text-decoration:none;color:var(--text);
  background:linear-gradient(165deg,#1F4033 0%,#17301F 100%);border:1px solid rgba(232,200,136,.38);border-radius:18px;box-shadow:0 16px 40px rgba(0,0,0,.4)}
.ticket::before,.ticket::after{content:'';position:absolute;top:58%;width:26px;height:26px;border-radius:50%;background:#152A1E;border:1px solid rgba(232,200,136,.38);z-index:1}
.ticket::before{left:-14px;clip-path:inset(0 0 0 50%)}
.ticket::after{right:-14px;clip-path:inset(0 50% 0 0)}
.ticket:hover{border-color:rgba(232,200,136,.8);box-shadow:0 22px 50px rgba(0,0,0,.5),0 0 40px rgba(232,200,136,.2)}
.ticket-badge{align-self:center;font-family:var(--sans);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);border:1px solid rgba(232,200,136,.45);border-radius:999px;padding:5px 14px}
.ticket-price{display:block;margin:20px 0 4px;font-family:var(--display);font-size:clamp(44px,5vw,60px);line-height:1;color:#FFF6DC}
.ticket-price small{font-family:var(--sans);font-size:15px;color:var(--mist)}
.ticket-note{display:block;font-family:var(--sans);font-size:14px;color:var(--mist);margin-bottom:30px;min-height:42px}
.ticket-cta{margin-top:auto;padding-top:22px;border-top:2px dashed rgba(232,200,136,.35);font-family:var(--sans);font-size:13px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;color:var(--gold)}
.ticket-main{background:linear-gradient(165deg,#2A5A44 0%,#1B3A2A 100%);border-color:rgba(242,196,90,.75);box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 50px rgba(242,196,90,.18);animation:ticketGlow 3.6s ease-in-out infinite}
.ticket-main .ticket-cta{color:#3F3208;background:linear-gradient(160deg,#F7DE6B,#EFC53C);border-top:0;border-radius:12px;padding:15px 10px;box-shadow:0 8px 24px rgba(240,200,60,.3)}
@keyframes ticketGlow{0%,100%{box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 36px rgba(242,196,90,.14)}50%{box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 64px rgba(242,196,90,.3)}}
.sub-foot{text-align:center;margin:34px 0 0;font-family:var(--sans);font-size:15px;color:var(--mist)}
.sub-foot a{color:var(--honey);text-underline-offset:4px}
.sub-foot2{text-align:center;margin:10px 0 0;font-family:var(--sans);font-style:italic;font-size:14px;color:var(--mist)}
.lc{display:block;max-width:300px;margin:46px auto 0;border:1px solid rgba(232,200,136,.3);border-radius:14px;overflow:hidden;background:rgba(0,0,0,.25);text-align:left}
.lc img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.lc-body{padding:14px 16px 12px}
.lc-kick{font-family:var(--sans);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.lc-name{font-family:var(--display);font-size:18px;color:#FFF6DC;margin-bottom:4px;text-decoration:none;display:block}
.lc-desc{font-family:var(--sans);font-size:12.5px;color:var(--mist);line-height:1.55;margin-bottom:8px}
.lc-price{font-family:var(--sans);font-size:12px;color:var(--gold)}
.lc-foot{display:flex;align-items:center;justify-content:space-between;padding:9px 16px;border-top:1px solid rgba(232,200,136,.2);font-family:var(--sans);font-size:11px;color:var(--mist)}
.lc-foot a{color:var(--gold);border:1px solid rgba(232,200,136,.4);border-radius:999px;padding:3px 12px;text-decoration:none}

/* ---------- christmas: snow drifts down behind the snowman ---------- */
.xmas{position:relative;overflow:hidden}
.xmas-grid{position:relative;z-index:1}
.snow{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.snow i{position:absolute;top:-12px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:rgba(255,255,255,.85);opacity:.75;animation:snowfall var(--d) linear var(--w) infinite}
@keyframes snowfall{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(var(--dr),760px,0)}}
.xmas-img{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.xmas-img:hover{transform:rotate(-1.2deg) scale(1.02)}

/* ---------- about: a little letter that writes itself, and a picture on the wall ---------- */
.sec-about{background:
  radial-gradient(ellipse 50% 60% at 12% 0%,rgba(255,240,180,.10),transparent 70%),
  linear-gradient(180deg,#112419 0%,#173022 100%)}
.about-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.letter-card{position:relative;margin-top:62px;padding:34px 34px 30px 34px;border-radius:14px;background:linear-gradient(165deg,rgba(92,49,45,.6),rgba(24,52,37,.8));border:1px solid rgba(232,200,136,.4);box-shadow:0 18px 44px rgba(0,0,0,.45)}
.letter-card::after{content:'';position:absolute;right:18px;top:-14px;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F7DE6B,#C9963C);box-shadow:0 4px 14px rgba(0,0,0,.5),0 0 18px rgba(240,200,60,.35)}
.letter-head{position:absolute;left:24px;top:-52px;width:78px;height:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.letter-name{font-family:var(--display);font-style:italic;font-size:30px;color:var(--honey);margin:14px 0 2px 0;padding-left:70px}
.letter-role{font-family:var(--sans);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin:0 0 18px;padding-left:70px}
.letter-quote{font-family:var(--hand);font-size:27px;line-height:1.4;color:#FFF6DC;margin:0}
.letter-quote.typing::after{content:'|';color:var(--gold);animation:caret .7s steps(1) infinite;margin-left:2px}
@keyframes caret{50%{opacity:0}}
.frame{position:relative;margin:34px auto 0;max-width:340px;padding:14px;border-radius:6px;background:linear-gradient(160deg,#5A3A22,#3A2414 60%,#2B1A0E);
  box-shadow:0 22px 46px rgba(0,0,0,.55),inset 0 0 0 1px rgba(232,200,136,.28);transform-origin:50% -34px;animation:sway 7s ease-in-out infinite}
.frame:hover{animation:swing 1.3s ease-in-out}
.frame img{display:block;width:100%;border-radius:2px;box-shadow:inset 0 0 0 6px #10241A}
.frame::before{content:'';position:absolute;top:-38px;left:50%;width:70%;height:38px;transform:translateX(-50%);
  background:linear-gradient(to top right,transparent 49%,rgba(232,200,136,.7) 50%,transparent 52%) left/50% 100% no-repeat,linear-gradient(to top left,transparent 49%,rgba(232,200,136,.7) 50%,transparent 52%) right/50% 100% no-repeat}
.frame::after{content:'';position:absolute;top:-44px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF1B8,#B98B2E);box-shadow:0 2px 6px rgba(0,0,0,.5)}
@keyframes sway{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}
@keyframes swing{0%{transform:rotate(0)}25%{transform:rotate(-5deg)}55%{transform:rotate(4deg)}80%{transform:rotate(-2deg)}100%{transform:rotate(0)}}
.frame figcaption{margin-top:12px;font-family:var(--hand);font-size:22px;text-align:center;color:var(--gold)}

/* ---------- what's inside: tap the envelope ---------- */
.sec-inside{background:
  radial-gradient(1.5px 1.5px at 8% 24%,rgba(255,240,200,.6),transparent),radial-gradient(1px 1px at 33% 80%,rgba(255,240,200,.45),transparent),
  radial-gradient(1.5px 1.5px at 62% 16%,rgba(255,240,200,.55),transparent),radial-gradient(1px 1px at 90% 58%,rgba(255,240,200,.5),transparent),
  linear-gradient(180deg,#173022 0%,#122519 100%)}
.env{position:relative;max-width:980px;margin:30px auto 0}
.env-btn{display:block;margin:0 auto;width:min(380px,86%);padding:0;border:0;background:none;cursor:pointer;position:relative;z-index:2;-webkit-tap-highlight-color:transparent}
.env-btn:hover,.env-btn:focus-visible{transform:translateY(-3px)!important;box-shadow:none}
.env-btn:focus-visible{outline:2px dashed var(--gold);outline-offset:8px;border-radius:12px}
.env-svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 18px 24px rgba(0,0,0,.55))}
.env-svg .e-flap-open{opacity:0;transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.5);transition:opacity .35s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.env-svg .e-flap-shut{transition:opacity .25s .1s}
.env-svg .e-seal{transform-box:fill-box;transform-origin:50% 50%;transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .35s}
.env-svg .e-sheet{transition:transform .65s cubic-bezier(.34,1.3,.64,1) .1s}
.env.open .e-flap-shut{opacity:0}
.env.open .e-flap-open{opacity:1;transform:scaleY(1)}
.env.open .e-seal{transform:translateY(-22px) scale(.4);opacity:0}
.env.open .e-sheet{transform:translateY(-58px)}
.env-hint{text-align:center;margin:20px 0 0;font-family:var(--hand);font-size:24px;color:var(--gold)}
.env-items{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;position:relative;z-index:1}
.env-item-wrap{display:flex}
.env-item{display:flex;gap:16px;align-items:flex-start;width:100%;padding:24px 22px;border-radius:16px;background:linear-gradient(165deg,rgba(31,64,51,.85),rgba(20,41,31,.9));border:1px solid rgba(232,200,136,.3);box-shadow:0 12px 28px rgba(0,0,0,.35)}
.env-item:hover{border-color:rgba(232,200,136,.7);box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 26px rgba(232,200,136,.14)}
.env-mark{font-family:var(--display);font-size:24px;line-height:1.1;color:var(--honey);text-shadow:0 0 14px rgba(242,196,90,.6);flex:none}
.env-title{font-family:var(--sans);font-weight:500;font-size:16px;color:#FFF6DC;margin-bottom:4px}
.env-sub{font-family:var(--sans);font-size:13.5px;line-height:1.55;color:var(--mist)}
/* closed state only exists once the script has taken charge, so the list is always visible if it fails */
.env[data-ready]:not(.open) .env-items{visibility:hidden;transition:visibility 0s .5s}
.env[data-ready]:not(.open) .env-item-wrap{opacity:0;transform:translateY(-150px) scale(.85)}
.env-item-wrap{transition:opacity .5s ease,transform .7s cubic-bezier(.34,1.4,.64,1)}
.env.open .env-item-wrap:nth-child(1){transition-delay:.15s}.env.open .env-item-wrap:nth-child(2){transition-delay:.25s}.env.open .env-item-wrap:nth-child(3){transition-delay:.35s}
.env.open .env-item-wrap:nth-child(4){transition-delay:.45s}.env.open .env-item-wrap:nth-child(5){transition-delay:.55s}.env.open .env-item-wrap:nth-child(6){transition-delay:.65s}

/* ---------- prints: a gallery wall of hanging frames ---------- */
.sec-prints{background:
  repeating-linear-gradient(90deg,rgba(0,0,0,.09) 0 2px,transparent 2px 104px),
  radial-gradient(ellipse 60% 45% at 50% 0%,rgba(255,190,100,.12),transparent 70%),
  linear-gradient(180deg,#122519 0%,#183425 100%)}
.wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:84px 56px;max-width:900px;margin:84px auto 0;text-align:left}
.pframe{position:relative;margin:0;padding:14px;border-radius:6px;background:linear-gradient(160deg,#5A3A22,#3A2414 60%,#2B1A0E);
  box-shadow:0 22px 46px rgba(0,0,0,.55),inset 0 0 0 1px rgba(232,200,136,.28);transform-origin:50% -36px;animation:sway 8s ease-in-out infinite}
.pframe:nth-child(2){animation-delay:-2s}.pframe:nth-child(3){animation-delay:-4s}.pframe:nth-child(4){animation-delay:-6s}
.pframe:hover{animation:swing 1.3s ease-in-out}
.pframe::before{content:'';position:absolute;top:-40px;left:50%;width:70%;height:40px;transform:translateX(-50%);
  background:linear-gradient(to top right,transparent 49%,rgba(232,200,136,.7) 50%,transparent 52%) left/50% 100% no-repeat,linear-gradient(to top left,transparent 49%,rgba(232,200,136,.7) 50%,transparent 52%) right/50% 100% no-repeat}
.pframe::after{content:'';position:absolute;top:-46px;left:50%;width:11px;height:11px;margin-left:-5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF1B8,#B98B2E);box-shadow:0 2px 6px rgba(0,0,0,.5)}
.pframe img{display:block;width:100%;border-radius:2px;box-shadow:inset 0 0 0 7px #10241A}
.pplaque{margin:16px 6px 4px;padding:18px 18px 16px;border-radius:10px;background:linear-gradient(165deg,#2A2418,#1A1710);border:1px solid rgba(232,200,136,.4);box-shadow:inset 0 1px 0 rgba(255,236,170,.12)}
.ptitle{font-family:var(--display);font-style:italic;font-size:22px;color:var(--honey);margin:0 0 6px}
.pdesc{font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--mist);margin:0 0 12px}
.pprice{font-family:var(--hand);font-size:23px;color:#FFF6DC;margin:0 0 12px}
.pbtn{display:inline-block;padding:11px 22px;border-radius:999px;background:linear-gradient(160deg,#F7DE6B,#EFC53C);color:#3F3208;font-family:var(--sans);font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;text-decoration:none;box-shadow:0 6px 20px rgba(240,200,60,.22);transition:transform .2s,box-shadow .2s}
.pbtn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(240,200,60,.45)}

/* ---------- reviews: a pinboard of letters ---------- */
.sec-loved{background:
  radial-gradient(circle at 1px 1px,rgba(232,200,136,.10) 1px,transparent 1.5px) 0 0/26px 26px,
  linear-gradient(180deg,#183425 0%,#1B2E22 100%)}
.rwall{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:44px 28px;max-width:1120px;margin:56px auto 0;text-align:left}
.rcard-wrap{display:flex}
.rcard{position:relative;display:flex;flex-direction:column;width:100%;padding:44px 28px 26px;border-radius:6px;background:linear-gradient(170deg,#1F4033,#163024);border:1px solid rgba(232,200,136,.32);box-shadow:0 16px 36px rgba(0,0,0,.5)}
.rcard:hover{--rot:0deg!important;border-color:rgba(232,200,136,.7);box-shadow:0 24px 50px rgba(0,0,0,.55),0 0 30px rgba(232,200,136,.14)}
.rpin{position:absolute;top:-14px;left:50%;width:34px;height:34px;margin-left:-17px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F7DE6B,#C9963C);border:2px solid #163024;box-shadow:0 5px 12px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;color:#3F3208;font-size:15px}
.rquote{font-family:var(--hand);font-size:23px;line-height:1.45;color:#FFF6DC;margin:0 0 18px}
.rquote em{color:var(--honey)}
.rby{margin-top:auto;font-family:var(--sans);font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold);font-weight:600}
.rcta{justify-content:center;align-items:center;text-align:center;gap:12px;text-decoration:none;background:linear-gradient(165deg,rgba(92,49,45,.7),rgba(24,52,37,.85));border-style:dashed}
.rcta .rtitle{font-family:var(--display);font-style:italic;font-size:24px;color:#FFF6DC}
.rcta .rsub{font-family:var(--sans);font-size:14px;color:var(--mist)}
.rcta .rgo{font-family:var(--sans);font-size:12px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;color:var(--honey)}

/* ---------- the true story, read by the fire ---------- */
.sec-proof{background:
  radial-gradient(ellipse 60% 60% at 85% 105%,rgba(255,140,50,.22),transparent 70%),
  linear-gradient(180deg,#1B2E22 0%,#2B1D1A 100%)}
.proof-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:52px;align-items:center;max-width:1040px;margin:0 auto}
.proof-art{position:relative;max-width:340px;margin:0 auto}
.proof-art img{display:block;width:100%;border-radius:18px;border:1px solid rgba(232,200,136,.4);box-shadow:0 24px 54px rgba(0,0,0,.55),0 0 50px rgba(255,170,70,.14)}
.proof-copy p{font-family:var(--sans);font-size:17px;line-height:1.8;color:var(--text);margin:0 0 18px}
.proof-copy strong{color:var(--honey)}
.proof-copy .proof-end{font-family:var(--display);font-style:italic;font-size:clamp(22px,2.6vw,30px);line-height:1.3;color:var(--honey);margin-top:26px;text-shadow:0 0 24px rgba(242,196,90,.35)}

/* ---------- small screens ---------- */
@media(max-width:900px){
  .d-sec{padding:70px 20px}
  .about-grid,.proof-grid{grid-template-columns:1fr;gap:44px}
  .tickets{grid-template-columns:1fr;max-width:420px}
  .ticket-main{order:-1}
  .env-items{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wall{grid-template-columns:1fr;gap:78px;max-width:420px}
}
@media(max-width:560px){
  .env-items{grid-template-columns:1fr}
  .letter-card{padding:30px 22px 26px}
  .letter-quote{font-size:24px}
}
@media(prefers-reduced-motion:reduce){
  .frame,.pframe,.ticket-main{animation:none!important}
  .snow{display:none}
  .env[data-ready]:not(.open) .env-item-wrap{opacity:1;transform:none}
  .env[data-ready]:not(.open) .env-items{visibility:visible}
}

/* Prickly's teapot on the mantel: find it by clicking */
.hx-teapot-in{transform-box:fill-box;transform-origin:50% 100%;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.hx-teapot-in.hover{transform:translateY(-4px) rotate(-4deg)}
.hx-teapot-in.hint{animation:hxTeaHint .9s ease-in-out 2}
.hx-teapot-in.found{animation:hxTeaFound .8s ease}
@keyframes hxTeaHint{0%,100%{transform:none}30%{transform:translateY(-9px) rotate(-6deg)}60%{transform:translateY(-3px) rotate(5deg)}}
@keyframes hxTeaFound{0%{transform:none}25%{transform:translateY(-14px) rotate(-10deg) scale(1.12)}55%{transform:translateY(-4px) rotate(8deg) scale(1.08)}100%{transform:none}}
.hx-tp-steam path{transform-box:fill-box}
.hx-tp-s1{animation:hxSteam 3.2s ease-in-out -.8s infinite}
.hx-tp-s2{animation:hxSteam 3.2s ease-in-out -2.2s infinite}
.hx-teapot-btn{position:absolute;z-index:3;left:58%;top:19.5%;width:16%;min-width:46px;height:11.5%;min-height:40px;padding:0;margin:0;border:0;background:none;cursor:pointer;
  transform:translate(calc(var(--px)*-6px),calc(var(--py)*-4px));transition:transform .25s ease-out;-webkit-tap-highlight-color:transparent}
.hx-teapot-btn:hover{box-shadow:none;transform:translate(calc(var(--px)*-6px),calc(var(--py)*-4px))}
.hx-teapot-btn:focus-visible{outline:2px dashed #E8C888;outline-offset:4px;border-radius:12px}