:root{
  /* Influencer Advisory light palette, the one every asset uses (rule 76). */
  --bg:#f2f2f2;
  --surface:#ffffff;
  --ink:#111111;
  --body-c:#3d4249;
  --head:#0a0a0a;
  --mut:#6a7078;        /* muted, on a WHITE card */
  --mut-paper:#585e67;  /* muted, on the raw #f2f2f2 paper, where #6a7078 measured
                           4.46:1 and missed the 4.5:1 contrast floor */
  --accent:#153a80;
  --accent-hi:#2f5fd0;
  --hairline:rgba(10,10,10,.14);
  --tint:rgba(21,58,128,.05);
  --well:#f4f4f2;
  --display:'Source Serif 4',Georgia,serif;
  --sans:'Source Sans 3',Arial,sans-serif;
  --mono:'Source Code Pro','Courier New',monospace;
  --wrap:1580px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--body-c);
  font:400 19px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hi);text-decoration:underline}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 34px}
img{max-width:100%}

/* ---------- masthead ---------- */
.top{border-bottom:1px solid var(--hairline);background:var(--surface)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:22px;padding-top:15px;padding-bottom:15px;flex-wrap:wrap}
.site{font:600 21px/1 var(--display);letter-spacing:-.01em;color:var(--head)}
.site a{color:var(--head)}
.site a:hover{color:var(--accent);text-decoration:none}
.topnav{display:flex;gap:26px;font:600 16px/1 var(--mono);letter-spacing:.09em;
  text-transform:uppercase}
.topnav a{color:var(--mut-paper)}
.topnav a.here{color:var(--accent);border-bottom:2px solid var(--accent);padding-bottom:5px}

/* ---------- hero, deliberately short so brands are on screen fast ---------- */
header.hero{padding:32px 0 22px}
h1{font:500 clamp(30px,3.2vw,43px)/1.12 var(--display);color:var(--head);
  margin:0 0 12px;letter-spacing:-.02em;max-width:34ch}
.stand{font-size:20px;line-height:1.5;max-width:88ch;margin:0 0 22px;
  color:var(--body-c)}
.stand em{font-family:var(--display);font-style:italic;color:var(--head)}
.proof{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--hairline)}
.pf{padding:14px 26px 12px;flex:1 1 150px;min-width:150px;position:relative}
.pf+.pf{border-left:1px solid var(--hairline)}
.pf::before{content:"";position:absolute;top:-1px;left:0;width:38px;height:2px;
  background:var(--accent)}
.pf b{display:block;font:500 31px/1 var(--display);color:var(--head);
  letter-spacing:-.02em;margin-bottom:6px}
.pf span{font:600 15px/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--mut-paper);display:block}
.fresh{margin:9px 0 0;font:600 15px/1.4 var(--sans);letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut-paper)}
.fresh b{color:var(--accent);font-weight:700}
/* The scope line sits under the count on purpose. A reader who takes the big
   number and leaves has taken a YouTube number without being told so. */
.scope{max-width:62ch;margin:14px 0 0;font:400 16px/1.55 var(--sans);
  color:var(--mut-paper)}
.scope b{color:var(--paper);font-weight:700}

/* ---------- controls ---------- */
.bar{position:sticky;top:0;z-index:40;background:rgba(242,242,242,.96);
  backdrop-filter:blur(10px);border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);padding:13px 0}
.bar .wrap{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.seg{display:flex;border:1px solid var(--accent);border-radius:6px;overflow:hidden;
  flex:none}
.seg button{font:700 16px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  padding:12px 16px;border:0;background:var(--surface);color:var(--accent);
  cursor:pointer;white-space:nowrap}
.seg button+button{border-left:1px solid var(--accent)}
.seg button.on{background:var(--accent);color:#fff}
.find{flex:0 1 300px;min-width:170px}
.find input{width:100%;font:400 18px/1.2 var(--sans);color:var(--ink);
  padding:12px 14px;border:1px solid var(--hairline);border-radius:6px;
  background:var(--surface);outline:none}
.find input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(21,58,128,.12)}
.find input::placeholder{color:var(--mut)}
/* A dropdown with no prefix reads as a statement rather than a control, so the label
   lives inside the same bordered box and the two stay one object. */
.pick{display:flex;align-items:center;background:var(--surface);
  border:1px solid var(--hairline);border-radius:6px;padding-left:13px;flex:0 1 auto}
.pick:focus-within{border-color:var(--accent)}
.pick label{font:700 15px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;
  color:var(--mut);white-space:nowrap}
.pick select{font:600 16px/1.2 var(--sans);letter-spacing:.04em;color:var(--ink);
  background:transparent;border:0;padding:12px 11px 12px 8px;outline:none;
  cursor:pointer;max-width:210px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:600 16px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--body-c);background:var(--surface);border:1px solid var(--hairline);
  border-radius:6px;padding:12px 14px;cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
/* The non-drinks control is a TOGGLE while the five beside it are one-at-a-time. A
   dashed edge and a leading sign say which is which before either is clicked. */
.chip.toggle{border-style:dashed;color:var(--mut-paper)}
.chip.toggle::before{content:"+ "}
.chip.toggle.on{background:var(--surface);border-style:solid;border-color:var(--accent);
  color:var(--accent)}
.chip.toggle.on::before{content:"\2212 "}
.count{font:600 16px/1 var(--sans);letter-spacing:.04em;color:var(--mut-paper);
  margin-left:auto;white-space:nowrap}
.count[hidden]{display:none}

/* ---------- the brand wall ---------- */
main{padding:28px 0 70px}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(256px,1fr));gap:16px}
/* A class rule setting display beats the UA style for [hidden], so the walls have to
   opt back out by hand or toggling `hidden` silently does nothing. */
.wall[hidden],.vwall[hidden],.cwall[hidden],.chips[hidden]{display:none}

/* ------------------------------ the campaign wall ------------------------------ */
/* Wider cards than the brand wall on purpose: a campaign is read as a sentence, not
   scanned as a tile, and the name is the longest thing on the card. */
.cwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.camp{background:var(--surface);border:1px solid var(--hairline);border-radius:7px;
  padding:17px 18px 16px;display:flex;flex-direction:column;gap:9px;text-align:left;
  transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease}
