/* Sticker book (/stickers/): a student collection in the house look. Navy outlines, offset brand shadows,
   filled panels and die-cut stickers. Locked stickers are soft silhouettes; collected ones are in full color. */

#main .sk-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--r-s6,32px);align-items:center}
#main .sk-intro h1{margin:0;font-size:clamp(2.4rem,5vw,4rem);line-height:1.02}
#main .sk-lead{margin:var(--r-s4,16px) 0 0!important;font-size:clamp(1.08rem,1.5vw,1.25rem);max-width:46ch}
#main .sk-cutout{width:clamp(120px,15vw,190px);height:auto;transform:rotate(4deg)}
#main#main > .sk-intro.wrap{margin-bottom:clamp(40px,5vw,64px)!important}

/* progress on the yellow band */
#main .sk-progress{display:grid!important;grid-template-columns:minmax(0,1fr);align-items:center}
#main .sk-meter h2{margin:0!important;font-size:clamp(1.7rem,3vw,2.4rem)!important}
#main .sk-count{margin:var(--r-s3,12px) 0 0!important;font-weight:700;font-size:1.15rem}
#main .sk-count b{font:700 clamp(2.4rem,4.4vw,3.4rem)/1 var(--r-display);color:var(--hm-blue,#124dec);margin-right:4px}
#main .sk-bar{height:20px;margin-top:var(--r-s3,12px);border-radius:99px;background:#fff;border:2.5px solid var(--hm-ink,#142b46);overflow:hidden;box-shadow:4px 4px 0 var(--hm-ink,#142b46)}
#main .sk-bar b{display:block;height:100%;width:0;background:var(--hm-blue,#124dec);border-right:2.5px solid var(--hm-ink,#142b46);box-sizing:border-box;transition:width .4s ease}
#main .sk-next-sticker{margin:var(--r-s4,16px) 0 0!important;font-weight:600;max-width:52ch}

/* the album */
#main .sk-album h2{margin:0!important;font-size:clamp(1.7rem,3vw,2.4rem)!important}
#main .sk-album h2:not(:first-child){margin-top:clamp(40px,5vw,64px)!important}
#main .sk-sub{margin:var(--r-s2,8px) 0 0!important;max-width:60ch}
#main .sk-grid{list-style:none;margin:var(--r-s5,24px) 0 0!important;padding:0!important;display:grid;gap:clamp(16px,2.2vw,28px)}
#main .sk-grid--companions{grid-template-columns:repeat(3,minmax(0,1fr))}
#main .sk-grid--neighbors{grid-template-columns:repeat(2,minmax(0,1fr))}
#main .sb-slot{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:0;max-width:none;padding:18px 20px 20px;background:#fff;border:2.5px solid var(--hm-ink,#142b46);border-radius:24px;box-shadow:6px 6px 0 var(--sb-shadow,var(--hm-blue,#124dec))}
#main .sb-slot:nth-child(3n+2){--sb-shadow:var(--hm-gold,#ffdc52)}
#main .sb-slot:nth-child(3n){--sb-shadow:var(--hm-pink,#c2185b)}
#main .sb-slot .sb-art{display:grid;place-items:center;width:112px;height:112px;margin-bottom:4px;border-radius:50%;background:var(--hm-sky,#eaf1ff)}
#main .sb-slot .sb-art img{width:96px;height:96px;object-fit:contain}
#main .sb-name{margin:0!important;font-size:1.35rem!important;line-height:1.1}
#main .sb-tag{margin:0!important;display:inline-block;padding:3px 10px;border-radius:99px;background:var(--hm-gold,#ffdc52);border:2px solid var(--hm-ink,#142b46);font-weight:750;font-size:.88rem}
#main .sb-what{margin:4px 0 0!important;font-weight:600;font-size:1.02rem}
#main .sb-how{margin:4px 0 0!important;font-size:.98rem}
#main .sb-how b{font-weight:800}
#main .sb-go{margin-top:auto!important;padding-top:6px}
/* state pill in the corner */
#main .sb-state{position:absolute;top:14px;right:14px;padding:4px 10px;border-radius:99px;border:2px dashed var(--hm-ink,#142b46);background:#fff;font:750 .82rem/1 var(--r-body);color:var(--hm-ink,#142b46)}
#main .is-got > .sb-state,#main .is-got .sb-state{border-style:solid;background:var(--hm-gold,#ffdc52)}
/* locked stickers are soft silhouettes, collected ones pop */
#main [data-sticker]:not(.is-got) .sb-art img{filter:grayscale(1) opacity(.35)}
#main [data-sticker].is-got .sb-art{background:var(--hm-sun,#fff4cf)}
#main [data-sticker].is-got .sb-art img{transform:rotate(-4deg);filter:drop-shadow(2px 3px 0 rgba(20,43,70,.35))}

/* crew fits: one card per friend, three small stickers each */
#main .sb-crew{list-style:none;margin:var(--r-s5,24px) 0 0!important;padding:0!important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,28px)}
#main .sb-friend{margin:0;max-width:none;padding:16px 18px 18px;background:#fff;border:2.5px solid var(--hm-ink,#142b46);border-radius:22px;box-shadow:5px 5px 0 var(--sb-shadow,var(--hm-blue,#124dec))}
#main .sb-friend:nth-child(3n+2){--sb-shadow:var(--hm-gold,#ffdc52)}
#main .sb-friend:nth-child(3n){--sb-shadow:var(--hm-pink,#c2185b)}
#main .sb-friend h3{display:flex;align-items:center;gap:10px;margin:0!important;font-size:1.25rem!important}
#main .sb-friend h3 img{width:36px;height:36px;border-radius:50%;border:2px solid var(--hm-ink,#142b46)}
#main .sb-fits{list-style:none;margin:12px 0 0!important;padding:0!important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#main .sb-fit{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;margin:0;max-width:none;padding:8px 4px 10px;border-radius:14px;background:var(--hm-sky,#eaf1ff)}
#main .sb-fit .sb-art{display:grid;place-items:center;width:100%;height:78px}
#main .sb-fit .sb-art img{max-width:78px;max-height:78px;width:auto;height:auto;object-fit:contain}
#main .sb-fit-name{font-weight:750;font-size:.86rem;line-height:1.2}
#main .sb-fit .sb-state{position:static;padding:2px 8px;font-size:.72rem;border-width:1.5px}
#main .sb-fit-how{font-size:.78rem;line-height:1.3}
#main .sb-fit.is-got{background:var(--hm-sun,#fff4cf)}
#main .sb-friend-go{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0!important}
#main .sb-friend-go a{margin:0!important}

#main .sb-actions{margin:clamp(40px,5vw,56px) 0 0!important}
#main .sb-reset{min-height:44px!important;font-size:.95rem!important}

@media (max-width:1000px){
  #main .sk-grid--companions,#main .sb-crew{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  #main .sk-intro{grid-template-columns:1fr}
  #main .sk-cutout{display:none}
  #main .sk-grid--companions,#main .sk-grid--neighbors,#main .sb-crew{grid-template-columns:1fr}
  #main .sb-slot .sb-art{width:92px;height:92px}
  #main .sb-slot .sb-art img{width:78px;height:78px}
}
#main .sb-go,#main .sb-friend-go a{color:var(--hm-blue,#124dec)!important;text-decoration:underline!important;text-decoration-thickness:1.5px!important;text-underline-offset:3px!important;font-weight:700}
#main .sb-go:hover,#main .sb-friend-go a:hover{text-decoration-thickness:2.5px!important}