/* ===== the brands page: the story layout (story.css / story.js) plus what is only this page's. ===== */
#p-brands{--hl:7.2}   /* "on a backdrop." is the headline's longest line, 7.2 em in Permanent Marker */

/* the creature's props: paper-filled signs hide what is behind them; the words on them */
#p-brands .ch .fill.paper{color:var(--paper)}
#p-brands .ch .br-sign{font-size:24px}
#p-brands .ch .br-sign.big{font-size:27px}
#p-brands .ch .br-30{font-size:20px}
#p-brands .ch .br-cash{font:400 30px 'Luckiest Guy',var(--hand)}
#p-brands .ch .br-orb{font:400 18px 'Luckiest Guy',var(--hand)}
#p-brands .ch .ch-say.disp{font-size:28px}
#p-brands .ch .ch-say.mono{font-size:20px}
#p-brands .ch .br-flap,#p-brands .ch .br-tick{transform-box:fill-box}
#p-brands .ch .is-on .br-flap{transform-origin:0% 50%;animation:br-flap 1.4s ease-in-out .8s infinite alternate}   /* the flag in the wind */
#p-brands .ch .br-tick{transform-box:view-box;transform-origin:214px 60px}
#p-brands .ch .is-on .br-tick{animation:br-tick 6s steps(12) .8s infinite}   /* the clock's minute hand */
@keyframes br-flap{to{transform:skewY(-5deg) scaleX(.95)}}
@keyframes br-tick{to{transform:rotate(360deg)}}

/* four numbers on this board: the fourth, #2 on Google Play, sits top left in STAN purple */
#p-brands .st-notes .note:nth-child(4){--r:-7deg;background:var(--stan);color:#fff;left:-14%;top:2%}
#p-brands .st-notes .note:nth-child(4) span{color:rgba(255,255,255,.88)}

/* the sections' own content, in the narrower column beside the creature */
#p-brands .st-sec .muted{line-height:34px}
#p-brands .br-pk table.pk{min-width:0;font-size:13.5px;line-height:1.3;table-layout:fixed}   /* all five tiers fit the column beside the creature: no sideways scroll */
#p-brands .br-pk table.pk th,#p-brands .br-pk table.pk td{padding:7px 6px}
#p-brands .br-pk table.pk thead th{font-size:19px;line-height:1.1;vertical-align:bottom}
#p-brands .br-pk table.pk tbody th{white-space:normal;width:15%}
#p-brands .br-built .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
#p-brands .br-built .notes.tight{margin-top:6px}
#p-brands .st-sec .grid.g3{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
#p-brands .br-wall .wall{max-width:none;margin:0 0 34px;font-size:24px;line-height:34px;gap:0 20px;color:var(--ink)}
#p-brands .br-wall .wall.backers{font-size:28px}
#p-brands .br-wall h3{margin:0;line-height:34px}
@media (max-width:1023px){
  #p-brands .st-notes .note:nth-child(4){--r:2deg;left:auto;top:auto}
}
@media (max-width:760px){
  #p-brands .br-pk .tablewrap{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
  #p-brands .br-pk table.pk{min-width:720px;font-size:14px;line-height:1.5}
  #p-brands .br-pk table.pk th,#p-brands .br-pk table.pk td{padding:10px 8px}
  #p-brands .br-pk table.pk thead th{font-size:18px}
  #p-brands .br-built .grid.g4,#p-brands .st-sec .grid.g3{grid-template-columns:1fr}
  #p-brands .st-notes{flex-wrap:wrap}
  #p-brands .st-notes .note{flex:1 1 40%}
}
@media (prefers-reduced-motion:reduce){#p-brands .ch .is-on .br-flap,#p-brands .ch .is-on .br-tick{animation:none}}
/* the sign and the megaphone only shake when asked (the reveal's stamps, a hover on the button), not all the time */
#p-brands .ch .is-on .ch-mash{animation:none}

/* the 2024 numbers: on desktop they leave the text for the board, round the creature, while that section is on screen (story.js) */
@media (min-width:1024px){
  #p-brands .br-media{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* still read out; the board shows them */
}
#p-brands .st-notes-sec .note{width:34%;padding:clamp(10px,1.1vw,15px) clamp(10px,1.1vw,15px) clamp(8px,.9vw,12px);left:auto;right:auto;top:auto;bottom:auto}
#p-brands .st-notes-sec .note b{font-size:clamp(20px,6.2cqw,36px)}
#p-brands .st-notes-sec .note span{font-size:clamp(11px,2.4cqw,14px)}
#p-brands .st-notes-sec .note:nth-of-type(1){--r:-6deg;background:var(--sun);left:-16%;top:-5%}
#p-brands .st-notes-sec .note:nth-of-type(2){--r:7deg;background:var(--lime);right:-12%;top:-1%}
#p-brands .st-notes-sec .note:nth-of-type(3){--r:5deg;background:var(--pink);left:-20%;top:38%}
#p-brands .st-notes-sec .note:nth-of-type(4){--r:-6deg;background:var(--lime);right:-17%;top:40%}
#p-brands .st-notes-sec .note:nth-of-type(5){--r:-8deg;background:var(--sun);left:-11%;bottom:-5%}
#p-brands .st-notes-sec .note:nth-of-type(6){--r:9deg;background:var(--pink);right:-12%;bottom:-2%}
#p-brands .st-notes-sec .st-anno{top:-13%;left:16%}