.camp:hover{border-color:var(--accent);transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(10,10,10,.09)}
.chead{display:flex;align-items:center;gap:9px;min-width:0}
.chead .mark{flex:0 0 auto;width:26px;height:26px}
.chead .mark img{width:100%;height:100%;object-fit:contain;border-radius:4px}
.cbrand{font:600 14px/1.2 var(--sans);color:var(--head);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ckind{margin-left:auto;flex:0 0 auto;font:600 10.5px/1 var(--mono);
  letter-spacing:.07em;text-transform:uppercase;color:var(--mut);
  border:1px solid var(--hairline);border-radius:99px;padding:4px 8px}
/* Clamped, not truncated with an ellipsis mid-word: some of these names are press
   headlines and the first three lines still carry the sense. */
.cname{font:600 18px/1.32 var(--display);color:var(--head);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cwho{font:400 14px/1.45 var(--sans);color:var(--body-c)}
.cwho b{font-weight:600;color:var(--head)}
.cblurb{font:400 13.5px/1.5 var(--sans);color:var(--mut);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.legend{max-width:104ch;margin:0 0 18px;padding:13px 16px;background:var(--surface);
  border:1px solid var(--hairline);border-left:3px solid var(--accent);border-radius:6px;
  font:400 15px/1.55 var(--sans);color:var(--body-c)}
.legend b{font-weight:600;color:var(--head)}
.legend[hidden]{display:none}
.linky{background:none;border:0;padding:0;font:600 inherit;color:var(--accent);
  cursor:pointer;text-decoration:underline}
.cfoot{margin-top:auto;padding-top:9px;border-top:1px solid var(--hairline);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font:400 13px/1.4 var(--sans);color:var(--mut)}
.cwhen{font:600 13px/1 var(--mono);color:var(--body-c)}
.csure{font:600 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  padding:4px 8px;border-radius:99px}
.csure.solid{background:var(--tint);color:var(--accent)}
.csure.prob{background:var(--well);color:var(--mut-paper)}
.cproof{margin-left:auto}
.cproof a{font:600 13px/1 var(--sans);color:var(--accent)}

/* The campaigns block inside a brand pop-up. Same facts, one column. */
.crow{padding:13px 0;border-bottom:1px solid var(--hairline);
  display:flex;flex-direction:column;gap:5px}
.crow:last-child{border-bottom:0}
.crow .cn{font:600 16px/1.35 var(--display);color:var(--head)}
.crow .cm{font:400 13.5px/1.45 var(--sans);color:var(--mut)}

/* ---------------------------- the campaign timeline ---------------------------- */
/* The card wall answers "what did they run". This answers "in what order", which is
   how a brand's year is actually read. One hairline spine, the year printed only when
   it changes, and a mark whose SHAPE carries the kind so no second colour has to
   (rule 41): filled is a campaign the brand ran, open is a person it signed. Every
   other part of the row is the furniture the card wall already uses, so the two
   readings of the same facts cannot drift apart. */
.tl{position:relative;padding-left:74px}
.tl:before{content:'';position:absolute;left:53px;top:8px;bottom:8px;width:1px;
  background:var(--hairline)}
.tly{position:relative;margin:20px 0 6px;font:600 13px/1 var(--mono);
  color:var(--head);letter-spacing:.06em}
.tly:first-child{margin-top:2px}
.tly i{position:absolute;left:-74px;width:44px;text-align:right;font-style:normal}
.tle{position:relative;padding:10px 0 12px}
.tle+.tle{border-top:1px solid var(--hairline)}
.tle i.tm{position:absolute;left:-74px;top:12px;width:44px;text-align:right;
  font:400 12.5px/1.4 var(--mono);color:var(--mut);font-style:normal}
.tle i.tk{position:absolute;left:-26px;top:15px;width:9px;height:9px;border-radius:50%;
  background:var(--accent);border:1px solid var(--accent);box-shadow:0 0 0 3px var(--surface)}
.tle.sign i.tk{background:var(--surface)}
.tle .tn{font:600 16px/1.35 var(--display);color:var(--head)}
.tle .tw{margin-top:2px;font:400 13.5px/1.45 var(--sans);color:var(--body-c)}
.tle .tw b{font-weight:600;color:var(--head)}
.tle .tx{margin-top:3px;font:400 13.5px/1.45 var(--sans);color:var(--mut)}
.tle .tf{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:7px;
  font:400 12.5px/1 var(--sans);color:var(--mut)}
/* An offer era is a PERIOD, not an event, so it gets a band and never a mark. A dot
   would claim a day we do not have: these are grouped by year, off the sponsor reads. */
.tlo{margin:8px 0;padding:8px 12px;background:var(--well);
  border-left:2px solid var(--hairline);font:400 13px/1.4 var(--sans);color:var(--mut)}
.tlo b{font-weight:600;color:var(--head)}
@media(max-width:620px){
  .tl{padding-left:58px}
  .tl:before{left:39px}
  .tly i,.tle i.tm{left:-58px;width:32px}
  .tle i.tk{left:-23px}
}
.offers{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.offer{background:var(--well);border:1px solid var(--hairline);border-radius:99px;
  padding:6px 11px;font:400 13px/1 var(--sans);color:var(--body-c)}
.offer b{font-weight:600;color:var(--head)}
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:7px;
  padding:20px 20px 18px;text-align:left;cursor:pointer;font:inherit;
  color:var(--body-c);display:flex;flex-direction:column;gap:11px;
  transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease}
.card:hover,.card:focus-visible{border-color:var(--accent);outline:none;
  transform:translateY(-2px);box-shadow:0 10px 28px rgba(10,10,10,.09)}
.card.cold{background:transparent;border-style:dashed;border-color:rgba(10,10,10,.3)}
.card.cold:hover{background:var(--surface);border-style:solid;border-color:var(--accent)}
/* ONE mark system: every brand gets the same neutral tile whether we hold a real logo
   or not. The wall used to carry four at once, navy monograms beside grey ones beside
   full bleed colour tiles, and the heaviest read twice as dark as its neighbours. */
.mark{width:56px;height:56px;flex:none;border-radius:7px;background:var(--well);
  border:1px solid var(--hairline);display:flex;align-items:center;
  justify-content:center;overflow:hidden}
.mark img{max-width:44px;max-height:44px;width:auto;height:auto;object-fit:contain}
.mark .ini{font:600 21px/1 var(--display);color:var(--accent);letter-spacing:.02em}
.cold .mark{background:transparent}
/* Two lines are RESERVED whether the name needs them or not. Without it a one line
   name pulled everything under it up, so the numbers sat at a different height on every
   card in a row and the wall read as ragged. */
.nm{font:600 24px/1.2 var(--display);color:var(--head);letter-spacing:-.015em;
  min-height:2.4em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cat{font:600 15px/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--mut)}
.cold .cat{color:var(--mut-paper)}
.catsep{opacity:.45}
/* The way out to the brand's own site. It sits under everything else on the card and
   is pushed to the bottom by margin-top:auto so it lands on the same line whatever
   height the name above it took - a link that moves between cards reads as clutter.
   align-self keeps the hit area on the words rather than the whole card width, which
   would swallow clicks meant for the drawer. */
/* ALWAYS VISIBLE. It was hover-revealed for about ten minutes and that was wrong: a
   link you have to find by hovering is not one click, it is one click plus knowing it
   is there, and on a touch screen there is no hover at all. It sits at the bottom of
   the card, pushed there by margin-top:auto so it lands on the same line whatever
   height the name above it took. align-self keeps the hit area on the words rather
   than the full card width, which would swallow clicks meant for the drawer. */
.golink{margin-top:auto;align-self:flex-start;font:600 14px/1 var(--sans);
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
  text-decoration:none;border-bottom:1px solid rgba(21,58,128,.28);padding-bottom:2px;
  transition:border-color .12s ease}
.golink:hover,.golink:focus-visible{border-bottom-color:var(--accent)}
.psite{font:600 15px/1 var(--mono);color:var(--accent);text-decoration:none;
  border-bottom:1px solid rgba(21,58,128,.3);align-self:flex-start;margin-top:4px}
.psite:hover{border-bottom-color:var(--accent)}
/* An option that would leave the board empty stays clickable and says so by going
   faint, rather than vanishing and leaving the reader wondering where it went. */
#cat option.zero{color:var(--mut)}
/* Rule 143: the reader is told in their own words why eighteen counts add up to more
   than the brand total, rather than being left to read it as a bug. */
.typenote{flex-basis:100%;margin:2px 0 0;font:400 15px/1.4 var(--sans);color:var(--mut)}
.nums{display:flex;gap:22px;padding-top:13px;
  border-top:1px solid var(--hairline)}
.nums div{display:flex;flex-direction:column;gap:5px}
.nums b{font:500 27px/1 var(--display);color:var(--head);letter-spacing:-.02em}
.nums span{font:600 15px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--mut)}
.tail{font-size:17px;color:var(--mut);line-height:1.4;margin-top:auto;
  padding-top:2px}
/* On a never-sponsored card this line is the card's ONLY payload, so it is not muted.
   Muted grey marks a caption; it must not mark the one fact on 344 of the 491 cards. */
.cold .tail{margin-top:auto;padding-top:13px;border-top:1px dashed rgba(10,10,10,.26);
  color:var(--ink)}
.star{display:inline-block;margin-top:3px;font:600 15px/1 var(--sans);
  letter-spacing:.06em;color:var(--accent);background:var(--tint);
  border:1px solid rgba(21,58,128,.18);border-radius:4px;padding:6px 9px}
.ig{display:inline-block;margin-top:3px;font:600 14px/1 var(--sans);letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut);border:1px solid var(--hairline);
  border-radius:4px;padding:5px 8px}
.empty{padding:80px 0;text-align:center;font-size:22px;color:var(--mut-paper)}

/* ---------- show more ---------- */
.more{display:block;margin:26px auto 0;font:700 16px/1 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);background:var(--surface);
  border:1px solid var(--accent);border-radius:6px;padding:15px 30px;cursor:pointer}
