/* Creator brand kit page (src/brandkit.html). Sticker Glow, builds on creators.css (cl-*, ck-*). */
.bk .cl-cta .btn small,.ck-kit .btn small{font-size:.78em;opacity:.8;margin-left:4px}
.bk-hero__art{position:relative;min-height:clamp(380px,38vw,540px)}
.bk-hero__art img{position:absolute;height:auto!important;max-width:none;border:5px solid #111015;border-radius:22px;box-shadow:10px 12px 0 #111015;background:#111015}
.bk-h1{left:0;top:10%;width:34%;transform:rotate(-8deg)}
.bk-h2{left:30%;top:0;width:38%;z-index:2;transform:rotate(2deg)}
.bk-h3{right:0;top:4%;width:34%;transform:rotate(7deg)}
.bk-h4{left:4%;bottom:0;width:52%;z-index:3;transform:rotate(-3deg)}
.bk-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.bk-jump a{padding:8px 14px 7px;border-radius:999px;background:#fffdf6;border:3px solid #111015;box-shadow:3px 4px 0 #111015;font:900 12px/1 var(--sg-body);letter-spacing:.1em;text-transform:uppercase;color:#111015;text-decoration:none}
.bk-jump a:hover{background:#111015;color:var(--sg-y1)}
.bk-jump a:focus-visible,.bk-copy:focus-visible,.bk-switch input:focus-visible+span{outline:3px solid var(--sg-purple);outline-offset:2px}
.bk section[id]{scroll-margin-top:80px}

/* brief */
.bk-brief{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.bk-card{position:relative;padding:20px 20px 22px;border-radius:24px;background:#fffdf6;border:4px solid #111015;box-shadow:8px 10px 0 #111015;color:#111015}
.bk-card h3{margin:0 0 12px;font:400 clamp(22px,2vw,28px)/1 var(--sg-display);text-transform:uppercase;color:#111015}
.bk-card p,.bk-card li{font-size:15px;line-height:1.5;color:#2b2630!important}
.bk-card p{margin:0 0 12px}
.bk-about{grid-column:span 4;background:var(--sg-grad)}
.bk-about p{font-size:17px;font-weight:600;color:#111015!important}
.bk-msgs{grid-column:span 2}
.bk-do,.bk-dont{grid-column:span 3}
.bk-tags,.bk-handles{grid-column:span 3}
.bk-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:0 0 16px}
.bk-facts div{padding:10px 12px;border-radius:14px;background:#fffdf6;border:3px solid #111015;box-shadow:3px 4px 0 #111015}
.bk-facts dt{font:900 11px/1 var(--sg-body);letter-spacing:.14em;text-transform:uppercase;color:#7a3fd8}
.bk-facts dd{margin:5px 0 0;font:800 14px/1.3 var(--sg-body);color:#111015}
.bk-msgs ol{margin:0;padding:0;list-style:none;counter-reset:m;display:grid;gap:10px}
.bk-msgs li{counter-increment:m;display:grid;grid-template-columns:34px 1fr;column-gap:10px;align-items:start}
.bk-msgs li::before{content:counter(m);grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#111015;color:var(--sg-y1);font:400 20px/1 var(--sg-display);transform:rotate(-4deg)}
.bk-msgs li:nth-child(even)::before{background:var(--sg-purple);color:#fff}
.bk-msgs b{font:400 18px/1.1 var(--sg-display);text-transform:uppercase}
.bk-msgs span{font-size:14px;line-height:1.45;color:#3c3b45}
.bk-do ul,.bk-dont ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.bk-do li,.bk-dont li{position:relative;padding:8px 10px 8px 38px;border-radius:12px;background:#fff;border:2.5px solid #111015}
.bk-do li::before,.bk-dont li::before{position:absolute;left:8px;top:7px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:2.5px solid #111015;font:900 12px/1 var(--sg-body)}
.bk-do li::before{content:"✓";background:#9cf58a}
.bk-dont li::before{content:"✕";background:#ff9a9e}
.bk-do h3 span{color:#1f7a34}.bk-dont h3 span{color:#c0262d}
.bk-do{background:#eaffd9}.bk-dont{background:#ffe8e8}
.bk-taglist{display:flex;flex-wrap:wrap;gap:8px}
.bk-taglist span{padding:6px 12px 5px;border-radius:999px;background:#ece2ff;border:2.5px solid #111015;font:900 14px/1 var(--sg-body);color:#5a24b8}
.bk-note{margin-top:14px!important;font-size:14px!important}
.bk-handles ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.bk-handles li{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 8px 8px 12px;border-radius:14px;background:#fff;border:2.5px solid #111015}
.bk-handles li>span{font:900 11px/1 var(--sg-body);letter-spacing:.12em;text-transform:uppercase;color:#7a3fd8}
.bk-handles a{font-weight:800;color:#111015;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-copy{min-height:36px;padding:0 12px;border-radius:10px;background:#111015;color:var(--sg-y1);border:0;font:400 14px/1 var(--sg-display);text-transform:uppercase;cursor:pointer}
.bk-copy.is-done{background:#1f7a34;color:#fff}
.bk-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* tiles */
.bk-group{margin-top:clamp(28px,3.4vw,48px)}
.bk-group:first-of-type{margin-top:0}
.bk-group__h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:16px}
.bk-group__h h3{margin:0;font:400 clamp(24px,2.4vw,34px)/1 var(--sg-display);text-transform:uppercase;color:#fff;-webkit-text-stroke:4px #111015;paint-order:stroke fill;text-shadow:3px 4px 0 #111015}
.bk-group__h span{font:900 12px/1 var(--sg-body);letter-spacing:.12em;text-transform:uppercase;color:var(--sg-y1)}
.bk-grid{display:grid;gap:clamp(14px,1.6vw,22px);margin:0;padding:0;list-style:none}
.bk-grid--9x16{grid-template-columns:repeat(6,minmax(0,1fr))}
.bk-grid--stories{grid-template-columns:repeat(3,minmax(0,280px));justify-content:center}
.bk-grid--1x1{grid-template-columns:repeat(6,minmax(0,1fr))}
.bk-grid--4x5{grid-template-columns:repeat(3,minmax(0,300px))}
.bk-grid--16x9{grid-template-columns:repeat(3,minmax(0,1fr))}
.bk-grid--wide{grid-template-columns:1.6fr 1fr}
.bk-grid--logos{grid-template-columns:repeat(4,minmax(0,1fr))}
.bk-grid--vids{grid-template-columns:repeat(5,minmax(0,1fr))}
.bk-tile{display:flex;flex-direction:column;gap:10px;padding:10px 10px 12px;border-radius:20px;background:#fffdf6;border:4px solid #111015;box-shadow:6px 8px 0 #060509;color:#111015;min-width:0}
.bk-prev{position:relative;aspect-ratio:var(--ar,9/16);border-radius:12px;border:3px solid #111015;overflow:hidden;background:#111015}
.bk-prev img,.bk-prev video{display:block;width:100%;height:100%;object-fit:cover}
.bk-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.bk-meta b{font:400 17px/1.05 var(--sg-display);text-transform:uppercase}
.bk-meta small{font:800 12px/1.3 var(--sg-body);color:#5b6373}
.bk-dl{margin-top:auto;align-self:stretch;justify-content:center}
.bk-dl small{font-size:.8em;opacity:.75;margin-left:4px}
.bk-dls{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.bk-dls .bk-dl{flex:1 1 auto}
.bk-logo .bk-prev{aspect-ratio:16/10}
.bk-logo .bk-prev img{position:absolute;left:12%;top:12%;width:76%;height:76%;object-fit:contain}
.bk-prev--dark{background:radial-gradient(circle at 50% 40%,#3a2a5a,#16121f)}
.bk-prev--light{background:#fffdf6;background-image:radial-gradient(circle,rgba(17,16,21,.08) 1.4px,transparent 2px);background-size:12px 12px}
.bk-prev--check{background:repeating-conic-gradient(#e9e4f2 0 25%,#fff 0 50%) 0 0/20px 20px}
.bk-prev--check img{left:20%;top:6%;width:60%;height:88%}
.bk-vid .bk-prev{aspect-ratio:9/16}
.bk-vid--wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-rows:auto auto;align-content:center;align-items:center;column-gap:24px;row-gap:14px}
.bk-vid--wide .bk-prev{aspect-ratio:16/9;grid-row:span 2}
.bk-vid--wide .bk-dl{align-self:start;justify-self:start;margin-top:0;min-width:200px}
.bk-vid--wide .bk-meta{align-self:end}
.ck-sec--paper .sg-k{color:#7a3fd8!important}
.bk-handles ul{grid-template-columns:repeat(2,minmax(0,1fr))}
.bk-handles li{grid-template-columns:minmax(0,1fr) auto}
.bk-handles li>span{grid-column:1/-1}
.bk-switch{display:flex;align-items:center;gap:8px;font:800 13px/1 var(--sg-body);cursor:pointer;color:#111015}
.bk-switch input{position:absolute;opacity:0;width:1px;height:1px}
.bk-switch span::before{content:"";display:inline-block;vertical-align:middle;width:36px;height:20px;margin-right:8px;border-radius:999px;border:2.5px solid #111015;background:#e9e4f2 radial-gradient(circle at 8px 50%,#111015 5px,transparent 5.5px);transition:background .2s}
.bk-switch input:checked+span::before{background:#ff2850 radial-gradient(circle at 24px 50%,#fff 5px,transparent 5.5px)}
.ck-sec--paper .bk-tile{box-shadow:6px 8px 0 #111015}

@media(max-width:1200px){
  .bk-grid--9x16,.bk-grid--1x1{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bk-grid--vids{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1000px){
  .bk-brief{grid-template-columns:1fr 1fr}
  .bk-about,.bk-msgs,.bk-do,.bk-dont,.bk-tags,.bk-handles{grid-column:span 2}
  .bk-grid--logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bk-grid--16x9{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bk-grid--wide{grid-template-columns:1fr}
  .bk-hero__art{max-width:560px;width:100%;margin:0 auto}
}
@media(max-width:640px){
  .bk-grid--9x16,.bk-grid--1x1,.bk-grid--vids,.bk-grid--4x5,.bk-grid--stories{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bk-grid--16x9{grid-template-columns:1fr}
  .bk-vid--wide{display:flex}
  .bk-handles li{grid-template-columns:1fr auto}
  .bk-handles li>span{grid-column:1/-1}
  .bk-tile{padding:8px 8px 10px;border-width:3px;border-radius:16px;box-shadow:4px 5px 0 #060509}
  .bk-meta b{font-size:15px}
  .bk-dl{font-size:13px!important;padding-left:8px!important;padding-right:8px!important}
  .bk-dl small{display:none}
  .bk-hero__art{min-height:330px;margin-top:8px}
  .bk-hero__art img{border-width:4px;border-radius:14px;box-shadow:6px 8px 0 #111015}
  .bk-handles ul{grid-template-columns:1fr}
}