/* FREE ENTRY is positioned in the hero composition independently of bear size and offsets. */
/* The stacked original wordmark and edition form one lockup at every width. */
.hero{--hero-viewport:100vh;--hero-header-space:calc(var(--header) + env(safe-area-inset-top,0px));position:relative;display:flex;flex-direction:column;height:calc(var(--hero-viewport) - var(--hero-header-space));min-height:min(570px,calc(var(--hero-viewport) - var(--hero-header-space)));padding:18px var(--pad) max(25px,env(safe-area-inset-bottom));overflow:clip;isolation:isolate}
@supports(height:100svh){.hero{--hero-viewport:100svh}}@supports(height:100dvh){.hero{--hero-viewport:100dvh}}
.hero-scene{position:relative;flex:1;min-height:0;container-type:size}
.hero-wordmark{display:grid;grid-template-columns:1fr;gap:10px;align-items:start;line-height:0;position:relative;z-index:1;width:min(62cqw,112cqh)}
.hero-wordmark>img{width:100%;height:auto}.hero-club-line{display:grid;grid-template-columns:minmax(0,1fr) 4.42528%;gap:3%;align-items:stretch;container-type:inline-size}.hero-club-line>img{width:100%;height:auto}.hero-edition{position:relative;align-self:stretch;min-width:0}.hero-edition img{position:absolute;inset:0;width:100%;height:100%}