.more:hover{background:var(--accent);color:#fff}
.more[hidden]{display:none}

/* ---------- the video wall ---------- */
.vwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.vid{display:block;background:var(--surface);border:1px solid var(--hairline);
  border-radius:7px;overflow:hidden;color:var(--body-c);
  transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease}
.vid:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(10,10,10,.09)}
.shot{position:relative;aspect-ratio:16/9;background:var(--well);display:block}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.play{position:absolute;left:11px;bottom:11px;width:36px;height:36px;border-radius:50%;
  background:rgba(10,10,10,.74);display:flex;align-items:center;justify-content:center}
.play::after{content:"";border-left:11px solid #fff;border-top:7px solid transparent;
  border-bottom:7px solid transparent;margin-left:3px}
.vmeta{padding:14px 15px 15px;display:flex;flex-direction:column;gap:6px}
.vcre{font:600 19px/1.3 var(--display);color:var(--head);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.vbr{font:600 15px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent)}
.vnum{font-size:16px;color:var(--mut);line-height:1.4}
.vtit{font-size:16px;color:var(--mut);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- the pop-up ---------- */
.scrim{position:fixed;inset:0;background:rgba(10,10,10,.5);opacity:0;
  pointer-events:none;transition:opacity .16s ease;z-index:60}
.scrim.on{opacity:1;pointer-events:auto}
.pop{position:fixed;z-index:70;left:50%;top:50%;
  transform:translate(-50%,-48%) scale(.98);opacity:0;pointer-events:none;
  width:min(1500px,96vw);height:92vh;background:var(--surface);
  border-radius:10px;box-shadow:0 30px 90px rgba(10,10,10,.34);
  display:flex;flex-direction:column;overflow:hidden;
  transition:opacity .16s ease,transform .16s ease}
.pop.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
/* THE HEAD GETS OUT OF THE WAY. Scroll into any list and the blurb, the tags and the
   five tiles fold away, leaving the brand's name and the tabs: about 150px of a 900px
   window handed back to the thing the reader came for. It comes back the moment they
   scroll to the top, so nothing is hidden behind a control they have to find. */
.pop.tight .popid p,.pop.tight .p-tags,.pop.tight .psite,.pop.tight .popnums{display:none}
.pop.tight .pophead{padding-top:10px;padding-bottom:9px}
.pop.tight .pophead .mark{width:36px;height:36px}
.pop.tight .pophead .mark img{max-width:28px;max-height:28px}
.pop.tight .popid h2{font-size:21px;margin-bottom:0}
/* Everything above the panel is a tax on the thing the reader came for. Measured on a
   900px window the head, the tiles, the tabs and the footer left about one creator row
   on screen, which is the same "tight, hard to see" complaint in a wider frame. These
   sizes are the compressed ones. */
.pophead{display:flex;gap:16px;align-items:flex-start;padding:15px 26px 13px;
  border-bottom:1px solid var(--hairline);flex:none}
.pophead .mark{width:52px;height:52px}
.pophead .mark img{max-width:40px;max-height:40px}
.pophead .mark .ini{font-size:21px}
.popid{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.popid h2{font:600 26px/1.12 var(--display);color:var(--head);margin:0 0 4px;
  letter-spacing:-.02em}
.popid p{margin:0 0 8px;font-size:16px;color:var(--body-c);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.p-tags{display:flex;gap:7px;flex-wrap:wrap}
.tag{font:600 14px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  background:var(--tint);border:1px solid rgba(21,58,128,.16);border-radius:4px;
  padding:8px 11px;color:var(--accent)}
.shut{flex:none;font:600 15px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  background:var(--bg);border:1px solid var(--hairline);border-radius:6px;
  padding:12px 15px;cursor:pointer;color:var(--ink)}
.shut:hover{border-color:var(--accent);color:var(--accent)}
/* Copy link sits beside Close because the drawer IS the thing being sent, and a
   reader who cannot see the address bar (every phone) has no other way to get it. */
.popacts{flex:none;display:flex;gap:8px;align-items:flex-start}
/* Rule 116: a control that reports a state changes its FILL, not just its word. Copied
   is a moment rather than a state, so it is a filled flash that falls back after it. */
.cpy.done{background:var(--accent);border-color:var(--accent);color:#fff}
.cpy.done:hover{color:#fff}
.popnums{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--hairline);
  flex:none}
.popnums div{padding:10px 16px 9px;position:relative}
.popnums div+div{border-left:1px solid var(--hairline)}
.popnums div::before{content:"";position:absolute;top:0;left:0;width:30px;height:2px;
  background:var(--accent)}
.popnums .key b{color:var(--accent)}
.popnums .key::before{height:3px;width:100%}
.popnums b{display:block;font:500 23px/1 var(--display);color:var(--head);
  margin-bottom:4px;letter-spacing:-.02em}
.popnums span{font:700 13px/1.2 var(--sans);letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut)}
/* One scroll container per TAB, all built once and toggled, rather than one grid with a
   wide column and a narrow rail. The rail was the whole problem: creators, which is what
   a reader opens this for, sat at the bottom of it under the news. Building every panel
   up front and hiding all but one keeps each panel's "show more" state and scroll
   position when you come back to it. */
.poptabs{display:flex;gap:0;flex:none;border-bottom:1px solid var(--hairline);
  padding:0 26px;overflow-x:auto;scrollbar-width:none}
.poptabs::-webkit-scrollbar{display:none}
.poptabs button{font:700 15px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--mut);background:none;border:0;border-bottom:3px solid transparent;
  padding:12px 17px 10px;cursor:pointer;white-space:nowrap}
.poptabs button:hover{color:var(--accent)}
.poptabs button.on{color:var(--accent);border-bottom-color:var(--accent)}
.poptabs .tn{font-weight:400;opacity:.7;margin-left:5px}
.popbody{flex:1;min-height:0;overflow:hidden;position:relative}
.ppanel{display:none;height:100%;overflow-y:auto;overflow-x:hidden;padding:17px 26px 30px;
  scrollbar-width:thin;scrollbar-color:rgba(10,10,10,.24) transparent}
.ppanel.on{display:block}
.ppanel::-webkit-scrollbar{width:9px}
.ppanel::-webkit-scrollbar-thumb{background:rgba(10,10,10,.22);border-radius:9px;
  border:3px solid var(--surface)}
.popbody h3{font:600 21px/1.2 var(--display);letter-spacing:-.01em;color:var(--head);
  margin:0 0 14px;text-transform:none}
.ppanel section{margin-bottom:30px}
.ppanel section:last-child{margin-bottom:0}
.h3n{color:var(--mut);font-weight:400;font-size:.8em}
/* The reader deep in a brand is the most engaged one on the page. The old rail kept the
   CTA on screen at all times; tabs would have buried it in one of five, so it moves to a
   strip that is always there instead. */
.popfoot{flex:none;border-top:1px solid var(--hairline);background:var(--well);
  padding:9px 26px}
.popfoot a{display:flex;align-items:center;gap:11px;color:var(--body-c)}
.popfoot a:hover{text-decoration:none;color:var(--accent)}
.popfoot img{flex:none;display:block}
.popfoot span{font-size:15px;line-height:1.3}
.popfoot b{font:700 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);display:inline;margin-right:8px}

/* a sponsored video row: the thumbnail is the point, so it gets real room */
.vrow{display:flex;gap:15px;padding:13px 0;border-top:1px solid var(--hairline);
  align-items:flex-start}
.vrow:first-of-type{border-top:0;padding-top:0}
.vrow .vt{flex:none;width:184px;aspect-ratio:16/9;border-radius:6px;overflow:hidden;
  background:var(--well);position:relative;display:block}
.vrow .vt img{width:100%;height:100%;object-fit:cover;display:block}
.vrow .vb{flex:1;min-width:0}
.vrow .who{font:600 19px/1.25 var(--display);color:var(--head);margin-bottom:3px}
.vrow .ti{font-size:16px;color:var(--body-c);line-height:1.4;margin-bottom:5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vrow .st{font:400 16px/1.5 var(--sans);letter-spacing:0;color:var(--mut)}
/* The creator's own opening words. Two lines, quieter than the title, and the brand
   inside it is bolded by markBrand so a column of these can be skimmed for the deal. */
.vdesc{margin-top:5px;font:400 15px/1.5 var(--sans);color:var(--mut);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vdesc b{color:var(--body-c);font-weight:700}
.vrow .st b{font-weight:600;color:var(--body-c)}
.code{display:inline-block;margin-top:6px;font:700 14px/1.25 var(--mono);
  letter-spacing:.06em;color:var(--accent);background:var(--tint);
  border:1px solid rgba(21,58,128,.2);border-radius:4px;padding:6px 9px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  vertical-align:bottom}
.dur{position:absolute;right:6px;bottom:6px;font:600 13px/1 var(--mono);color:#fff;
  background:rgba(10,10,10,.78);border-radius:3px;padding:4px 6px}

/* what the creator actually said. The point of the panel is scanning a lot of
   these in a row, so the quote is the loudest thing under the title and reads
   without being clicked. */
.said{margin-top:9px;border-left:3px solid var(--accent);padding:2px 0 2px 11px}
.said .sq{font:400 17px/1.5 var(--serif,var(--body));color:var(--body-c)}
.said .sq b{font-weight:700;color:var(--head);background:var(--tint)}
.said .sa{margin-top:5px;font:600 14px/1.3 var(--mono);letter-spacing:.04em}
.said .sa a,.said .sa button{color:var(--accent);background:none;border:0;padding:0;
  font:inherit;letter-spacing:inherit;cursor:pointer;text-decoration:none}
.said .sa a:hover,.said .sa button:hover{text-decoration:underline}
.said .sa .sep{color:var(--mut);margin:0 8px;font-weight:400}
.said .full{display:none;margin-top:9px;font:400 16px/1.6 var(--sans);
  color:var(--body-c);background:var(--tint);border-radius:6px;padding:12px 14px;
  max-height:340px;overflow:auto}
.said.open .full{display:block}
.vrow.noread .said{display:none}

/* the one control that says whether a row has a read behind it */
.readpick{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--mono);
  letter-spacing:.04em;border:1px solid var(--hairline);border-radius:999px;
  padding:9px 14px;cursor:pointer;background:transparent;color:var(--body-c)}
.readpick:hover{border-color:var(--accent)}
.readpick.on{background:var(--accent);border-color:var(--accent);color:#fff}
.readpick .n{color:var(--mut);font-weight:400}
.readpick.on .n{color:rgba(255,255,255,.75)}
.readpick.zero{opacity:.42}

/* All / Videos / Shorts. Same furniture as .readpick on purpose, because they sit in
   one row and do the same job: narrow the list and say what you would be left with.
   Rule 137 - the number on a button is the count WITH IT ON, so it reads as what you
   are about to get rather than what you are about to lose, and a zero stays clickable
   and goes faint because "this brand has none" is a fact worth confirming. */
.vkinds{display:inline-flex;border:1px solid var(--hairline);border-radius:999px;
  overflow:hidden}
.vkinds button{font:600 14px/1 var(--mono);letter-spacing:.04em;border:0;
  padding:9px 13px;cursor:pointer;background:transparent;color:var(--body-c);
  border-left:1px solid var(--hairline)}
.vkinds button:first-child{border-left:0}
.vkinds button:hover{color:var(--accent)}
.vkinds button.on{background:var(--accent);color:#fff}
.vkinds button .n{color:var(--mut);font-weight:400;margin-left:6px}
.vkinds button.on .n{color:rgba(255,255,255,.75)}
.vkinds button.zero{opacity:.45}
/* A Short and a video we hold the words for both get a small mark on the row. Type,
   not colour, so neither needs a legend and neither competes with the read block. */
.vtag{display:inline-block;font:600 11px/1 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;border:1px solid var(--hairline);border-radius:4px;
  padding:3px 5px;margin-left:7px;color:var(--mut);vertical-align:2px}

/* ------------------------------- who they are up against ----------------------- */
/* Two lists, deliberately not one. `direct` is the same shelf, which is what decides a
   competitor. `also` is who else pays the same creators, which is a different question
   and is ranked by cosine, because ranking it by raw shared creators just returns the
   brands that sponsor everybody. Both rows open that brand's own card. */
.vs{display:flex;flex-direction:column;gap:0;margin-top:2px}
.vsrow{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:9px 0;border:0;border-top:1px solid var(--hairline);background:none;
  cursor:pointer;font:inherit}
.vsrow:first-child{border-top:0}
.vsrow:hover .vsn{color:var(--accent)}
.vsrow .mark{width:32px;height:32px;flex:none}
.vsmid{flex:1;min-width:0}
/* Both are spans so the row can be one <button>, so both need display:block or the
   name and the shelf render as one run-on line ("RitualDaily multivitamin"). */
.vsn{display:block;font:600 15.5px/1.3 var(--display);color:var(--head);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vsmeta{display:block;font:400 12.5px/1.4 var(--sans);color:var(--mut);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vsnum{font:600 14px/1.2 var(--mono);color:var(--body-c);text-align:right;flex:none}
.vsnum span{display:block;font:400 11px/1.3 var(--sans);color:var(--mut)}
.vshead{display:flex;align-items:baseline;gap:9px;margin:20px 0 4px}
.vshead h4{font:600 15px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--head);margin:0}
.vshead .h3n{font:400 13px/1 var(--mono);color:var(--mut)}

/* creators, with faces */
.crow{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--hairline);
  align-items:flex-start}
.crow:first-of-type{border-top:0;padding-top:0}
.av{width:44px;height:44px;border-radius:50%;flex:none;background:var(--bg);
  border:1px solid var(--hairline);object-fit:cover}
.cb{flex:1;min-width:0}
.cn{font-size:18px;font-weight:600;color:var(--ink);line-height:1.3}
.cs{font:600 14px/1.45 var(--sans);letter-spacing:.02em;color:var(--mut)}
/* THE OTHER BRANDS THIS CREATOR TAKES MONEY FROM. A name we hold on this wall becomes
   a chip that opens that brand's card and carries its category; a name we do not hold
   stays plain text, because giving it a category would be a guess. A brand selling the
   SAME KIND OF PRODUCT as the open card is filled and says so - the same navy the
   booked-again pill uses, one shade for one meaning (rule 41), because that is the
   fact somebody reading a rival's creator list is looking for. */
/* THE VIDEOS A CREATOR MADE FOR THIS BRAND, under the creator rather than in a list of
   2,120 somewhere else. Folded away by default: 828 creators each opening 28 rows is
   not a page. */
.kvb{font:600 15px/1 var(--sans);cursor:pointer;margin-top:9px;
  border:1px solid var(--hairline);background:var(--surface);color:var(--ink);
  border-radius:4px;padding:8px 12px}
.kvb:hover{border-color:var(--accent);color:var(--accent)}
.kvb.on{background:var(--accent);border-color:var(--accent);color:#fff}
.kvids{margin:12px 0 4px;padding-left:15px;border-left:3px solid var(--tint)}
.kvids .vrow{padding:9px 0}
.also{font-size:15px;color:var(--mut);line-height:1.4;margin-top:6px;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.also b{color:var(--body-c);font-weight:600;margin-right:2px}
.alsob{font:inherit;display:inline-flex;align-items:baseline;gap:6px;cursor:pointer;
  border:1px solid var(--hairline);background:var(--surface);color:var(--ink);
  border-radius:4px;padding:4px 9px;line-height:1.3;text-align:left}
.alsob i{font-style:normal;font-weight:600;color:var(--mut)}
.alsob em{font:700 12px/1 var(--mono);font-style:normal;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mut)}
.alsob:hover{border-color:var(--accent);color:var(--accent)}
.alsob:hover em,.alsob:hover i{color:var(--accent)}
.alsob.rival{background:var(--accent);border-color:var(--accent);color:#fff}
.alsob.rival i,.alsob.rival em{color:rgba(255,255,255,.85)}
.alsob.rival:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.alsob.rival:hover i,.alsob.rival:hover em{color:rgba(255,255,255,.85)}
.alsox{color:var(--mut)}
.alsox i{font-style:normal;font-weight:600}
/* Where they are and who watches them. Quiet outline, so the two facts that describe
   the CHANNEL never compete with the niche chip beside them or the state pill. */
.kid{font:700 12px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--mut);border:1px solid var(--hairline);border-radius:3px;padding:5px 7px}

/* THE CREATOR ROW, rebuilt. Its own class rather than .crow, which the campaign wall
   also uses - restyling the shared one would have quietly redrawn that list too. */
.krow{display:flex;gap:14px;padding:11px 0;border-top:1px solid var(--hairline);
  align-items:flex-start}
.krow:first-of-type{border-top:0;padding-top:2px}
.krank{flex:none;width:30px;text-align:right;font:500 19px/1.5 var(--display);
  color:var(--mut);letter-spacing:-.02em}
.kav{width:56px;height:56px;border-radius:50%;flex:none;background:var(--bg);
  border:1px solid var(--hairline);object-fit:cover}
.kb{flex:1;min-width:0}
.ktop{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.kn{font-size:19px;font-weight:600;color:var(--ink);line-height:1.3}
.kniche{font:700 12px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);background:var(--tint);border-radius:3px;padding:5px 7px}
/* Booked again is a STATE, so it changes FILL and not just its wording. A pill that
   only swapped a word read as decoration on the first pass. */
.kagain{font:700 12px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  border-radius:3px;padding:5px 8px;white-space:nowrap}
.kagain.yes{background:var(--accent);color:#fff;border:1px solid var(--accent)}
.kagain.no{background:none;color:var(--mut);border:1px solid var(--hairline)}
/* The bar is the point of this row: how many times this brand went back. Capped rather
   than full width - stretched across 1400px the eye cannot compare two lengths, and the
   row turns into one number marooned at the far right of a lot of nothing. */
.kbar{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.ktrack{flex:0 1 340px;min-width:50px;height:18px;background:var(--bg);border-radius:3px;
  border:1px solid var(--hairline);overflow:hidden}
.kfill{display:block;height:100%;background:var(--accent);border-radius:2px 0 0 2px}
.kbn{flex:none;font:600 15px/1 var(--sans);color:var(--mut);white-space:nowrap}
.kbn b{font:700 20px/1 var(--display);color:var(--head);letter-spacing:-.02em;
  margin-right:3px}
.ks{font:600 15px/1.45 var(--sans);letter-spacing:.02em;color:var(--mut)}
.ks b{color:var(--body-c)}
/* The estimated band. Dashed and muted on purpose - it is the one thing on this row we
   did NOT measure, so it must be visibly a different kind of claim from the counts
   beside it, and it must not out-shout them. */
.kband{flex:none;font:600 13px/1 var(--sans);letter-spacing:.02em;
  color:var(--mut-paper);border:1px dashed var(--hairline);border-radius:4px;
  padding:5px 8px;white-space:nowrap}
.kband b{color:var(--body-c);font-weight:700}
.kband em{font-style:normal;font:700 10px/1 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut);margin-right:6px}
/* How the estimate is worked out is a real obligation and a long sentence, so it is on
   the page but folded. Closed it costs one short line; open it says everything. */
.estm{margin:4px 0 12px;font-size:14px;line-height:1.5;color:var(--mut-paper)}
.estm summary{cursor:pointer;font:600 14px/1.4 var(--sans);color:var(--accent);
  list-style:none;display:inline-block;border-bottom:1px dashed rgba(21,58,128,.4)}
.estm summary::-webkit-details-marker{display:none}
.estm summary::before{content:"+ ";font-weight:700}
.estm[open] summary::before{content:"\2212 "}
.estm p{margin:7px 0 0;max-width:74ch}

/* the brand's own record by niche, and the shelf-wide chart under it */
/* Capped, because at the panel's full 1400px the five columns spread so far that the
   bar under "videos" and the bar under "views a video" sat edge to edge and read as one
   bar spanning two different measurements. */
.ntab{width:100%;max-width:940px;border-collapse:collapse;font-size:16px}
.ntab th{font:700 13px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--mut);text-align:right;padding:0 0 9px;border-bottom:1px solid var(--hairline);
  white-space:nowrap}
.ntab th:first-child{text-align:left}
.ntab td{padding:11px 0;border-bottom:1px solid var(--hairline);text-align:right;
  color:var(--body-c);white-space:nowrap}
.ntab td:first-child{text-align:left;color:var(--ink);font-weight:600}
.ntab th:first-child,.ntab td:first-child{width:30%}
.ntab th:not(:first-child),.ntab td:not(:first-child){width:17.5%}
.ntab td b{color:var(--head);font-weight:700}
/* the bar sits UNDER the number rather than beside it, so a long niche name and a big
   number never fight for the same row width, and it is capped and right aligned so two
   neighbouring columns' bars cannot touch and read as one */
.nbarwrap{display:block;margin:5px 0 0 auto;max-width:130px;height:7px;
  background:var(--bg);border-radius:2px;border:1px solid var(--hairline);
  overflow:hidden}
.nbar{display:block;height:100%;background:var(--accent)}
.nbar.soft{background:rgba(21,58,128,.42)}
.shelf{margin-top:6px}
.srow{display:flex;align-items:center;gap:13px;padding:8px 0}
.sname{flex:none;width:130px;font-size:16px;color:var(--ink);font-weight:600}
.strack{flex:1;min-width:80px;height:17px;background:var(--bg);border-radius:3px;
  border:1px solid var(--hairline);overflow:hidden}
.sfill{display:block;height:100%;background:var(--accent)}
.spct{flex:none;width:110px;font:600 16px/1 var(--sans);color:var(--head)}
.spct span{font-weight:400;color:var(--mut);font-size:14px}

/* instagram */
.igrow{padding:12px 0;border-top:1px solid var(--hairline)}
.igrow:first-of-type{border-top:0;padding-top:0}
.igtop{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:4px}
.ighandle{font-size:18px;font-weight:600;color:var(--ink)}
.igkind{font:700 13px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);background:var(--tint);border-radius:3px;padding:5px 7px}
.igcap{font-size:16px;color:var(--body-c);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.igmeta{font:600 14px/1.4 var(--sans);color:var(--mut);margin-top:4px}

.facts{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:17px;margin:0}
.facts dt{font:700 15px/1.5 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--mut)}
.facts dd{margin:0;color:var(--ink)}
.quote{font-size:17px;line-height:1.5;color:var(--body-c);border-left:2px solid var(--accent);
  padding-left:13px;margin:9px 0 0}
.by{margin:0 0 14px;font:600 16px/1.4 var(--sans);letter-spacing:.05em;
  text-transform:uppercase;color:var(--mut-paper)}
.by a{color:var(--accent);display:inline-flex;align-items:center;gap:7px;
  border-bottom:1px solid rgba(21,58,128,.35)}
.by a:hover{text-decoration:none;border-bottom-color:var(--accent)}
.by img{display:block}
.topnav .ia{display:inline-flex;align-items:center;gap:8px;color:var(--accent)}
.topnav .ia:hover{text-decoration:none;color:var(--accent-hi)}
.topnav .ia img{display:block}
/* The reader deep inside a brand's videos is the most engaged one on the page and had
   nothing to click. */
.popcta a{display:flex;align-items:center;gap:13px;padding:15px 16px;
  background:var(--surface);border:1px solid rgba(21,58,128,.25);border-radius:7px;
  color:var(--body-c)}
.popcta a:hover{border-color:var(--accent);text-decoration:none;
  box-shadow:0 8px 22px rgba(10,10,10,.08)}
.popcta img{flex:none}
.popcta span{font-size:16px;line-height:1.4}
.popcta b{display:block;font:700 15px/1 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin-bottom:5px}
.iafoot{display:inline-flex;align-items:center;gap:11px;margin-right:10px;
  vertical-align:middle}
.iafoot:hover{text-decoration:none}
.iafoot span{font:700 17px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent)}
.iafoot img{display:block}
/* Pinned bottom left so the credit is on screen wherever the reader has scrolled to.
   Below the scrim on purpose: it should not float over an open pop-up. */
.badge{position:fixed;left:18px;bottom:18px;z-index:50;display:flex;align-items:center;
  gap:11px;padding:10px 15px 10px 11px;background:var(--surface);
  border:1px solid var(--hairline);border-radius:999px;
  box-shadow:0 6px 22px rgba(10,10,10,.13);color:var(--body-c)}
.badge:hover{border-color:var(--accent);text-decoration:none;
  box-shadow:0 10px 28px rgba(10,10,10,.19)}
.badge img{display:block;flex:none}
.badge span{font:600 13px/1.25 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--mut-paper)}
.badge b{display:block;font-weight:700;font-size:14px;color:var(--accent);
  letter-spacing:.07em}
.sechead{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:14px}
/* The sort and the filters stay on screen while the list moves under them. Without
   this the only way back to Sort is to scroll 2,120 videos to the top, which is the
   same complaint as the head: the controls are at one end and the reading is at the
   other. The panel's own 26px side padding is given back with the negative margin so
   the bar reaches the edges and nothing shows through beside it. */
/* top is the panel's own padding, negative, so the bar pins FLUSH with the top of the
   scroll area. At top:0 it parks 17px down and a sliver of the row underneath shows
   through above it, which reads as a rendering fault rather than as a design. */
.stickhead{position:sticky;top:-17px;z-index:6;background:var(--surface);
  margin:-17px -26px 14px;padding:17px 26px 12px;
  border-bottom:1px solid var(--hairline)}
.stickhead .sechead{margin-bottom:0}
.sechead h3{margin:0}
.pick-sm{padding-left:11px}
.pick-sm label{font-size:14px;letter-spacing:.09em}
/* Wide enough for the longest option either list carries ("Views per 100 subscribers",
   "Most liked for its size"). At 170px both were cut mid-word, which reads as a broken
   control rather than as a long name. */
.pick-sm select{font-size:15px;padding:9px 9px 9px 7px;max-width:235px}
/* Evidence arrives as a research dump, so it is split into labelled blocks and each
   block gets its own paragraph. Run together it printed a wall of text. */
.evp{margin:0 0 9px;font-size:16px;line-height:1.5;color:var(--body-c)}
.evp:last-of-type{margin-bottom:0}
.evp b{color:var(--head);font-weight:700}
.ev{padding:13px 0;border-top:1px solid var(--hairline);font-size:16px;line-height:1.45}
.ev:first-of-type{border-top:0;padding-top:0}
.evk{font:700 13px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:4px}
.evs{font:600 14px/1.4 var(--sans);color:var(--mut);display:block;margin-top:3px}
.note{font-size:16px;color:var(--mut);line-height:1.55}
.loading{font:600 16px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--mut);padding:22px 0}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--hairline);background:var(--surface);padding:52px 0 70px}
footer h3{font:500 29px/1.16 var(--display);color:var(--head);margin:0 0 22px;
  letter-spacing:-.02em}
