*{box-sizing:border-box}
:root{--paper:#f4f3f1;--ink:#16181c;--navy:#153a80;--line:#dcdad6;--mute:#5a6068;
--soft:#656c75;--card:#fff;--well:#f7f6f3;
--mint:#e4f0e8;--mintl:#2a6440;--blue:#e6ecf8;--bluel:#274a90;
--display:'Source Serif 4',ui-serif,Georgia,serif;
--sans:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
--mono:'Source Code Pro',ui-monospace,Menlo,monospace}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans)}
a{color:var(--navy)}
.wrap{max-width:1060px;margin:0 auto;padding:0 22px 90px}

/* HEADER */
.hd{padding:40px 0 30px}
h1{font:600 44px/1.1 var(--display);margin:0;letter-spacing:-.015em;max-width:22ch}
.lede{font:400 19px/1.62 var(--display);margin:20px 0 0;max-width:66ch;color:#2a2d33}
/* ONE COLUMN, ONE EDGE, ON THE BOARD ONLY. Dennis, 2026-09-03: the page "does a lot of
   ... left and right". Measured before this: the h1 stopped at 690px, the lede at
   839px, the card text at 921 / 851 / 812, and the stats, the filters and the cards
   themselves at 1222 - seven right edges down one screen. Every block on the board now
   ends where the cards do.
   The 127 CASE PAGES are not touched, and that is the point of the body class. One of
   those is a single case read from top to bottom, where a 78-character measure is the
   right thing and a 105-character one is not. The board is a thing you scan.
   The lede goes up a size because it is now one line across, and 19px set across
   1,016px is the thin grey band that made the old narrow column look deliberate. */
body.board h1,body.board .lede,body.board .stat span,body.board .foot,
body.board .case .wallq,body.board .case .pf,body.board .case .src{max-width:none}
body.board .lede{font-size:21px}
.lede+.lede{margin-top:14px}
/* The three counts are the whole argument of the page, so they are read as numbers
   rather than as an 84-character uppercase sentence. */
.stats{display:flex;flex-wrap:wrap;gap:0;margin:30px 0 0;border-top:1px solid var(--line);
border-bottom:1px solid var(--line)}
.stat{flex:1 1 200px;padding:16px 20px 16px 0}
.stat+.stat{padding-left:22px;border-left:1px solid var(--line)}
.stat b{display:block;font:600 32px/1 var(--display);letter-spacing:-.02em}
.stat span{display:block;font:400 15px/1.4 var(--sans);color:var(--mute);margin-top:6px;
max-width:26ch}
.stat.on b{color:var(--mintl)}

/* THE FILTERS ARE THREE SELECTS ON THE SEARCH ROW, and until 2026-09-03 they were a
   panel 481px tall holding 23 pills over 8 rows. Each group asked ONE question, so
   each is now one door with the pick written on its face (rules 253, 144). Twenty
   eight controls on this page became six, and the panel they sat in is gone: the three
   live on the sticky row with the search, which also means they stay reachable down a
   list 53,000 pixels long instead of being left at the top of it.
   Every option still says what choosing it would leave you with (rule 137), and an
   option that would leave nothing reads (0) and is still selectable, which is what the
   faint-but-pressable pill used to promise. */
select.sel{font:500 14px/1.15 var(--sans);border:1px solid var(--line);
background:var(--card);color:var(--ink);padding:10px 32px 10px 14px;cursor:pointer;
border-radius:99px;max-width:100%;appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 13px center}
select.sel:hover{border-color:var(--navy)}
/* A control that reports a STATE looks different in each state (rule 116). A select is
   on when its pick is not the "any" option, and it carries that pick either way. */
select.sel[data-on="1"]{background:var(--navy);border-color:var(--navy);color:#fff;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 13px center}

/* The status line sticks under the site bar, so on a page 127 cases long the search,
   the count and the way out are always within reach. 46px is the nav's own height. */
.sticky{position:sticky;top:46px;z-index:40;background:var(--paper);
padding:12px 0 10px;margin:0 0 6px;border-bottom:1px solid var(--line)}
.srow{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* The count and the way out share a line, rather than the count claiming a whole one
   with flex-basis:100% and pushing Clear onto a fourth. */
.srow2{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;margin-top:9px}
.srch{flex:1 1 300px;min-width:0;padding:11px 14px;font:400 16px var(--sans);
border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}
.srch:focus{outline:2px solid var(--navy);outline-offset:-1px}
.shown{font:400 15px/1.4 var(--sans);color:var(--mute);margin:0}
.shown b{color:var(--ink);font-weight:600}
.clr{font:500 14px/1 var(--sans);background:none;border:0;color:var(--navy);
cursor:pointer;padding:6px 2px;text-decoration:underline}
.view{display:flex;flex:none;border:1px solid var(--line);border-radius:8px;overflow:hidden;
background:var(--card)}
.view button{font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;
border:0;background:none;color:var(--mute);padding:10px 13px;cursor:pointer}
.view button[aria-pressed="true"]{background:var(--navy);color:#fff}

/* SECTIONS */
h2{font:600 25px/1.25 var(--display);margin:44px 0 2px;letter-spacing:-.01em}
/* WHICH PROBLEM AM I READING ABOUT. The list is 53,000 pixels tall and once a heading
   has gone by, nothing on screen says which of the twelve sections you are in. It
   sticks under the search bar, whose height fitHeads() measures rather than guesses
   because that bar wraps to two lines at some widths. */
/* Minus one pixel, and that is not a fudge. Measured: the search bar's bottom landed
   on 148.62 and the heading stuck at 149.00, so a 0.37px band of the card behind
   showed between them as a grey smear right across the page. The heading sits under
   the bar (z-index 20 against 40), so an overlap is invisible and a gap is not. */
section.kind h2{position:sticky;top:calc(var(--headtop,110px) - 1px);z-index:20;
background:var(--paper);margin:44px 0 12px;padding:12px 0 9px;
border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;
align-items:baseline;gap:0 12px}
/* The count lives INSIDE the heading rather than in a line under it, so the number
   travels with the name when the heading sticks. Left below, it scrolled away and
   the stuck bar said which problem you were in but not how much of it was left. */
.kct{font:400 15px/1.4 var(--sans);color:var(--mute);margin:0}
.empty{background:var(--card);border:1px solid var(--line);border-radius:10px;
padding:26px 24px;margin:20px 0;font-size:17px}

/* A CASE */
.case{background:var(--card);border:1px solid var(--line);border-radius:10px;
padding:22px 24px;margin:12px 0}
.chead{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline}
/* NOT space-between. Measured 2026-09-03: the brand and agency ended at 432px and the
   badge started at 1016px, so every card carried 580px of nothing across its top - the
   same left-and-right jump as the page, one level down. It reads as part of the
   sentence now: "Blue Heaven Cosmetics hired AnyMind Group  ON THE PUBLIC RECORD".
   The COMPACT view still pushes it to the far end, and must: that view is a table of
   127 rows and the badge is its last column, aligned down the page. See
   .compact .case .grade below, which is where that lives. */
.case .top{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline}
.case .bn{font:600 23px/1.25 var(--display)}
/* The brand name IS the way in, in both views. It reads as a heading and behaves as
   a link, which is why it takes the ink colour until you are on it. */
.case a.bn{color:inherit;text-decoration:none}
.case a.bn:hover,.case a.bn:focus-visible{color:var(--navy);text-decoration:underline}
.case .ag{font:400 16px/1.4 var(--sans);color:var(--mute)}
.case .ag b{font-weight:600;color:var(--ink)}
.case .yr{font:500 15px/1.4 var(--sans);color:var(--mute);font-variant-numeric:tabular-nums}
.meta{font:400 15px/1.5 var(--sans);color:var(--mute);margin:6px 0 14px}
.wallq{font:400 19px/1.5 var(--display);margin:0 0 14px;max-width:72ch}
.pf{background:var(--well);border-left:3px solid #c9ccd2;border-radius:0 6px 6px 0;
padding:12px 16px;margin:0 0 12px;font-size:16px;line-height:1.55;color:#33363c;
max-width:78ch}
.src{font-size:15px;line-height:1.55;color:var(--mute);margin:0;max-width:78ch}
.src b{color:var(--ink)}
.src a{word-break:break-word}
.grade{display:inline-block;font:600 12px/1 var(--mono);text-transform:uppercase;
letter-spacing:.07em;padding:6px 10px;border-radius:99px;white-space:nowrap;flex:none}
.g-a{background:var(--mint);color:var(--mintl)}
.g-b{background:var(--blue);color:var(--bluel)}
.more{font:600 15px/1 var(--sans);text-decoration:none;display:inline-block;margin-top:14px}
.more:hover{text-decoration:underline}
.note{font-size:15px;color:var(--mute);margin:8px 0 0;max-width:70ch}

/* COMPACT. 127 open cases is 46,000 pixels of scroll and no way to compare two brands;
   one line each is about 6,000. Same markup, so nothing can drift between the views. */
.compact section.kind{margin-bottom:26px}
.compact h2{margin-bottom:8px}
.compact .case{display:flex;align-items:baseline;gap:14px;padding:11px 15px;margin:0;
border-radius:0;border-width:0 1px 1px}
.compact section.kind .case:first-of-type{border-top-width:1px;border-radius:8px 8px 0 0}
.compact section.kind .case:last-of-type{border-radius:0 0 8px 8px}
.compact .chead{display:contents}
.compact .case .top{flex:0 0 230px;display:block;min-width:0}
.compact .case .bn{font-size:17px;display:block;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
.compact .case .ag{font-size:14px;display:block;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
.compact .meta{flex:1 1 auto;min-width:0;margin:0;font-size:15px;color:#3d4148;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Exactly four digits, so the sentences beside them line up in a column. See
   short_year: 47 of the 127 Year cells are ranges or sentences. */
.yrs{display:none}
.compact .yrs{display:block;flex:0 0 46px;font:500 15px/1.6 var(--sans);
color:var(--soft);font-variant-numeric:tabular-nums}
.compact .mrest,.compact .wallq,.compact .pf,.compact .src,.compact .more{display:none}
.compact .case .grade{order:9;margin-left:auto}
.compact .cwall{display:inline}
.cwall{display:none}
/* A COMPACT ROW HAS TO BE OPENABLE. This view hides .more, which was the card's only
   link, so all 127 rows read as a list of links and none of them went anywhere. The
   brand's own link is stretched over the row instead of a second click handler, so
   there is one definition of where a row goes and the two cannot disagree. */
.compact .case{position:relative}
.compact .case:hover{background:var(--well)}
.compact a.bn::after{content:"";position:absolute;inset:0}
.compact a.bn:hover{text-decoration:none}

/* THE CASE PAGE */
.badgeline{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:22px 0 0}
.gradesay{font-size:15px;color:var(--mute);margin:0}
.sect{font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;
color:var(--soft);margin:46px 0 12px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.warn{background:#fdf6e7;border:1px solid #e8d9b0;border-radius:8px;padding:15px 17px;
margin:18px 0 0;font-size:16px;line-height:1.55;max-width:78ch}
/* THE ANSWER COLUMN HAS A MEASURE LIKE EVERYTHING ELSE. Every other block on a case
   page is capped around 78 characters; this table was the one thing with no cap, so
   at 1280 its cells ran 96 characters to the line, measured. Fixed layout as well as
   a width, because otherwise one long source URL decides the column widths. */
.kv{width:100%;max-width:880px;table-layout:fixed;border-collapse:collapse;margin-top:4px}
.kv th{width:200px;text-align:left;vertical-align:top;padding:14px 22px 14px 0;
font:600 15px/1.5 var(--sans);color:var(--mute);border-bottom:1px solid var(--line)}
.kv td{padding:14px 0;border-bottom:1px solid var(--line);vertical-align:top;
font-size:17px;line-height:1.6;overflow-wrap:break-word}
.kv tr:last-child th,.kv tr:last-child td{border-bottom:0}
.alsolink{margin:34px 0 0;font-size:16px}
.foot{margin-top:64px;padding-top:22px;border-top:1px solid var(--line);
font-size:15px;line-height:1.6;color:var(--mute);max-width:84ch}
.back{font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;
text-decoration:none;display:inline-block;margin:30px 0 0}

/* The Influencer Advisory badge is fixed to the bottom left of every page on this
   site, so the last cards on a long list would otherwise sit under it. */
.wrap{padding-bottom:120px}

/* Narrow, the five columns become three stacked lines: who hired whom, then the grade
   and the year together, then the problem. Right-aligning the badge on its own line,
   which is what the desktop rule does when it wraps, left a hole down the middle of
   every row. */
@media(max-width:900px){
.stat+.stat{border-left:0;padding-left:0}
.compact .case{flex-wrap:wrap;gap:6px 10px;padding:14px 15px}
.compact .case .top{order:1;flex:1 1 100%}
.compact .case .grade{order:2;margin-left:0}
.compact .yrs{order:3;flex:0 0 auto}
.compact .meta{order:4;flex:1 1 100%;white-space:normal}
}
@media(max-width:640px){
/* A sticky bar carrying a search box, a switch and a sentence is a third of a phone
   screen. It scrolls with the page here and the filters are right above it. */
.sticky{position:static}
.srow{gap:10px}
.view{flex:1 1 auto}
/* Stacked, three pills of three different widths over a full-width switch is the
   ragged edge this whole pass is about. They fill the row instead. The width the
   script pins is cleared at this size for the same reason - see pinSels. */
select.sel{width:100%;flex:1 1 100%}
.view button{flex:1 1 50%}
h1{font-size:31px}
.lede{font-size:18px}
.stat b{font-size:26px}
.case{padding:18px 16px}
.wallq{font-size:18px}
.kv th{width:auto;display:block;border:0;padding:14px 0 0}
.kv td{display:block;padding-top:3px}
.kv tr{display:block;border-bottom:1px solid var(--line);padding-bottom:12px}
.kv tr:last-child{border-bottom:0}
.kv th,.kv td{border-bottom:0}
.filters{padding:6px 14px 16px}
}