@font-face{font-family:BearTitle;src:url('assets/fonts/bear-title.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:BearBody;src:url('assets/fonts/bear-body-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:BearBody;src:url('assets/fonts/bear-body-medium.woff2') format('woff2');font-weight:500 600;font-display:swap}
@font-face{font-family:BearBody;src:url('assets/fonts/bear-body-bold.woff2') format('woff2');font-weight:700 900;font-display:swap}
:root{font-family:BearBody,'Microsoft YaHei','PingFang SC',sans-serif}
.hero h1{font-family:BearTitle,BearBody,sans-serif;font-weight:700;letter-spacing:0;line-height:1.12;font-size:clamp(60px,15vw,230px)}
@media(max-width:600px){.hero h1{font-size:15vw}}
/* Die-cut title sticker: warm paper edge, blue-grey thickness and lifted shadow. */
.hero h1{
  --sticker-edge:clamp(5px,.72vw,11px);
  --sticker-step:clamp(1px,.14vw,2px);
  color:#acd8e8;
  -webkit-text-stroke:clamp(2px,.3vw,4px) #202522;
  paint-order:stroke fill;
  --sticker-rim:clamp(3px,.38vw,6px);
  text-shadow:calc(var(--sticker-rim) * 1.0000) calc(var(--sticker-rim) * 0.0000) 0 #fffdf7,
    calc(var(--sticker-rim) * 0.9239) calc(var(--sticker-rim) * 0.3827) 0 #fffdf7,
    calc(var(--sticker-rim) * 0.7071) calc(var(--sticker-rim) * 0.7071) 0 #fffdf7,
    calc(var(--sticker-rim) * 0.3827) calc(var(--sticker-rim) * 0.9239) 0 #fffdf7,
    calc(var(--sticker-rim) * 0.0000) calc(var(--sticker-rim) * 1.0000) 0 #fffdf7,
    calc(var(--sticker-rim) * -0.3827) calc(var(--sticker-rim) * 0.9239) 0 #fffdf7,
    calc(var(--sticker-rim) * -0.7071) calc(var(--sticker-rim) * 0.7071) 0 #fffdf7,
    calc(var(--sticker-rim) * -0.9239) calc(var(--sticker-rim) * 0.3827) 0 #fffdf7,
    calc(var(--sticker-rim) * -1.0000) calc(var(--sticker-rim) * 0.0000) 0 #fffdf7,
    calc(var(--sticker-rim) * -0.9239) calc(var(--sticker-rim) * -0.3827) 0 #fffdf7,
    calc(var(--sticker-rim) * -0.7071) calc(var(--sticker-rim) * -0.7071) 0 #fffdf7,
    calc(var(--sticker-rim) * -0.3827) calc(var(--sticker-rim) * -0.9239) 0 #fffdf7,
    calc(var(--sticker-rim) * -0.0000) calc(var(--sticker-rim) * -1.0000) 0 #fffdf7,
    calc(var(--sticker-rim) * 0.3827) calc(var(--sticker-rim) * -0.9239) 0 #fffdf7,
    calc(var(--sticker-rim) * 0.7071) calc(var(--sticker-rim) * -0.7071) 0 #fffdf7,
    calc(var(--sticker-rim) * 0.9239) calc(var(--sticker-rim) * -0.3827) 0 #fffdf7;
  filter:drop-shadow(0 var(--sticker-step) 0 #bfd4d9)
         drop-shadow(var(--sticker-step) var(--sticker-step) 0 #9bb8bf)
         drop-shadow(0 var(--sticker-step) 0 #7f9ba3)
         drop-shadow(2px 6px 3px #344b4e24)
         drop-shadow(0 12px 10px #344b4e12);
}
@media(max-width:600px){.hero h1{filter:drop-shadow(0 1px 0 #bfd4d9) drop-shadow(1px 2px 0 #8eabb3) drop-shadow(1px 5px 3px #344b4e25)}}




/* Each glyph is one composited sticker, including both outlines and shadow. */
.hero h1.sticker-title,.sticker-title{filter:none;text-shadow:none;-webkit-text-stroke:clamp(2px,.3vw,4px) #202522;paint-order:stroke fill}
.sticker-letter{display:inline-block;position:relative;isolation:isolate;transform-origin:50% 0%;backface-visibility:hidden;filter:drop-shadow(1px 2px 0 #9bb8bf) drop-shadow(1px 3px 0 #7f9ba3) drop-shadow(1px 6px 4px #344b4e25)}
.sticker-letter::before{content:attr(data-letter);position:absolute;inset:0;z-index:-1;color:#fffdf7;-webkit-text-stroke:clamp(8px,1vw,16px) #fffdf7;paint-order:stroke fill;pointer-events:none}
@media(max-width:600px){.sticker-letter{filter:drop-shadow(1px 2px 0 #8eabb3) drop-shadow(1px 4px 3px #344b4e25)}}
/* Title above the mascot; the bear sits immediately above the navigation. */
.hero .hero-stage{height:auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:28px;padding-top:clamp(24px,7svh,72px)}
.hero h1{position:relative;left:auto;top:auto;transform:none;order:1;margin:0}
.hero .bear-window{position:relative;left:auto;top:auto;bottom:auto;transform:none;order:2;flex:none}
.hero .pill-nav{margin-top:0}
@media(max-width:600px){.hero .hero-stage{gap:28px;padding-top:48px}.hero .pill-nav{margin-top:0}}