.limits{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:26px;
  margin-bottom:34px}
.limits p{margin:0;font-size:18px;line-height:1.6;padding-top:15px;
  border-top:2px solid var(--accent)}
.limits b{color:var(--head)}
.cta{font-size:20px;color:var(--ink);padding-top:26px;
  border-top:1px solid var(--hairline);line-height:1.6}

@media (max-width:1100px){
  .pick select{max-width:150px}
  .sname{width:104px;font-size:15px}
  .spct{width:96px;font-size:15px}
  /* The five tiles STAY on one row here rather than folding to two. Folded, they cost
     about 130px, and with the head and the method line above it that left a tablet
     opening the panel on no creator at all - the same complaint this rebuild exists to
     fix, one breakpoint down. They shrink instead, and only fold below 700. */
  .popnums div{padding:9px 10px 8px}
  .popnums b{font-size:19px;margin-bottom:3px}
  .popnums span{font-size:11px;letter-spacing:.04em}
  .popid p{-webkit-line-clamp:1}
  .estm{font-size:13px}
}
@media (max-width:700px){
  .wrap{padding:0 16px}
  .top .wrap{gap:10px;padding-top:12px;padding-bottom:12px}
  .site{font-size:14px;letter-spacing:.1em}
  .topnav{gap:16px;font-size:14px}
  header.hero{padding:20px 0 14px}
  h1{font-size:28px;max-width:none;margin-bottom:9px}
  .stand{font-size:17px;line-height:1.45;margin-bottom:16px}
  .proof{border-top:none}
  .pf{flex:1 1 30%;min-width:0;padding:10px 0 8px;border-top:1px solid var(--hairline);padding-right:10px}
  .pf+.pf{border-left:none}
  .pf b{font-size:25px;margin-bottom:4px}
  .pf span{font-size:13px;letter-spacing:.06em}
  .fresh{font-size:13px}
  .bar{padding:10px 0}
  .bar .wrap{gap:8px}
  .seg{width:100%}
  .seg button{flex:1;padding:12px 8px;font-size:15px}
  .find{flex:1 1 100%}
  .pick{flex:1 1 46%;min-width:0}
  .pick select{max-width:none;flex:1;min-width:0}
  /* one scrolling row rather than three stacked rows of pills */
  .chips{width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;
    -ms-overflow-style:none;padding-bottom:2px}
  .chips::-webkit-scrollbar{display:none}
  .chip{padding:11px 13px;font-size:15px}
  main{padding:18px 0 54px}
  .wall{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .card{padding:14px;gap:8px;border-radius:6px}
  .mark{width:42px;height:42px;border-radius:6px}
  .mark img{max-width:32px;max-height:32px}
  .mark .ini{font-size:17px}
  .nm{font-size:19px;line-height:1.18}
  .cat{font-size:13px;letter-spacing:.06em}
  .nums{gap:12px;padding-top:10px}
  .nums b{font-size:21px}
  .nums span{font-size:13px;letter-spacing:.05em}
  .tail{font-size:15px}
  .star{font-size:13px;padding:5px 7px}
  .vwall{grid-template-columns:1fr;gap:13px}
  .pop{width:100vw;max-height:100vh;height:100%;border-radius:0;
    transform:translate(-50%,-50%)}
  /* One panel at a time now, so the phone needs no special case: the active panel is
     already the only scroll container. The rule this replaces existed because two
     columns each kept their own overflow and split the height between them, which
     showed a single video row in a tiny box. */
  .poptabs{padding:0 10px}
  .poptabs button{padding:13px 11px 11px;font-size:13px;letter-spacing:.06em}
  /* four tags wrapped to three stacked rows before the stats even started */
  .p-tags{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .p-tags::-webkit-scrollbar{display:none}
  .pophead{padding:16px 16px 14px;gap:12px}
  .pophead .mark{width:52px;height:52px}
  .popid h2{font-size:24px}
  /* Side by side these two ate half the width of the title on a phone. */
  .popacts{flex-direction:column;gap:6px}
  .popacts .shut{padding:11px 12px;font-size:14px;width:100%;text-align:center}
  .popnums{grid-template-columns:repeat(3,1fr)}
  .popnums div{padding:11px 11px 10px}
  .popnums div:nth-child(n+4){border-top:1px solid var(--hairline)}
  .popnums div:nth-child(4){border-left:0}
  /* five tiles in a three column grid left the last one alone beside dead space */
  .popnums div:last-child{grid-column:span 2}
  .popnums b{font-size:22px}
  .popnums span{font-size:12px;letter-spacing:.05em}
  .ppanel{padding:18px 16px 26px}
  /* The bar reaches the edges by cancelling the panel's padding, so both numbers have
     to move with it or it pins 18px down and sits inset on a phone. */
  .stickhead{top:-18px;margin:-18px -16px 12px;padding:18px 16px 10px}
  .popfoot{padding:11px 16px}
  .krank{display:none}
  .kav{width:44px;height:44px}
  .sname{width:88px;font-size:14px}
  .spct{width:78px;font-size:14px}
  .ntab{font-size:15px}
  .sechead{gap:8px}
  .pick-sm select{max-width:none}
  .by{font-size:14px}
  .topnav .ia span{display:none}
  .popcta a{padding:13px 13px;gap:11px}
  .badge{left:12px;bottom:12px;padding:8px 13px 8px 9px;gap:9px}
  .badge img{width:24px;height:24px}
  .badge span{font-size:11px}
  .badge b{font-size:12px}
  .vrow{gap:11px}
  .vrow .vt{width:132px}
  .vrow .who{font-size:17px}
  .vrow .ti{font-size:15px}
  .vdesc{font-size:14px}
  footer{padding:36px 0 50px}
}