.hero-art{--bear-size:min(70cqh,38cqw,620px);--bear-top:22%;--bear-right:calc(-1 * var(--pad) - 3cqw);position:absolute;inset:0;container-type:size}
.hero-character{position:absolute;z-index:2;right:var(--bear-right);top:var(--bear-top);height:var(--bear-size);aspect-ratio:426/386;display:flex;align-items:center}
.hero-bear{width:100%;height:auto}
.hero-claim{position:absolute;left:3%;bottom:5%;font-size:clamp(30px,3.5vw,54px);font-weight:650;letter-spacing:-.06em;line-height:.97;z-index:3}
.hero-entry{position:absolute;z-index:3;left:45%;right:auto;top:auto;bottom:8%;padding:8px 11px 7px;background:var(--pink);color:var(--rose);border:0;transform:rotate(-5deg);transition:transform .25s}
.hero-entry strong{display:block;font-size:clamp(24px,3.2cqw,40px);font-variation-settings:'wdth' 68,'wght' 900;letter-spacing:-.025em;line-height:.95;white-space:nowrap}
.hero-entry:hover{transform:rotate(-3deg) translateY(-3px)}.hero-entry:focus-visible{outline:2px solid var(--pink);outline-offset:5px}
.hero-footer{display:flex;gap:28px;align-items:center;flex:none;position:relative;z-index:3;padding-top:16px}
.hero-date{flex:1;min-width:0;container-type:inline-size}.hero-date p{display:flex;justify-content:space-between;gap:.1em;align-items:baseline;font-size:min(9.2cqw,112px,10.5vh);font-variation-settings:'wdth' 62,'wght' 900;letter-spacing:-.025em;line-height:1;white-space:nowrap}.hero-date-dot{font-size:.7em;align-self:center}
.hero-discover{width:48px;height:48px;display:grid;place-items:center;flex:none;border:1px solid var(--pink);border-radius:50%;transition:background .2s,color .2s}.hero-discover .icon{transform:rotate(90deg)}.hero-discover:hover{background:var(--pink);color:var(--rose)}
@media(max-aspect-ratio:1/1){
.hero-scene{display:grid;grid-template-rows:auto minmax(0,1fr);container-type:size}.hero-wordmark{width:min(100%,72cqh);max-width:650px;justify-self:start;gap:8px}.hero-art{--bear-size:min(calc(100cqh - 20px),72cqw,580px);--bear-top:max(8px,calc((100cqh - var(--bear-size)) / 2 - 24px));--bear-right:0px;position:relative;inset:auto}
.hero-claim{left:0;top:auto;bottom:8px;font-size:clamp(25px,4.5vw,40px)}
.hero-entry{left:0;right:auto;top:clamp(20px,7cqh,48px);bottom:auto}}
@media(max-width:599px){
.hero{padding-top:8px;padding-bottom:max(22px,env(safe-area-inset-bottom))}.hero-wordmark{gap:7px}.hero-art{--bear-size:min(calc(100cqh + 4px),72cqw)}
.hero-claim{font-size:clamp(24px,6.4vw,29px)}.hero-entry{padding:7px 10px 6px}.hero-entry strong{font-size:clamp(22px,6.8cqw,32px)}
.hero-footer{gap:0;padding-top:10px}.hero-date p{font-size:10cqw}.hero-discover{display:none}}
@media(max-width:599px) and (max-height:720px){.hero-art{--bear-size:min(calc(100cqh + 4px),72cqw)}.hero-claim{font-size:23px}.hero-entry{padding:6px 9px}.hero-footer{padding-top:12px}}
@media(orientation:landscape) and (max-height:500px){
.hero{padding-top:4px;padding-bottom:max(14px,env(safe-area-inset-bottom))}.hero-wordmark{width:min(50cqw,130cqh);gap:5px}.hero-art{--bear-size:min(calc(100cqh - 36px),36cqw);--bear-right:0px;--bear-top:2%}.hero-claim{left:46%;bottom:12%;font-size:22px}.hero-entry{left:auto;right:0;top:auto;bottom:3%;padding:6px 9px}.hero-entry strong{font-size:21px}.hero-footer{gap:20px;padding-top:6px}.hero-date p{font-size:min(7.5cqw,10vh)}.hero-discover{display:grid;width:32px;height:32px}}
@media (prefers-reduced-motion: no-preference) {
  .hero-wordmark > img { animation: hero-word-enter .85s cubic-bezier(.22,1,.36,1) both; }
  .hero-wordmark .word-club { animation-delay: .08s; }
  .hero-entry { animation: hero-stamp-enter .65s cubic-bezier(.22,1,.36,1) .5s both; }
  .hero-footer { animation: hero-detail-enter .8s ease .28s both; }
  @keyframes hero-word-enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  @keyframes hero-stamp-enter { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
  @keyframes hero-detail-enter { from { opacity: 0; } to { opacity: 1; } }
}
/* Only the eye moves; head, mouth, ears and original outline stay fixed. */
.hero-eye-open { transform-box: fill-box; transform-origin: center; }
.hero-eye-closed { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .is-winking .hero-eye-open { animation: eye-close .42s ease-in-out; }
  .is-winking .hero-eye-closed { animation: eye-smile .42s ease-in-out; }
  @keyframes eye-close {
    0%, 100% { transform: scaleY(1); opacity: 1; }
    28%, 65% { transform: scaleY(.04); opacity: 0; }
  }
  @keyframes eye-smile {
    0%, 100% { opacity: 0; }
    28%, 65% { opacity: 1; }
  }
}
@media(max-width:370px) and (max-height:720px){.hero-art{--bear-size:min(calc(100cqh + 4px),65cqw)}.hero-entry strong{font-size:21px}.hero-claim{font-size:22px}}

/* On tall phones the claim sits below the larger bear, keeping its outline clear. */
@media(max-aspect-ratio:13/25) and (min-height:740px){.hero-art{--bear-size:min(calc(100cqh - 110px),88cqw);--bear-top:max(12px,calc((100cqh - var(--bear-size) - 100px) / 2))}.hero-claim{top:auto;bottom:8px}}

/* Reserve the area behind floating mobile browser chrome for the rose canvas. */
@media(max-width:720px),(hover:none) and (max-width:1100px){
  .hero{margin-bottom:max(0px,calc(100lvh - var(--hero-viewport)))}
}
/* Use the lower portrait space for the signet, keeping a compact gap above the date. */
@media(max-width:599px) and (max-aspect-ratio:1/1){
  .hero-art{--bear-size:min(calc(100cqh - 44px),94cqw);--bear-right:-5cqw;--bear-top:max(12px,calc(100cqh - var(--bear-size) - 32px))}
  .hero-claim{top:auto;bottom:8px}
}
@media(max-width:370px) and (max-height:720px){.hero-art{--bear-size:min(calc(100cqh - 44px),78cqw);--bear-right:0px}}
@media(max-width:599px) and (max-aspect-ratio:13/25) and (min-height:740px){
  .hero-art{--bear-size:min(calc(100cqh - 110px),102cqw);--bear-right:-8cqw;--bear-top:max(12px,calc(100cqh - var(--bear-size) - 116px))}
  .hero-claim{top:auto;bottom:8px}
}